媒介
摒弃
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/vu…
