摘要：我們在之前文章與面向對象編程中，說到了目前大部分框架和庫，都采用了面向對象方式編程。那么具體是怎么樣應用的呢面向對象編程，最典型和最基礎的作用就是封裝，封裝的好處就是代碼的能夠復用，模塊化，進行項目和文件的組織。模塊化在中的應用。

我們在之前文章《ES6 class與面向對象編程》中，說到了目前大部分框架和庫，都采用了面向對象方式編程。那么具體是怎么樣應用的呢？面向對象編程，最典型和最基礎的作用就是封裝，封裝的好處就是代碼的能夠復用，模塊化，進行項目和文件的組織。

今天我們就來看看ES6class、模塊化在一個被前端人員廣泛使用的庫-vue中，是怎么應用的。

在說vue模塊化之前，我們先說說實現模塊化的發展歷程，這樣才能不僅僅知其然，更知其所以然。

不然你看到vue的一個用法，你看到的只是這個用法，至于為什么是這樣做，而不是其他方式，就不清楚了。這也是很多一看就懂，一寫就卡的原因。

因為你學到的僅僅是這個例子，沒辦法遷移到自己的項目中。我們從頭捋一捋：

js模塊化歷史

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

但是這樣寫容易出一個問題，也就是變量名沖突，比如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: "",
  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: "",
  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源碼打下了基礎。