clickoutside是Element-ui實(shí)現(xiàn)的一個(gè)自定義指令，顧名思義，該指令用來處理目標(biāo)節(jié)點(diǎn)之外的點(diǎn)擊事件，常用來處理下拉菜單等展開內(nèi)容的關(guān)閉，在Element-ui的Select選擇器、Dropdown下拉菜單、Popover 彈出框等組件中都用到了該指令，所以這個(gè)指令在實(shí)現(xiàn)一些自定義組件的時(shí)候非常有用。

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

// 注冊一個(gè)全局自定義指令 
Vue.directive('directiveName', {
 bind: function(el, binding, vnode){
  // 當(dāng)指令第一次綁定到元素時(shí)調(diào)用，常用來進(jìn)行一些初始化設(shè)置
 	...
 },
 inserted: function(el, binding, vnode){
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
 	...
 },
 update: function(el, binding, vnode, oldVnode){
  // 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前
 	...
 },
 componentUpdated: function(el, binding, vnode, oldVnode){
  // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用
 	...
 },
 unbind: function(el, binding, vnode){
  // 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用，類似于beforeDestroy的功能
 	...
 }
});

可以看到在配置對象中只有5個(gè)可選的鉤子函數(shù)，他們的參數(shù)有4個(gè)，分別是 el、binding、vnode、oldVnode

• el ：指令所綁定的元素，可以用來直接操作DOM
• binding ： 一個(gè)包含了自定義詳細(xì)信息的對象，內(nèi)部收集了使用自定義指令時(shí)傳入的值、修飾符、參數(shù)等數(shù)據(jù)，詳細(xì)信息可以在官方文檔見到，已經(jīng)說的十分詳細(xì)了
• vnode : Vue編譯生成的虛擬節(jié)點(diǎn)
• oldVnode： 本次Vnode更新之前，上一次產(chǎn)生的虛擬節(jié)點(diǎn)，僅在  update  和  componentUpdated  鉤子中可用。

看完了自定義指令的內(nèi)容，接下來我們就來分析clickoutside的具體實(shí)現(xiàn)。

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和一個(gè)用來進(jìn)行事件綁定的工具函數(shù)on，然后定義了兩個(gè)全局常量 nodeList 和 ctx 。nodeList 是一個(gè) 元素搜集器 ，會(huì)將頁面中所有綁定了clickoutside指令的dom元素存儲(chǔ)起來，而ctx定義了一個(gè)命名空間（必須比較特殊，防止和其它特性重名）， 后面會(huì)將它添加為元素el的properties ，具體后面會(huì)分析到。

接著利用之前引入的Vue進(jìn)行判斷，非服務(wù)端則給文檔對象添加 mousedown 和 mouseup 事件，在 mousedown 事件回調(diào)中，將事件對象存儲(chǔ)到 startClick 全局變量中，在 mouseup 事件回調(diào)中遍歷 nodeList ，然后 分別執(zhí)行每一個(gè)node( 即之前存儲(chǔ)起來的clickoutside指令綁定的元素el ) ctx 特性中存儲(chǔ)的 documentHandler 函數(shù) 。關(guān)于ctx property的值會(huì)在后面介紹。

最后就是導(dǎo)出了一個(gè) clickoutside 的配置對象，在用到 clickoutside 指令的組件中導(dǎo)入該配置對象，然后在組件中局部注冊后就可以使用了。

該配置對象中使用了 bind、update、unbind 三個(gè)鉤子函數(shù)來定義clickoutside指令，主要做的事情就是搜集該自定義指令的相關(guān)信息，然后存儲(chǔ)到 el 的 ctx 特性上。接下來具體來看一下這個(gè)搜集過程。

首先是bind鉤子函數(shù)：

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指令綁定到頁面上，都會(huì)將綁定元素存儲(chǔ)到nodeList當(dāng)中去，即前面說過的 元素搜集器 。接下來將全局變量seed++，并且賦值給一個(gè)臨時(shí)變量id，最后就是給el的ctx特性賦值了，它的值是一個(gè)對象，內(nèi)部包括了:

id ：前面生成的全局唯一id，用來標(biāo)識該clickoutside指令

documentHandler ：利用 createDocumentHandler 生成的一個(gè)回調(diào)函數(shù)。前面的分析中說到，給頁面綁定的mouseup事件回調(diào)中，會(huì)遍歷nodeList，分別執(zhí)行每一個(gè)綁定元素el的ctx特性上的documentHandler函數(shù)， 這個(gè)函數(shù)就是在這里生成的 ，至于這個(gè)回調(diào)函數(shù)究竟是做了什么，后面再詳細(xì)分析。

