Vue自定义指令封装节流函数

作者: 勇PAN高峰 | 来源:发表于2018-07-07 23:42 被阅读19次

    节流函数是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的自定义指令,可以简化很多重复代码,并且逻辑更加清晰
    查看原文https://blog.noob6.com/2018/07/07/vue-directives-of-debounce-function/

    相关文章

      网友评论

        本文标题:Vue自定义指令封装节流函数

        本文链接:https://www.haomeiwen.com/subject/xbenuftx.html