js模塊化規(guī)范 AMD,CMD,CommonJS碉熄,ES6+npm

什么是 JavaScript 模塊桨武?

JavaScript 模塊允許我們把項(xiàng)目中的代碼分散成一個(gè)個(gè)單獨(dú)的文件,或者使用通過 npm 安裝的開源模塊具被。用模塊化的方式寫代碼有助于(項(xiàng)目的)組織玻募、維護(hù)、測(cè)試一姿,以及最重要的依賴管理。

當(dāng)我們編寫 JavaScript 時(shí)跃惫,理想情況是保障每個(gè)模塊都專注一件事并把這件事做好叮叹。這種分工可以讓我們?cè)谛枰硞€(gè)模塊時(shí)再去做相應(yīng)的加載。模塊化是是 npm 背后的核心原則爆存。當(dāng)需要某個(gè)特定的功能時(shí)蛉顽,我們能安裝相應(yīng)的模塊并加載到應(yīng)用當(dāng)中。## 什么是 JavaScript 模塊先较?

JavaScript 模塊允許我們把項(xiàng)目中的代碼分散成一個(gè)個(gè)單獨(dú)的文件携冤,或者使用通過 [npm](https://www.npmjs.com/) 安裝的開源模塊。用模塊化的方式寫代碼有助于(項(xiàng)目的)組織闲勺、維護(hù)曾棕、測(cè)試,以及最重要的依賴管理菜循。

當(dāng)我們編寫 JavaScript 時(shí)翘地,理想情況是保障每個(gè)模塊都專注一件事并把這件事做好。這種分工可以讓我們?cè)谛枰硞€(gè)模塊時(shí)再去做相應(yīng)的加載癌幕。模塊化是是 npm 背后的核心原則衙耕。當(dāng)需要某個(gè)特定的功能時(shí),我們能安裝相應(yīng)的模塊并加載到應(yīng)用當(dāng)中勺远。

ES6+npm:

http://web.jobbole.com/87536/

CommonJS

CommonJS規(guī)范是誕生比較早的橙喘。NodeJS就采用了CommonJS。是這樣加載模塊:

var clock = require('clock');
clock.start();

這種寫法適合服務(wù)端胶逢,因?yàn)樵诜?wù)器讀取模塊都是在本地磁盤厅瞎,加載速度很快。但是如果在客戶端宪塔,加載模塊的時(shí)候有可能出現(xiàn)“假死”狀況磁奖。比如上面的例子中clock的調(diào)用必須等待clock.js請(qǐng)求成功,加載完畢某筐。那么比搭,能不能異步加載模塊呢?

AMD

AMD,即 (Asynchronous Module Definition)身诺,這種規(guī)范是異步的加載模塊蜜托,requireJs應(yīng)用了這一規(guī)范。先定義所有依賴霉赡,然后在加載完成后的回調(diào)函數(shù)中執(zhí)行:

require([module], callback);

用AMD寫上一個(gè)模塊:

require(['clock'],function(clock){
clock.start();
});

AMD雖然實(shí)現(xiàn)了異步加載橄务,但是開始就把所有依賴寫出來(lái)是不符合書寫的邏輯順序的,能不能像commonJS那樣用的時(shí)候再require穴亏,而且還支持異步加載后再執(zhí)行呢蜂挪?

CMD

CMD (Common Module Definition), 是seajs推崇的規(guī)范,CMD則是依賴就近嗓化,用的時(shí)候再require棠涮。它寫起來(lái)是這樣的:

define(function(require, exports, module) {
var clock = require('clock');
clock.start();
});

AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同,而不是加載的時(shí)機(jī)或者方式不同刺覆,二者皆為異步加載模塊严肪。
AMD依賴前置,js可以方便知道依賴模塊是誰(shuí)谦屑,立即加載驳糯;而CMD就近依賴,需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K氢橙,這也是很多人詬病CMD的一點(diǎn)酝枢,犧牲性能來(lái)帶來(lái)開發(fā)的便利性,實(shí)際上解析模塊用的時(shí)間短到可以忽略充蓝。

requireJS和SeaJS的不同
不同之處

兩者的主要區(qū)別如下:

定位有差異隧枫。RequireJS 想成為瀏覽器端的模塊加載器,同時(shí)也想成為 Rhino / Node 等環(huán)境的模塊加載器谓苟。Sea.js 則專注于 Web 瀏覽器端官脓,同時(shí)通過 Node 擴(kuò)展的方式可以很方便跑在 Node 環(huán)境中。
遵循的規(guī)范不同涝焙。RequireJS 遵循 AMD(異步模塊定義)規(guī)范卑笨,Sea.js 遵循 CMD (通用模塊定義)規(guī)范。規(guī)范的不同仑撞,導(dǎo)致了兩者 API 不同赤兴。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規(guī)范。
推廣理念有差異隧哮。RequireJS 在嘗試讓第三方類庫(kù)修改自身來(lái)支持 RequireJS桶良,目前只有少數(shù)社區(qū)采納。Sea.js 不強(qiáng)推沮翔,采用自主封裝的方式來(lái)“海納百川”陨帆,目前已有較成熟的封裝策略。
對(duì)開發(fā)調(diào)試的支持有差異。Sea.js 非常關(guān)注代碼的開發(fā)調(diào)試疲牵,有 nocache承二、debug 等用于調(diào)試的插件。RequireJS 無(wú)這方面的明顯支持纲爸。
插件機(jī)制不同亥鸠。RequireJS 采取的是在源碼中預(yù)留接口的形式,插件類型比較單一识啦。Sea.js 采取的是通用事件機(jī)制负蚊,插件類型更豐富。

還有不少差異颓哮,涉及具體使用方式和源碼實(shí)現(xiàn)盖桥,歡迎有興趣者研究并發(fā)表看法。

總之题翻,如果說(shuō) RequireJS 是 Prototype 類庫(kù)的話,則 Sea.js 致力于成為 jQuery 類庫(kù)腰鬼。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嵌赠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子熄赡,更是在濱河造成了極大的恐慌姜挺,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彼硫,死亡現(xiàn)場(chǎng)離奇詭異炊豪,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)拧篮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門词渤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人串绩,你說(shuō)我怎么就攤上這事缺虐。” “怎么了礁凡?”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵高氮,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我顷牌,道長(zhǎng)剪芍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任窟蓝,我火速辦了婚禮罪裹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己坊谁,他們只是感情好费彼,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著口芍,像睡著了一般箍铲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鬓椭,一...
    開封第一講書人閱讀 49,036評(píng)論 1 285
  • 那天颠猴,我揣著相機(jī)與錄音,去河邊找鬼小染。 笑死翘瓮,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的裤翩。 我是一名探鬼主播资盅,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼踊赠!你這毒婦竟也來(lái)了呵扛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤筐带,失蹤者是張志新(化名)和其女友劉穎今穿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伦籍,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蓝晒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了帖鸦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芝薇。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖富蓄,靈堂內(nèi)的尸體忽然破棺而出剩燥,到底是詐尸還是另有隱情,我是刑警寧澤立倍,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布灭红,位于F島的核電站,受9級(jí)特大地震影響口注,放射性物質(zhì)發(fā)生泄漏变擒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一寝志、第九天 我趴在偏房一處隱蔽的房頂上張望娇斑。 院中可真熱鬧策添,春花似錦、人聲如沸毫缆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)苦丁。三九已至浸颓,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間旺拉,已是汗流浹背产上。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蛾狗,地道東北人晋涣。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像沉桌,于是被迫代替她去往敵國(guó)和親谢鹊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容