淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
這是一篇關(guān)于javascript模塊化AMD,CMD,CommonJS的學(xué)習(xí)總結(jié),作為記錄也給同樣對三種方式有疑問的童鞋們,有不對或者偏差之處,望各位大神指出,不勝感激。
本篇默認(rèn)讀者大概知道require,seajs的用法(AMD,CMD用法),所以沒有加入使用語法。
1、為何而生:
這三個(gè)規(guī)范都是為javascript模塊化加載而生的,都是在用到或者預(yù)計(jì)要用到某些模塊時(shí)候加載該模塊,使得大量的系統(tǒng)巨大的龐雜的代碼得以很好的組織和管理。模塊化使得我們在使用和管理代碼的時(shí)候不那么混亂,而且也方便了多人的合作。
2、那些規(guī)范們:
(1)、CommonJS 是一個(gè)有志于構(gòu)建 JavaScript 生態(tài)圈的組織。整個(gè)社區(qū)致力于提高 JavaScript 程序的可移植性和可交換性,無論是在服務(wù)端還是瀏覽器端。
a group with a goal of building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.
一個(gè)有目標(biāo)的構(gòu)建JavaScript生態(tài)系統(tǒng)Web服務(wù)器組,在瀏覽器和命令行應(yīng)用程序和桌面。(他自己wiki上這么說的)
這個(gè)組織呢制定了一些規(guī)范 (可以去他們網(wǎng)站看看 http://www.commonjs.org/)包括CommonJS Modules/1.0 規(guī)范,我們平時(shí)所說的commonjs規(guī)范,說的就是這個(gè)了。
“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是一個(gè)更偏向于服務(wù)器端的規(guī)范。Node.js采用了這個(gè)規(guī)范。 根據(jù)CommonJS規(guī)范,一個(gè)單獨(dú)的文件就是一個(gè)模塊。加載模塊使用require方法,該方法讀 取一個(gè)文件并執(zhí)行,最后返回文件內(nèi)部的exports對象。
他又說了,可以用在下面這些場景 ,所以他更明顯的偏向服務(wù)器端。當(dāng)然你也可以把它用在瀏覽器里邊(他們自己說可以)。
•Server-side JavaScript applications
•Command line tools
•Desktop GUI-based applications
•Hybrid applications (Titanium, Adobe AIR)
(2)、AMD規(guī)范
Commonjs解決了模塊化的問題,并且可以用在瀏覽器中,但是Commonjs是同步加載模塊,當(dāng)要用到該模塊了,現(xiàn)加載現(xiàn)用,這種同步機(jī)制到了瀏覽器里邊就有問題了,加載速度啊啥的(覽器同步加載模塊會導(dǎo)致性能、可用性、調(diào)試和跨域訪問等問題)。
鑒于瀏覽器的特殊情況,又出現(xiàn)了一個(gè)規(guī)范,這個(gè)規(guī)范呢可以實(shí)現(xiàn)異步加載依賴模塊,并且會提前加載那就是AMD規(guī)范。AMD可以作為CommonJS模塊一個(gè)中轉(zhuǎn)的版本只要CommonJS沒有被用來同步的require調(diào)用。使用同步require調(diào)用的CommonJS代碼可以被轉(zhuǎn)換為使用回調(diào)風(fēng)格的AMD模塊加載器(https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88) (它說的)。
下面是一個(gè)使用了簡單CommonJS轉(zhuǎn)換的模塊定義(它是amd規(guī)范的一種用法):
define(function (require, exports, module) {
var a = require('a'),
b = require('b');
exports.action = function () {};
});
所以說AMD和Commonjs是兼容的,只要稍稍調(diào)換一下調(diào)用方法就實(shí)現(xiàn)了同步加載(我很懷疑amd也是在commonjs基礎(chǔ)上加了個(gè)殼,然后并沒有找到其他的神馬說明和支持的文字,找到了一定加到這)。
看一下AMD規(guī)范你會發(fā)現(xiàn),AMD基本都是提前說明依賴模塊,然后預(yù)加載這些模塊,實(shí)際上這就要求你提前想好這些依賴,提前寫好,不然寫代碼過程中要回到開頭繼續(xù)添加依賴。
(3)、CMD
不知道是不是針對這個(gè)問題,淘寶的玉伯大牛搞了個(gè)seajs出來,并聲稱這個(gè)規(guī)范是遵循CMD規(guī)范的,然后給出了這個(gè)規(guī)范的一個(gè)連接(打開會發(fā)現(xiàn)draft字樣)。關(guān)于這個(gè)規(guī)范呢玉伯在知乎是這么說的
”AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
類似的還有 CommonJS Modules/2.0 規(guī)范,是 BravoJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
還有不少⋯⋯
“
所以這個(gè)規(guī)范實(shí)際上是為了Seajs的推廣然后搞出來的。那么看看SeaJS是怎么回事兒吧,基本就是知道這個(gè)規(guī)范了。
同樣Seajs也是預(yù)加載依賴js跟AMD的規(guī)范在預(yù)加載這一點(diǎn)上是相同的,明顯不同的地方是調(diào)用,和聲明依賴的地方。AMD和CMD都是用difine和require,但是CMD標(biāo)準(zhǔn)傾向于在使用過程中提出依賴,就是不管代碼寫到哪突然發(fā)現(xiàn)需要依賴另一個(gè)模塊,那就在當(dāng)前代碼用require引入就可以了,規(guī)范會幫你搞定預(yù)加載,你隨便寫就可以了。但是AMD標(biāo)準(zhǔn)讓你必須提前在頭部依賴參數(shù)部分寫好(沒有寫好? 倒回去寫好咯)。這就是最明顯的區(qū)別。
3、共生共處
由于CommonJS是服務(wù)器端的規(guī)范,更另外兩個(gè)標(biāo)準(zhǔn)實(shí)際不沖突。
AMD在國外用的更多,當(dāng)然國內(nèi)也是不少的,jQuery1,7版本開始使用,Dojo在1.6版本開始用,這已經(jīng)能夠證明它足夠牛x了。
CMD當(dāng)然也有很多人在用,但是基本都集中在國內(nèi),Seajs官網(wǎng)就展示了一大堆牛逼的公司在用(包括愛奇藝,騰訊微博,支付寶,淘寶等一大堆,去這看看http://seajs.org/docs/),估計(jì)小的不出名的也不計(jì)其數(shù)了,畢竟很多公司招聘都要求會seajs嘛。
所以三個(gè)規(guī)范目前都挺好(其實(shí)也主要是因?yàn)閖s么有自己的模塊加載機(jī)制,es6出來之后不知道會怎樣)。
當(dāng)我們寫一個(gè)文件需要兼容不同的加載規(guī)范的時(shí)候怎么辦呢,看看下面的代碼。
(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(){}; // 私有方法,因?yàn)樗鼪]被返回 (見下面) function b(){}; // 公共方法,因?yàn)楸环祷亓? function c(){}; // 公共方法,因?yàn)楸环祷亓? // 暴露公共方法 return { b: b, c: c } }));
這個(gè)代碼可以兼容各種加載規(guī)范了。
4、AMD和CMD的區(qū)別
下面這幾點(diǎn)是玉伯在知乎上說的。
1. 對于依賴的模塊,AMD 是提前執(zhí)行,CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始,也改成可以延遲執(zhí)行(根據(jù)寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.
2. CMD 推崇依賴就近,AMD 推崇依賴前置。
3. AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用,CMD 的 API 嚴(yán)格區(qū)分,推崇職責(zé)單一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,沒有全局 require,而是根據(jù)模塊系統(tǒng)的完備性,提供 seajs.use 來實(shí)現(xiàn)模塊系統(tǒng)的加載啟動。CMD 里,每個(gè) API 都簡單純粹。
4. 還有一些細(xì)節(jié)差異,具體看這個(gè)規(guī)范的定義就好,就不多說了。
( 好吧~第四點(diǎn)是不多說了。。。。。。。。。)
5、AMD和CMD的一些相同
都有difine和require,而且調(diào)用方式實(shí)際都可以添加依賴參數(shù),也就是說都可以用提供依賴參數(shù)的方式來實(shí)現(xiàn)預(yù)加載依賴模塊(但是不推薦因?yàn)?nbsp; 注意:帶 id 和 deps 參數(shù)的 define 用法不屬于 CMD 規(guī)范,而屬于 Modules/Transport 規(guī)范。---來自:https://github.com/seajs/seajs/issues/242)。
AMD也可以在factory中使用require來現(xiàn)加載用到的模塊,但是這個(gè)模塊就不會預(yù)先加載,屬于用到才加載的同步加載了。
var a = require('a'); // 加載模塊a
有不妥之處,歡迎斧正。
以上這篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫
下面小編就為大家?guī)硪黄獪\談js繼承的實(shí)現(xiàn)及公有、私有、靜態(tài)方法的書寫。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10微信小程序五子棋游戲AI實(shí)現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲AI實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了五子棋游戲中人機(jī)對戰(zhàn)的AI原理及相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02關(guān)于Javascript 對象(object)的prototype
Javascript中的每個(gè)對象(object)都會有 prototype,下面為大家介紹下其具體的應(yīng)用2014-05-05Electron應(yīng)用顯示隱藏時(shí)展示動畫效果實(shí)例
最近使用electron實(shí)現(xiàn)一個(gè)簡單的功能,下面這篇文章主要給大家介紹了關(guān)于Electron應(yīng)用顯示隱藏時(shí)展示動畫效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的驗(yàn)證身份證及獲取地區(qū)功能,結(jié)合實(shí)例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下2017-01-01javascript級聯(lián)下拉列表實(shí)例代碼(自寫)
javascript下拉菜單想必大家在瀏覽網(wǎng)頁的時(shí)候都會看到吧,已不是那么陌生了,本文介紹使用javascript實(shí)現(xiàn)級聯(lián)下拉列表實(shí)例,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05