JavaScript前端模块化演进：从IIFE到CommonJS、AMD与CMD详解

本文详细解析JavaScript前端模块化的核心原理与具体实现方式，旨在为读者提供清晰的参考与指导。

1. 前端模块化的定义

模块化开发将实现特定功能的代码封装在独立文件中。通过模块化管理，开发者可以更便捷地复用他人代码，按需加载所需功能，从而提升开发效率。

2. 模块化开发的优势

1）有效避免全局变量污染及命名冲突问题。 2）显著提升代码的复用率。 3）增强代码的可维护性。 4）简化依赖关系的管理流程。

3. 前端模块化的演进历程

前端模块化规范已从早期的探索阶段逐步走向成熟与规范化，其实现路径大致如下：

3.1 函数封装模式

在函数逻辑讲解中曾提及，函数是将实现特定逻辑的一组语句进行打包。在单个文件中编写多个相关函数，构成了最原始的模块形式。

function m1() {
 // ...
}
function m2(){
　　　　//...
}

这种方式的缺点显而易见：它依然会污染全局变量，且无法完全避免与其他模块发生冲突，模块成员之间的关联性也较为松散。

3.2 对象封装模式

为解决上述问题，出现了新的解决方案：将所有模块成员封装在一个对象内部。

var module = new Object({

  _count:0,

  m1:function (){ ```},

  m2:function (){  ```}    
 
}) 

此时，两个函数被包裹在该对象中，表面看来结构清晰。使用时，只需调用该对象的属性或方法即可。

module.m1()

然而，这种写法存在暴露所有成员的风险，内部状态可能被外部代码随意修改。例如，外部代码可直接改变计数器的值，导致数据不安全。

module._count = 10

3.3 立即执行函数（IIFE）

var module = (function(){
 var _count = 5;
   
  var m1 = function (){ ```};

  var m2 = function (){ ```};

  return{
     m1:m1,
     m2:m2
  }
})()

以上所述为模块化开发的基础概念，后续将探讨更深层次的模块化开发方案。

接下来，我们将深入了解几种主流的模块化规范。

1）CommonJS规范

CommonJS规范由Node.js推广并普及，这标志着JavaScript模块化正式进入标准化阶段。

一、模块定义

根据CommonJS规范，一个单独的文件即被视为一个模块。每个模块拥有独立的作用域，在模块内部定义的变量无法被其他模块直接读取，除非将其显式设置为global对象的属性。

二、模块输出

模块仅有一个出口，即module.exports对象。开发者需将希望对外输出的内容赋值给该对象。

三、模块加载

使用require方法加载模块。该操作会读取指定文件并执行其代码，最终返回文件内部的module.exports对象。

var name = 'Byron'; 
 
function printName(){ 
  console.log(name); 
} 
 
function printFullName(firstName){ 
  console.log(firstName + name); 
} 
 
module.exports = { 
  printName: printName, 
  printFullName: printFullName 
}

随后即可通过require加载模块。

var nameModule = require('./myModel.js');
nameModule.printName();

2）AMD规范

AMD全称为Asynchronous Module Definition（异步模块定义），是一种专为浏览器端模块化开发设计的规范。由于JavaScript原生不支持，使用AMD规范进行页面开发需依赖对应的函数库，即著名的Require.js。实际上，AMD规范是Require.js在推广过程中对模块化定义进行标准化的产物。

Require.js主要解决以下两个核心问题：

1）多个JavaScript文件可能存在依赖关系，被依赖的文件必须早于依赖它的文件加载到浏览器中。

2）JavaScript加载过程中浏览器会暂停页面渲染，加载的文件越多，页面失去响应的时间越长。

//定义模块
define(['dependency'],function(){
 
 var name = 'Byron';
 function printName(){
   console.log(name);
}
 
 return {
   printName:printName
  }

})

//加载模块

require(['myModule'],function(my){
  my.printName();
})

