Vue自定义指令封装节流函数的方法示例

2019-11-19 13:31:44

字体：大中小

来源：转载

供稿：网友

节流函数是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的自定义指令,可以简化很多重复代码,并且逻辑更加清晰

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript解决浮点数计算不准确问题的方法分析

下一篇：JavaScript实现创建自定义对象的常用方式总结