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/vu...