摘要：我們在之前文章與面向?qū)ο缶幊讨?，說到了目前大部分框架和庫，都采用了面向?qū)ο蠓绞骄幊獭Ｄ敲淳唧w是怎么樣應(yīng)用的呢面向?qū)ο缶幊蹋畹湫秃妥罨A(chǔ)的作用就是封裝，封裝的好處就是代碼的能夠復(fù)用，模塊化，進(jìn)行項(xiàng)目和文件的組織。模塊化在中的應(yīng)用。

我們在之前文章《ES6 class與面向?qū)ο缶幊獭分?，說到了目前大部分框架和庫，都采用了面向?qū)ο蠓绞骄幊?。那么具體是怎么樣應(yīng)用的呢？面向?qū)ο缶幊蹋畹湫秃妥罨A(chǔ)的作用就是封裝，封裝的好處就是代碼的能夠復(fù)用，模塊化，進(jìn)行項(xiàng)目和文件的組織。

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

在說vue模塊化之前，我們先說說實(shí)現(xiàn)模塊化的發(fā)展歷程，這樣才能不僅僅知其然，更知其所以然。

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

因?yàn)槟銓W(xué)到的僅僅是這個例子，沒辦法遷移到自己的項(xiàng)目中。我們從頭捋一捋：

js模塊化歷史

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

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

var a = 12;
var a = 5;

這樣就會出現(xiàn)變量覆蓋的問題，當(dāng)然我這里不想提聽起來高大上的名字，什么全局變量污染。說的就是這點(diǎn)事兒。
針對這個問題，最原始最古老的IIFE來了，這是比較簡單的創(chuàng)建 JS 模塊的方法了。

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

這種方式在以前的各種庫里面應(yīng)用很多，比如大名鼎鼎的jquery:

(function( window, undefined ) {
    
})(window);

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

比如b.js里面的一個值，必須是a.js里面一個值計(jì)算完之后給b.js ，這樣才能有正確的結(jié)果，顯然，IIFE（匿名函數(shù)自執(zhí)行）方式?jīng)]辦法解決。

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

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

說的就是上面的事兒。

然后AMD來了，別誤會，不是CPU，是模塊化方式，AMD (異步模塊依賴) : 其中代表就是Require.js。它很受歡迎，它可以給模塊注入依賴，還允許動態(tài)地加載 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’
});

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

不用看懂，因?yàn)槲覀儾挥盟?，它的缺點(diǎn)就是:

代碼復(fù)雜冗長。

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

不過程序員還是喜歡?？岬?，這不，另外一種模塊化方式流行了,CMD,好吧，它跟我們的命令行沒有半毛錢關(guān)系。
我就納悶?zāi)切┢鹈值娜肆耍晒Φ淖曹嚵怂腥菀渍`會的名字。故意的吧？

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

對于AMD和CMD兩種模式，你就把它們當(dāng)成你的前前女友和前女友。曾經(jīng)確實(shí)存在過，確實(shí)愛過，但是你前前女友和你前女友的區(qū)別，你沒事是不會拿出來說的，對你找現(xiàn)任女友也沒什么幫助（相反說多了會起反作用）。

當(dāng)然了，還有一個模塊化方式，Commonjs，這個模式廣泛應(yīng)用在Nodejs中，至于nodejs你懂的，披著js外衣的后臺語言，哼哼，我們不用理它。

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

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

ES6模塊化

好，我們就看看這個正牌女友，官宣有什么優(yōu)點(diǎn)：

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

2 每一個模塊內(nèi)聲明的變量都是局部變量， 不會污染全局作用域；

3 模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出；

4 一個模塊可以導(dǎo)入別的模塊；

5 能夠?qū)崿F(xiàn)異步和按需加載；

6 官方出臺設(shè)定標(biāo)準(zhǔn)，不在需要出框架或者h(yuǎn)ack的方式解決該問題，該項(xiàng)已經(jīng)作為標(biāo)準(zhǔn)要求各瀏覽器實(shí)現(xiàn)。

所以，從以上6點(diǎn)，我們可以看出來ES6 模塊化才是根兒正苗紅的模塊化接班人，重點(diǎn)是ES6 官方模塊化標(biāo)準(zhǔn)，雖然現(xiàn)在瀏覽器全部實(shí)現(xiàn)該標(biāo)準(zhǔn)尚無時日，但是肯定是未來趨勢。

好，我們看看怎么用。

首先，我們先來一個入口文件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;

解釋一下，就是 定義導(dǎo)出，然后倒入。這里注意兩點(diǎn)就OK了，

1.如果 導(dǎo)出的時候是 export default,那么引入的時候

import fdasfas from "./a";

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

2.如果導(dǎo)出的時候有名字，那么必須引入必須有名字，并且跟導(dǎo)出的名字一致，而且必須有{}。

如導(dǎo)出，

export const strB = strA + " bb";

那么倒入就必須：

import {strB} from "./b";

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

其實(shí)vue的模塊化里面，就是這點(diǎn)東西。

ES6模塊化在vue中的應(yīng)用。

直接打開入口文件main.js，我們會發(fā)現(xiàn)這樣的代碼：

// 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的導(dǎo)出：

export default new Router({
     //xxxxx    
})

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

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

看見new關(guān)鍵字，我們第一反應(yīng)就是class，順藤摸瓜。

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

你會發(fā)現(xiàn)這么一句話，是不是很熟悉？但是我要說，這個代碼不是JavaScript代碼，而是typescript。

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

1.學(xué)會了面向?qū)ο蠛湍K化，你就能看懂vue的代碼組織方式和實(shí)現(xiàn)，可以嘗試看vue源碼了。

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

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

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

總結(jié)：

總結(jié)一下，通過本節(jié)課的學(xué)習(xí)，我們學(xué)會了：

1.我們了解了js模塊化的歷史，知道了為什么模塊化會發(fā)展成現(xiàn)在的樣子，這時候你應(yīng)該體會到了技術(shù)為解決問題服務(wù)，怎么一步步解決問題的，而不是憑空產(chǎn)生新技術(shù)，新解決方案。這個對大家以后學(xué)習(xí)和融匯貫通都很重要，多問一個為什么。

2.學(xué)會了ES6的模塊化用法，就相當(dāng)于打開了看懂各種框架的大門，以后大家要多學(xué)學(xué)模塊化代碼的組織和實(shí)現(xiàn)方式，為實(shí)際工作項(xiàng)目中的應(yīng)用做好鋪墊。

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