每一個人都能實現的vue自定義指令

前文

先來bb一堆廢話哈哈..
  
  用vue作項目也有一年多了.除了用別人的插件以外.本身也沒嘗試去封裝指令插件之類的東西來用.
  
  恰好最近在項目中遇到一個問題.(快速點擊按鈕屢次觸發屢次綁定的方法),因而就想說本身封裝一個 
  自定義指令來解決這個問題,因而便有了本身的第一個vue自定義指令 vue-reclick .

vue-reclick 傳送門

哈哈,好了!廣告打完了,開始進入正題(等一下,據說star有獎哦)...

1.使用場景

在vue 2.0中,有的狀況下,你須要對普通DOM元素進行底層操做，這時候就須要用到自定義指令!

2.api詳解

其實關於vue自定義指令的使用 vue官方文檔已經說的很是清楚.這裏只是簡單的照搬,哦不,講一下 (23333..)..

1.首先建立一個指令自定義對象directObj。
 
 let directObj = {}.
 
 2.vue爲全部指令的鉤子函數都提供一些函數參數。
    
 let args = {
  el:'指令所綁定的元素，能夠用來直接操做 DOM ',
  binding:{
   name:'指令名，不包括 v- 前綴。',
   value:'指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。',
   oldValue:'指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。',
   expression:"字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"",
   arg："傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"",
   modifiers:"一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。",
   vnode:"Vue 編譯生成的虛擬節點。",
   oldVnode:"上一個虛擬節點"
  }
 }
 
 3.在directObj上可根據須要定義一些鉤子函數
 
 directObj.bind = function({...args }){
 
     //只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
 } 
 
 directObj.inserted= function({...args }){
 
     //被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
 } 

 directObj.update= function({...args }){
 
     //所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。
     指令的值可能發生了改變，也可能沒有。 
     可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新 
 }

 directObj.componentUpdated= function({...args }){
 
     //指令所在組件的 VNode 及其子 VNode 所有更新後調用。
 }
 
 directObj.unbind= function({...args }){
 
     //只調用一次，指令與元素解綁時調用。
 }

 4.註冊自定義指令
  (1).全局註冊:
  
      Vue.directive('指令名稱','指令對象');
      例:Vue.directive('reclick',directObj);
      注意:全局註冊自定義指令需在實例化Vue以前.
    
  (2).局部(組件)註冊:
  
      export default{ 
       directives:{
         '指令名稱':'指令配置'
       }
      }
      
      例:
      
        export default{ 
       directives:{
         'reclick':directObj
       }
      }

3.封裝自定義指令

好了,簡單的講(抄)完 自定義指令相關的api,接下來咱們經過vue-reclick來簡單的講解一下如何封裝一個vue自定義指令吧.

 因爲vue-reclick 只是用來解決一個問題的小東西,因此代碼也相對簡單,這裏主要講一個封裝自定義指令的過程.
    
 下面咱們先來看下vue-reclick的源碼:

;(function() {
  /**
   * 函數防抖
   *
   * @param {any} method 方法名
   */
  function debounce(method) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function() {
      method.call();
    }, 200);
  }
  /**
   * 事件綁定
   *
   * @param {any} element  綁定dom
   * @param {any} event    事件類型
   * @param {any} listener 方法
   */
  function addEvent(element, event, listener) {
    if (element.addEventListener) {
      element.addEventListener(event, listener, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, listener);
    } else {
      element['on' + event] = listener;
    }
  }
  var vueReclick = {};
  var reclick = {
    bind: function(el, binding) {
      addEvent(el, 'click', function() {
        debounce(binding.value);
      });
    },
    unbind: function(el) {
      addEvent(el, 'click', function() {});
    }
  };

  vueReclick.install = function(Vue) {
    Vue.directive('reclick', reclick);
  };

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

1.將全部代碼包裹在一個當即執行函數之中.

  當即執行函數有本身的做用域,能夠避免變量衝突與污染.    
  
  將獨立的功能封裝在自包含模塊中.  

2.vue-reclick功能相關的代碼這裏簡單說明下.

  這裏封裝了兩個方法(1.throttle,2.addEvent)
    
  一個指令配置對象(reclick)

  在reclick對象裏定義了bind方法,在指令綁定到dom的時候,在dom上綁定點擊事件,並獲取指令綁定的方法名稱.
  在觸發點擊事件的時候經過函數節流的方法來調用該方法,從而解決短期快速點擊觸發屢次方法的問題.
    
  在reclick對象裏定義了unbind方法,在指令與dom解綁的時候,將傳入方法與dom進行解綁..

3.定義一個vueReclick插件對象,並在該對象上定義一個install方法.

(Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器)

4.在install方法裏全局註冊指令

 vueReclick.install = function(Vue) {
    Vue.directive('reclick', reclick);
 };
 
5.兼容多種模塊規範暴露該插件

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

6.到這一步,其實一個簡單的自定義組件就已經大功告成了.

7.最後.咱們來說一下如何在項目中引入vueReclick並使用.

  (1).非node環境中
      
    在第5點咱們在else if(window.Vue)中其實已經Vue的全局方法來使用該插件.
    因此咱們能夠直接在項目中使用該指令.
    例:https://github.com/webfansplz/vue-reclick/blob/master/example/index.html

  (2).node環境中

    咱們能夠在項目入口文件中引入該插件,而後全局使用它,下面咱們會講解如何將插件發佈到Npm.
    例:
    import vueReclick from 'vue-reclick';
    Vue.use(vueReclick);

4.將封裝好的插件發佈到npm.

1.在Npm官網註冊一個帳號

2.在項目目錄下 使用npm login 登陸. 

3.在項目目錄下 使用npm publish 上傳插件

4.大功告成,這樣之後咱們在全部項目中就均可以使用npm install 來下載咱們本身封裝好的插件啦!.