阶段1

在最早期我们javascript的模块划分是以文件划分的方式去实现的，这是我们web中最原始的模块系统
image.png
我们根据不同的功能和数据按文件名字的不同划分，每一个文件就是一个独立的模块，使用时在html中引入相应的文件
image.png
缺点：

  1. 我们所有的模块都在一个全局范围去工作，没有一个独立的作用域，这样会造成污染全局作用域，
  2. 很容易产生命名上的冲突
  3. 无法管理模块之间的依赖关系
  4. 这种方式完全依靠约定，

    阶段2

    为了解决阶段一的缺点，在第二阶段中我们约定每一个模块只暴露出一个全局的对象，所有的模块成员都挂载到这个对象下面，相当于加上了命名空间的感觉，

image.pngimage.png
通过这种方式减少了命名冲突的可能，但是仍然没有私有空间，所以说我们的模块成员仍然可以在外部被访问或修改，造成全局污染，而且模块的依赖关系也没有得到解决

阶段3

在第三阶段我们使用立即执行函数这样的方式为我们的模块提供了私有空间，
image.png
image.png
我们只能在模块内部的成员通过闭包的形式去访问，在外部我们无法访问，这样可以确保我们的私有变量的安全，
image.png
而且我们还可以通过向立即执行函数里面传参的形式来表示我们的依赖声明，这样可以使得我们的模块之间的依赖关系变得更加的明显，

以上的三个阶段是我们早期在没有工具和规范的情况下对模块化的落地方式，但是仍然存在了一些不能解决的问题，

模块化规范的出现

commonjs规范

它是nodejs中提出一个标准，我们在nodejs代码中要遵循这样的一个规范，这个规范约定了

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

commonjs是以同步的额模式加载模块，由于node的执行机制是在启动的时候加载模块，执行过程当中是不需要加载的，所以这种方式在node中不会有问题，但是如果换到浏览器中，必然会导致我们的效率底下，我们每次加载都会导致大量的同步模式出现，所以浏览器端并没有使用commonjs规范，使用了AMD（Asynchronous Module Definition）异步的模块定义规范，AMD使用起来相对复杂，模块js请求频繁，它给前端模块化提供了一个标准，它的出现还是很有意义的，
image.png
除此之外淘宝推出了CMD（Common Module Definition）规范，使用起来和require差不多
image.png

ES modules 的引入

在nodejs中我们使用commonjs作为模块规范，在浏览器中我们使用ES modules作为规范，
image.png
ES modules是es2015（es6）中提出的最新的模块化开发规范，他是最近这几年才被定义的标准，现在ESmodules是最主流的前端模块化规范了