前端模塊加載解決方案: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