methodName ：binding.expression，查看自定義指令的文檔可以知道， binding.expression 的值是字符串形式的指令表達(dá)式。例如有   <div v-my-directive="1 + 1"></div> ，則 binding.expression 的值為  1 + 1

bindingFn ： binding.value，指令的綁定值，還是上面的例子，則 binding.value 的值是 2 （1 + 1等于2），即 指令的值為js表達(dá)式的情況下， **binding.expresssion** 為表達(dá)式本身，是一個(gè)字符串，而 **binding.value** 是該表達(dá)式的值。

接著我們看下 update 鉤子：

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

可以看到update鉤子的內(nèi)容很簡單，就是當(dāng)組件更新的時(shí)候，更新 綁定元素 el 的特性 ctx 中的值。

再接著我們看看最后一個(gè)鉤子 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];
}

這個(gè)鉤子也很簡單，就是當(dāng) clickoutside 指令與元素el解綁的時(shí)候，遍歷 nodeList ，通過ctx特性上的id找到 nodeList 中存儲(chǔ)的當(dāng)前解綁元素el，將它從nodeList中刪除，并且刪除el上的ctx特性。

以上就是clickoutside指令配置對象中做的所有操作，總結(jié)起來就是：

當(dāng)指令與元素綁定以及組件更新的時(shí)候，搜集并設(shè)置綁定元素的ctx特性，同時(shí)將綁定元素添加到nodeList當(dāng)中去，當(dāng)指令與元素解綁的時(shí)候，刪除nodeList中存儲(chǔ)的對應(yīng)的綁定元素，并將之前設(shè)置在綁定元素上之前設(shè)置的ctx特性刪除掉。

前面說過，給頁面綁定的mouseup事件回調(diào)中，會(huì)遍歷nodeList，分別執(zhí)行搜集起來的每一個(gè)綁定元素el上的ctx特性中的 documentHandler 函數(shù)。而該函數(shù)是通過  createDocumentHandler 函數(shù)生成的，讓我們看看這個(gè)函數(shù)都做了什么。

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();
  }
 };
}

可以看到，這個(gè)函數(shù)利用了閉包將傳入的參數(shù)緩存起來，然后返回一個(gè)函數(shù)。在這個(gè)返回的函數(shù)中，會(huì)進(jìn)行一系列判斷，首先在第一個(gè)if里面，判斷了：

• vnode.context 是否存在，不存在退出
• mouseup.target 是否存在，不存在退出
• mousedown.target 是否存在，不存在退出
• 綁定對象el是否包含 mouseup.target/mousedown.target 子節(jié)點(diǎn)，如果包含說明點(diǎn)擊的是綁定元素的內(nèi)部，則不執(zhí)行 clickoutside 指令內(nèi)容
• 綁定對象el是否等于 mouseup.target ，等于說明點(diǎn)擊的就是綁定元素自身，也不執(zhí)行 clickoutside 指令內(nèi)容
• 最后 vnode.context.popperElm 這部分內(nèi)容則是 : 判斷是否點(diǎn)擊在下拉菜單的上，如果是，也是沒有點(diǎn)擊在綁定元素外部，不執(zhí)行clickoutside指令內(nèi)容

如圖，如果點(diǎn)擊在紅色區(qū)域內(nèi)，則全部不觸發(fā) clickoutside 指令的邏輯。

如果以上條件全部符合，則判斷閉包緩存起來的值，如果 methodName 存在則執(zhí)行這個(gè)方法，如果不存在則執(zhí)行 bindingFn 。例如：

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

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

  methods: {
   handleClose(){
    this.visible = false;
   }
  }
 }
</script>

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

以上就是 documentHandler 方法的生成以及內(nèi)部邏輯。通過這個(gè)方法和之前的分析，我們就可以知道，當(dāng)頁面綁 mouseup 事件觸發(fā)的時(shí)候，會(huì)遍歷 nodeList ，依次執(zhí)行每一個(gè)綁定元素el的ctx特性上的 documentHandler 方法。而在這個(gè)方法內(nèi)部可以訪問到指令傳入的表達(dá)式，在進(jìn)行一系列判斷之后會(huì)執(zhí)行該表達(dá)式，從而達(dá)到點(diǎn)擊目標(biāo)元素外部執(zhí)行給定邏輯的目的，而這個(gè)給定邏輯是通過自定義指令的值，傳到綁定元素el的ctx特性上的。

至此 clickoutside 的源碼就分析完了，可以看到 clickoutside 指令的源碼并不復(fù)雜，不過涉及到的內(nèi)容還是挺多的，有許多東西值得我們學(xué)習(xí)，比如利用dom元素的特性來存儲(chǔ)額外信息，使用閉包緩存變量，如何判斷點(diǎn)擊在目標(biāo)元素外部和Vue自定義指令的使用等等。

最新評論