JavaScript模块化开发教程：AMD/CommonJS/CMD规范与RequireJS/SeaJS实战

JavaScript模块化开发概述

模块化开发的概念解析

早期前端开发仅需在script标签中嵌入少量代码即可实现基础交互。随着JavaScript地位提升及jQuery、Ajax、Node.js、MVC/MVVM等技术的普及，前端项目复杂度显著增加。然而，原生JavaScript在代码组织方面缺乏明确支持，甚至没有类的概念，更遑论模块（module）。因此，明确“什么是模块”成为关键问题。

模块即实现特定功能的独立文件。通过模块，开发者可以更便捷地复用他人代码，按需加载所需功能。为确保协作顺畅，模块开发必须遵循统一规范，否则将导致代码混乱。

依据AMD规范，开发者可使用define定义模块，并通过require调用模块。

当前JavaScript主流的模块规范主要有两种：CommonJS和AMD。

JavaScript模块化开发概述

AMD规范详解

AMD全称为Asynchronous Module Definition（异步模块定义），是专为浏览器端模块化开发设计的规范，而服务器端则采用CommonJS规范。

在AMD中，模块加载是异步进行的，不会阻塞后续语句的执行。所有依赖特定模块的代码均需放置在回调函数中执行。

AMD规范是RequireJS在推广过程中对模块定义进行标准化的产物。

define()函数解析

AMD规范仅定义了一个全局函数define，其语法描述如下：


define(id?, dependencies?, factory);

参数说明如下：

id：模块名称，为可选参数。若未提供，模块名默认等同于加载器请求的脚本名。若提供了id，则必须为“顶级”且绝对的路径（不允许使用相对路径）。

dependencies：当前模块依赖的已定义模块标识数组。该参数可选，若忽略则默认为["require", "exports", "module"]。若工厂方法的length属性小于3，加载器将依据length属性指定的参数个数调用工厂方法。

factory：模块初始化执行的函数或对象。若为函数，仅执行一次；若为对象，则作为模块的输出值。

模块命名格式规范

模块名用于唯一标识定义中的模块，并在依赖数组中使用，其格式要求如下：

模块名由正斜杠分隔的有意义单词组成，单词需采用驼峰命名法或使用“.”、“..”。模块名不得包含文件扩展名（如“.js”）。模块名可分为“相对的”或“顶级的”：以“.”或“..”开头为相对模块名，从调用“require”的模块路径解析；顶级模块名则从根命名空间的概念模块解析。

require与exports的使用

创建一个名为"alpha"的模块，示例中使用了require、exports以及名为"beta"的依赖模块：


 define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
    exports.verb = function() {
      return beta.verb();
      //Or:
      return require("beta").verb();
    }
  });

关于require API的详细介绍可参考：https://github.com/amdjs/amdjs-api/wiki/require

AMD规范的中文版文档地址为：https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

目前支持AMD规范的库包括RequireJS、curl、Dojo、Nodules等。

CommonJS规范解析

CommonJS是服务器端的模块规范，Node.js采用了此规范。Node.js率先引入了JavaScript模块化的概念。

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

输出模块变量的最佳方式是使用module.exports对象。


var i = 1;
var max = 30;

module.exports = function () {
 for (i -= 1; i++ < max; ) {
  console.log(i);
 }
 max *= 1.1;
};

上述代码通过module.exports对象定义了一个函数，该函数作为模块内部与外部通信的桥梁。

加载模块使用require方法，该方法读取文件并执行，最终返回文件内部的module.exports对象。

CommonJS规范文档地址：http://javascript.ruanyifeng.com/nodejs/commonjs.html

RequireJS与SeaJS对比

RequireJS由James Burke创建，他同时也是AMD规范的创始人。

define方法用于定义模块，RequireJS要求每个模块必须存放在单独的文件中。

RequireJS和Sea.js均为模块加载器，倡导模块化开发理念，其核心价值在于简化JavaScript的模块化开发流程，使其变得简单自然。

SeaJS与RequireJS的核心区别在于：

SeaJS对模块采取懒执行策略，而RequireJS对模块采取预执行策略。

详细图文解析请参考：http://www.douban.com/note/283566440/

RequireJS API文档：http://www.requirejs.cn/docs/api.html

RequireJS用法教程：http://www.ruanyifeng.com/blog/2012/11/require_js.html

使用RequireJS的必要性

若网页包含大量JS文件，浏览器在加载页面时会优先加载JS文件，从而阻塞网页渲染，文件越多可能导致浏览器无响应。此外，JS文件间的依赖关系复杂时，需确保依赖最大的模块最后加载，这会导致代码编写和维护困难。

RequireJS正是为解决上述两个问题而诞生：

（1）实现JS文件的异步加载，避免网页失去响应；（2）管理模块间的依赖性，便于代码的编写与维护。

RequireJS文件下载：http://www.requirejs.cn/docs/download.html

AMD与CMD规范对比

CMD（Common Module Definition）即通用模块定义，明确了模块的基本书写格式和交互规则，该规范在中国国内发展而来。AMD强调依赖关系前置，而CMD强调按需加载。

在CMD规范中，一个模块即一个文件，代码书写格式如下：


define(factory);

当factory为函数时，表示模块的构造方法。执行该方法可获得模块对外提供的接口。factory方法执行时，默认传入三个参数：require、exports和module。


define(function(require, exports, module) {
 // 模块代码
});

require用于导入其他模块，export用于导出模块内的属性和方法。

CMD规范文档地址：https://github.com/seajs/seajs/issues/242

AMD是RequireJS在推广过程中对模块定义的规范化产出；CMD是SeaJS在推广过程中对模块定义的规范化产出。

