在項目裏，咱們常常會使用組件庫進行快速開發，然而在過程當中，又不免會遇到對組件庫的改造和拓展，如何優雅且簡單的進行重構，下面讓咱們從一個簡單需求來探索組件的奇技淫巧--Mixins和HOChtml
項目中使用組件庫遇到的需求
需求: 實現全部頁面按鈕的點擊事件節流控制vue
隨便選用一套組件庫，在此次例子裏，我選用iview進行開發node
iview官網的Button組件的使用方法以下git
<template>
<Button @click="click">Default</Button>
</template>
<script>
export default {
methods: {
click () {
console.log('yes')
}
}
}
</script>
複製代碼複製代碼
Button的源碼也很簡單,在這裏我剔除了不相關的內容github
<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>
複製代碼複製代碼
從源碼裏能夠獲得如下信息bash
- iview的Button組件封裝了原生的button組件
- 對原生的button組件，進行了click事件的綁定
- click事件觸發時，向組件emit了click事件
需求怎麼實現
再看看咱們的需求 實現全部頁面按鈕的點擊事件節流控制,這裏有幾個關鍵點iview
- 點擊事件，iview的Button組件裏已經對原生的button的click進行了綁定，咱們須要劫持這段綁定，進行節流
- 節流控制，節流（debounce）函數，網上有不少示例，容易實現
那麼需求的難點就在於，如何實現點擊事件的劫持？在這裏有兩種方案ide
Mixins
1. Mixin是什麼
Mixins 在官方Vue文檔中已經有了很詳細的介紹，不熟悉的朋友們能夠看看，用一句話來理解，即合併組件的組件函數
官方介紹post
用一張圖來表示
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 都能實現這個簡單的需求，但願你們能理解這兩種技巧，解決項目中的問題