历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require
、Python 的import
,甚至就连 CSS 都有@import
,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。——《es6入门》
1、模块功能主要由两个命令构成:export
和import
。export
命令用于暴露本模块,import
命令用于引入某个模块。
2、模块内部的所有变量都不能被外部读取,所以需要使用export命令
var Name = 'Michael';
var Sex = 'Jackson';
var year = 1994;
export {firstName, lastName, year};
3、export
命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
// 报错
export 1;
// 报错
var m = 1;
export m;
注:面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量m
,还是直接输出1。1
只是一个值,不是接口。正确的写法是下面这样。
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m}; //同样function和class也必须遵守这样的写法。
4、 as是重命名关键字。
function func1(){};
function func2(){};
export {
func1 as function1, //将func1命名为function1
func2 as function2 //将func2命名为function2
};
5、export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错(import也同样)。
这是因为处于条件码块之中,就无法完成静态优化了,违背了ES6模块的初衷。
function foo(){
export default 'bar'
}
foo()
因为export处于函数模块作用域中,所以会报错。