這次要記錄的是一個很簡單的但是基本符合AMD規(guī)范的瀏覽器端模塊加載工具的開發(fā)流程。因為自從使用過require.js、webpack等模塊化加載工具之后就一直對它的實現(xiàn)原理很好奇，于是稍微研究了一下。
實現(xiàn)的方法有許多，但簡單實現(xiàn)的話大致都會實現(xiàn)出以下的兩個方法：
1 實現(xiàn)模塊的加載。從主模塊說起，我們需要通過一個入口來加載我們的主模塊的依賴模塊，同時在加載完依賴之后，能夠取得所依賴模塊的返回值，并將它們傳入主模塊代碼中，再去執(zhí)行我們的主模塊代碼。函數(shù)入口類似于這樣的形式：
require([ dependents ], function( ){ // 主模塊代碼})至于如何去加載我們的依賴模塊，這里一般可以有兩種處理方式，一種是通過Ajax請求依賴模塊，一種是為依賴模塊動態(tài)創(chuàng)建 script 標(biāo)簽加載依賴模塊，在這里我只選擇第二種方式，不過如果你需要加載文本文件或者JSON文件的話，還是需要采用Ajax加載的方式，但這里為了簡單處理我們不考慮這種情況。
所以我們會遍歷主模塊的依賴數(shù)組，對依賴模塊的路徑做簡單的處理之后，動態(tài)創(chuàng)建 script 標(biāo)簽加載每一個依賴模塊。所謂的加載模塊，其本質(zhì)便是通過網(wǎng)絡(luò)請求將模塊 Fetch 到本地。通過 script 標(biāo)簽加載資源有兩個特點：
1.1 script 標(biāo)簽加載到JS代碼之后會立即執(zhí)行這一段代碼。JSONP也利用了 script 標(biāo)簽的這個特點。
1.2 可以通過 script.onload 和 script.onerror 監(jiān)聽模塊的加載狀況。我們只需要緩存對應(yīng)模塊的返回值即可，所以可以監(jiān)聽 script 標(biāo)簽的 onload 事件，在模塊緩存成功之后刪除對應(yīng)的 script 標(biāo)簽。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式