我们在之前文章《ES6 class与面向对象编程》中，说到了如今大部分框架和库，都采用了面向对象体式格局编程。那末详细是怎样运用的呢？面向对象编程，最典范和最基本的作用就是封装，封装的长处就是代码的能够复用，模块化，举行项目和文件的构造。

本日我们就来看看ES6class、模块化在一个被前端职员普遍运用的库-vue中，是怎样运用的。

在说vue模块化之前，我们先说说完成模块化的生长进程，如许才不单单议知其然，更知其所以然。

不然你看到vue的一个用法，你看到的只是这个用法，至于为何是如许做，而不是其他体式格局，就不清晰了。这也是许多一看就懂，一写就卡的缘由。

由于你学到的仅仅是这个例子，没办法迁移到自身的项目中。我们重新捋一捋：

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源码打下了基本。