1. 程式人生 > >前端模組化(AMD和CMD、CommonJs)

前端模組化(AMD和CMD、CommonJs)

知識點1:AMD/CMD/CommonJs是JS模組化開發的標準,目前對應的實現是RequireJs/SeaJs/nodeJs.

知識點2:CommonJs主要針對服務端,AMD/CMD主要針對瀏覽器端,所以最容易混淆的是AMD/CMD。(順便提一下,針對伺服器端和針對瀏覽器端有什麼本質的區別呢?伺服器端一般採用同步載入檔案,也就是說需要某個模組,伺服器端便停下來,等待它載入再執行。而瀏覽器端要保證效率,需要採用非同步載入,這就需要一個預處理,提前將所需要的模組檔案並行載入好。)

知識點3 : AMD/CMD區別,雖然都是並行載入js檔案,但還是有所區別,AMD是預載入,在並行載入js檔案同時,還會解析執行該模組(因為還需要執行,所以在載入某個模組前,這個模組的依賴模組需要先載入完成);而CMD是懶載入,雖然會一開始就並行載入js檔案,但是不會執行,而是在需要的時候才執行。

知識點4:AMD/CMD的優缺點.一個的優點就是另一個的缺點, 可以對照瀏覽。
AMD優點:載入快速,尤其遇到多個大檔案,因為並行解析,所以同一時間可以解析多個檔案。
AMD缺點:並行載入,非同步處理,載入順序不一定,可能會造成一些困擾,甚至為程式埋下大坑。
CMD優點:因為只有在使用的時候才會解析執行js檔案,因此,每個JS檔案的執行順序在程式碼中是有體現的,是可控的。
CMD缺點:執行等待時間會疊加。因為每個檔案執行時是同步執行(序列執行),因此時間是所有檔案解析執行時間之和,尤其在檔案較多較大時,這種缺點尤為明顯。

知識點5:如何使用?CommonJs的話,因為nodeJs就是它的實現,所以使用node就行,也不用引入其他包。AMD則是通過<script>標籤引入RequireJs。CMD則是引入SeaJs。