Sea.js 是一個成熟的開源項目,核心目標(biāo)是給前端開發(fā)提供簡單傀顾、極致的模塊化開發(fā)體驗裳凸。使用 Sea.js,在書寫文件時缤至,需要遵守 CMD (Common Module Definition)模塊定義規(guī)范潮罪。一個文件就是一個模塊康谆。以下面的例子簡單對Sea.js的使用做一個描述:
注意:在頁面中想要使用某個組件時,只要通過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é)議開頭的絕對路徑惧蛹。