前端模塊化開發(fā)--Sea.js

Sea.js 是一個成熟的開源項目,核心目標(biāo)是給前端開發(fā)提供簡單傀顾、極致的模塊化開發(fā)體驗裳凸。使用 Sea.js,在書寫文件時缤至,需要遵守 CMD (Common Module Definition)模塊定義規(guī)范潮罪。一個文件就是一個模塊康谆。以下面的例子簡單對Sea.js的使用做一個描述:

? ? ? ?我們通過?require('./util.js')?就可以拿到 util.js 中通過?exports?暴露的接口。這里的?require?可以認為是? ? ? Sea.js 給 JavaScript 語言增加的一個?語法關(guān)鍵字嫉到,通過?require?可以獲取其他模塊提供的接口沃暗。Sea.js? 增加的?require?語法關(guān)鍵字,就如 CSS 文件中的?@import?一樣何恶,給我們的源碼賦予了依賴引入功能孽锥。

注意:在頁面中想要使用某個組件時,只要通過seajs.use()方法調(diào)用细层。

使用Sea.js進行模塊化開發(fā)的優(yōu)點主要是以下幾點:

1.解決了命名沖突和依賴管理惜辑;

2.模塊的版本管理(通過別名的配置,加上構(gòu)建工具疫赎,實現(xiàn)模塊的版本管理)盛撑;

3.提高可維護性(模塊化使得Sea.js職責(zé)單一,利于代碼維護捧搞,此外還擁有代碼調(diào)試和一些方便高效的nocache抵卫、debug插件);

4.前端性能優(yōu)化(異步加載模塊胎撇,優(yōu)化頁面性能)介粘;

5.跨環(huán)境共享模塊(通過 Sea.js 的 Node.js 版本,可以很方便實現(xiàn)模塊的跨服務(wù)器和瀏覽器共享)

Sea.js的一些常用API:

seajs.config? ? ?用來配置Sea.js

seajs.use? ? ? ?用來加載一個或多個模塊

//?加載一個模塊

seajs.use('./a');

//?加載一個模塊创坞,在加載完成時碗短,執(zhí)行回調(diào)

seajs.use('./a',?function(a)?{

??a.doSomething();

});

//?加載多個模塊,在加載完成時题涨,執(zhí)行回調(diào)

seajs.use(['./a',?'./b'],?function(a,?b)?{

??a.doSomething();

??b.doSomething();

});

define? ?用來定義模塊

define(function(require,?exports,?module)?{??//?模塊代碼});?

注意:require 偎谁,?export,?module三個參數(shù)可以不全存在纲堵。

require? ?用來獲取模塊

require.async? ? 用來在模塊內(nèi)部異步加載一個或多個模塊

exports? ? 用來在模塊內(nèi)部對外提供接口

module.exports? ?與exports類似巡雨,用來在模塊內(nèi)部對外提供接口

CMD 模塊定義規(guī)范

define? Function? ?是一個全局函數(shù),用來定義模塊

define?define(factory)

define?接受?factory?參數(shù)席函,factory?可以是一個函數(shù)铐望,也可以是一個對象或字符串。如果是一個函數(shù)的話茂附,表示是模塊的構(gòu)造方法正蛙,執(zhí)行該構(gòu)造方法可以得到模塊向外提供的接口。factory?方法在執(zhí)行時营曼,默認會傳入三個參數(shù):require乒验、exports?和?module:

define(function(require,?exports,?module)?{??//?模塊代碼});

define.cmd?Object

一個空對象,可用來判定當(dāng)前頁面是否有 CMD 模塊加載器:

if?(typeof?define?===?"function"?&&?define.cmd)?{??//?有?Sea.js?等?CMD?模塊加載器存在}

模塊標(biāo)識??

????????模塊標(biāo)識是一個字符串蒂阱,用來標(biāo)識模塊锻全。在?require狂塘、?require.async?等加載函數(shù)中,第一個參數(shù)都是模塊標(biāo)識鳄厌。

Sea.js 中的模塊標(biāo)識是?CommonJS 模塊標(biāo)識?的超集:

1.一個模塊標(biāo)識由斜線(/)分隔的多項組成荞胡。

2.每一項必須是小駝峰字符串、?.?或?..?了嚎。

3.模塊標(biāo)識可以不包含文件后綴名泪漂,比如?.js?。

4.模塊標(biāo)識可以是?相對?或?頂級?標(biāo)識新思。如果第一項是?.?或?..窖梁,則該模塊標(biāo)識是相對標(biāo)識。

5.頂級標(biāo)識根據(jù)模塊系統(tǒng)的基礎(chǔ)路徑來解析夹囚,相對標(biāo)識相對?require?所在模塊的路徑來解析纵刘。

注意,符合上述規(guī)范的標(biāo)識肯定是 Sea.js 的模塊標(biāo)識荸哟,但 Sea.js 能識別的模塊標(biāo)識不需要完全符合以上規(guī)范假哎。 比如,除了大小寫字母組成的小駝峰字符串鞍历,Sea.js 的模塊標(biāo)識字符串還可以包含下劃線(_)和連字符(-)舵抹, 甚至可以是?http://、https://劣砍、file:///?等協(xié)議開頭的絕對路徑惧蛹。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市刑枝,隨后出現(xiàn)的幾起案子香嗓,更是在濱河造成了極大的恐慌,老刑警劉巖装畅,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件靠娱,死亡現(xiàn)場離奇詭異,居然都是意外死亡掠兄,警方通過查閱死者的電腦和手機像云,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚂夕,“玉大人迅诬,你說我怎么就攤上這事⌒鲭梗” “怎么了侈贷?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長牍汹。 經(jīng)常有香客問我铐维,道長,這世上最難降的妖魔是什么慎菲? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任嫁蛇,我火速辦了婚禮,結(jié)果婚禮上露该,老公的妹妹穿的比我還像新娘睬棚。我一直安慰自己,他們只是感情好解幼,可當(dāng)我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布抑党。 她就那樣靜靜地躺著,像睡著了一般撵摆。 火紅的嫁衣襯著肌膚如雪底靠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天特铝,我揣著相機與錄音暑中,去河邊找鬼。 笑死鲫剿,一個胖子當(dāng)著我的面吹牛鳄逾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播灵莲,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼雕凹,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了政冻?” 一聲冷哼從身側(cè)響起枚抵,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎赠幕,沒想到半個月后俄精,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡榕堰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年竖慧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逆屡。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡圾旨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出魏蔗,到底是詐尸還是另有隱情砍的,我是刑警寧澤,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布莺治,位于F島的核電站廓鞠,受9級特大地震影響帚稠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜床佳,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一滋早、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砌们,春花似錦杆麸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至影兽,卻和暖如春揭斧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背赢笨。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工未蝌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人茧妒。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓萧吠,卻偏偏與公主長得像,于是被迫代替她去往敵國和親桐筏。 傳聞我的和親對象是個殘疾皇子纸型,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,047評論 2 355

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