[Vue] 插件開發入門

做者：滴滴公共前端團隊 - 小春+獻勇

相對組件來講，Vue 的插件開發受到的關注要少一點。可是插件的功能是十分強大的，可以完成許多 Vue 框架自己不具有的功能。

你們通常習慣直接調用現成的插件，好比官方推薦的 vue-router、vue-touch 等。

下面就看一下 Vue 的插件開發如何入門。

首先咱們簡單回顧一下 Vue.js 官方文檔中對於插件開發的描述。

Vue 的插件必須提供一個公開方法 install，該方法會在你使用該插件，也就是 Vue.use(yourPlugin) 時被調用，至關因而一個插件的註冊或者聲明。install 接受 Vue 構造器做爲第一個參數，而且有一個可選的選項對象做爲第二個參數，好比：

yourPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod = ...
  // 2. 添加全局資源
  Vue.directive('my-directive', {})
  // 3. 添加實例方法
  Vue.prototype.$myMethod = ...
}複製代碼

插件在使用時有兩種方式：

第一種是如上述提到的，能夠經過 Vue.use(yourPlugin) 全局方法進行調用。
進行 Vue 的大型項目開發時，若是用 vue-cli 生成項目目錄結構，Vue.use() 方法通常在 main.js 中調用。

第二種其實是插件自己幫你完成了 Vue.use()的調用。
這種狀況下，插件會去檢測是否存在 Vue 全局變量，若是存在，就自動調用 Vue.use()。因此，若是你的項目中是使用 script 方式引入的 Vue.js（這種狀況下 Vue 纔會做爲一個全局變量存在），在使用好比 vue-router 之類的插件時就能夠直接引入而後使用，不用再調用 Vue.use()。
可是，在模塊環境下應當始終顯式調用該方法，以保證插件能夠正常使用：

// 經過 Browserify 或 Webpack 使用 CommonJS 兼容模塊
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了調用此方法
Vue.use(VueRouter)
// 或者能夠多傳入一個選項對象
// Vue.use(VueRouter, { hashbang: true })複製代碼

接下來咱們看一下一些官方的經常使用插件的實現，咱們配合去除具體邏輯的源碼進行一些解讀：

一、vue-touch

// version: 1.1.0
// vue-touch.js
var vueTouch = {}
// 暴露出的全局配置項，也就是在調用 Vue.use(Vue, options) 時傳入的第二個選項參數
vueTouch.config = {}
// 核心部分，插件的具體邏輯均在此實現
vueTouch.install = function (Vue) {
  Vue.directive('touch', {
    bind: function () {
    },
    update: function () {
    },
    unbind: function () {
    }
  })
}
// 支持 CommonJS
if (typeof exports == "object") {
  module.exports = vueTouch
// 支持 AMD
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return vueTouch })
// Vue 是全局變量時，自動調用 Vue.use()
} else if (window.Vue) {
  window.VueTouch = vueTouch
  Vue.use(vueTouch)
}複製代碼

二、vue-router

// version: 0.7.13
// src/index.js
let Vue
// 封裝爲 ES6 class
class Router {
  // 可傳入全局配置項
  constructor({
    hashbang = true,
    abstract = false,
    history = false,
    saveScrollPosition = false,
    transitionOnLoad = false,
    suppressTransitionError = false,
    root = null,
    linkActiveClass = 'v-link-active'
  } = {}) {
    // ...
  }
}
// 避免重複 install，設立 flag
Router.installed = false
Router.install = function (externalVue) {
  if (Route.installed) {
    return
  }
  Vue = externalVue
  // install 的具體邏輯，此處省略
  // ...

  // install 完畢
  Router.installed = true
}
// 一樣，Vue 做爲全局變量時自動 install
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Router)
}
export default Router複製代碼

三、vue-resource

// version: 1.0.3
// src/index.js
// install 方法
function plugin(Vue) {
  if (plugin.installed) {
    return;
  }

  // 插件核心邏輯，此處省略
  // ...
}
// 同上，Vue 是全局變量時，自動 install
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}
export default plugin;複製代碼

看完以上三個官方例子，相信各位已經對 Vue 的插件開發過程有了必定的瞭解，你們就能夠根據本身的須要爲 Vue 增長各類全局功能了。

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公衆號：微信搜索公衆號「DDFE」或掃描下面的二維碼