Element 指令clickoutside原始碼分析
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指令內容
如圖，如果點選在紅色區域內，則全部不觸發 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自定義指令的使用等等。