对于依赖模块，AMD采用提前执行，CMD采用延迟执行。

AMD机制：提前执行（异步加载：依赖先执行）+延迟执行。CMD机制：延迟执行（运行到需加载处，根据顺序执行）。CMD推崇依赖就近，AMD推崇依赖前置。具体代码对比如下：


// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

另一区别在于：

AMD：API根据使用范围有所区别，但使用同一API接口。CMD：每个API职责单一。AMD的优点是异步并行加载，在AMD规范下同时异步加载不会产生错误。CMD机制不同，该加载方式可能产生错误，若能规范化模块内容形式亦可解决。

jquery1.7以上版本自动模块化，支持AMD模式：主要使用define函数。sea.js虽遵循CommonJS规范，但也使用define来定义模块。因此，jQuery已实现自动模块化。


seajs.config({
'base':'/',
'alias':{
  'jquery':'jquery.js'//定义jQuery文件
}
});

define函数与AMD的define类似：


define(function(require, exports, module{
   //先要载入jQuery的模块
   var $ = require('jquery');
   //然后将jQuery对象传给插件模块
   require('./cookie')($);
   //开始使用 $.cookie方法
});

Sea.js开发实例

Sea.js的使用指南

引入sea.js库文件

如何将代码变为模块？

使用define

如何调用模块？

-exports -sea.js.use 4.如何依赖模块？

如何依赖模块？ -require


<script type="text/javascript">
    define(function (require,exports,module) {
      //exports : 对外的接口
      //requires : 依赖的接口
      require('./test.js');//如果地址是一个模块的话，那么require的返回值就是模块中的exports
    })
</script>

sea.js开发实例


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽的模块化开发实践</title>
<style type="text/css">
#div1{ width:200px; height:200px; background:black; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
  
//A同事 ：
seajs.use('./main.js');
  
</script>
</head>

<body>
<input type="button" value="确定" id="input1" />
<div id="div1">
  <div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

A同事的代码实现


//A同事写的main.js:

define(function (require,exports,module) {
  var oInput = document.getElementById('input1');
  var oDiv1 = document.getElementById('div1');
  var oDiv2 = document.getElementById('div2');
  var oDiv3 = document.getElementById('div3');

  require('./drag.js').drag(oDiv3);
  oInput.onclick = function () {
    oDiv1.style.display = 'block';
    require('./scale.js').scale(oDiv1,oDiv2);

    require.async('./scale.js', function (ex) {
      ex.scale(oDiv1,oDiv2);
    })
  }
});

B同事的代码实现


//B同事写的drag.js:

define(function(require,exports,module){
  
  function drag(obj){
    var disX = 0;
    var disY = 0;
    obj.onmousedown = function(ev){
      var ev = ev || window.event;
      disX = ev.clientX - obj.offsetLeft;
      disY = ev.clientY - obj.offsetTop;
      
      document.onmousemove = function(ev){
        var ev = ev || window.event;


         var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
         var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );

        
        obj.style.left = L + 'px';
        obj.style.top = T + 'px';
      };
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  }
  
  exports.drag = drag;//对外提供接口
  
});

C同事的代码实现


//C同事写的scale.js:

define(function(require,exports,module){
  
  
  function scale(obj1,obj2){
    var disX = 0;
    var disY = 0;
    var disW = 0;
    var disH = 0;
    
    obj2.onmousedown = function(ev){
      var ev = ev || window.event;
      disX = ev.clientX;
      disY = ev.clientY;
      disW = obj1.offsetWidth;
      disH = obj1.offsetHeight;
      
      document.onmousemove = function(ev){
        var ev = ev || window.event;
        
        var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
        var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100);
        
        obj1.style.width = W + 'px';
        obj1.style.height = H + 'px';
      };
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
    
  }
  
  exports.scale = scale;
  
});

D同事的代码实现


// D同事的range.js--限定拖拽范围

  define(function(require,exports,module){
    
    function range(iNum,iMax,iMin){
      
      if( iNum > iMax ){
        return iMax;
      }
      else if( iNum < iMin ){
        return iMin;
      }
      else{
        return iNum;
      }
      
    }
    
    exports.range = range;
    
  });

JavaScript模块化开发概述

RequireJS开发实例

requirejs开发实例

require_config用于定义别名，在paths属性下配置别名。随后通过requirejs(参数一，参数二)调用：参数一为数组，传入需引用的模块名；参数二为回调函数，传入变量以代替刚才引入的模块。

main.js文件示例


//别名配置
requirejs.config({
  paths: {
    jquery: 'jquery.min' //可以省略.js
  }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
  $('body').css('background-color','red');
});

引入模块也可仅写require()。RequireJS通过define()定义模块，定义参数同上。此模块内的方法和变量外部无法直接访问，必须通过return返回方可使用。

define定义模块


define(['jquery'], function ($) {//引入jQuery模块
  return {
    add: function(x,y){
      return x + y;
    }
  };
});

将该模块命名为math.js并保存。

main.js引入模块的方法


require(['jquery','math'], function ($,math) {
  console.log(math.add(10,100));//110
});

无依赖情况

若定义的模块不依赖其他模块，则可：


define(function () {

  return {
    name: "trigkit4",
    age: "21"
  }
});

AMD推荐的风格是通过返回一个对象作为模块对象；CommonJS的风格则是通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

JavaScript模块化开发详解：AMD、CommonJS与CMD规范对比

JavaScript模块化开发概述

AMD规范详解

CommonJS规范解析

RequireJS与SeaJS对比

AMD与CMD规范对比

Sea.js开发实例

RequireJS开发实例

实用工具推荐