vue自定义指令实现v-tap插件

放弃jQuery,拥抱MVVM，拥抱组件吧！

vue-touch基于hammer，对于普通简单手势的页面来说过于庞大！
于是想自己实现一个最常用的手势tap。顺着自定义指令和插件文档，昨晚实现了一个v-tap指令，丢出这篇干货。

指令与插件介绍
自定义指令和插件官方文档中也介绍比较简单详细，就不过多介绍。
我先说下本插件就用了三个API，如果大家不了解最好先事先看下文档避免后面的代码看的迷糊。

指令部分
1.update(nVal,oVal)
2.acceptStatement

插件部分
Vue.use()

接着我们需要像写jQuery插件一样学习写Vue插件的格式。

继续官方文档

MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = ... // 2. 添加全局资源 Vue.directive('my-directive', {}) // 3. 添加实例方法 Vue.prototype.$myMethod = ...}

是不是看的还不太明白？那我们可以直接看作者的插件代码。

;(function () { var vueTouch = {} vueTouch.install = function (Vue) { Vue.directive('touch', {  isFn: true,  acceptStatement: true,  bind: function () {  },  update: function (fn) {  },  unbind: function () {  } }) } if (typeof exports == "object") { module.exports = vueTouch } else if (typeof define == "function" && define.amd) { define([], function(){ return vueTouch }) } else if (window.Vue) { window.VueTouch = vueTouch Vue.use(vueTouch) }})()

我把多余无关代码都删除了，可以发现其实格式就是如此，剩下的就是利用我们自己js的功底直接编写即可。
PS：关于 isFn:true 这个属性，我在文档中没有查到相关信息，个人认为可能是一种注释,代表这个指令是需要fn的expression(这个是指令的表达式，详见指令实例属性)。

Just do it

首先，按照插件格式先写好外层。

;(function() { var vueTap = {}; vueTap.install = function(Vue) { }; if (typeof exports == "object") {  module.exports = vueTap; } else if (typeof define == "function" && define.amd) {  define([], function(){ return vueTap }) } else if (window.Vue) {  window.vueTap = vueTap;  Vue.use(vueTap); }})();

接着在我们的 vueTap.install 里写我们自己的自定义指令

Vue.directive('tap', {  isFn : true,  bind : function() {  },  update : function(fn) {  },  unbind : function() {},  isTap : function() {   //判断是否为tap  },  touchstart : function(e,self) {  },  touchend : function(e,self) {  } });};

由于只有update才有参数可传，可以接收到我们expression，于是我把事件绑定处理过程都写在了update里。

PS: 当然也有小伙伴喜欢在这把fn都赋予在this(这里的this是directve实例)上,最后在bind的地方绑定事件。这个我并没有找到规范，还不知道写哪比较好。