js模塊化歷史

很久很久以前，我們寫代碼是醬紫的，

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>


但是這樣寫容易出一個問題，也就是變數名衝突，比如a.js 是一個人寫的，而b.js是另外一個人寫的，兩個人

用了同樣一個變數

var a = 12;
var a = 5;


這樣就會出現變數覆蓋的問題，當然我這裡不想提聽起來高大上的名字，什麼全局變數污染。說的就是這點事兒。針對這個問題，最原始最古老的IIFE來了，這是比較簡單的創建 JS 模塊的方法了。

//a.js
(function(){
var a = 12;
})();
//b.js
(function(){
var a = 12;
})();


這種方式在以前的各種庫裡面應用很多，比如大名鼎鼎的jquery:

(function( window, undefined ) {

})(window);

但是這種模塊化方式有一個缺點，不能解決依賴問題。

比如b.js裡面的一個值，必須是a.js裡面一個值計算完之後給b.js ，這樣纔能有正確的結果，顯然，IIFE（匿名函數自執行）方式沒辦法解決。

好吧，我用一句大家聽起來可能不太懂的話來顯示一下我的專業性：

它只是把變數和方法都封裝在本身作用域內的一種普通模式。其存在的缺點就是沒有幫我們處理依賴。

說的就是上面的事兒。

然後AMD來了，別誤會，不是CPU，是模塊化方式，AMD (非同步模塊依賴) : 其中代表就是Require.js。它很受歡迎，它可以給模塊注入依賴，還允許動態地載入 JS 塊。

如下：

define(『myModule』, [『dep1』, 『dep2』], function (dep1, dep2){
// JavaScript chunk, with a potential deferred loading
return {hello: () => console.log(『hello from myModule』)};
});
// anywhere else
require([『myModule』], function (myModule) {
myModule.hello() // display 『hello form myModule』
});


有人說我看不懂這個代碼，啥意思啊？

不用看懂，因為我們不用它，它的缺點就是:

代碼複雜冗長。

顯然對於我們這些腦子裡只能裝下01和美女的程序員來說，沒有放它的地兒。

不過程序員還是喜歡耍酷的，這不，另外一種模塊化方式流行了,

CMD,好吧，它跟我們的命令行沒有半毛錢關係。我就納悶那些起名字的人了，成功的撞車了所有容易誤會的名字。故意的吧？

Common Module Definition，簡稱CMD,很多人可能會問AMD和CMD的區別，知道了區別也沒用。

對於AMD和CMD兩種模式，你就把它們當成你的前前女友和前女友。曾經確實存在過，確實愛過，但是你前前女友和你前女友的區別，你沒事是不會拿出來說的，對你找現任女友也沒什麼幫助（相反說多了會起反作用）。

當然了，還有一個模塊化方式，Commonjs，這個模式廣泛應用在Nodejs中，至於nodejs你懂的，披著js外衣的後臺語言，哼哼，我們不用理它。

ok，說了這麼多舊事，聽了一堆亂七八糟的模塊化，js模塊化的情史亂七八糟。JavaScript標準化組織一琢磨，JavaScript也老大不小了，得搞個官方的模塊化的東西啊，不能老這麼亂七八糟的懸著啊。

於是js被官宣了一個模塊化方式-ES6模塊化。

ES6模塊化

好，我們就看看這個正牌女友，官宣有什麼優點：

1.每一個模塊只載入一次， 每一個JS只執行一次， 如果下次再去載入同目錄下同文件，直接從內存中讀取。 一個模塊就是一個單例，或者說就是一個對象；

2. 每一個模塊內聲明的變數都是局部變數， 不會污染全局作用域；

3.模塊內部的變數或者函數可以通過export導出；

4.一個模塊可以導入別的模塊；

5.能夠實現非同步和按需載入；

6.官方出臺設定標準，不在需要出框架或者hack的方式解決該問題，該項已經作為標準要求各瀏覽器實現。

所以，從以上6點，我們可以看出來ES6 模塊化纔是根兒正苗紅的模塊化接班人，重點是ES6 官方模塊化標準，雖然現在瀏覽器全部實現該標準尚無時日，但是肯定是未來趨勢。

好，我們看看怎麼用。

首先，我們先來一個入口文件main.js

import numA from ./a;
import {strB} from ./b;
?
console.log(numA, strB);


接著，a.js

import {bNum} from ./c;
?
export default {
strA: aa,
numA: bNum + 1
};


然後，b.js

import {strA} from ./a;
?
export const strB = strA + bb;


最後，c.js

export const bNum = 0;


解釋一下，就是 定義導出，然後倒入。這裡注意兩點就OK了，

1.如果 導出的時候是 export default,那麼引入的時候

import fdasfas from ./a;


名字隨便起，而且不用加{}

2.如果導出的時候有名字，那麼必須引入必須有名字，並且跟導出的名字一致，而且必須有{}。

如導出，

export const strB = strA + bb;


那麼倒入就必須：

import {strB} from ./b;


記住這麼多就OK了，為什麼這麼說呢？

其實vue的模塊化裡面，就是這點東西。

ES6模塊化在vue中的應用。

直接打開入口文件main.js，我們會發現這樣的代碼：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from vue
import App from ./App
import router from ./router
import store from ./store
import VueMaterial from vue-material
import vue-material/dist/vue-material.css
import VueAwesomeSwiper from vue-awesome-swiper
Vue.use(VueAwesomeSwiper)
Vue.use(VueMaterial)
Vue.material.registerTheme({
default: {
primary: {
color: red,
hue: 700
}
}
})
?
?
Vue.config.productionTip = false
?
/* eslint-disable no-new */
new Vue({
el: #app,
router,
store,
template: <App/>,
components: { App }
})


我們一看開頭，是不是很熟悉？

import Vue from vue
import App from ./App
import router from ./router
import store from ./store
import VueMaterial from vue-material
import vue-material/dist/vue-material.css
import VueAwesomeSwiper from vue-awesome-swiper


順藤摸瓜，我們看看router的導出：

export default new Router({
//xxxxx
})


是不是我們才講過的東西？簡單吧，另外我們再看看main.js：

new Vue({
el: #app,
router,
store,
template: <App/>,
components: { App }
})


看見new關鍵字，我們第一反應就是class，順藤摸瓜。

class Vue extends V.Vue {}
export = Vue;


你會發現這麼一句話，是不是很熟悉？但是我要說，這個代碼不是JavaScript代碼，而是typescript。

從這個例子你就能體會到兩件事：

1.學會了面向對象和模塊化，你就能看懂vue的代碼組織方式和實現，可以嘗試看vue源碼了。

2.忽然一不小心你居然學會了typescript的語法。

有沒有一種本來打算出去打個醬油，卻突然遇到了你女神，而且還發現她目前依然單身的感覺？

是不是想把vue源碼看個遍，掌握那些你認為大牛才能掌握的技能？還猶豫啥？搞起吧。

總結：

通過本文的學習，我們學會了：

1.我們瞭解了js模塊化的歷史，知道了為什麼模塊化會發展成現在的樣子，這時候你應該體會到了技術為解決問題服務，怎麼一步步解決問題的，而不是憑空產生新技術，新解決方案。這個對大家以後學習和融匯貫通都很重要，多問一個為什麼。

2.學會了ES6的模塊化用法，就相當於打開了看懂各種框架的大門，以後大家要多學學模塊化代碼的組織和實現方式，為實際工作項目中的應用做好鋪墊。

3.看了一下 ES6的模塊化方式在vue中的使用，同時也看了一下class的應用，為大家看懂vue源碼打下了基礎。

推薦閱讀：