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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP中图片等比缩放的实例
2013/03/24 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php生成gif动画的方法
2015/11/05 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
利用Python实现图书超期提醒
2016/08/02 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
班主任工作年限证明
2014/01/12 职场文书
驾驶员岗位职责
2014/01/29 职场文书
工作保证书范文
2014/04/29 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
雨中的树观后感
2015/06/03 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