commonJs规范,ES6规范 exports require import 使用
ES6模块运行机制完全不一样,JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行的时候,再根据这个只读引用,到被加载的那个模块里去取值。
CommonJS输出的是值的拷贝,换句话说就是,一旦输出了某个值,如果模块内部后续的变化,影响不了外部对这个值的使用。CommonJS其实加载的是一个对象,这个对象只有在脚本运行时才会生成,而且只会生成一次
模块化解决的问题是:
- 加载顺序
- 污染全局
commonJs规范:
同步加载,引用进来后变成立即执行函数
exports
module.exports
require()
AMD
异步
CMD
依赖就近 按需加载
ES6规范:
export
import { xxx } from './components'
export default {}
import xxx from './components'
@import " "
总结
写到这里,本文也就基本结束了。我们总结一下文中涉及到的内容:
- 因为CommonJS的require语法是同步的,所以就导致了CommonJS模块规范只适合用在服务端,而ES6模块无论是在浏览器端还是服务端都是可以使用的,但是在服务端中,还需要遵循一些特殊的规则才能使用 ;
- CommonJS 模块输出的是一个值的拷贝,而ES6 模块输出的是值的引用;
CommonJS 模块是运行时加载,而ES6 模块是编译时输出接口,使得对JS的模块进行静态分析成为了可能; - 因为两个模块加载机制的不同,所以在对待循环加载的时候,它们会有不同的表现。
- CommonJS遇到循环依赖的时候,只会输出已经执行的部分,后续的输出或者变化,是不会影响已经输出的变量。而ES6模块相反,使用import加载一个变量,变量不会被缓存,真正取值的时候就能取到最终的值;
- 关于模块顶层的this指向问题,在CommonJS顶层,this指向当前模块;而在ES6模块中,this指向undefined;
- 关于两个模块互相引用的问题,在ES6模块当中,是支持加载CommonJS模块的。但是反过来,CommonJS并不能requireES6模块,在NodeJS中,两种模块方案是分开处理的。
一、区别:
1.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
2.CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。
3.CommonJS是对模块的浅拷⻉,ES6 Module是对模块的引⽤,即ES6 Module只存只读,不能改变其值,具体点就是指针指向不能变,类似const 。
4.import的接⼝是read-only(只读状态),不能修改其变量值。 即不能修改其变量的指针指向,但可以改变变量内部指针指向。可以对commonJS对重新赋值(改变指针指向),但是对ES6 Module赋值会编译报错。
二、共同点:
1.CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值,即对对象内部属性的值进⾏改变。