Vue自定義指令封裝節流函數

節流函數是web前端開發中常常用到的一個開發技巧,在input實時搜索,滾動事件等,爲了不過多消耗性能,咱們都會使用節流函數.在《JavaScript高級程序設計》一書中有這樣的一個例子:

function throttle (method, context) {
    clearTimeout((method.tId))
    method.tId = setTimeout(function () {
      method.call(context)
    }, 100)
  }

  function resizeDiv () {
    var div = document.getElementById('myDiv')
    div.style.height = div.offsetWidth + 'px'
  }

  window.onresize = function () {
    throttle(resizeDiv)
  }
複製代碼

這個就是很典型的函數節流的應用,很少解釋,本文經過vue的自定義指令封裝相似的方法.

<template>
  <div>
    <input type="text" v-model="text" v-debounce="search" >
  </div>
</template>
<script> export default { name: 'debounce', data () { return { msg: 'Welcome to Your Vue.js App', text: '', count: 1 } }, directives: { debounce: { inserted: function (el, binding) { let timer el.addEventListener('keyup', () => { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { binding.value() }, 300) }) } } }, methods: { search () { // 實際要進行的操做 axios.get('')之類的 this.count++ console.log('count is:' + this.count) } } } </script>
複製代碼

以上代碼實現了一個實時搜索類的函數節流,經過vue自定義指令v-debounce實現.本來,若是咱們想作一個實施搜索,那麼會直接用@keyup=search,這樣就會很是耗性能,鍵盤敲一下,就會調用一次search事件,若是是ajax請求,那麼會很是不友好,因此經過v-debounce,則能夠在鍵盤連續敲擊的時候組織運行,停留300毫秒才執行. 經過vue的自定義指令,還能夠將其掛載在全局,那樣就能全局經過v-debounce調用了.這個比傳統方法簡單不少,不須要call,apply之類的. 關鍵點:vue 的自定義指令傳遞的參數binding 若是是一個函數,則經過binding.value()來執行,經過上述示例,還能夠傳遞好比事件, 綁定對象之類的,上例綁定的是el, keyup事件,這些也能夠經過binding傳遞.經過vue的自定義指令,能夠簡化不少重複代碼,而且邏輯更加清晰 查看原文blog.noob6.com/2018/07/07/…