浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结


Posted in Javascript onMarch 16, 2016

这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激。

本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法。

1、为何而生:

 这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理。模块化使得我们在使用和管理代码的时候不那么混乱,而且也方便了多人的合作。

2、那些规范们:

(1)、CommonJS 是一个有志于构建 JavaScript 生态圈的组织。整个社区致力于提高 JavaScript 程序的可移植性和可交换性,无论是在服务端还是浏览器端。

a group with a goal of building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.

一个有目标的构建JavaScript生态系统Web服务器组,在浏览器和命令行应用程序和桌面。(他自己wiki上这么说的)

这个组织呢制定了一些规范 (可以去他们网站看看 http://www.commonjs.org/)包括CommonJS Modules/1.0 规范,我们平时所说的commonjs规范,说的就是这个了。

 “The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java. ”--(出自 http://www.commonjs.org/)

所以说Commonjs是一个更偏向于服务器端的规范。Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读 取一个文件并执行,最后返回文件内部的exports对象。

他又说了,可以用在下面这些场景  ,所以他更明显的偏向服务器端。当然你也可以把它用在浏览器里边(他们自己说可以)。

•Server-side JavaScript applications
•Command line tools
•Desktop GUI-based applications
•Hybrid applications (Titanium, Adobe AIR)

(2)、AMD规范

Commonjs解决了模块化的问题,并且可以用在浏览器中,但是Commonjs是同步加载模块,当要用到该模块了,现加载现用,这种同步机制到了浏览器里边就有问题了,加载速度啊啥的(览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

鉴于浏览器的特殊情况,又出现了一个规范,这个规范呢可以实现异步加载依赖模块,并且会提前加载那就是AMD规范。AMD可以作为CommonJS模块一个中转的版本只要CommonJS没有被用来同步的require调用。使用同步require调用的CommonJS代码可以被转换为使用回调风格的AMD模块加载器(https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)  (它说的)。

下面是一个使用了简单CommonJS转换的模块定义(它是amd规范的一种用法):

   define(function (require, exports, module) {

     var a = require('a'),

         b = require('b');
     exports.action = function () {};

   });

所以说AMD和Commonjs是兼容的,只要稍稍调换一下调用方法就实现了同步加载(我很怀疑amd也是在commonjs基础上加了个壳,然后并没有找到其他的神马说明和支持的文字,找到了一定加到这)。

看一下AMD规范你会发现,AMD基本都是提前说明依赖模块,然后预加载这些模块,实际上这就要求你提前想好这些依赖,提前写好,不然写代码过程中要回到开头继续添加依赖。

 
(3)、CMD

不知道是不是针对这个问题,淘宝的玉伯大牛搞了个seajs出来,并声称这个规范是遵循CMD规范的,然后给出了这个规范的一个连接(打开会发现draft字样)。关于这个规范呢玉伯在知乎是这么说的

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

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。
还有不少⋯⋯

所以这个规范实际上是为了Seajs的推广然后搞出来的。那么看看SeaJS是怎么回事儿吧,基本就是知道这个规范了。

同样Seajs也是预加载依赖js跟AMD的规范在预加载这一点上是相同的,明显不同的地方是调用,和声明依赖的地方。AMD和CMD都是用difine和require,但是CMD标准倾向于在使用过程中提出依赖,就是不管代码写到哪突然发现需要依赖另一个模块,那就在当前代码用require引入就可以了,规范会帮你搞定预加载,你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好(没有写好? 倒回去写好咯)。这就是最明显的区别。

3、共生共处

由于CommonJS是服务器端的规范,更另外两个标准实际不冲突。

AMD在国外用的更多,当然国内也是不少的,jQuery1,7版本开始使用,Dojo在1.6版本开始用,这已经能够证明它足够牛x了。

CMD当然也有很多人在用,但是基本都集中在国内,Seajs官网就展示了一大堆牛逼的公司在用(包括爱奇艺,腾讯微博,支付宝,淘宝等一大堆,去这看看http://seajs.org/docs/),估计小的不出名的也不计其数了,毕竟很多公司招聘都要求会seajs嘛。

所以三个规范目前都挺好(其实也主要是因为js么有自己的模块加载机制,es6出来之后不知道会怎样)。

当我们写一个文件需要兼容不同的加载规范的时候怎么办呢,看看下面的代码。

(function (root, factory) { 
 
  if (typeof define === 'function' && define.amd) { 
 
    // AMD 
 
    define(['jquery', 'underscore'], factory); 
 
  } else if (typeof exports === 'object') { 
 
    // Node, CommonJS之类的 
 
    module.exports = factory(require('jquery'), require('underscore')); 
 
  } else { 
 
    // 浏览器全局变量(root 即 window) 
 
    root.returnExports = factory(root.jQuery, root._); 
 
  } 
 
}(this, function ($, _) { 
 
  // 方法 
 
  function a(){}; // 私有方法,因为它没被返回 (见下面) 
 
  function b(){}; // 公共方法,因为被返回了 
 
  function c(){}; // 公共方法,因为被返回了 
 
    
 
  // 暴露公共方法 
 
  return { 
 
    b: b, 
 
    c: c 
 
  } 
 
}));

这个代码可以兼容各种加载规范了。

4、AMD和CMD的区别

下面这几点是玉伯在知乎上说的。

1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近,AMD 推崇依赖前置。

3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。
 
4. 还有一些细节差异,具体看这个规范的定义就好,就不多说了。
     ( 好吧~第四点是不多说了。。。。。。。。。)

5、AMD和CMD的一些相同

都有difine和require,而且调用方式实际都可以添加依赖参数,也就是说都可以用提供依赖参数的方式来实现预加载依赖模块(但是不推荐因为  注意:带 id 和 deps 参数的 define 用法不属于 CMD 规范,而属于 Modules/Transport 规范。---来自:https://github.com/seajs/seajs/issues/242)。

AMD也可以在factory中使用require来现加载用到的模块,但是这个模块就不会预先加载,属于用到才加载的同步加载了。

var a = require('a'); // 加载模块a

有不妥之处,欢迎斧正。

以上这篇浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 #Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 #Javascript
js获取时间精确到秒(年月日)
Mar 16 #Javascript
js实现内容显示并使用json传输数据
Mar 16 #Javascript
javascript中arguments,callee,caller详解
Mar 16 #Javascript
Bootstrap每天必学之滚动监听
Mar 16 #Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 #Javascript
You might like
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
编写strcpy函数
2014/06/24 面试题
string = null 和string = ''的区别
2013/04/28 面试题
如何进行有效的自我评价
2013/09/27 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
单位绩效考核方案
2014/05/11 职场文书
企业形象策划方案
2014/05/29 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏
Python OpenCV之常用滤波器使用详解
2022/04/07 Python