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

Sea.js 是一個(gè)成熟的開源項(xiàng)目,核心目標(biāo)是給前端開發(fā)提供簡單、極致的模塊化開發(fā)體驗(yàn)。使用 Sea.js,在書寫文件時(shí),需要遵守 CMD (Common Module Definition)模塊定義規(guī)范。一個(gè)文件就是一個(gè)模塊。以下面的例子簡單對Sea.js的使用做一個(gè)描述:

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

注意:在頁面中想要使用某個(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é)議開頭的絕對路徑。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容