共计 2863 个字符，预计需要花费 8 分钟才能阅读完成。
在项目里，我们经常会使用组件库进行快速开发，然而在过程中，又难免会遇到对组件库的改造和拓展，如何优雅且简单的进行重构，下面让我们从一个简单需求来探索组件的奇技淫巧 –Mixins 和 HOC
项目中使用组件库遇到的需求
需求: 实现所有页面按钮的点击事件节流控制
随便选用一套组件库，在这次例子里，我选用 iview 进行开发
iview 官网的 Button 组件的使用方法如下
<template>
<Button @click=”click”>Default</Button>
</template>
<script>
export default {
methods: {
click () {
console.log(‘yes’)
}
}
}
</script>
Button 的源码也很简单, 在这里我剔除了不相关的内容
<template>
<button @click=”handleClick”></button>
</template>
<script>
export default {
name: ‘Button’,
components: {Icon},
props: {
},
data () {
},
computed: {
},
methods: {
handleClick (event) {
this.$emit(‘click’, event);
}
},
mounted () {
}
};
</script>
从源码里可以得到以下信息
iview 的 Button 组件封装了原生的 button 组件
对原生的 button 组件，进行了 click 事件的绑定
click 事件触发时，向组件 emit 了 click 事件
需求怎么实现
再看看我们的需求 实现所有页面按钮的点击事件节流控制, 这里有几个关键点
点击事件，iview 的 Button 组件里已经对原生的 button 的 click 进行了绑定，我们需要劫持这段绑定，进行节流
节流控制，节流（debounce）函数，网上有很多示例，容易实现
那么需求的难点就在于，如何实现点击事件的劫持？在这里有两种方案
Mixins
1. Mixin 是什么
Mixins 在官方 Vue 文档中已经有了很详细的介绍，不熟悉的朋友们可以看看，用一句话来理解，即合并组件的组件
官方介绍
用一张图来表示
2. 怎么解决需求
直接上源码
// 节流函数
function debounce (func, delay, context, event) {
clearTimeout(func.timer)
func.timer = setTimeout(function () {
func.call(context, event)
}, delay)
}
// iview 中 click 方法拷贝
function _handleClick (event) {
this.$emit(‘click’, event)
const openInNewWindow = event.ctrlKey || event.metaKey
this.handleCheckClick(event, openInNewWindow)
}
// 导出新组件
export default {
props: {
},
mixins: [Vue.options.components.Button], // iview 中 Button 组件
data () {
return {}
},
mounted () {
console.log(‘mixins succeed’)
},
methods: {
handleClick (event) {
let that = this
console.log(‘debounce’)
debounce(_handleClickLink, 300, that, event)
}
}
}
3. 原理
mixins 的原理很容易理解，上列源码我们做了这些操作，来实现合并 ivew Button 组件，劫持 click 事件
创建 debounce 节流函数
复制 iview Button 组件中 handleClick 方法为_handleClick
导出对象，methods 里重写 handleClick 方法，进行节流控制
使用 mixins 来实现我们需求很简单，但也因此会有许多问题
需要知道 Button 源码结构
带来了隐式依赖，如果 mixins 嵌套，会很难理解
那么有没有更好的方法？
HOC
1. 什么是 HOC?
所谓高阶组件其实就是高阶函数，React 和 Vue 都证明了一件事儿：一个函数就是一个组件。所以组件是函数这个命题成立了，那高阶组件很自然的就是高阶函数，即一个返回函数的函数
HOC 的详细介绍和实现，这篇文章探索 Vue 高阶组件有详细介绍, 用一句话来理解，即包裹组件的组件
用一张图来表示
2. 怎么解决需求
直接上源码
// 节流函数
function debounce (func, delay, context, event) {
clearTimeout(func.timer)
func.timer = setTimeout(function () {
func.call(context, event)
}, delay)
}
// 导出新组件
export default {
props: {},
name: ‘ButtonHoc’,
data () {
return {}
},
mounted () {
console.log(‘HOC succeed’)
},
methods: {
handleClickLink (event) {
let that = this
console.log(‘debounce’)
// that.$listeners.click 为绑定在新组件上的 click 函数
debounce(that.$listeners.click, 300, that, event)
}
},
render (h) {
const slots = Object.keys(this.$slots)
.reduce((arr, key) => arr.concat(this.$slots[key]), [])
.map(vnode => {
vnode.context = this._self
return vnode
})
return h(‘Button’, {
on: {
click: this.handleClickLink // 新组件绑定 click 事件
},
props: this.$props,
// 透传 scopedSlots
scopedSlots: this.$scopedSlots,
attrs: this.$attrs
}, slots)
}
}
3. 原理
HOC 的特点在于它的包裹性，上列源码我们做了这些操作，来实现包裹 iview 的 Button 组件，劫持 click 事件
创建 debounce 节流函数
导出新的组件
render 渲染出 iview Button
Button 绑定 debounce 后的 click 方法
HOC 的包裹性同时也会带来几个问题
组件之间通信会被拦截，比如子组件访问父组件的方法 (this.$parent.methods)
vue 官方并没有推荐使用 HOC :(
总结
Mixins 和 HOC 都能实现这个简单的需求，希望大家能理解这两种技巧，解决项目中的问题
源码：https://github.com/warpcgd/mi…
demo：https://warpcgd.github.io/mix…
