前端模塊化重點摘要
阿新 • • 發佈：2018-03-02
解決 blog OS 依賴 這就是 需要 define 回調函數 規範
（5）解決思路是用一套標準模板來封裝模塊定義，但是對於模塊應該怎麽定義和怎麽加載，又產生的分歧：AMD和CMD
4、AMD：異步模塊定義的意思，在瀏覽器端模塊開發的典範——RequireJS
（1）RequireJS主要解決2個問題：多個js文件可能有依賴關系，被依賴的文件需要早於依賴它的文件加載到瀏覽器；js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長
（2）requireJS語法：define(id,[依賴的模塊名數組]，模塊初始化要執行的函數或對象)定義
（3）頁面加載：require([所依賴的模塊數組]，回調函數)；加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊
require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，才會運行，解決了依賴性的問題。
5、AMD與CMD區別：
（1）最明顯的區別就是在模塊定義時對依賴的處理不同：AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊；CMD推崇就近依賴，只有在用到某個模塊的時候再去require
（2）AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，註意不是加載的時機或者方式不同。都是異步加載模塊，AMD在加載模塊完成後就會執行該模塊，所有模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網絡速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴加載完成後才執行。CMD加載完某個依賴模塊後並不執行，只是下載而已，在所有依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是完全一致的。這也是很多人說AMD用戶體驗好，因為沒有延遲，依賴模塊提前執行了；CMD性能好，因為只有用戶需要的時候才執行的原因。
6、理解JS中的模塊規範
（1）函數封裝放入util.js，容易命名沖突
（2）參照java引入命名空間
（3）Yui的沙箱機制，已經類似於require了，但是引入多個模塊時，無法解決方法到底是那個模塊提供的問題
（4）開發通用組件時繁瑣的文件依賴關系
（5）命名沖突和文件依賴，是前端開發過程中的兩個經典問題。模塊化開發主要就是為了解決這2個問題
7、AMD規範誕生的背景：
require是同步的，這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對於瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。因此，瀏覽器端的模塊，不能采用"同步加載"，只能采用"異步加載"。這就是AMD規範誕生的背景。
8、requireJS的使用
（1）加載引用文件方式：defer、async="true"，表明文件異步加載
（2）data-main="js/main"屬性指定網頁程序的主模塊，類似C或Java語言中main函數的功能
（3）主模塊寫法：
主模塊依賴於其他模塊，使用AMD規範定義的require()函數
require([A,B,C依賴模塊數組],function(A,B,C模塊以參數傳入回調函數){})
（4）模塊的加載：
require.config()方法，對模塊的加載行為進行自定義。
require.config()寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。
逐一制定路徑、或指定基路徑（baseUrl）、還可以直接指定網址
（5）模塊的寫法：define()函數
不依賴其他模塊寫法、依賴其他模塊的寫法
（6）加載非規範模塊：
require.config()方法的shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義：1、exports值（輸出的變量名），表明這個模塊外部調用時的名稱；2、deps數組，表明該模塊的依賴性。
（7）一系列插件：domready、text、image、json等
1、模塊：類比於java裏面包的概念
一個模塊就是實現特定功能的文件，模塊化開發就是想要什麽功能就加載什麽模塊
2、模塊的發展歷程：
函數封裝
對象：把所有模塊成員封裝在對象中，調用就對象.方法（缺點外部可以隨意更改對象內部的值）
立即執行函數：這樣外部就無法修改我們沒有露出來的變量和函數，這也是模塊化的基礎
3、CommonJS：
（1）定義模塊：一個文件就是一個模塊，一個模塊就是一個作用域
（2）模塊輸出：module.exports對象，輸出的內容放入該對象
（3）加載模塊：require方法，讀取文件並執行，返回文件內部的module.exports對象
（4）尷尬的瀏覽器，require是同步的，模塊系統需要同步讀取模塊文件內容，並編譯執行以得到模塊接口，瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script標簽，但腳本標簽天生異步，傳統CommonJS模塊在瀏覽器環境中無法正常加載。
（5）解決思路是用一套標準模板來封裝模塊定義，但是對於模塊應該怎麽定義和怎麽加載，又產生的分歧：AMD和CMD
4、AMD：異步模塊定義的意思，在瀏覽器端模塊開發的典範——RequireJS
（1）RequireJS主要解決2個問題：多個js文件可能有依賴關系，被依賴的文件需要早於依賴它的文件加載到瀏覽器；js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長
（2）requireJS語法：define(id,[依賴的模塊名數組]，模塊初始化要執行的函數或對象)定義
（3）頁面加載：require([所依賴的模塊數組]，回調函數)；加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊
require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，才會運行，解決了依賴性的問題。
5、AMD與CMD區別：
（1）最明顯的區別就是在模塊定義時對依賴的處理不同：AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊；CMD推崇就近依賴，只有在用到某個模塊的時候再去require
（2）AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，註意不是加載的時機或者方式不同。都是異步加載模塊，AMD在加載模塊完成後就會執行該模塊，所有模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網絡速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴加載完成後才執行。CMD加載完某個依賴模塊後並不執行，只是下載而已，在所有依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是完全一致的。這也是很多人說AMD用戶體驗好，因為沒有延遲，依賴模塊提前執行了；CMD性能好，因為只有用戶需要的時候才執行的原因。
6、理解JS中的模塊規範
（1）函數封裝放入util.js，容易命名沖突
（2）參照java引入命名空間
（3）Yui的沙箱機制，已經類似於require了，但是引入多個模塊時，無法解決方法到底是那個模塊提供的問題
（4）開發通用組件時繁瑣的文件依賴關系
（5）命名沖突和文件依賴，是前端開發過程中的兩個經典問題。模塊化開發主要就是為了解決這2個問題
7、AMD規範誕生的背景：
require是同步的，這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對於瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。因此，瀏覽器端的模塊，不能采用"同步加載"，只能采用"異步加載"。這就是AMD規範誕生的背景。
8、requireJS的使用
（1）加載引用文件方式：defer、async="true"，表明文件異步加載
（2）data-main="js/main"屬性指定網頁程序的主模塊，類似C或Java語言中main函數的功能
（3）主模塊寫法：
主模塊依賴於其他模塊，使用AMD規範定義的require()函數
require([A,B,C依賴模塊數組],function(A,B,C模塊以參數傳入回調函數){})
（4）模塊的加載：
require.config()方法，對模塊的加載行為進行自定義。
require.config()寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。
逐一制定路徑、或指定基路徑（baseUrl）、還可以直接指定網址
（5）模塊的寫法：define()函數
不依賴其他模塊寫法、依賴其他模塊的寫法
（6）加載非規範模塊：
require.config()方法的shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義：1、exports值（輸出的變量名），表明這個模塊外部調用時的名稱；2、deps數組，表明該模塊的依賴性。
（7）一系列插件：domready、text、image、json等
前端模塊化重點摘要