前端模塊化重點摘要

一、模塊：類比於java裏面包的概念
一個模塊就是實現特定功能的文件，模塊化開發就是想要什麼功能就加載什麼模塊
二、模塊的發展歷程：
函數封裝
對象：把全部模塊成員封裝在對象中，調用就對象.方法（缺點外部能夠隨意更改對象內部的值）
當即執行函數：這樣外部就沒法修改咱們沒有露出來的變量和函數，這也是模塊化的基礎
三、CommonJS：
（1）定義模塊：一個文件就是一個模塊，一個模塊就是一個做用域
（2）模塊輸出：module.exports對象，輸出的內容放入該對象
（3）加載模塊：require方法，讀取文件並執行，返回文件內部的module.exports對象
（4）尷尬的瀏覽器，require是同步的，模塊系統須要同步讀取模塊文件內容，並編譯執行以獲得模塊接口，瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script標籤，但腳本標籤天生異步，傳統CommonJS模塊在瀏覽器環境中沒法正常加載。
（5）解決思路是用一套標準模板來封裝模塊定義，可是對於模塊應該怎麼定義和怎麼加載，又產生的分歧：AMD和CMD
四、AMD：異步模塊定義的意思，在瀏覽器端模塊開發的典範——RequireJS
（1）RequireJS主要解決2個問題：多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器；js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長
（2）requireJS語法：define(id,[依賴的模塊名數組]，模塊初始化要執行的函數或對象)定義
（3）頁面加載：require([所依賴的模塊數組]，回調函數)；加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊
require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。
五、AMD與CMD區別：
（1）最明顯的區別就是在模塊定義時對依賴的處理不一樣：AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊；CMD推崇就近依賴，只有在用到某個模塊的時候再去require
（2）AMD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，注意不是加載的時機或者方式不一樣。都是異步加載模塊，AMD在加載模塊完成後就會執行該模塊，全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定在全部依賴加載完成後才執行。CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的。這也是不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了；CMD性能好，由於只有用戶須要的時候才執行的緣由。
六、理解JS中的模塊規範
（1）函數封裝放入util.js，容易命名衝突
（2）參照java引入命名空間
（3）Yui的沙箱機制，已經相似於require了，可是引入多個模塊時，沒法解決方法究竟是那個模塊提供的問題
（4）開發通用組件時繁瑣的文件依賴關係
（5）命名衝突和文件依賴，是前端開發過程當中的兩個經典問題。模塊化開發主要就是爲了解決這2個問題
七、AMD規範誕生的背景：
require是同步的，這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。所以，瀏覽器端的模塊，不能採用"同步加載"，只能採用"異步加載"。這就是AMD規範誕生的背景。
八、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屬性，專門用來配置不兼容的模塊。具體來講，每一個模塊要定義：一、exports值（輸出的變量名），代表這個模塊外部調用時的名稱；二、deps數組，代表該模塊的依賴性。
（7）一系列插件：domready、text、image、json等