模块化发展历程

模块化是多个js文件的相互依赖关系和全局变量污染问题的一种解决方案

1. IIFE

利用闭包实现模块化，把代码包装到单独的函数作用域中执行。核心思想是建一个管理中心，提供注册模块和获取模块的方法，注册的模块需要记录起来，通过依赖注入的方式注入到依赖的模块中。整个实现过程很简单，在《你不知道的javascript（上）》中有详细实现过程。IIFE只是一种解决思想，它是不够完善的，如没有异步加载js模块。

2. AMD规范

requireJS是其实现库，先看一下它的模块定义方式

define('./module.js', function(expr) {
  // 模块主体
})

其中module.js是模块的依赖项，expr是依赖模块的返回值。感觉上跟IIFE是很类似的，只是在IIFE的基础上增加了异步加载模块的。commonJS只在第一次引用时执行，之后会被缓存。

3. commonJS

node的模块加载方式，在浏览器端的实现是webpack

require('module')	// 加载模块
module.exports = {} // 导出模块

这里的模块可以是任意一个文件，它的加载是同步的。node是执行时同步加载，webpack是提前编译打包处理。module其实是commonJS运行时注入到每一个模块的

4. CMD规范

seaJS是其实现库，先看一下它的模块定义方式

define(function(require, exports, module) {
	// require加载模块的函数，有异步跟同步的加载
	// exports导出对象，是module.exports的一个键引用，所以千万不要改变它的指针
	// module模块的定义函数主体，提供了一些模块操作的方法
})

特定很明显啦，模块的导出和引用方式跟commonJS一模一样，同时支持了异步加载模块的方式。所以说它是集合了commonJs和AMD规范

5. ES6模块化标准

ES6制定的模块化标准，目前在浏览器上使用需要使用Babel转成es5

import {moduleName} from 'xxx' // 引入模块
export moduleName = xxx // 导出模块

有一些注意点：模块内容只会执行一次，但是模块接口是静态定义，它在编译阶段生成，每次引用都是新的返回值

来源：CSDN

作者：杨码农

链接：https://blog.csdn.net/qq_42185834/article/details/103462660