前沿：这几年，前端的组件库的演变迅速，社区脱颖而出不少优秀的开源组件库，包括element-ui、Ant design、IView等等，这些开源组件库源码中其实有很多值得我们学习的地方，无论是设计思路，代码风格等等，可以通过参考源码中一些写法，引用到我们平时的项目中去。
❞
1.Directives (指令)
❝在vue中我们可以通过自定义指令，来对DOM元素进行底层操作，我们顺便复习下如何自定义一个指令，主要包含5个钩子函数，这里只列出几个比较常用的钩子函数，最后再介绍组件库常见的一些自定义指令
❞
Vue.directive("directiveName", { bind: function(el, binding, vnode){ # 当指令第一次绑定元素el时触发，常用来做初始化 }, update: function(el, binding, vnode) { # 绑定Vue编译生成的虚拟节点VNode 更新时调用 }, unbind: function(el, binding, vnode) { # 解绑操作，用来将指令和元素解绑时调用，类似vue生命周期中的beforeDestroy钩子函数 } });
1.1 v-clickoutside
❝v-clickoutside是Element-ui实现的一个自定义指令，目的是用来处理点击元素外面才会触发的事件，常用来处理下拉菜单等展开内容的关闭，在Element-ui的Select选择器、Dropdown下拉菜单、Popover 弹出框等组件中都用到了该指令
❞
- element的实现
❝element的 clickoutside 的具体实现，如下👇，更多源码详情看链接 element/src/utils/clickoutside.js
❞
下面我们大概解读下这段代码的三个钩子函数内的逻辑
bind: 将绑定clickoutside指令的dom的el通过push到nodeList存起来，目的在于管理每次有 clickoutside 指令绑定到页面上，都会将绑定元素存储到 nodeList 中去。通过自增的临时变量 id来标识该 clickoutside 指令update: 其实本质上就是用来更新初始化我们定义绑定在el的ctx中的值，方便组件更新时做变更unbind：当需要将指令和元素el解绑时，通过遍历原先的“元素管理器“ - nodeList 的长度和结合上文提到的id找到 nodeList 中存储的当前解绑元素 el，将它从nodeList中删除
下图是一个bind的结果
❝👦 啊斌同学：那clickoutside是怎么判断是否为点击外部？
❞
答案：是bind中使用的createDocumentHandler()
createDocumentHandler():就是用来区分当前点击的区域是否为指令绑定的dom，本质上是contains方法，好比某A元素包含B元素，则返回true，否则 false 。用来判断元素所处的位置，简单来说点击绑定v-clickoutside绑定的元素则不触发clickoutside 指令的逻辑，点击不包含区域则触发指令绑定的binding.value，我们看下源码向下
❝👧 啊琪同学：这个组件的指令，我想自己项目中使用咋搞哦？
❞
答案：跟平常引用的指令一样的方式，可以参考源码中引用 链接
- IView的实现
❝👧 啊呆弟弟：那其他组件库这种情况怎么实现的呢？
❞
答案：像iview源码中clickoutside引入了v-click-outside-x作为依赖，感兴趣的童鞋可以看文档链接
1.2 v-repeat-click
❝v-repeat-clickr顾名思义就是"重复点击、用于函数防抖"，结合dom.js中的on和once方法。element将v-repeat-clickr应用于el-input-number组件，当你点击
❞
当我们长按+或者-时，本质上只会触发一次触发mousedown的回调，但我们会发现输入框中的数字会不断递增？让我们先看看源码 源码链接
❝啊森同学：那数字会变，那不是一直触发？
❞
答案：repeat-click在mousedown的回调函数中加入了定时器，当鼠标松开，触发一次mouseup回调方法，然后根据时间间隔来执行
- 如果时间间隔大于100毫秒，mousedown的回调方法里的setInterval回调函数就会执行handler函数（本质上是数字的decrease或increase）
- 如果时间间隔小于100毫秒，定时器就会取消，通过once方法注册并执行一次mouseup回调
拓展：我们看看domjs中on及once的定义
- once: 注册事件监听器并只允许执行一次，然后取消监听方法
