摘要：在JavaScript中，标签用于定义模块化代码。模块中的变量、函数和类默认是私有的，无法直接在全局作用域或其他模块中访问。在其他js程序或模块中要调用模块中的过程（如函数），则需要通过导出（export）和导入（i
在JavaScript中，标签用于定义模块化代码。模块中的变量、函数和类默认是私有的，无法直接在全局作用域或其他模块中访问。在其他js程序或模块中要调用模块中的过程（如函数），则需要通过导出（export）和导入（import）机制来实现。
1. 在模块中导出函数
首先，在模块中定义并导出你想要调用的函数。
例子：
// 定义一个函数
function myFunction {
console.log('Hello from module!');
}
// 导出函数
export { myFunction };
然后，在另一个模块中导入并使用该函数。
例子：
// 导入模块中的函数
import { myFunction } from './path-to-your-module.js';
// 调用导入的函数
myFunction;
2. 直接在HTML中调用模块函数
如果希望在HTML中直接调用模块中的函数，可以通过事件绑定来实现。
例子：
// 定义一个函数
function myFunction {
console.log('Hello from module!');
}
// 导出函数
export { myFunction };
Click me
// 将模块函数暴露给全局作用域
import { myFunction } from './path-to-your-module.js';
window.myModuleFunction = myFunction;
3.将模块中的函数暴露到全局作用域
在模块中，你可以将需要调用的函数显式地挂载到window对象（全局作用域），这样非模块的就可以访问它。
例子：
// 定义一个函数
}
// 将函数暴露到全局作用域
window.myFunction = myFunction;
// 调用模块中暴露的函数
myFunction; // 输出: Hello from module!
4.通过事件触发模块中的函数
如果不想污染全局作用域，可以通过事件（如按钮点击）来触发模块中的函数。
例子：
// 定义一个函数
}
// 将函数绑定到按钮的点击事件
document.getElementById('myButton').addEventListener('click', myFunction);
// 这里可以写其他非模块化的代码
Click me
下面是一个完整的例子：
js调用module中的函数
Click me
// 定义一个函数
function myFunction {
alert('Hello from module!' +tt);
}
// 将函数绑定到按钮的点击事件
document.getElementById('myButton').addEventListener('click', myFunction);
// 这里可以写其他非模块化的代码
var tt='这是一个实验' ;//必须过程外定义全局性
function selectImage(file){
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader;
reader.onload = function (evt) {
var url1 =evt.target.result;
document.getElementById('myButton').style.display='block';
document.getElementById('myimg').src=url1;
document.title='原生js调用module中的函数';
tt='这是一个实验。'+document.title ;
}
reader.readAsDataURL(file.files[0]);
}
来源：科技平行论