模块化的演进过程#

早期模块化完全依靠约定，项目一旦庞大将会维护成本极高

1.基于文件的划分模块的问题

• 污染全局作用域
• 命名冲突问题
• 无法管理模块依赖关系

2.命名空间方式

3.立即执行函数的形式提供私有空间

模块化规范的出现#

目前实现模块化的规范主要有：#

• CommonJS
• CMD
• AMD
• ES6模块(ESmodules)

模块化的好处：#

1. 可维护性。 因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。
2. 命名空间。 在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。
3. 重用代码。 我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目，这没有问题，但是更好的方法是，通过模块引用的方式，来避免重复的代码库。我们可以在更新了模块之后，让引用了该模块的所有项目都同步更新，还能指定版本号，避免 API 变更带来的麻烦。

CommonJS规范#

commonjs是以同步模式加载模块

• 一个文件就是一个模块
• 每个模块都有单独的作用域
• 通过module.exports导出成员
• 通过require函数载入模块

AMD规范#

异步模式加载模块，是一种前端模块化的临时方案

• AMD使用相对复杂
• 模块JS文件请求频繁

CMD规范#

CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同

模块化标准规范#

模块的化的最佳实践 ESmodules 和 CommonJS

ESmodule是前端最规范的模块化标准,但需要配合构建工具使用（ES6才推出的新标准）

ESmodules特性#

• 自动采用严格模式、忽略 'use strict'
• 每个ESM模块都是单独的私有作用域
• ESM是通过CORS去请求外部JS模块
• ESM的SCRIPT标签会延迟执行脚本

ESmodules导入导出的注意事项#

• 导出的成员并不是字面量对象，只是写法类似
• 导入的语法也类似解构语法，但是并不是解构的意思，只是类似。
• ESMODULES导出的过程中，并不是导出成员，而是把成员的值给你，你并不能修改esmodule内的导出值
• 导入的成员是只读的成员