vue学习之开发插件系列二

学习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)
  }