Element 指令clickoutside原始碼分析

luichooy發表於2019-03-03
IDE原始碼

clickoutside是Element-ui實現的一個自定義指令，顧名思義，該指令用來處理目標節點之外的點選事件，常用來處理下拉選單等展開內容的關閉，在Element-ui的Select選擇器、Dropdown下拉選單、Popover 彈出框等元件中都用到了該指令，所以這個指令在實現一些自定義元件的時候非常有用。

要分析該原始碼，首先要了解一下Vue的自定義指令。自定義指令的定義方式如下：

// 註冊一個全域性自定義指令 
Vue.directive(`directiveName`, {
  bind: function(el, binding, vnode){
    // 當指令第一次繫結到元素時呼叫，常用來進行一些初始化設定
  	...
  },
  inserted: function(el, binding, vnode){
    // 當被繫結的元素插入到 DOM 中時……
  	...
  },
  update: function(el, binding, vnode, oldVnode){
    // 所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前
  	...
  },
  componentUpdated: function(el, binding, vnode, oldVnode){
    // 指令所在元件的 VNode 及其子 VNode 全部更新後呼叫
  	...
  },
  unbind: function(el, binding, vnode){
    // 只呼叫一次，指令與元素解綁時呼叫，類似於beforeDestroy的功能
  	...
  }
});
複製程式碼

可以看到在配置物件中只有5個可選的鉤子函式，他們的引數有4個，分別是 el、binding、vnode、oldVnode

  • el ：指令所繫結的元素，可以用來直接操作DOM
  • binding ： 一個包含了自定義詳細資訊的物件，內部收集了使用自定義指令時傳入的值、修飾符、引數等資料，詳細資訊可以在官方文件見到，已經說的十分詳細了
  • vnode : Vue編譯生成的虛擬節點
  • oldVnode： 本次Vnode更新之前，上一次產生的虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

看完了自定義指令的內容，接下來我們就來分析clickoutside的具體實現。

import Vue from `vue`;
import { on } from `element-ui/src/utils/dom`;

const nodeList = [];
const ctx = `@@clickoutsideContext`;

let startClick;
let seed = 0;

!Vue.prototype.$isServer && on(document, `mousedown`, e => (startClick = e));

!Vue.prototype.$isServer && on(document, `mouseup`, e => {
  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
});

function createDocumentHandler(el, binding, vnode) {
  return function(mouseup = {}, mousedown = {}) {
    ...
  };
}

let startClick;
let seed = 0;

export default {
  bind(el, binding, vnode) {
    ...
  },

  update(el, binding, vnode) {
    ...
  },

  unbind(el) {
    ...
  }
};

複製程式碼

上面是簡化後的原始碼，可以看到首先引入Vue和一個用來進行事件繫結的工具函式on，然後定義了兩個全域性常量nodeList 和 ctx 。nodeList 是一個元素蒐集器，會將頁面中所有繫結了clickoutside指令的dom元素儲存起來，而ctx定義了一個名稱空間（必須比較特殊，防止和其它特性重名），後面會將它新增為元素el的properties，具體後面會分析到。

接著利用之前引入的Vue進行判斷，非服務端則給文件物件新增 mousedown 和 mouseup 事件，在 mousedown 事件回撥中，將事件物件儲存到 startClick 全域性變數中，在 mouseup 事件回撥中遍歷 nodeList，然後分別執行每一個node( 即之前儲存起來的clickoutside指令繫結的元素el ) ctx 特性中儲存的 documentHandler 函式。關於ctx property的值會在後面介紹。

最後就是匯出了一個 clickoutside 的配置物件，在用到 clickoutside 指令的元件中匯入該配置物件，然後在元件中區域性註冊後就可以使用了。

該配置物件中使用了bind、update、unbind三個鉤子函式來定義clickoutside指令，主要做的事情就是蒐集該自定義指令的相關資訊，然後儲存到 el 的 ctx 特性上。接下來具體來看一下這個蒐集過程。

首先是bind鉤子函式：

bind(el, binding, vnode) {
  nodeList.push(el);
  const id = seed++;
  el[ctx] = {
    id,
    documentHandler: createDocumentHandler(el, binding, vnode),
    methodName: binding.expression,
    bindingFn: binding.value
  };
}
複製程式碼

這裡首先將el直接push到nodeList中，這樣每次有clickoutside指令繫結到頁面上，都會將繫結元素儲存到nodeList當中去，即前面說過的元素蒐集器。接下來將全域性變數seed++，並且賦值給一個臨時變數id，最後就是給el的ctx特性賦值了，它的值是一個物件，內部包括了:

  • id ：前面生成的全域性唯一id，用來標識該clickoutside指令
  • documentHandler ：利用 createDocumentHandler 生成的一個回撥函式。前面的分析中說到，給頁面繫結的mouseup事件回撥中，會遍歷nodeList，分別執行每一個繫結元素el的ctx特性上的documentHandler函式，這個函式就是在這裡生成的，至於這個回撥函式究竟是做了什麼，後面再詳細分析。
  • methodName ：binding.expression，檢視自定義指令的文件可以知道，binding.expression的值是字串形式的指令表示式。例如有  <div v-my-directive="1 + 1"></div>，則binding.expression的值為 1 + 1
  • bindingFn ： binding.value，指令的繫結值，還是上面的例子，則binding.value的值是 2 （1 + 1等於2），即指令的值為js表示式的情況下，**binding.expresssion**為表示式本身，是一個字串，而**binding.value**是該表示式的值。

