奇技淫巧 - Vue Mixins 高階元件 與 Vue HOC 高階元件 實踐

秋發表於2019-01-02
Vue元件

在專案裡，我們經常會使用元件庫進行快速開發，然而在過程中，又難免會遇到對元件庫的改造和擴充，如何優雅且簡單的進行重構，下面讓我們從一個簡單需求來探索元件的奇技淫巧--Mixins和HOC

專案中使用元件庫遇到的需求

需求: 實現所有頁面按鈕的點選事件防抖控制

奇技淫巧 - Vue Mixins 高階元件 與 Vue 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>
複製程式碼

從原始碼裡可以得到以下資訊

  1. iview的Button元件封裝了原生的button元件
  2. 對原生的button元件，進行了click事件的繫結
  3. click事件觸發時，向元件emit了click事件

需求怎麼實現

再看看我們的需求 實現所有頁面按鈕的點選事件防抖控制,這裡有幾個關鍵點

  1. 點選事件，iview的Button元件裡已經對原生的button的click進行了繫結，我們需要劫持這段繫結，進行防抖
  2. 防抖控制，防抖（debounce）函式，網上有很多示例，容易實現

那麼需求的難點就在於，如何實現點選事件的劫持？在這裡有兩種方案

Mixins

1. Mixin是什麼

Mixins 在官方Vue文件中已經有了很詳細的介紹，不熟悉的朋友們可以看看，用一句話來理解，即合併元件的元件

官方介紹

用一張圖來表示

奇技淫巧 - Vue Mixins 高階元件 與 Vue HOC 高階元件 實踐

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事件

  1. 建立debounce防抖函式
  2. 複製iview Button元件中handleClick方法為_handleClick
  3. 匯出物件，methods裡重寫handleClick方法，進行防抖控制

使用mixins 來實現我們需求很簡單，但也因此會有許多問題

  1. 需要知道Button原始碼結構
  2. 帶來了隱式依賴，如果mixins巢狀，會很難理解

那麼有沒有更好的方法？

HOC

1.什麼是HOC?

所謂高階元件其實就是高階函式，React 和 Vue 都證明了一件事兒：一個函式就是一個元件。所以元件是函式這個命題成立了，那高階元件很自然的就是高階函式，即一個返回函式的函式

HOC的詳細介紹和實現，這篇文章探索Vue高階元件有詳細介紹,用一句話來理解，即包裹元件的元件

用一張圖來表示

奇技淫巧 - Vue Mixins 高階元件 與 Vue HOC 高階元件 實踐

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事件

  1. 建立debounce防抖函式
  2. 匯出新的元件
  3. render渲染出iview Button
  4. Button 繫結debounce後的click方法

HOC的包裹性同時也會帶來幾個問題

  1. 元件之間通訊會被攔截，比如子元件訪問父元件的方法(this.$parent.methods)
  2. vue官方並沒有推薦使用HOC :(

總結

Mixins 和 HOC 都能實現這個簡單的需求，希望大家能理解這兩種技巧，解決專案中的問題

原始碼：github.com/warpcgd/mix…

demo：warpcgd.github.io/mixinAndHoc…

相關文章