Sea.js 是一個(gè)成熟的開源項(xiàng)目,核心目標(biāo)是給前端開發(fā)提供簡單、極致的模塊化開發(fā)體驗(yàn)。使用 Sea.js,在書寫文件時(shí),需要遵守 CMD (Common Module Definition)模塊定義規(guī)范。一個(gè)文件就是一個(gè)模塊。以下面的例子簡單對Sea.js的使用做一個(gè)描述:
注意:在頁面中想要使用某個(gè)組件時(shí),只要通過seajs.use()方法調(diào)用。
使用Sea.js進(jìn)行模塊化開發(fā)的優(yōu)點(diǎn)主要是以下幾點(diǎn):
1.解決了命名沖突和依賴管理;
2.模塊的版本管理(通過別名的配置,加上構(gòu)建工具,實(shí)現(xiàn)模塊的版本管理);
3.提高可維護(hù)性(模塊化使得Sea.js職責(zé)單一,利于代碼維護(hù),此外還擁有代碼調(diào)試和一些方便高效的nocache、debug插件);
4.前端性能優(yōu)化(異步加載模塊,優(yōu)化頁面性能);
5.跨環(huán)境共享模塊(通過 Sea.js 的 Node.js 版本,可以很方便實(shí)現(xiàn)模塊的跨服務(wù)器和瀏覽器共享)
Sea.js的一些常用API:
seajs.config? ? ?用來配置Sea.js

seajs.use? ? ? ?用來加載一個(gè)或多個(gè)模塊
//?加載一個(gè)模塊
seajs.use('./a');
//?加載一個(gè)模塊,在加載完成時(shí),執(zhí)行回調(diào)
seajs.use('./a',?function(a)?{
??a.doSomething();
});
//?加載多個(gè)模塊,在加載完成時(shí),執(zhí)行回調(diào)
seajs.use(['./a',?'./b'],?function(a,?b)?{
??a.doSomething();
??b.doSomething();
});
define? ?用來定義模塊
define(function(require,?exports,?module)?{??//?模塊代碼});?
注意:require ,?export,?module三個(gè)參數(shù)可以不全存在。
require? ?用來獲取模塊
require.async? ? 用來在模塊內(nèi)部異步加載一個(gè)或多個(gè)模塊

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

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

CMD 模塊定義規(guī)范
define? Function? ?是一個(gè)全局函數(shù),用來定義模塊
define?define(factory)
define?接受?factory?參數(shù),factory?可以是一個(gè)函數(shù),也可以是一個(gè)對象或字符串。如果是一個(gè)函數(shù)的話,表示是模塊的構(gòu)造方法,執(zhí)行該構(gòu)造方法可以得到模塊向外提供的接口。factory?方法在執(zhí)行時(shí),默認(rèn)會(huì)傳入三個(gè)參數(shù):require、exports?和?module:
define(function(require,?exports,?module)?{??//?模塊代碼});
define.cmd?Object
一個(gè)空對象,可用來判定當(dāng)前頁面是否有 CMD 模塊加載器:
if?(typeof?define?===?"function"?&&?define.cmd)?{??//?有?Sea.js?等?CMD?模塊加載器存在}
模塊標(biāo)識??
????????模塊標(biāo)識是一個(gè)字符串,用來標(biāo)識模塊。在?require、?require.async?等加載函數(shù)中,第一個(gè)參數(shù)都是模塊標(biāo)識。
Sea.js 中的模塊標(biāo)識是?CommonJS 模塊標(biāo)識?的超集:
1.一個(gè)模塊標(biāo)識由斜線(/)分隔的多項(xiàng)組成。
2.每一項(xiàng)必須是小駝峰字符串、?.?或?..?。
3.模塊標(biāo)識可以不包含文件后綴名,比如?.js?。
4.模塊標(biāo)識可以是?相對?或?頂級?標(biāo)識。如果第一項(xiàng)是?.?或?..,則該模塊標(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é)議開頭的絕對路徑。