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


Posted in Javascript onJuly 09, 2018

节流函数是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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
js中substring和substr的定义和用法
May 05 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
JavaScript实现创建自定义对象的常用方式总结
Jul 09 #Javascript
vue-cli配置环境变量的方法
Jul 09 #Javascript
JS逻辑运算符短路操作实例分析
Jul 09 #Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 #Javascript
使用async await 封装 axios的方法
Jul 09 #Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 #Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 #jQuery
You might like
PHP CURL与java http使用方法详解
2018/01/26 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
原生js轮播特效
2017/05/18 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Python入门篇之文件
2014/10/20 Python
基于django传递数据到后端的例子
2019/08/16 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python descriptor(描述符)的实现
2020/11/15 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
网络安全方面的面试题
2016/01/07 面试题
店长职务说明书
2014/02/04 职场文书
销售经理竞聘书
2014/03/31 职场文书
植树节标语
2014/06/27 职场文书
欢度春节标语
2014/07/01 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
银行实习推荐信
2015/03/27 职场文书
毕业设计致谢语
2015/05/14 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP