ES6——Module详解

Module详解1、严格模式2、export命令3、import命令4、模块的整体加载5、module命令6、export default命令7、模块的继承8、ES6模块加载的实质9、循环加载ES6的Class只是面向对象编程的语法糖升级了ES5的构造函数的原型链继承的写法并没有解决模块化问题。Module功能则是为了解决这个问题而提出的。历史上JavaScript一直没有模块(module)体系无法将一个大程序拆分成互相依赖的小文件再用简单的方法拼装起来。其他语言都有这项功能比如Ruby的require、Python的import甚至连CSS都有import但是JavaScript没有任何这方面的支持这对于开发大型的、复杂的项目形成了巨大障碍。在ES6之前社区制定了一些模块加载方案最主要的有CommonJS和AMD两种。前者用于服务器后者用于浏览器。ES6在语言规格的层面上实现了模块功能而且实现得相当简单完全可以取代现有的CommonJS和AMD规范成为浏览器和服务器通用的模块解决方案。ES6模块的设计思想是尽量静态化使得编译时就能确定模块的依赖关系以及输入和输出的变量。CommonJS和AMD模块都只能在运行时确定这些东西。比如CommonJS模块就是对象输入时必须查找对象属性。let{stat,exists,readFile}require(fs);以上代码的实质是整体加载fs模块即加载fs的所有方法​然后在使用时用到3个方法。这种加载称为“运行时加载”​。ES6模块不是对象而是通过export命令显式指定输出的代码输入时也采用静态命令的形式。import{stat,exists,readFile}fromfs;以上代码的实质是从fs模块加载3个方法其他方法不加载。这种加载称为“编译时加载”​即ES6可以在编译时就完成模块编译效率要比CommonJS模块的加载方式高。除了静态加载带来的各种好处ES6模块还有以下好处。不再需要UMD模块格式将来服务器和浏览器都会支持ES6模块格式。目前通过各种工具库其实已经做到了这一点。将来浏览器的新API可以用模块格式提供不再需要做成全局变量或者navigator对象的属性。不再需要对象作为命名空间比如Math对象​未来这些功能可以通过模块提供。1、严格模式ES6的模块自动采用严格模式不管有没有在模块头部加上use strict。严格模式主要有以下限制。变量必须声明后再使用。函数的参数不能有同名属性否则报错。不能使用with语句。不能对只读属性赋值否则报错。不能使用前缀0表示八进制数否则报错。不能删除不可删除的属性否则报错。不能删除变量(delete prop)会报错只能删除属性(delete global[prop])。eval不会在其外层作用域引入变量。eval和arguments不能被重新赋值。arguments不会自动反映函数参数的变化。不能使用arguments.callee。不能使用arguments.caller。禁止this指向全局对象。不能使用fn.caller和fn.arguments获取函数调用的堆栈。增加了保留字比如protected、static和interface​。上面这些限制模块都必须遵守。由于严格模式是ES5引入的不属于ES6所以请参阅相关ES5书籍本书不再详细介绍。2、export命令模块功能主要由两个命令构成export和import。export命令用于规定模块的对外接口import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量外部无法获取。如果希望外部能够读取模块内部的某个变量就必须使用export关键字输出该变量。下面是一个JS文件里面使用export命令输出了变量。//profile.jsexportletfirstNameMichael;exportletlastNameJackson;exportletyear1958;上面的代码保存了用户信息。ES6将其视为一个模块里面用export命令对外部输出了3个变量。export的写法除了像上面这样还有另外一种。//profile.jsletfirstNameMichael;letlastNameJackson;letyear1958;export{firstName,lastName,year};上面的代码在export命令后面使用大括号指定了所要输出的一组变量。它与前一种写法直接放置在var语句前是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清输出了哪些变量。export命令除了输出变量还可以输出函数或类(Class)。exportfunctionmultiply(x,y){returnx*y;};上面的代码对外输出一个函数multiply。通常情况下export输出的变量就是本来的名字但是可以使用as关键字重命名。functionv1(){//...}functionv2(){//...}export{v1asstreamV1,v2asstreamV2,v2asstreamLatestVersion,};上面的代码使用as关键字重命名了函数v1和v2的对外接口。重命名后v2可以用不同的名字输出两次。最后export命令可以出现在模块的任何位置只要处于模块顶层即可。如果处于块级作用域内会报错。下面的import命令也是如此。functionfoo(){exportdefaultbar//SyntaxError}foo()上面的代码中export语句放在函数中结果报错。export语句输出的值是动态绑定绑定其所在的模块。exportletfoobar;setTimeout(()foobaz,500);上面的代码输出变量foo值为bar,500毫秒之后变成baz。3、import命令使用export命令定义了模块的对外接口以后其他JS文件就可以通过import命令加载这个模块文件​。//main.jsimport{firstName,lastName,year}from./profile;functionsetName(element){element.textContentfirstName lastName;}上面的import命令就用于加载profile.js文件并从中输入变量。import命令接受一个对象用大括号表示​里面指定要从其他模块导入的变量名。大括号中的变量名必须与被导入模块(profile.js)对外接口的名称相同。如果想为输入的变量重新取一个名字要在import命令中使用as关键字将输入的变量重命名。import{lastNameassurname}from./profile;注意import命令具有提升效果会提升到整个模块的头部首先执行。foo();import{foo}frommy_module;上面的代码不会报错因为import的执行早于foo的调用。如果在一个模块中先输入后输出同一个模块import语句可以与export语句写在一起。export{es6asdefault}from./someModule;//等同于import{es6}from./someModule;exportdefaultes6;上面的代码中export和import语句可以结合在一起写成一行。但是从可读性考虑不建议采用这种写法而应该采用标准写法。另外ES7有一个提案(https://github.com/leebyron/ecmascript-more-export-from)简化先输入后输出的写法拿掉了输出时的大括号。//提案的写法exportvfrommod;//现行的写法export{v}frommod;import语句会执行所加载的模块因此可以有下面的写法。importlodash上面的代码仅仅执行lodash模块而不输入任何值。4、模块的整体加载除了指定加载某个输出值还可以使用整体加载即用星号()指定一个对象所有输出值都加载在这个对象上。下面是circle.js文件它输出两个方法area和circumference。//circle.jsexportfunctionarea(radius){returnMath.PI*radius*radius;}exportfunctioncircumference(radius){return2*Math.PI*radius;}现在加载这个模块。//main.jsimport{area,circumference}from./circle;console.log(area(4));console.log(circumference(4));上面的写法是逐一指定要加载的方法整体加载的写法如下。//main.jsimport*ascirclefrom./circle;console.log(circle.area(4));console.log(circle.circumference(4));5、module命令module命令可以取代import语句达到整体输入模块的作用。//main.jsimportcirclefrom./circle;console.log(circle.area(4));console.log(circle.circumference(4));module命令后面跟一个变量表示输入的模块定义在该变量上。6、export default命令从前面的例子可以看出使用import命令时用户需要知道所要加载的变量名或函数名否则无法加载。但是用户肯定希望快速上手未必愿意阅读文档去了解模块有哪些属性和方法。为了方便用户使其不用阅读文档就能加载模块就要用到export default命令为模块指定默认输出。//export-default.jsexportdefaultfunction(){console.log(foo);}上面是模块文件export-default.js的代码它的默认输出是一个函数。在其他模块加载该模块时import命令可以为该匿名函数指定任意名字。//import-default.jsimportcustomNamefrom./export-default;customName();//foo上面的import命令可以用任意名称指向export-default.js输出的方法这时就不需要知道原模块输出的函数名。需要注意的是这时import命令后面不使用大括号。export default命令用在非匿名函数前也是可以的。//export-deault.jsexportdefaultfunctionfoo(){console.log(foo);}//或者写成functionfoo(){console.log(foo);}exportdefaultfoo;上面的代码中foo函数的函数名foo在模块外部是无效的。加载时视同匿名函数。下面比较一下默认输出和正常输出。//输出exportdefaultfunctioncrc32(){//...}//输入importcrc32fromcrc32;//输出exportfunctioncrc32(){//...}//输入import{crc32}fromcrc32;上面的两组写法第一组使用export default对应的import语句不需要使用大括号第二组不使用exportdefault对应的import语句需要使用大括号。export default命令用于指定模块的默认输出。显然一个模块只能有一个默认输出因此export deault命令只能使用一次。所以import命令后面才不用加大括号因为只可能对应一个方法。本质上export default就是输出一个叫作default的变量或方法然后系统允许你为它取任意名字。所以下面的写法是有效的。//modules.jsfunctionadd(x,y){returnx*y;};export{addasdefault};//app.jsimport{defaultasxxx}frommodules;有了export default命令输入模块时就非常直观了。以输入jQuery模块为例。import$fromjquery;如果想在一条import语句中同时输入默认方法和其他变量可以写成下面这样。importcustomName,{otherMEthod}from./export-default;如果要输出默认的值只需将值跟在export default之后即可。exportdefault42;export default也可以用来输出类。//MyClass.jsexportdefaultclass{...}//main.jsimportMyClassfromMyClassletonewMyClass();7、模块的继承模块之间也可以继承。假设有一个circleplus模块继承了circle模块。//circleplus.jsexport*fromcircle;exportlete2.71828182846;exportdefaultfunction(x){returnMath.exp(x);}上面的export 表示输出circle模块的所有属性和方法。注意export 命令会忽略circle模块的default方法。之后又输出了自定义的e变量和默认方法。这时也可以将circle的属性或方法改名后再输出。//circleplus.jsexport{areaascircleArea}fromcircle;上面的代码表示只输出circle模块的area方法且将其改名为circleArea。加载上面的模块的写法如下。//main.jsmodule mathfromcircleplus;importexpfromcircleplus;console.log(exp(math.E));上面的import exp表示将circleplus模块的默认方法加载为exp方法。8、ES6模块加载的实质ES6模块加载的机制与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝而ES6模块输出的是值的引用。CommonJS模块输入的是被输出值的拷贝。也就是说一旦输出一个值模块内部的变化就影响不到这个值。请看下面这个例子。下面是一个模块文件。//lib.jsletcounter3;functionincCounter(){counter;}module.exports{counter:counter,incCounter:incCounter,};上面的代码输出了内部变量counter和改写这个变量的内部方法incCounter。然后加载上面的模块。//main.jsletcounterrequire(./lib).counter;letincCounterrequire(./lib).incCounter;console.log(counter);//3incCounter();console.log(counter);//3上面的代码说明counter输出以后lib.js模块内部的变化就影响不到counter了。ES6模块的运行机制与CommonJS不一样它遇到模块加载命令import时不会去执行模块只会生成一个动态的只读引用。等到真的需要用到时再到模块中取值。换句话说ES6的输入有点像UNIX系统的“符号链接”​原始值变了输入值也会跟着变。因此ES6模块是动态引用并且不会缓存值模块里面的变量绑定其所在的模块。还是举上面的例子。//lib.jsexportletcounter3;exportfunctionincCounter(){counter;}//main1.jsimport{counter,incCounter}from./lib;console.log(counter);//3incCounter();console.log(counter);//4上面的代码说明ES6模块输入的变量counter是活的完全反映其所在模块lib.js内部的变化。再举一个出现过的例子。//m1.jsexportletfoobar;setTimeout(()foobaz,500);//m2.jsimport{foo}from./m1.js;console.log(foo);setTimeout(()console.log(foo),500);上面的代码中m1.js的变量foo在刚加载时等于bar过了500毫秒又变为等于baz。由于ES6输入的模块变量只是一个“符号链接”​所以这个变量是只读的对它进行重新赋值会报错。//lib.jsexportletobj{};//main.jsimport{obj}from./lib;obj.pro[123;//OKobj{};//TypeError上面的代码中main.js从lib.js输入变量obj可以对obj添加属性但是重新赋值就会报错。因为变量obj指向的地址是只读的不能重新赋值这就好比main.js创造了一个名为obj的const变量。9、循环加载“循环加载”(circular dependency)指的是a脚本的执行依赖b脚本而b脚本的执行又依赖a脚本。//a.jsletbrequire(b);//b.jsletarequire(a);通常​“循环加载”表示存在强耦合如果处理不好还可能导致递归加载使得程序无法执行因此应该避免。但实际上这是很难避免的尤其是依赖关系复杂的大项目中很容易出现a依赖b,b依赖c,c又依赖a这样的情况。这意味着模块加载机制必须考虑“循环加载”的情况。对于JavaScript语言来说目前最常见的两种模块格式——CommonJS和ES6处理“循环加载”的方法是不一样的返回的结果也不一样。CommonJS模块的加载原理介绍ES6如何处理“循环加载”之前先介绍目前最流行的CommonJS模块格式的加载原理。CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本就会执行整个脚本然后在内存中生成一个对象。{id:...,exports:{...},loaded:true,...}上面的代码中该对象的id属性是模块名exports属性是模块输出的各个接口loaded属性是一个布尔值表示该模块的脚本是否执行完毕。此外还有很多属性这里省略了。以后需要用到这个模块时就会到exports属性上取值。即使再次执行require命令也不会再次执行该模块而是到缓存中取值。CommonJS模块的循环加载CommonJS模块的重要特性是加载时执行即脚本代码在require时就会全部执行。CommonJS的做法是一旦出现某个模块被“循环加载”​就只输出已经执行的部分还未执行的部分不会输出。我们来看Node官方文档(https://nodejs.org/api/modules.htmlmodules_cycles)中的例子。脚本文件a.js代码如下。exports.donefalse;letbrequire(./b.js);console.log(在a.js之中,b.done %j,b.done);exports.donetrue;console.log(a.js执行完毕);上面的代码中a.js脚本先输出done变量然后加载另一个脚本文件b.js。注意此时a.js的代码就停在这里等待b.js执行完毕再往下执行。再看b.js的代码。exports.donefalse;letarequire(./a.js);console.log(在b.js之中, a.done %j,a.done);exports.donetrue;console.log(b.js执行完毕);上面的代码中b.js执行到第2行就会去加载a.js。这时就发生了“循环加载”​。系统会去a.js模块对应对象的exports属性取值可是因为a.js还没有执行完从exports属性只能取回已经执行的部分而不是最后的值。a.js已经执行的部分只有一行。exports.donefalse;因此对于b.js来说它从a.js只输入一个变量done值为false。然后b.js接着往下执行等到全部执行完毕再把执行权交还给a.js。于是a.js接着往下执行直到执行完毕。我们写一个脚本main.js来验证这个过程。letarequire(./a.js);letbrequire(./b.js);console.log(在main.js之中a.done%j,b.done%j,a.done,b.done);执行main.js运行结果如下。$ node main.js 在b.js之中a.donefalseb.js执行完毕 在a.js之中b.donetruea.js执行完毕 在main.js之中a.donetrue,b.donetrue上面的代码证明了两件事。一是在b.js中a.js没有执行完毕只执行了第1行。二是main.js执行到第2行时不会再次执行b.js而是输出缓存的b.js的执行结果即其第4行。exports.donetrue;总之CommonJS输入的是被输出值的拷贝不是引用。ES6模块的循环加载ES6处理“循环加载”与CommonJS有本质的不同。ES6模块是动态引用遇到模块加载命令import时不会去执行模块只是生成一个指向被加载模块的引用需要开发者自己保证真正取值时能够取到值。请看下面的例子摘自Dr.Axel Rauschmayer的Exploring ES6〔http://exploringjs.com/es6/ch_modules.html〕​。//a.jsimport{bar}from./b.js;exportfunctionfoo(){bar();console.log(执行完毕);}foo();//b.jsimport{foo}from./a.js;exportfunctionbar(){if(Math.random()0.5){foo();}}按照CommonJS规范上面的代码是无法执行的。a先加载b然后b又加载a这时a还没有任何执行结果所以输出结果为null。即对于b.js来说变量foo的值等于null后面的foo()会报错。但是ES6可以执行上面的代码。$ babel-node a.js执行完毕a.js之所以能够执行原因就在于ES6加载的变量都是动态引用其所在的模块。只要引用是存在的代码就能执行。再来看ES6模块加载器SystemJS(https://github.com/ModuleLoader/es6-module-loader/blob/master/docs/circular-references-bindings.md)给出的一个例子。//even.jsimport{odd}from./odd;exportletcounter0;exportfunctioneven(n){counter;returnn0||odd(n-1);}//odd.jsimport{even}from./even;exportfunctionodd(n){returnn!0even(n-1);}上面的代码中even.js中的函数foo有一个参数n只要不等于0就会减去1传入加载的odd()。odd.js也会做类似操作。运行上面这段代码结果如下。$ babel-nodeimport*asmfrom./even.js;m.even(10);truem.counter6m.even(20)truem.counter17上面的代码中参数n从10变为0的过程中foo()一共会执行6次所以变量counter等于6。第二次调用even()时参数n从20变为0,foo()一共会执行11次加上前面的6次所以变量counter等于17。这个例子要是改写成CommonJS代码就根本无法执行会报错。//even.jsletoddrequire(./odd);letcounter0;exports.countercounter;exports.evenfunction(n){counter;returnn0||onloadeddata(n-1);}//odd.jsletevenrequire(./even).even;module.exportsfunction(n){returnn!0even(n-1);}上面的代码中even.js加载odd.js而odd.js又去加载even.js形成“循环加载”​。这时执行引擎就会输出even.js已经执行的部分不存在任何结果​所以在odd.js中变量even等于null等到后面调用even(n-1)就会报错。$ nodeletmrequire(./even);m.even(10)TypeError:even is not afunction