CommonJS和ES6模块化的区别以及如何解决让CommonJS导出的模块也能改变其内部变量

最新推荐文章于 2024-08-09 11:43:11 发布

HzDoctor

最新推荐文章于 2024-08-09 11:43:11 发布

阅读量2.9k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/qq_37918241/article/details/104782049

版权

本文对比了ES6模块化和CommonJS的区别，包括export和import的用法，以及它们在变量赋值和模块加载上的不同。在CommonJS中，模块加载是同步的，输出的是值的拷贝，内部变化无法影响导出值。而在ES6模块中，变量总是绑定模块，加载是动态的。针对CommonJS中不能改变导出变量的问题，可以通过函数调用来实现动态获取模块内部的最新值。

摘要由CSDN通过智能技术生成

ES6 模块化

1.export
export可以输出变量、函数和类，切记不可直接输出值，否则会报错
2.export default
一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令
3.import
import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import {sum} from 'index.js';
import {sum,age,name} from 'index.js';
import {sum as hg, age as nl, name as xm} from 'index.js';

总结

import只会导入一次，无论你引入多少次
有提升效果，import会自动提升到顶部，首先执行
import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。如果脚本加载了变量，对其重新赋值就会报错，因为变量是一个只读的接口。但是，如果是一个对象，改写对象的属性是允许的。（对象只能改变值但不能改变引用）
由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。