前端模块化的演变过程

一. 模块化的演变过程

<1> 文件划分

每个文件就是一个模块。使用时，就用 script 标签把该文件引入进来

缺点：

• 污染全局作用域，可以任意修改模块中的代码内容，没有私有空间
• 有命名冲突问题
• 无法管理模块依赖关系

<2> 命名空间方式

每个模块只暴露一个对象，把模块中的变量作为对象的属性和方法挂载到对象身上暴露出去

缺点：

• 模块中的内容依旧可以被修改，依旧没有私有空间

<3> IIFE 立即执行函数表达式

把模块中要导出的内容挂载到全局对象 window 上去，这样就有私有空间了。

以上是没有工具和相应规范的情况下实现的模块化！！！

二. 模块化规范 + 模块加载工具

• 模块化规范 ---- 规定模块化实现的规则

• 模块加载器 ---- 一些公共代码来帮我们自动加载模块

<1> CommonJs 【同步】

CommonJs 是 node.js 中提出的标准

规则如下：

但是它不适用于浏览器端，因为 node.js 是在使用之前就会同步加载完毕。而浏览器端需要异步加载，否则会影响效率和性能。

<2> AMD

AMD(Asynchronous Module Definition) 是同时期提出的异步形式的模块规范

缺点：

• 使用起来太麻烦