js模塊化/js模塊加載器/js模塊打包器

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

大神的文章：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.js

var a=1;
module.exports=a;

//b.js
var 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).

歡迎交流~