首页 专题 H5案例 前端导航 UI框架

浅析JS模块规范:AMD和CMD

作者:TG 日期: 2017-03-15 阅读: 4674
在了解AMDCMD规范前,我们先来简单地了解下什么是模块?

简单的说,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。当然,模块开发需要遵循一定的规范,否则各用各的就会乱套了。

目前,常用的JS模块规范主要有两种:CMDAMD

AMD

AMD,异步模块定义(Asynchronous Module Definition),它是依赖前置 (依赖必须一开始就写好)会先尽早地执行(依赖)模块 。换句话说,所有的require都被提前执行(require 可以是全局或局部 )。

AMD规范只定义了一个函数 define,它是全局变量。用法:

defind(id, dependencies, factory)

参数说明:
  • id:字符串类型,指定义中模块的名称,可选。如果没有提供该参数,模块的名称应该默认为模块加载器请求的指定脚本的名称。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名称)。
  • dependencies:array类型,包含一组当前模块依赖的,已被模块定义的模块标识。
依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
  • factory:函数(工厂方法),模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。

模块名的格式

模块名用来唯一标识定义中模块,它们同样在依赖性数组中使用:

模块名是用正斜杠分割的有意义单词的字符串  

单词须为驼峰形式,或者".",".."  

模块名不允许文件扩展名的形式,如“.js”  

模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名  

顶级的模块名从根命名空间的概念模块解析  

相对的模块名从 "require" 书写和调用的模块解析


对于AMD,最具代表性的就是RequireJS,官网:http://www.requirejs.cn/

简单实例

首先在创建一个index.html,内容如下:

<!DOCTYPE html>  

<html lang="en">  

<head>   

  <meta charset="UTF-8">   

  <title>AMD</title>  

</head>  

<body>   

  <script data-main="scripts/main" src="require.js"></script>  

</body>  

</html>

在上面的代码中,我们引入了require.js,然后使用data-main属性指定入口文件为scripts/main(这里省略后缀.js)。

然后在index.html同级下创建一个文件夹scripts,跟着创建三个js文件:a.js、b.js、mian.js,代码如下:

/* 

*  a.js 

*  创建一个名为“a”的模块

*/


define('a', function(require, exports, module) {   

  exports.getTime = function() {   

    return new Date();   

  }  

});


/* 

*  b.js 

*  创建一个名为“b”的模块,同时使用依赖require、exports和名为“a”的模块:

*/

define('b', ['require', 'exports', 'a'], function(require, exports, a) {   exports.test = function() {

    return {   

      now: a.getTime()    

    };   

  }  

});


/* main.js */

require(['b'], function(b) {   

  console.log(b.test());  

});


关于Requirejs更多内容:http://www.requirejs.cn/home.html

CMD

CMD(Common Module Definition)更贴近 CommonJS Modules/1.1 和 Node Modules 规范,一个模块就是一个文件;它推崇依赖就近,想什么时候 require 就什么时候加载,实现了懒加载(延迟执行 ) ;它也没有全局 require, 每个API都简单纯粹 。

对于CMD,有代表性的是SeaJS,官网:http://seajs.org/docs/

CMD 规范中,一个模块就是一个文件。代码的书写格式如下:

define(factory);

factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module

define(function(require, exports, module) {    

  // 模块代码  

});


简单实例

创建一个index.html,内容如下:

<!DOCTYPE html>  

<html lang="en">  

<head>   

  <meta charset="UTF-8">   

  <title>CMD</title>  

</head>  

<body>     

  <script src="sea.js"></script>   

  <script>   

    /* 加载入口模块 */

    seajs.use('./scripts/main');   

  </script>  

</body>  

</html>


然后在index.html同级下创建一个scripts文件夹,跟着创建两个js文件:a.js、main.js,代码如下:

/* 

*  a.js 

*  一个文件就是一个模块

*/

define(function(require, exports, module) {   

  exports.getTime = function() {   

    return new Date();   

  }  

});


/* main.js */

define(function(require, exports, module) {  

  /* 按需加载a.js */ 

  var a = require('./a');    

  console.log(a.getTime());  

});


RequireJSSea.js共同点
  • RequireJS 和 Sea.js 都是模块加载器

不同之处(出处:玉伯:与 RequireJS 的异同):
  • 定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
  • 遵循的规范不同。RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。规范的不同,导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。
  • 推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳。Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。
  • 对开发调试的支持有差异。Sea.js 非常关注代码的开发调试,有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。
  • 插件机制不同。RequireJS 采取的是在源码中预留接口的形式,插件类型比较单一。Sea.js 采取的是通用事件机制,插件类型更丰富。

AMD与CMD的比较

  • AMD:依赖前置,预执行(异步加载:依赖先执行)。CMD:依赖就近,懒(延迟)执行(运行到需加载,根据顺序执行)

// CMD define(function(require, exports, module) {  

  var a = require('./a')  

  a.doSomething();  

  // 省略1万行 

  var b = require('./b') // 依赖可以就近书写  

  b.doSomething();

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

  a.doSomething();  

  // 省略1万行  

  b.doSomething();

}) 


实例代码下载:实例

参考资料

如有疑问或建议,可在下方评论区留言!

关注”全栈技术杂货铺“

全栈技术杂货铺