接著我們看下 update 鉤子：

update(el, binding, vnode) {
	el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
	el[ctx].methodName = binding.expression;
	el[ctx].bindingFn = binding.value;
}
複製程式碼

可以看到update鉤子的內容很簡單，就是當元件更新的時候，更新 繫結元素 el 的特性 ctx 中的值。

再接著我們看看最後一個鉤子 unbind :

unbind(el) {
  let len = nodeList.length;

  for (let i = 0; i < len; i++) {
    if (nodeList[i][ctx].id === el[ctx].id) {
      nodeList.splice(i, 1);
      break;
    }
  }
  delete el[ctx];
}
複製程式碼

這個鉤子也很簡單，就是當clickoutside指令與元素el解綁的時候，遍歷nodeList，通過ctx特性上的id找到nodeList中儲存的當前解綁元素el，將它從nodeList中刪除，並且刪除el上的ctx特性。

以上就是clickoutside指令配置物件中做的所有操作，總結起來就是：

當指令與元素繫結以及元件更新的時候，蒐集並設定繫結元素的ctx特性，同時將繫結元素新增到nodeList當中去，當指令與元素解綁的時候，刪除nodeList中儲存的對應的繫結元素，並將之前設定在繫結元素上之前設定的ctx特性刪除掉。

前面說過，給頁面繫結的mouseup事件回撥中，會遍歷nodeList，分別執行蒐集起來的每一個繫結元素el上的ctx特性中的 documentHandler 函式。而該函式是通過 createDocumentHandler 函式生成的，讓我們看看這個函式都做了什麼。

function createDocumentHandler(el, binding, vnode) {
  return function(mouseup = {}, mousedown = {}) {
    if (!vnode ||
      !vnode.context ||
      !mouseup.target ||
      !mousedown.target ||
      el.contains(mouseup.target) ||
      el.contains(mousedown.target) ||
      el === mouseup.target ||
      (vnode.context.popperElm &&
      (vnode.context.popperElm.contains(mouseup.target) ||
      vnode.context.popperElm.contains(mousedown.target)))) return;

    if (binding.expression &&
      el[ctx].methodName &&
      vnode.context[el[ctx].methodName]) {
      vnode.context[el[ctx].methodName]();
    } else {
      el[ctx].bindingFn && el[ctx].bindingFn();
    }
  };
}
複製程式碼

可以看到，這個函式利用了閉包將傳入的引數快取起來，然後返回一個函式。在這個返回的函式中，會進行一系列判斷，首先在第一個if裡面，判斷了：

  • vnode.context 是否存在，不存在退出
  • mouseup.target 是否存在，不存在退出
  • mousedown.target 是否存在，不存在退出
  • 繫結物件el是否包含mouseup.target/mousedown.target子節點，如果包含說明點選的是繫結元素的內部，則不執行clickoutside指令內容
  • 繫結物件el是否等於mouseup.target，等於說明點選的就是繫結元素自身，也不執行clickoutside指令內容
  • 最後vnode.context.popperElm這部分內容則是 : 判斷是否點選在下拉選單的上，如果是，也是沒有點選在繫結元素外部，不執行clickoutside指令內容
微信截圖_20190212155657.png

如圖，如果點選在紅色區域內，則全部不觸發 clickoutside 指令的邏輯。

如果以上條件全部符合，則判斷閉包快取起來的值，如果methodName存在則執行這個方法，如果不存在則執行bindingFn。例如：

<template>
	<div v-clickoutside="handleClose"></div>
</template>

<script>
  export default {
    data(){
      return {
        visible: false
      };
    },

    methods: {
      handleClose(){
        this.visible = false;
      }
    }
  }
</script>
複製程式碼

在這個例子中，methodName或者bindingFn就是通過指令傳入的handleClose方法。執行該方法，就可以執行clickoutside指令的邏輯了

以上就是 documentHandler方法的生成以及內部邏輯。通過這個方法和之前的分析，我們就可以知道，當頁面綁mouseup事件觸發的時候，會遍歷nodeList，依次執行每一個繫結元素el的ctx特性上的documentHandler方法。而在這個方法內部可以訪問到指令傳入的表示式，在進行一系列判斷之後會執行該表示式，從而達到點選目標元素外部執行給定邏輯的目的，而這個給定邏輯是通過自定義指令的值，傳到繫結元素el的ctx特性上的。

至此clickoutside的原始碼就分析完了，可以看到clickoutside指令的原始碼並不複雜，不過涉及到的內容還是挺多的，有許多東西值得我們學習，比如利用dom元素的特性來儲存額外資訊，使用閉包快取變數，如何判斷點選在目標元素外部和Vue自定義指令的使用等等。

相關文章