1.概述
CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性
上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取3个方法(因为CommonJS是从运行完成后的module.exports中加载的,所以只能在运行时确定这些东西,而不是像ES6那样在静态的时候才确定)。这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入
上面代码的实质是从fs模块加载3个方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高
综上:CommonJS是先加载整体,然后从整体中取出想要的方法。而ES6是直接加载模块指定输出的方法,其余方法不加载。CommonJS是require,ES6是export&import
2.ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this
3.export命令
export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
注意:这里变量之前必须带有标识符var,否则会报错
export的另外一种写法
export命令除了输出变量,还可以输出函数或类(class)
export输出的变量就是本来的名字,但是可以使用as关键字重命名
这里本来输出函数本来的名字v1和v2,然后通过as关键字对其进行了重新命名
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系
上面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量m,还是直接输出1。1只是一个值,不是接口。正确的写法是下面这样
上面三种写法都是正确的,规定了对外的接口m。其他脚本可以通过这个接口,取到值1。它们的实质是,在接口名与模块内部变量之间,建立了一一对应的关系
同样的,function和class的输出,也必须遵守这样的写法
另外,export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值
上面代码输出变量foo,值为bar,500毫秒之后变成baz
最后,export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错
上面代码中,export语句放在函数之中,结果报错