组件库源码中这些写法你掌握了吗？(上）-阿里云开发者社区

组件库源码中这些写法你掌握了吗？(上）

2022-05-14 251

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前沿：这几年，前端的组件库的演变迅速，社区脱颖而出不少优秀的开源组件库，包括element-ui、Ant design、IView等等，这些开源组件库源码中其实有很多值得我们学习的地方，无论是设计思路，代码风格等等，可以通过参考源码中一些写法，引用到我们平时的项目中去。

微信截图_20220514081332.png

前沿：这几年，前端的组件库的演变迅速，社区脱颖而出不少优秀的开源组件库，包括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
❞

微信截图_20220514081347.png

下面我们大概解读下这段代码的三个钩子函数内的逻辑

bind: 将绑定clickoutside指令的dom的el通过push到nodeList存起来，目的在于管理每次有 clickoutside 指令绑定到页面上，都会将绑定元素存储到 nodeList 中去。通过自增的临时变量 id来标识该 clickoutside 指令
update: 其实本质上就是用来更新初始化我们定义绑定在el的ctx中的值，方便组件更新时做变更
unbind：当需要将指令和元素el解绑时，通过遍历原先的“元素管理器“ - nodeList 的长度和结合上文提到的id找到 nodeList 中存储的当前解绑元素 el，将它从nodeList中删除

下图是一个bind的结果

微信截图_20220514081359.png

❝
👦 啊斌同学：那clickoutside是怎么判断是否为点击外部？
❞

答案：是bind中使用的createDocumentHandler()

createDocumentHandler() :就是用来区分当前点击的区域是否为指令绑定的dom，本质上是contains方法，好比某A元素包含B元素，则返回true，否则 false 。用来判断元素所处的位置，简单来说点击绑定v-clickoutside绑定的元素则不触发clickoutside 指令的逻辑，点击不包含区域则触发指令绑定的binding.value，我们看下源码向下

微信截图_20220514081414.png