I like to go to some big websites and flip through their original code, hoping to find patterns that can be applied to their own code, or to discover tools and techniques that I've never heard before. However, when I look at the source code of these large sites, I often find a problem, that is, repetitive code execution, repetitive functional applications. Here are some questions to see in their source code and share them with you in the hope that you can write JavaScript code more succinctly and efficiently.
Duplicate collection elements
The most common problem I see in their JavaScript code is the repetitive collection of elements. While the jquery selector engine or queryselectorall is performing quickly, repetitive work can take up more time and resources. This problem is very simple, the solution is as follows:
Copy Code code as follows:
//
$$ (". Items"). AddClass ("Hide");
// ... And then ...
$$ (". Items"). Removeclass ("Hide");
//
var items = $$ (". Items");
// ... Start using this reference variable from here!
The condemnation of programmers who write repetitive code is something we do every day, but it still needs to be strengthened. Of course, some repetitive actions are unavoidable (such as Ajax loading pages), but for these situations, it's best to use the event agent instead of pulling the content directly.
The conditional judgment of repetition
Repeated conditional computations are common, but often there is a common pattern to avoid them. You may see a piece of code written like this:
Copy Code code as follows:
var performmiracle = function () {
If the browser supports a feature ...
if (features.somefeature) {
}
// ... If you do not support
else {
}
};
This is possible, but not the most efficient code, and the conditions above may be calculated multiple times. It would be better to write the following:
Copy Code code as follows:
var performmiracle = features.somefeature? function () {
Plan A Stuff
}: Function () {
Plan B Stuff
};
There is only one condition, and the method or variable is returned as the result when the conditional calculation is complete!
Duplicate object creation
Duplicate object creation is more difficult to find than repetitive operations, usually on regular expressions. Take a look at the following code:
Copy Code code as follows:
function Cleantext (dirty) {
Remove Script Tags
Clean = Dirty.replace (/<script[^>]*> ([\s\s]*?) <\/script>/gi, "");
Do some more cleaning, maybe whitespace, etc.
return clean;
}
The code above will repeatedly create a new (but identical) regular expression object, and in this case, if you create the object outside of the function, you can avoid this situation:
Copy Code code as follows:
var Scriptregex =/<script[^>]*> ([\s\s]*?) <\/script>/gi;
function Cleantext (dirty) {
Get rid of SCRIPT tags
Clean = Dirty.replace (Scriptregex, "");
Do some more cleaning, maybe whitespace, etc.
return clean;
}
In the example above, the regular expression object was created only once, but used more than once-saving a lot of CPU processing.
This is just some of the other programmers I've often read about repetitive problems, and have you found it?