语法说明：

Require.js定义了一个全局变量函数define，用于定义模块。

define(id,dependencies,factory)

• ——id：可选参数，用于定义模块的标识符。若未提供，则默认使用脚本文件名（去除扩展名）。
• ——dependencies：当前模块所依赖的模块名称数组。
• ——factory：工厂方法，用于模块初始化执行的函数或对象。若为函数，仅执行一次；若为对象，则该对象即为模块的输出值。

在页面中使用require函数加载模块；

require([dependencies], function(){});

require()函数接受两个参数：

• ——第一个参数为数组，表示所依赖的模块列表；
• ——第二个参数为回调函数。当所有前置模块加载成功后，该函数将被调用。加载的模块将以参数形式传入该函数，从而在回调函数内部可以使用这些模块。

AMD推崇依赖前置，即在定义模块时提前罗列依赖，这些依赖会被提前下载并执行。后续改进允许不在define参数中罗列依赖，而是允许在回调函数中通过require就近引入、下载并执行模块。

3）CMD规范

CMD全称为Common Module Definition。

正如AMD有Require.js，CMD也有对应的浏览器实现Sea.js。Sea.js解决的问题与Require.js类似，但在模块定义方式及加载时机上存在差异。

CMD规范是Sea.js在推广过程中的标准化产出。Sea.js作为另一种前端模块化工具，旨在缓解Require.js的若干痛点。

efine(id, deps, factory)

由于CMD推崇一个文件对应一个模块，因此常直接使用文件名作为模块ID； CMD推崇依赖就近，因此在define的参数中通常不写依赖，而是在factory函数内部书写。

factory函数包含三个参数：

function(require, exports, module){}

一、require

require是factory函数的第一个参数，它是一个方法，接受模块标识作为唯一参数，用于获取其他模块提供的接口；

二、exports

exports是一个对象，用于向外提供模块接口；

三、module

module是一个对象，存储了与当前模块相关联的一些属性和方法。

示例代码

// 定义模块 myModule.js
define(function(require, exports, module) {
 var $ = require('jquery.js')
 $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

AMD与CMD的区别

总结如下：

最显著的区别在于模块定义时对依赖的处理方式不同。

AMD推崇依赖前置，即在定义模块时便声明其依赖的模块。

CMD推崇依赖就近，即只有在真正用到某模块时才通过require加载。

AMD和CMD最大的区别在于对依赖模块执行时机的处理不同，请注意，这并非加载时机或方式的不同。

许多人误认为Require.js是异步加载模块，Sea.js是同步加载模块，这种理解并不准确。实际上，两者的模块加载均为异步过程。区别在于：AMD采用依赖前置，JavaScript可以方便地知道依赖模块是谁，从而立即加载；而CMD采用依赖就近，需将模块代码解析为字符串后遍历一遍才能确定依赖了哪些模块。这也是部分开发者对CMD的诟病点，即牺牲了一定的性能以换取开发的便利性。实际上，解析模块所耗时间极短，几乎可以忽略不计。 为何我们强调两者的区别在于依赖模块的执行时机？为何许多人认为AMD是异步的，而CMD是同步的（除名称原因外）？ 同样采用异步加载模块，AMD在加载模块完成后便会立即执行该模块。所有模块加载执行完毕后，进入require的回调函数执行主逻辑。这种效果意味着依赖模块的执行顺序与书写顺序不一定一致，具体取决于网络速度，哪个模块先下载完成就先执行。但主逻辑一定在所有依赖加载完成后才执行。 CMD在加载完某个依赖模块后并不立即执行，仅进行下载操作。待所有依赖模块加载完成后进入主逻辑，遇到require语句时才执行对应的模块。因此，模块的执行顺序与书写顺序完全一致。 这也是许多人认为AMD用户体验更好（无延迟，依赖模块提前执行），而CMD性能更优（仅在执行需要时才执行）的原因。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。