js怎么跨脚本访问函数

JavaScript跨脚本访问函数的方法包括：使用全局对象、模块化编程、事件驱动编程、使用iframe通信。
其中，使用全局对象是最常见的方法，因为它能够让不同脚本共享数据和函数。通过将函数挂载到window对象上，可以实现在多个脚本中调用这些函数。接下来，我们将详细介绍如何使用全局对象来跨脚本访问函数。

一、全局对象

全局对象是指在整个浏览器窗口或全局范围内都能访问到的对象。在JavaScript中，window对象就是一个全局对象。通过将函数挂载到window对象上，可以在不同的脚本文件中访问这些函数。

将函数挂载到`window`对象上

首先，在一个脚本文件中定义一个函数，并将其挂载到window对象上。例如：

// script1.js
function sayHello() {
    console.log("Hello, World!");
}
window.sayHello = sayHello;

在另一个脚本文件中，可以直接调用这个函数：

// script2.js
window.sayHello(); // 输出: Hello, World!

全局变量的使用

除了函数，还可以将变量挂载到window对象上，以便在不同的脚本文件中访问和修改这些变量。例如：

// script1.js
window.globalVariable = "I am a global variable";

在另一个脚本文件中，可以访问和修改这个全局变量：

// script2.js
console.log(window.globalVariable); // 输出: I am a global variable
window.globalVariable = "I have been modified";
console.log(window.globalVariable); // 输出: I have been modified

二、模块化编程

模块化编程是一种将代码分割成独立模块的方法，每个模块负责特定的功能，并通过明确的接口进行通信。在现代JavaScript中，使用ES6模块（ES6 modules）是实现模块化编程的常见方式。

使用ES6模块

在一个脚本文件中定义一个模块，并导出函数或变量。例如：

// module1.js
export function sayHello() {
    console.log("Hello from module!");
}
export const globalVariable = "I am a module variable";

在另一个脚本文件中，导入并使用这些函数或变量：

// module2.js
import { sayHello, globalVariable } from './module1.js';
sayHello(); // 输出: Hello from module!
console.log(globalVariable); // 输出: I am a module variable

使用CommonJS模块

在Node.js环境中，CommonJS模块是最常见的模块化方式。在一个脚本文件中定义一个模块，并导出函数或变量：

// module1.js
function sayHello() {
    console.log("Hello from CommonJS module!");
}
const globalVariable = "I am a CommonJS module variable";
module.exports = { sayHello, globalVariable };

在另一个脚本文件中，导入并使用这些函数或变量：

// module2.js
const { sayHello, globalVariable } = require('./module1.js');
sayHello(); // 输出: Hello from CommonJS module!
console.log(globalVariable); // 输出: I am a CommonJS module variable

三、事件驱动编程

事件驱动编程是一种通过事件进行通信的编程范式。在JavaScript中，可以使用事件驱动编程来跨脚本访问函数。

自定义事件

首先，在一个脚本文件中定义一个自定义事件，并在需要时触发这个事件：

// script1.js
const event = new Event('customEvent');
function triggerEvent() {
    window.dispatchEvent(event);
}
window.triggerEvent = triggerEvent;

在另一个脚本文件中，监听这个自定义事件，并在事件触发时执行相应的函数：

// script2.js
window.addEventListener('customEvent', function () {
    console.log('Custom event triggered!');
});
// 触发自定义事件
window.triggerEvent(); // 输出: Custom event triggered!

使用框架的事件系统

一些JavaScript框架（如Vue.js、React、Angular等）提供了自己的事件系统，可以利用这些事件系统来实现跨脚本访问函数。例如，在Vue.js中，可以使用事件总线（event bus）进行组件之间的通信。

四、使用iframe通信

当需要在不同的iframe之间进行通信时，可以使用postMessage方法。postMessage方法允许不同的窗口或iframe之间进行安全的跨域通信。

使用`postMessage`方法

首先，在一个iframe中定义一个接收消息的函数：

// iframe1.html
window.addEventListener('message', function (event) {
    console.log('Received message:', event.data);
});

在另一个iframe中，发送消息：

// iframe2.html
const targetWindow = document.getElementById('iframe1').contentWindow;
targetWindow.postMessage('Hello from iframe2!', '*');

通过使用postMessage方法，可以在不同的iframe之间传递消息，实现跨脚本访问函数。

结论

跨脚本访问函数在JavaScript开发中是一个常见的需求。通过使用全局对象、模块化编程、事件驱动编程以及iframe通信等方法，可以实现不同脚本之间的函数调用和数据共享。全局对象是最常见和简单的方法，但在大型项目中，模块化编程和事件驱动编程可能是更好的选择，因为它们能够提供更好的代码组织和可维护性。根据具体的项目需求和环境，选择合适的方法来实现跨脚本访问函数。