手机网站大全排行,北京网站设计公司yy成都柚米科技15,房地产公司网站建设报价方案,泉州建设网站公司CommonJS和ES Module是JavaScript中两种不同的模块系统#xff0c;它们在导入导出细节上存在差异#xff0c;以下是两者的具体对比以及方便区分记忆的方法#xff1a;
1. 导入导出细节
CommonJS 导出#xff1a;使用module.exports或exports对象来导出模块中的变量、函数…CommonJS和ES Module是JavaScript中两种不同的模块系统它们在导入导出细节上存在差异以下是两者的具体对比以及方便区分记忆的方法
1. 导入导出细节
CommonJS 导出使用module.exports或exports对象来导出模块中的变量、函数或类等。可以导出多个成员但需要将它们附加到module.exports或exports对象上。导入使用require函数来导入其他模块。require函数返回的是被导入模块module.exports或exports对象的内容。 ES Module 导出使用export关键字来导出模块中的变量、函数、类等。可以导出多个成员也可以使用默认导出export default来导出一个成员。导入使用import语句来导入其他模块。import语句可以解构被导入模块的内容也可以导入默认导出的成员。
2. 差异
语法CommonJS使用require和module.exports进行导入导出而ES Module使用import和export关键字。模块加载时机CommonJS是运行时加载模块即在代码执行到require语句时才会加载模块。而ES Module是在静态编译期间就确定模块的依赖并在运行时加载。值的类型CommonJS导出的是一个值的拷贝因此模块内部对导出值的修改不会影响到外部。而ES Module导出的是一个引用模块内部对导出值的修改可以同步到外部。作用域CommonJS的模块作用域是动态的模块中定义的变量和函数会被添加到全局作用域中尽管在实际使用中这通常通过模块封装来避免。而ES Module的模块作用域是静态的模块中定义的变量和函数不会污染全局作用域。异步加载ES Module支持异步加载模块以提高性能和减少启动时间。而CommonJS只能同步加载模块。循环依赖由于ES Module在静态编译期间就确定模块的依赖关系因此它可以处理循环依赖。而CommonJS可能会因为循环依赖导致程序崩溃。浏览器兼容性ES Module在现代浏览器中得到广泛支持而CommonJS主要在Node.js环境中使用。
3. 方便区分记忆的方法
语法差异记住CommonJS使用require和module.exports这对“动词名词”的组合进行导入导出而ES Module使用import和export这对“动词动词”的组合。加载时机将CommonJS想象成“按需加载”的模型即代码执行到需要时才加载模块而将ES Module想象成“预先规划”的模型在编译期间就确定好模块的依赖关系。值的类型记住CommonJS导出的是“值的拷贝”就像复印了一份文件而ES Module导出的是“值的引用”就像提供了一个文件的链接。作用域将CommonJS想象成“开放”的模型模块中的变量和函数可能会影响到全局作用域而将ES Module想象成“封闭”的模型模块中的变量和函数被严格封装在模块内部。
4. esmodule特殊情况
esmodule可以这样写
// 写法一
export var m 1;// 写法二
var m 1;
export {m};// 写法三
var n 1;
export {n as m};// 报错
function f() {}
export f;// 正确
export function f() {};// 正确
function f() {}
export {f};5. 思考
CommonJS可以记忆成数据量大所有的关键词配上s然后实际导出都是借助moduleexports 实际上只是对 module.exports 的一个引用。esmodule导出的实质是在接口名与模块内部变量之间建立了一一对应的关系。简单记忆直接导出或者在对象中导出可配合as改名
