Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

Up to now, we have implemented two of the six vUE custom instructions commonly used by major manufacturers. Today we will take a look at the third common custom instruction, v-debounce. For more information on how to implement anti-shake in javascript, check out this article on Anti-shake and Throttling for advanced javascript functions on the Web front End. This article mainly introduces how to implement a custom anti-shake command, we will analyze the general implementation ideas.

Thought analysis

  • In general, the stabilization function takes three parameters: func, wait, and immediate whether to execute immediately or last.

Before learning the vUE custom instruction we already know: the value of the instruction equal sign will be passed to the instruction function as a parameter, but there is only one value behind the equal sign, and we want to pass three or more values, how to do, in fact, it is also simple, we just need to pass the parameter to be passed into an object. It doesn’t matter how many arguments you pass

  • Wait and immediate are special parameters. Wait is used to set the alarm time and immediate is used as the identifier. This is where the colon and modifier come in handy. When we use a vue directive, we can follow the directive with a colon and a value, which is also passed to the directive function through binding.arg or this value. Yyy, which can be obtained from the instruction function via binding.modifier. Yyy (usually true or false)
  • From the above analysis, two of the parameters have been passed as colons and modifiers, so there is only one function left, and we can pass the function directly to the instruction without passing the object. So there are two cases, one is passing an object, and the other is passing only a function. So when we write code, we should make a distinction between a function that executes directly and an object that parses the value of the object.
  • In addition, in order to make our custom instruction more flexible and universal, we also need to do the following processing
    • Accept an additional type parameter in the instruction function, which identifies the type of anti-shake, such as click or scroll, etc., which is optional
    • An additional params parameter is also received. Imagine if the function we pass to the instruction also needs other parameters, which can still be passed externally as object properties
    • Finally, there are several parameters that can be passed or not, except for functions that must be passed, so we need to set default values for these other parameters besides func.
  • Through the above analysis, I think our anti – shake is basically about the same. Let’s put it into practice.

Anti-shock V-Debounce custom instruction code

function debounce(func, wait = 300, immediate = true){
	let timer = null;
	return function anonymouse(. params){
		clearTimeout(timer);
		letnow = immediate && ! timer; timer =setTimeout(() = > {
			timer = null; ! immediate ? func.call(this. params) :null;
		},wait);
		now ? func.call(this. params) :null; }}const app = createApp();
app.directive("debounce", {beforeMount(el,binding){
		let val = binding.value,// Get the argument passed by the instruction
			wait = 500.// Wait defaults to 500 milliseconds
			immidiate = false,
			type = 'click',
			params = [],
			func
		if(val == null) return;// Do nothing if no arguments are passed
		if(typeofval ! = ='object' && typeofval ! = ='function') return ;// How to pass arguments that are neither objects nor functions without doing anything
		if(binding.arg) wait = +binding.arg;// Get the argument after the colon
		if(binding.modifiers && binding.modifiers.immediate) immediate = binding.modifiers.immediate;// Get the modifier
		if(typeof val === 'function') func = val;// If the function is passed, the assignment is directly to func
		if(typeof val === 'object') {// Parse the object if it is an object
			func = val.func || function(){};
			type = val.type || 'click';
			params = val.params || [];			
		}
		el.$type = type;
		// This step defines a proxy function that can pass parameters to func, while ensuring that func refers to this
		el.$handle = debounce(function proxy(. args){
			return func.call(this. params.concat(args)); },wait, immediate); el.addEventListener(el.$type, el.$handle); },unmounted(el){ el.removeEventListener(el.$type, el.$handle); }});Copy the code

conclusion

In this way, we have achieved a custom anti-shake instruction, which is a bit more complicated than the first two instructions and involves a bit more code. But it’s also more common than the first two. In the next article we will explore the next common throttling custom instruction. Well this article is introduced here, welcome to correct any questions. At the same time like small partners welcome to like the message plus attention oh!