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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
JavaScript Tab菜单实现过程解析
May 13 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
PHP中文汉字验证码
2007/04/08 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python定时执行指定函数的方法
2015/05/27 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
社区优秀志愿者先进事迹
2014/05/09 职场文书
小学语文业务学习材料
2014/06/02 职场文书
白莲教口号
2014/06/18 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python