定义

模块化标准前的方式演进

基于文件划分的方式

• 一份文件就是一个模块，通过script标签引入使用

• 对其中变量的调用是对全局成员的调用

• 命名冲突

• 污染全局作用域

• 无法管理模块依赖关系

• 模块中所有成员都可以在外部访问修改

• 完全依靠约定的方式

命名空间方式

• 每个模块只暴露一个全局对象，所有模块成员挂载到全局对象下

• 相比于文件的方式将模块包裹在一个全局对象下实现，相当于添加了命名空间

• 命名冲突

• 污染全局作用域

• 无法管理模块依赖关系

• 仍没有私有空间，模块中所有成员都可以在外部访问修改

IIFE 立即执行函数方式

• 模块所有成员放在函数提供的私有作用域中

• 可以通过挂到全局对象的方式暴露成员

• 实现了私有成员（模块内部闭包访问） 外部无法直接使用

• 用IIFE参数作为依赖声明 使每个模块间依赖关系明显

总结

• 上述<基于文件，基于命名空间，IIFE>的方式均为早期没有工具与规范下的模块化落地实践

• 最后仍需要手动引入依赖，可能出现忘记引用或未删除不再引用的依赖

模块化标准

CommonJS

• 一个文件就是一个模块

• 每个模块具有单独作用域

• module.exports导出

• require导入

• 作为nodejs的默认模块标准，因为node在启动时加载模块，执行时不需要加载，所以是通过同步方式加载模块

AMD规范 (Asynchronous Module Definition)

• 使用Require.js(https://requirejs.org/)作为模块加载器

• 通常用在浏览器中用于异步加载模块

• 模块代码相对复杂

• JS文件请求次数多

CMD

• 通过sea.js作模块加载器

• 并不常见，模块处理参见：https://seajs.github.io/seajs/docs/#quick-start

ES Modules (ES6/2015后)

• 浏览器环境的默认，语言标准层面的模块化

• 通过script标签里type=”module”以ES Modules标准执行其中JS代码

• ES Modules自动采用严格模式，忽略”use strict”(非严格模式this打印全局对象，严格模式下为undefined)

• 每个ESM模块都是单独私有作用域

• 通过CORS请求获取外部JS资源(CORS不支持文件形式访问 需要http server方式)

• script标签延迟执行脚本，相当于defer效果(script默认立即执行，等待脚本加载完毕后继续渲染页面)

• 一般导入导出

• 修饰成员声明导出与重命名

• 默认导出与引入

CommonJS modules export values, while ES6 modules export immutable bindings. 

NodeJS中使用ES Modules

• 文件名命名为mjs

• 在package.json中设置”type”: “module”