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 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
javascript动画效果类封装代码
Aug 28 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
详解Vue router路由
Nov 20 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python中logging实例讲解
2019/01/17 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
简单了解python代码优化小技巧
2019/07/08 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python中threading开启关闭线程操作
2020/05/02 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
企业演讲比赛主持词
2014/03/18 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
平面设计师岗位职责
2014/09/18 职场文书
高三数学教学反思
2016/02/18 职场文书
晚会开幕词范文
2016/03/04 职场文书
市场营销计划书
2019/04/24 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电