摘要：我們?cè)谥拔恼屡c面向?qū)ο缶幊讨?，說(shuō)到了目前大部分框架和庫(kù)，都采用了面向?qū)ο蠓绞骄幊?。那么具體是怎么樣應(yīng)用的呢面向?qū)ο缶幊蹋畹湫秃妥罨A(chǔ)的作用就是封裝，封裝的好處就是代碼的能夠復(fù)用，模塊化，進(jìn)行項(xiàng)目和文件的組織。模塊化在中的應(yīng)用。

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

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

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

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

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

js模塊化歷史

很久很久以前，我們寫(xiě)代碼是醬紫的，

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

var a = 12;
var a = 5;

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

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

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

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

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

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

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

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

說(shuō)的就是上面的事兒。

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

有人說(shuō)我看不懂這個(gè)代碼，啥意思啊？

不用看懂，因?yàn)槲覀儾挥盟娜秉c(diǎn)就是:

代碼復(fù)雜冗長(zhǎng)。

顯然對(duì)于我們這些腦子里只能裝下01和美女的程序員來(lái)說(shuō)，沒(méi)有放它的地兒。

不過(guò)程序員還是喜歡耍酷的，這不，另外一種模塊化方式流行了,CMD,好吧，它跟我們的命令行沒(méi)有半毛錢關(guān)系。
我就納悶?zāi)切┢鹈值娜肆?，成功的撞車了所有容易誤會(huì)的名字。故意的吧？

Common Module Definition，簡(jiǎn)稱CMD,很多人可能會(huì)問(wèn)AMD和CMD的區(qū)別，知道了區(qū)別也沒(méi)用。

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

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

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

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

ES6模塊化

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

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

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

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

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

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

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

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

好，我們看看怎么用。

首先，我們先來(lái)一個(gè)入口文件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)出的時(shí)候是 export default,那么引入的時(shí)候

import fdasfas from "./a";

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

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

如導(dǎo)出，

export const strB = strA + " bb";

那么倒入就必須：

import {strB} from "./b";

記住這么多就OK了，為什么這么說(shuō)呢？

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

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

直接打開(kāi)入口文件main.js，我們會(huì)發(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 }
})

我們一看開(kāi)頭，是不是很熟悉？

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    
})

是不是我們才講過(guò)的東西？簡(jiǎn)單吧，另外我們?cè)倏纯磎ain.js：

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

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

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

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

從這個(gè)例子你就能體會(huì)到兩件事：

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

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

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

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

總結(jié)：

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

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

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

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