育知同創HTML5培訓技術分享—模塊化開發

模塊化開發概念

把JS文件劃分開，避免全部冗餘在一起

為什麼需要模塊化開發？

• 使文件更加清晰

• 模塊之間的可以互相引用

• html中引入JS更加方便快捷

AMD、CMD、CommonJS規範介紹

• AMD是RequireJS在推廣過程中對模塊定義的規範化產出

Asynchomous Module Definition（非同步模塊定義）

中文API

• CMD是Sea.JS在推廣過程中對模塊定義的規範化產出

• CommonJS是NodeJS使用的一種模塊化方式

RequireJS

• require.js是一個JavaScript文件和模塊載入器

• 實現了JS文件的非同步載入，避免網頁失去響應

• 管理模塊之間的依賴性，便於代碼的編寫與維護

RequireJS流程簡述

• 使用requirejs時，會把所有的js都交給requirejs來管理，把data-main指向main.js

• 通過在main.js裡面定義的require方法或者define方法，requirejs會把這些依賴和回調方法用一個數據結構保存起來

• 當頁面載入時，requirejs會根據這些依賴預先把需要的js通過document.createElement的方法引入到DOM中

• 由於依賴的JS也是按照requirejs的規範來寫的，所以他們也會有define或者require方法，同意類似的第二步這樣循環向上查找依賴，同樣進行保存

• 當js里需要用到依賴所返回的結果時（通常是一個鍵值對對象），requirejs便會把之前那個保存回調方法的數據結構裡面的方法拿出來並且運行，然後把結果給需要依賴的方法

特殊說明：本身依賴的模塊會比本身先載入

RequireJS基本使用非同步載入

同步載入，時間固定，按照代碼的位置來。如果是非同步載入，載入的時間不固定。

配置主模塊

app.js

變數名 require 和 requirejs完全一致

• baseUrl ：配置公共路徑

• paths ：路徑和名稱的映射關係

• shim ：解決模塊不支持requirejs和前置依賴等其它問題

引入模塊

定義模塊

模塊名稱的問題

命名模塊 | 匿名模塊

jQuery源碼，Line：9806

使用RequireJS定義模塊的時候，』define』函數有三個參數：

• 參數一，字元串，代表模塊的名稱，如果填寫了，則必須使用

• 參數二，當前模塊所依賴的其它模塊

• 參數三，回調函數，參數為依賴的模塊對應的映射