前端模塊加載解決方案:modJS

jopen 10年前發布 | 15K 次閱讀 modJS 前端技術

簡介

modJS是一套的前端模塊加載解決方案。與傳統的模塊加載相比,modJS會根據產品實際使用場景,自動選擇一種相應的方案,使最終的實現非常輕量簡潔。

使用

模塊的定義

  • modJS是一個精簡版的AMD/CMD規范,并不完全遵守AMD/CMD規范,目的在于希望給使用者提供一個類似nodeJS一樣的開發體驗,同時具備很好的線上性能。

使用define來定義一個模塊:

define (id, factory)

在平常開發中,我們只需寫factory中的代碼即可,無需手動定義模塊。發布工具會自動將模塊代碼嵌入factory的閉包里。

factory提供了3個參數:require, exports, module,用于模塊的引用和導出。

  • modJS的發布工具會保證你的程序在使用之前,所有依賴的模塊都已加載。因此當我們需要一個模塊時,只需提供一個模塊名即可獲取:

    require (id)

    和NodeJS里獲取模塊的方式一樣,非常簡單。

    因為所需的模塊都已預先加載,因此require可以立即返回該模塊。

  • 考慮到有些模塊無需在啟動時載入,因此modJS提供了可以在運行時異步加載模塊的接口:

    require.async (names, onload, onerror)

    names可以是一個模塊名,或者是數組形式的模塊名列表。

    當所有都加載都完成時,onload被調用,names對應的所有模塊實例將作為參數傳入。

    如果加載錯誤或者網絡超時,onerror將被觸發。

    超時時間可以通過require.timeout設置,默認為5000(ms)。

    使用require.async獲取的模塊不會被發布工具安排在預加載中,因此在完成回調之前require將會拋出模塊未定義錯誤。

    require.loadJs (url)

    異步加載腳本文件,不做任何回調

    require.loadCss ({url: cssfile})

    異步加載CSS文件,并添加到頁面

    require.loadCss ({content: csstext})

    創建一個樣式列表并將css內容寫入

說明

modJS只實現了AMD的一個子集,如果需要使用完整兼容AMD規范的版本,請使用amd目錄下的esl-mod.js,這個版本是基于esl版本基礎之上實現了fis的需求。

相關項目

自動化框架:fis

自動添加define插件:fis-postprocessor-jswrapper


項目主頁:
http://www.baiduhome.net/lib/view/home/1408695923959

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!