daily-interview / fe-interview

:smiley: 每日一道经典前端面试题,一起共同成长。
https://blog.csdn.net/u010494753
MIT License
172 stars 22 forks source link

ES6模块与CommonJS模块有什么区别? #35

Open artdong opened 4 years ago

artdong commented 4 years ago

ES6模块与CommonJS模块有什么区别?

artdong commented 4 years ago

ES6 模块与commonJS模块的差异

  1. commonJS 模块输出的是一个值的拷贝,ES6静态分析,动态引用,模块输出的是值的引用

commonJS模块一旦输出一个值,模块内部的变化就影响不到这个值。

ES6模块如果使用import从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,原始值变了,import加载的值也会跟着变。需要开发者自己保证,真正取值的时候能够取到值。

  1. commonJS 模块是运行时加载,ES6 模块是编辑时输出接口

运行时加载:commonJS 模块就是对象;即在输入时是先加载整个模块,生成一个对象,然后再从这个对象上读取方法,这种加载称为“运行时加载”。commonJS脚本代码在require的时候,就会全部执行。一旦出现某个模板被“循环加载”,就只能输出已经执行的部分,还未执行的部分不会输出。

编译时加载:ES6 模块不是对象,而是通过export命令显式指定输出的代码,import时指定加载某个输出值,而不是加载整个模块,这种加载称为“编译时加载”。

  1. commonJS 加载的是整个模块,即将所有的接口全部加载进来,ES6 可以单独加载其中的某个接口(方法)

  2. commonJS this 指向当前模块,ES6 this 指向undefined