以前，我们的javascript是没有模块化的，通常一个页面引对应的js, 如index.html引入index.js来实现1主页的轮播图，点击跳转等功能，就那样一个功能一个功能写了下来，无法将一个大程序拆分成一个一个小模块，后来js壮大了，也复杂了，社区首先推出了用于服务器端的common.js和用户浏览器环境的amd，再后来es6在语言层面，自己实现了模块化加载方案，我们主要看看他们的区别
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。
let {a , b ,c } = require('fs') 相当于 let _fs = require('fs') let a = _fs.a
1 common.js与amd实际上是先整体加载fs模块，即加载fs模块下的所有方法，生成一个对象_fs，再从这个对象身上加载其他然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
// ES6模块
import { stat, exists, readFile } from 'fs';
上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。
由于 ES6 模块是编译时加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。
除了静态加载带来的各种好处，ES6 模块还有以下好处。
不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。
将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。
网友评论