放棄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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。