Sharing experience and tips on avoiding repeated execution of code in JavaScript_javascript tips

I like to go to some large websites and look through their original code, hoping to find some patterns that can be applied to my own code, or discover some tools and techniques that I have never heard of before. However, when I look at the source code of these large websites, I often find a problem, that is, repeated code execution and repeated functional applications. Below are some problems found when viewing their source code. I share these with you, hoping that you can write JavaScript code more concisely and efficiently.
Duplicate collection elements

The most common problem I see in their JavaScript code is duplicate collection elements. Although the execution speed of jQuery selector engine or querySelectorAll is very fast, repeated work will take up more time and resources. This problem is very simple, and the solution is as follows:

Copy the code The code is as follows:

//
$$(".items").addClass("hide");
// ... and later...
$$(".items").removeClass("hide") ;

//
var items = $$(".items");
// ... Use this reference variable from here on!

Yes We condemn programmers who write repetitive code every day, but we still need to strengthen it. Of course, some repeated actions are unavoidable (such as ajax loading the page), but for these situations, it is best to use event proxies instead of pulling content directly.
Duplicate conditional evaluations

Duplicate conditional evaluations are common, but there is usually a general pattern to avoid them. You may see a piece of code written like this:

Copy the code The code is as follows:

var performMiracle = function() {
// If the browser supports feature A...
if(features.someFeature) {

}
// ... If it does not support
else {

}
};

This works, but is not the most efficient code, the above condition may be evaluated multiple times. It would be better to write it like this:

Copy the code The code is as follows:

var performMiracle = features .someFeature ? function() {
// Plan A stuff
} : function() {
// Plan B stuff
};

There is only one condition, And when the conditional calculation is completed, the method or variable has been returned as a result!
Duplicate object creation

Compared with repeated operations, repeated object creation is harder to detect and is usually manifested in regular expressions. Take a look at the code below:

Copy the code The code is as follows:

function cleanText(dirty ) {
// Remove SCRIPT tags
clean = dirty.replace(/]*>([sS]*?)/gi, "");

// Do some more cleaning, maybe whitespace, etc.

return clean;
}

The above code will repeatedly create a new (but the same) regular expression object. In this case, if you create this object outside this function, you can avoid this situation:

Copy code The code is as follows:

var scriptRegex = /]*>([sS]*?)function cleanText(dirty) {
// Get rid of SCRIPT tags
clean = dirty.replace(scriptRegex, "");

// Do some more cleaning , maybe whitespace, etc.

return clean;
}

In the above example, the regular expression object is only created once, but used multiple times - save A lot of CPU processing.

These are just some of the examples I often see of repeated problems written by other programmers. Do you also find this?