模块化(Commonjs与ES6 Module)
描述:
1.CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。
2.ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 模块不是对象,而是通过
export
命令显式指定输出的代码,再通过import
命令输入。
注意:es6 module自动开启严格模式。
ES6 Module
使用export导出,import导入。
export
需要特别注意的是,export
命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
解析:上面的两个例子都是直接导出了1,1只是一个值,不是接口。
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {
m};
// 写法三
var n = 1;
export {
n as m};
export default
export default
默认导出,只能在一个文件中使用一次,无需关联内部接口名。
export default function () {
console.log('foo');
}
正是因为export default
命令其实只是输出一个叫做default
的变量,所以它后面不能跟变量声明语句
// 正确
export var a = 1;
// 正确
var a = 1;
export