一线大厂常用的六大vue自定义指令合集之防抖v-debounce

前言

截至目前，一线大厂常用的6大vue自定义指令中，我们已经学习实现了2个了，今天我们一起来看一下第三个常用的自定义指令防抖v-debounce。
关于javascript中是如何实现防抖，这里不再过多赘述，感兴趣的小伙伴可以查看这篇web前端高级JavaScript - 函数的防抖和节流文章了解更多。本篇文章主要介绍如何实现一个防抖的自定义指令，下面我们就来分析一下大体实现思路。

思路分析

• 我们知道一般情况下，防抖函数会接收3个参数：一个是防抖函数中要执行的具体函数func，一个是等待的时间wait，还有一个就是immediate标识立即执行还是最后执行。
  之前学习vue自定义指令时我们已经知道：指令等号后面值会作为参数传递给指令函数，但是等号后面只有一个值，而我们要传递是3个值甚至更多，怎么办，其实也简单，我们只需要把要传递的参数拼成一个对象传递就可以了。这样传多少个参数都不是问题
• 另外像wait和immediate这两个参数算是特殊参数，为什么这么说呢？wait是设置防抖时间的而immediate是作为标识的。这个时候冒号和修饰符就派上用场了。我们在使用vue指令的时候，在指令的后面可以跟一个冒号和一个值，而这个值也会被传给指令函数，并在函数中通过binding.arg或者这个值。同时指令后面还可以接修饰符，类似v-xxx.yyy，点后面的就是修饰符，在指令函数中通过binding.modifier.yyy获取该指令（一般是true或false值）
• 通过上面的分析，其中的两个参数我们已经通过冒号和修饰符的形式传递了，那么就只剩下一个函数了，这个时候我们完全可以不用传递对象而是直接将函数传给指令即可。所以这里就出现了两种情况，一种是传递了一个对象，还有一种是只穿一个函数。所以后面我们写代码时应该有所区分，如果是函数直接执行，如果是对象则需要解析出对象中的值。
• 另外为了让我们的自定义指令更灵活更通用，我们还需要做如下处理
  • 在指令函数中再额外接收一个type参数，用来标识是什么类型的防抖，比如click或scroll等，这个可以自由选择
  • 同时也接收一个额外的params参数。想想如果我们传递给指令的函数也需要其它参数呢，这时仍然可以通过外面以对象属性的形式进行传递
  • 最后就是除了函数是必须要传的参数以外，其它几个参数可以传也可以不传，所以我们需要为这些除了func以外的其它参数设置默认值。
• 通过上面的思路分析，我想我们的防抖基本上已经差不多了。接下来就让我们来一起实践一下。

防抖v-debounce自定义指令代码

function debounce(func, wait = 300, immediate = true){
   
	let timer = null;
	return function anonymouse(