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