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的地方绑定事件。这个我并没有找到规范，还不知道写哪比较好。

update : function(fn) {
 var self = this; //存下this，方便以后用
  //在directive上绑定的属性和方法
  //都可通过self.xxx self.touchstart()获取
  self.tapobj = {}; //初始化我们的tap对象

 if(typeof fn !== 'function') {
 //你别给我搞事！
  return console.error('the param of directive "v-tap" must be a function!');
 }

 self.handler = function(e) { //给当前directive存个handler方便之后调用
  e.tapobj = self.tapobj; 
  //把我们的tap对象赋值给原生event对象上，方便回调里获取参数
  fn.call(self,e);
 };

 //把我们的start和end剥离出来，写在directive上
 //由于只有tap事件，所以我们在move过程就不需要做处理
 this.el.addeventlistener('touchstart',function(e) {
  self.touchstart(e,self);
 },false);

 this.el.addeventlistener('touchend',function(e) {
  self.touchend(e,self,fn);
 },false);

}

在update很简单，就是一些初始化，事件绑定和给实例赋值的过程。
最后就是istap，touchstart，touchend的逻辑处理。

istap : function() {
 var tapobj = this.tapobj;
 return this.time < 150 && math.abs(tapobj.distancex) < 2 && math.abs(tapobj.distancey) < 2;
},
touchstart : function(e,self) {
 var touches = e.touches[0];
 var tapobj = self.tapobj;
 tapobj.pagex = touches.pagex;
 tapobj.pagey = touches.pagey;
 tapobj.clientx = touches.clientx;
 tapobj.clienty = touches.clienty;
 self.time = +new date();
},
touchend : function(e,self) {
 var touches = e.changedtouches[0];
 var tapobj = self.tapobj;
 self.time = +new date() - self.time;
 tapobj.distancex = tapobj.pagex - touches.pagex;
 tapobj.distancey = tapobj.pagey - touches.pagey;

 if (self.istap(tapobj))
  self.handler(e);
}

最后有个大问题，如何能让我们的expression可接受传参？

<ul>
 <li v-for="el in list"
  v-tap="args($index,el,$event)"
   >
  {{el.name}}---{{el.age}}
 </li>
</ul>

那就要在我们的directive上加一个属性acceptstatement:true（详见文档acceptstatement）

总结
写了这个v-tap插件几个心得分享给大家。
1.在update里的this指向是directive实例，而不是vm，也不是dom
2.在directive('name',{}) 对象里可自定义属性和方法。调用就是self.xxx
3.开启自定义指令接受内联语句 acceptstatement:true
4.最后的接口别忘了 vue.use(obj)
我这里没有对v-tap.stop， v-tap.prevent，v-tap.stop.prevent做处理，大家可以自己实现！也灰常简单。
（我之后会对v-tap进行补充）

最后丢出github地址: https://github.com/meckodo/vue-tap

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。