学习vue开发插件之【添加全局资源:指令/过滤器/过渡等】如 vue-touch,从看官方案例vue-touch的源码开始,代码目录结构如下:
一般从index.js为入口开始看文件,根据Vue.js的文件,插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象,如下::
vueTouch.install = function install(Vue, opts = {}) {
const name = opts.name || 'v-touch'
Vue.component(name, assign(Component, { name }))
installed = true
}.bind(vueTouch)
vueTouch.registerCustomEvent = function registerCustomEvent(event, options = {}) {//添加自定义方法}
if (typeof exports == "object") {//es6的模块化导出
module.exports = vueTouch
} else if (typeof define == "function" && define.amd) {//支持AMD 规范
define([], function(){ return vueTouch })
} else if (typeof window !== 'undefined' && window.Vue) {//注册到window全局对象
window.VueTouch = vueTouch
Vue.use(vueTouch)//通过全局方法 Vue.use() 使用插件
}
vueTouch是个对象,具体的值是从util.js中引入的{config, customEvents},给这个对象添加install方法,方法里注册组件,组件名字可以通过参数opt.name传进来,默认使用“v-touch”。组件的具体实现在component.js中,包含选项props、生命周期钩子函数mounted和destroyed、侦听器watch、方法选项methods、渲染render 函数,具体如下:
1、props中初始化相关参数
2、mounted函数中,判断不是服务端渲染,实例化hammer.js:
if (!this.$isServer) {
//参考hammerjs的官方文档,设置自己的识别器 this.hammer = new Hammer.Manager(this.$el, this.options)//Manager是所有识别器实例的容器
this.recognizers = {} // not reactive
this.setupBuiltinRecognizers() //在methods中定义
this.setupCustomRecognizers() //在methods中定义
this.updateEnabled(this.enabled) //在methods中定义
}
3、methods方法详解:
setupBuiltinRecognizers() {
1)、将util.js中定义的手势数组gestures和props中相关参数选项做关联
2)、循环手势数组gestures调用addRecognizer方法, 发下:
//创建相应手势的一个识别器(类似于new Hammer['Swipe'](options))
const recognizer = new Hammer[capitalize(mainGesture || gesture)](guardDirections(options))
this.hammer.add(recognizer)//将Recognizer实例到Manager中
//将新创建的识别器同步运行所给的其它识别器this.hammer.recognizers
recognizer.recognizeWith(this.hammer.recognizers)
3)、调用addEvent(gesture)方法 监听由被添加的识别器触发的事件,并通过emit派发出去
this.hammer.on(gesture, (e) => this.$emit(gesture, e))
}
setupCustomRecognizers() {
//给自定义事件创建识别器(同上)
}
updateEnabled(newVal, oldVal) {
//初始化给所有的识别器添加{enable: true}选项
}
4、destroyed函数中解绑所有交互事件并让manager失去作用
this.hammer.destroy()
5、侦听器watch中监听enabled值,调用updateEnabled方法设置识别器的enable选项
6、render函数:
//h
作为 createElement
的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h
失去作用,在应用中会触发报错。
render(h) {
return h(this.tag, {}, this.$slots.default)
}