随着前端应用的日益复杂，我们的项目变得越来越复杂且难以管理。而模块化就是一种最主流的代码组成方式，通过把复杂的代码按照功能的不同划分成不同的模块，进行单独维护，而提高效率，降低维护成本。模块化经历了以下几个时期：

1、Stage 1- 文件划分方式

具体做法就是将每个功能及相关状态数据各自单独放到不同的文件中，约定每个文件就是一个独立的模块，使用这个模块就是将这个模块引入到页面当中，然后直接调用模块中的成员（变量/函数）。

  1. // module-a.js
  2. var name = 'module-a'
  4. function method1 () {
  5.   console.log(name + '#method1')
  6. }
  8. function method2 () {
  9.   console.log(name + '#method2')
  10. }
  12. // module-b.js
  14. var name = 'module-b'
  16. function method1 () {
  17.   console.log(name + '#method1')
  18. }
  20. function method2 () {
  21.   console.log(name + '#method2')
  22. }

image.png

2、Stage 2- 命名空间

每个模块只暴露一个全局对象，所有模块成员都挂载到这个对象中。就是在第一阶段的基础上，通过将每个模块「包裹」为一个全局对象的形式实现，有点类似于为模块内的成员添加了「命名空间」的感觉，可以减少命名冲突的可能。但是这种方法仍然没有私有空间，内部成员仍然可以被外部修改，另外模块之间的关系也没有得到解决。

  1. // module-a.js
  3. var moduleA = {
  4.   name: 'module-a',
  6.   method1: function () {
  7.     console.log(this.name + '#method1')
  8.   },
  10.   method2: function () {
  11.     console.log(this.name + '#method2')
  12.   }
  13. }
  15. // module-b.js
  17. var moduleB = {
  18.   name: 'module-b',
  20.   method1: function () {
  21.     console.log(this.name + '#method1')
  22.   },
  24.   method2: function () {
  25.     console.log(this.name + '#method2')
  26.   }
  27. }

image.png

3、Stage 3-IIFE

使用立即执行函数表达式（IIFE：Immediately-Invoked Function Expression）为模块提供私有空间,具体做法就是将每个模块成员都放在一个函数提供的私有作用域中，对于需要暴露给外部的成员，通过挂在到全局对象上的方式实现。

  1. // module-a.js
  3. ;(function () {
  4.   var name = 'module-a'
  6.   function method1 () {
  7.     console.log(name + '#method1')
  8.   }
  10.   function method2 () {
  11.     console.log(name + '#method2')
  12.   }
  14.   window.moduleA = {
  15.     method1: method1,
  16.     method2: method2
  17.   }
  18. })()
  20. // module-b.js
  22. ;(function ($) {
  23.   var name = 'module-b'
  25.   function method1 () {
  26.     console.log(name + '#method1')
  27.   }
  29.   function method2 () {
  30.     console.log(name + '#method2')
  31.   }
  33.   window.moduleB = {
  34.     method1: method1,
  35.     method2: method2
  36.   }
  37. })(jQuery)

image.png
匿名函数实现了私有成员的概念，模块内部的私有成员只能通过闭包的形式被访问，不能被外部直接访问和修改，而且可以利用自执行函数的参数作为依赖声明去使用。

以上的方式都是以原始的模块系统为基础，通过约定的方式实现模块化代码组织，这些方式在不同的开发者去实施的时候会有一些差别，为了统一不同的开发者和不同项目之间的差异，我们需要一个标准去规范模块化实现方式。另外上述方式的模块加载都是通过script标签手动引入，这样不利于后期维护。我们需要基础的公共代码去实现自动通过代码去加载模块。所以我们需要一个模块化标准和一个模块加载器。

文章内容输出来源：拉勾教育大前端高薪训练营。