在專案裡，我們經常會使用元件庫進行快速開發，然而在過程中，又難免會遇到對元件庫的改造和擴充，如何優雅且簡單的進行重構，下面讓我們從一個簡單需求來探索元件的奇技淫巧--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 都能實現這個簡單的需求，希望大家能理解這兩種技巧，解決專案中的問題