在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种,前者用于服务器,后者用于浏览器,ES6在语法层面上实现了模块功能,成为浏览器和服务器通用的模块解决方案。

ES6模块的设计思想是尽量静态化,使得编译时就能确定模块的依赖关系,以及输入输出变量。CommonJS和AMD模块都只能在运行时确定这些东西。

CommonJS模块是对象,输入时必须查找对象属性。通过整体加载fs模块,运行时加载。
ES6模块不是对象,而是通过export命令显示指定输出的代码,输入时也采用静态命令的形式。
编译时加载效率高很多。

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。一个模块就是一个独立文件。该模块内部的所有变量,外部无法获取。
export命令除了输出变量,还可以输出函数或类。export输出的变量就是本来的名字,但可以使用as关键字重命名。
export命令可出现在模块的任意位置,只要处于模块顶层即可。export输出的值是动态绑定的,绑定其所在的模块。

import命令具有提升效果,会提升到整个模块的头部首先执行。

export default为模块指定默认输出,import可以为该匿名函数指定任意名字。

ES6模块输出的是值的引用。CommonJS模块输出的是一个值的拷贝。
ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时不会去执行模块,只会生成一个动态的只读引用,等到真正用到的时候,再到模块中取值。因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

CommonJS模块的加载原理:CommonJS的一个模块就是一个脚本文件,require命令第一次加载该脚本就会执行整个脚本,然后在内存中生成一个对象。以后要用到这个模块时,就会到exports属性上取值,即使再次执行require命令,也不会再次执行该模块,而是到缓存中取值。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