由于最近在做一些前端的項(xiàng)目，并且接手了Weex的項(xiàng)目，所以難免和Vue打起了交道，js也是從入門到學(xué)習(xí)中。項(xiàng)目里用到了Vue的插件機(jī)制，所以看了看Vue.use的源碼，還是比較簡(jiǎn)單的，適合新手閱讀，所以記錄下來(lái)以免遺忘。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的阿榮網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

感謝

本文最后一章節(jié)[結(jié)合實(shí)際場(chǎng)景]是參考了eros 這個(gè)開源項(xiàng)目的，感謝eros項(xiàng)目組的開發(fā)。

什么是Vue插件

關(guān)于什么是Vue插件大家可以去看官網(wǎng)的解釋 ，總得來(lái)說(shuō)就是提供一個(gè)全局注冊(cè)/調(diào)用的能力。

怎么用

我們以Weex為例。

首先有一個(gè)toast.js

const Toast = {}
Toast.install = (Vue, options) => {
  Vue.prototype.$toast = (msg, duration = 0.8) => {
    const modal = weex.requireModule('modal')
    modal.toast({
      message: msg,
      duration: 0.8
    })
  }
}
Vue.use(Toast)

很簡(jiǎn)單，就是定義了一個(gè)Toast對(duì)面，然后給Toast對(duì)象創(chuàng)建一個(gè)install方法，方法里給Vue的prototype創(chuàng)建了一個(gè)$toast方法，該方法就是調(diào)用modal去彈一個(gè)toast，最后使用Vue.use方法去注冊(cè)這個(gè)Toast插件。

然后我們還有一個(gè)index.vue：

在其中調(diào)用了this.$toast去使用插件的方法。

由此我們可以知道，Vue的插件機(jī)制就是通過(guò)Vue.use方法去注冊(cè)的。

源碼分析

Vue.use = function (plugin) {
  if (plugin.installed) {
    return
  }
  var args = toArray(arguments, 1);
  args.unshift(this);
  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args);
  }
  plugin.installed = true;
  return this
};

function toArray (list, start) {
 start = start || 0;
 var i = list.length - start;
 var ret = new Array(i);
 while (i--) {
  ret[i] = list[i + start];
 }
 return ret
}

use方法非常簡(jiǎn)單：

0x01：判斷該插件是否已經(jīng)注冊(cè)，如果已經(jīng)注冊(cè)就直接return，防止重復(fù)注冊(cè)。

0x02：然后通過(guò)toArray方法將Arguments這個(gè)類數(shù)組轉(zhuǎn)換成真正的數(shù)據(jù)，并且去掉第一個(gè)元素。

0x03：將this，也就是Vue實(shí)例添加到toArray生成的args數(shù)組中。

0x04：判斷use的入?yún)lugin是install是否是一個(gè)方法，如果是則直接調(diào)用該方法。

0x05：如果第四步是false，則判斷plugun本身是不是一個(gè)方法，如果是方法，則用它本身代替install去執(zhí)行。

0x06：將plugin的installed標(biāo)記位設(shè)置為true。

就這么簡(jiǎn)單的6步，use方法就分析完了，其實(shí)就是為了去執(zhí)行插件的install方法，而結(jié)合上面的例子我們知道，install中就把$toast賦值給了Vue的prototype，在其他地方就可以使用的。

結(jié)合實(shí)際場(chǎng)景

學(xué)習(xí)了Vue的插件機(jī)制，那么這個(gè)機(jī)制我們能用來(lái)做什么呢？我們結(jié)合Weex來(lái)看。

首先我們知道，Weex是把bundle下發(fā)到客戶端并渲染，所以一個(gè)頁(yè)面的加載時(shí)間取決于兩部分：bundle下載時(shí)間，bundle渲染時(shí)間。在不考慮本地緩存的情況下，bundle的大小直接決定了它的下載時(shí)間，以及用戶所消耗的流量，所以我們需要有一種方式去盡可能的減小這個(gè)bundle的體積。這里Vue的插件機(jī)制就可以排上用場(chǎng)了。

首先我們把一部分共用，不太會(huì)改動(dòng)的基礎(chǔ)的代碼放在客戶端，這樣bundle里的內(nèi)容就應(yīng)該是純業(yè)務(wù)相關(guān)的代碼，在把bundle下載下來(lái)之后手動(dòng)將客戶端的基礎(chǔ)js拼接到bundle上，這樣就能有效地減小bundle的體積，而想要使用這種方式，就必須把基礎(chǔ)js通過(guò)Vue的插件機(jī)制注冊(cè)，業(yè)務(wù)js中全局調(diào)用，不然是無(wú)法拼接的(除非你的基礎(chǔ)js不通過(guò)webpack打包)，畢竟webpack打包之后所有的代碼都是封閉的，無(wú)法互相調(diào)用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。