阅读 4830

[Vue] 插件开发入门

作者:滴滴公共前端团队 - 小春+献勇

相对组件来说,Vue 的插件开发受到的关注要少一点。但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能。

大家一般习惯直接调用现成的插件,比如官方推荐的 vue-routervue-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 })复制代码

接下来我们看一下一些官方的常用插件的实现,我们配合去除具体逻辑的源码进行一些解读:

1、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)
}复制代码

2、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复制代码

3、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”或扫描下面的二维码

关注下面的标签,发现更多相似文章
评论