阅读 6829

组件库源码中这些写法你掌握了吗?

前沿:这几年,前端的组件库的演变迅速,社区脱颖而出不少优秀的开源组件库,包括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: 注册事件监听器并只允许执行一次,然后取消监听方法

2.Mixin(混入)

Mixin相信大家不陌生,mixin提供了一种非常灵活的方式,可以用来分发Vue组件中的可复用功能,借助Mixin多个组件可以共享数据和方法。同时引入mixin的组件,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数也将会在两个都被调用(Mixin中的钩子会先执行)

2.1 dispath 和 broadcast(Iview & element)

Vue新版本中去掉了broadcast和dispatch的方法,分别是用来作:事件广播 和 事件派发的要。而后来 element ui 和 iview 中对 broadcast 和 dispatch 方法进行了重写,并通过 mixin 的方式植入到每个组件中。

  • broadcast

broadcast 方法的作用是向后代子孙组件传值,它会遍历所有的后代组件,当遍历到后代组件中 componentName 与当前的组件名一样,则触发 $emit 事件,以此来传递数据

  • dispath

dispatch 的作用是向祖先组件传值,它会一直寻找父组件,直到找到组件名和当前传入的组件名一致的祖先组件,就会触发其身上的 $emit 事件,并传递数据

下面我们看一个例子element的Select组件

el-select(ElSelect)其实包含了ElOption、ElOptionGroup等组件,那他们子父或者子祖之间是如何通信的呢,通过的就是dispath和broadcast,我们可以看看源码中的定义,下面是ElOption组件通知el-select的写法

ElOption组件调用dispatch方法(this.dispatch('ElSelect', 'handleOptionClick', [this.value])),通过while循环,找到上层名为ElSelect的组件,并在该组件中捕获该事件

2.2 link (Iview)

Link的方法主要是跳转链接的区分,组件中如面包屑(breadcrumb)、按钮(button)、单元格(Cell)等组件需要处理跳转链接to=""内部路由还是外部链接,还有就是点击事件的处理

如: <Button to="//iviewui.com" target="_blank">New window</Button>

  • to - linkUrl (处理链接)

👦 啊乐同学:他是怎么区分内部外部链接哦?

答案是 : 外部链接:检测是否包含'//',内部路由:对相对路径则通过 ``router.resolve处理```

  • Click - handleClick (处理点击事件)

我们可以看到button链接模式下的点击事件click的实现,就是借助混入mixinsLink中的handleCheckClick

3. Validate (表单校验)

表单校验是组件库表单组件离不开的工具,作为表单数据提交前的格式检验拦截,是个不可缺的角色,我们看到element 和 Iview组件库在表单校验都使用到一个依赖async-validator

  • element
  • IView

树酱之前在 前端表单数据那些事 中有介绍过async-validator,感兴趣的童鞋可以看这篇👈

🌲酱往期文章:

请你喝杯🍵 记得三连哦~

1.阅读完记得给🌲 酱点个赞哦,有👍 有动力

2.关注公众号前端那些趣事,陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