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

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

瀏覽器 預加載 執行順序 處理 大坑 不一定 同步 區別 seajs

知識點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。

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