js模組化/js模組載入器/js模組打包器

標籤：相關   web   缺點   bpa   comm   cmd   請求   rollup   低耦合   

之前對這幾個概念一直記得很模糊，也無法用自己的語言表達出來，今天看了大神的文章，嘗試根據自己的理解總結一下，算是一篇讀後感。

大神的文章：http://www.css88.com/archives/7628
（大神的文章寫的很詳細，建議先看完大神的文章）

一.js模組化

什麼是js模組化，我們從曆史說起。

1.一開始我們怎麼寫指令碼？就是在html檔案中用<script></script>寫代碼

這種方式的缺點：代碼複用靠複製,基本是全域變數。

2.後來我們用js檔案寫代碼，用<script></script>的src引入html,html/css/js分離

這種方式的缺點：

代碼雖然可複用,但是<script></script>越來越多，一個html檔案載入了好多js(http請求過多，影響效能),

全域變數也多,依賴關係也越來越複製,比如b依賴a,則a檔案一定要在b檔案之前載入

（這種方式的問題就是全域變數過多和依賴關係複雜）

3.為瞭解決全域對象的問題，我們進化到第三個階段，用模組對象和IIFE（立即執行函數）

這種方式的缺點：

雖然暴露的全域變數少了,只有這一個模組對象,可以說解決了汙染全域變數的問題,但是依賴關係還沒解決,因為IIFE依賴這個模組對象進行各個檔案的操作,就是說匯入匯出都靠這個模組對象。

（這個時候已經實現了js模組化，每個檔案都包在匿名函數中，所以說每個檔案都是一個模組，模組與模組之間的調用通過這個全域模組對象，這個時候的問題是，全域變數少了，但是相依模組沒解決，所有的js檔案都依賴全域模組對象，就是說這個全域模組對象要在其他js檔案之前引入，所以說我們下個方案就是解決依賴關係）

二.js模組載入器

新的模組化方案提出：解決了全域變數和依賴關係的問題，但是效能方面還可以最佳化。

commonJS規範的提出，讓人們有了新的方案來解決全域變數汙染和依賴關係複雜這兩個問題。（一開始是運行在伺服器端）。先讓我們瞭解下什麼是commonJS。

commonJS是一個規範,不是一個庫,他提出了模組化方案,定義了一個模組化的API,讓我們寫出模組化的js更容易，不再需要藉助IIFE。

用法：在一個js檔案中，用export匯出變數,用require匯入

//a.jsvar a=1;module.exports=a;//b.jsvar a=require(/a.js);

這種方式在伺服器端運行良好

但是有個問題，這種方式是同步啟動並執行，俗稱CMD（同步模組定義），（當然伺服器端去讀取檔案特別快，沒這個問題，不像瀏覽器端還要發請求去擷取），就是說當b.js在require(a.js)時，這個時候js代碼不會去往下執行，他必須等到a.js載入完才可以，如果a.js檔案特別大，那麼頁面就會卡死，為什嗎？（因為commonJS是同步啟動並執行,而js又是單線程的,會阻塞js檔案的渲染），所以說瀏覽器端不能用這種方案，，所以commonJS提出了AMD（非同步模組定義），就是擷取檔案是非同步，規範提出來了，但是在瀏覽器怎麼實現？業內大神造出了輪子，用的多的就是require.js和sea.js

RequireJS 和 SeaJS 是模組載入器

利用模組載入器，我們只有一個入口檔案，然後根據依賴關係去載入對應的js檔案，依賴關係在入口檔案寫好，（只有一個入口檔案，但是解析依賴關係的時候會去載入對應的相依模組，載入的js檔案就不止一個了）

兩者的區別:

1.兩者都是非同步載入js,只不過一個寫法遵循amd,一個寫法遵循cmd,其實都是讓瀏覽器支援模組化寫法的庫。

2.requirejs是無論模組需不需要都去載入完全部的依賴檔案,seajs是某個模組需要用到才去載入,所以說AMD體驗好,因為相依模組一開始全都載入好了,cmd效能好,因為需要才去載入對應的模組

這樣我們就可以在瀏覽器端實現模組化開發了,解決了全域變數的問題,也解決了依賴關係的問題,但是卻也帶來了新的問題,頁面依賴的檔案多（瀏覽器解析的時候就會去載入對應的相依模組，一個模組就是一個檔案）,發起的http請求也多,隨之而來的就是載入效能的影響(HTTP1,並行的http請求有限制個數).這個時候模組打包器就應運而生了.

三.模組打包器

在模組化載入器處理的基礎上，為了減少解析時載入相依模組而增加的http請求，我們可以把入口檔案打包，在打包的過程中，讓它去載入對應的相依模組，最終產生的那份檔案就是包含相依模組的檔案，那樣就可以減少http請求，這樣的打包操作我們交給構建工具或者說打包工具去實現，比如webpack/Browserify/rollup等等，這樣，我們可以只專註怎麼寫出模組化的,可維護的,高彙總,低耦合的代碼

隨著es6的出現,js原生也出現了模組開發定義,也有對應的規範,用export匯出,用import匯入,讓我們可以不用使用requirejs和seajs就能進行模組化開發,不過目前瀏覽器安全色性有限,不過我們可以用webpack來實現相容,webpack不只可以幫我們把相關依賴的檔案打成一個包,也能幫我們打成一個能夠相容的包(藉助一些loader).

歡迎交流~

 

js模組化/js模組載入器/js模組打包器