We often find a problem, that is, repeated code execution. Below are some problems found when you view their source code and share these issues with you, I hope you can write JavaScript code more concisely and efficiently. I like some large websites to read their original code and hope to find some patterns that can be applied to your own code, or discover tools and skills that you have never heard of before. However, when I view the source code of these large websites, I often find a problem, that is, repeated code execution and repeated functional applications. The following are some problems found when viewing their source code. I will share them with you, hoping that you can write JavaScript code more concisely and efficiently.
Repeated collection Elements
The most common problem I see in their JavaScript code is repeated collection elements. Although the execution speed of the jQuery selector engine or querySelectorAll is very fast, the repetitive work will take up more time and resources. This problem is simple and the solution is as follows:
The Code is as follows:
//
$ (". Items"). addClass ("hide ");
//... Later...
$ (". Items"). removeClass ("hide ");
//
Var items =$ $ (". items ");
//... Use this reference variable from here!
We condemn those programmers who write repeated code every day, but we still need to strengthen it. Of course, some repeated actions cannot be avoided (such as loading pages through ajax). However, in these cases, we 'd better use event proxies instead of directly pulling content.
Repeated condition judgment
Repeated conditional calculations are common, but there is usually a general pattern to avoid them. You may see a piece of code written as follows:
The Code is as follows:
Var initialize mmiracle = function (){
// If the browser supports the afeature...
If (features. someFeature ){
}
//... If not supported
Else {
}
};
This is feasible, but not the most efficient code. The above conditions may be calculated multiple times. It would be better to write the following code:
The Code is as follows:
Var too mmiracle = features. someFeature? Function (){
// Plan A stuff
}: Function (){
// Plan B stuff
};
There is only one condition, and the method or variable is returned as a result when the condition calculation is complete!
Duplicate object Creation
Compared with repeated operations, duplicate object creation is more difficult to find, usually manifested in regular expressions. Let's look at the following code:
The Code is as follows:
Function cleanText (dirty ){
// Remove SCRIPT tags
Clean = dirty. replace (/ ] *> ([\ 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. In this case, if you create this object outside the function, this can be avoided:
The Code is as follows:
Var scriptRegex =/ ] *> ([\ 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 above example, the regular expression object is created only once, but multiple use-saves a lot of CPU processing.
This is just some examples of repeated problems that I often see written by other programmers. Do you also find this problem?
