UglifyJS is a tool for compressing and beautifying javascript. In its documentation, I saw several ways to optimize if statements. Although I haven't used it to do some trial tests, we can see from here that it does beautify js. Some people may think that if statements are that simple, how much can they be optimized? But look at the following ways and you may change your mind.
1. Use common ternary operators
if (foo) bar(); else baz(); ==> foo?bar():baz();
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();
You are sure to be familiar with the above use of ternary operators to optimize if statements, and maybe you use it often.
Examples given by Wulin.com:
The code copy is as follows:
<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>
Output result:
100
2. Use and(&&) and or(||) operators
if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();
To be honest, I have never written code like this. I have seen this writing method when I was studying "Bird Bird's Linux Private Vegetable", but I didn't expect to implement it in js.
3. Omit curly braces {}
if (foo) return bar(); else something(); ==> {if(foo)return bar(); something()}
I am familiar with this writing method, but I suggest doing this when optimizing the code, or leaving it to UglifyJS to help you solve it. After all, if you lack one brace, the code is not readable.
Having written this, I think of a method by the father of jQuery in "Mastering JavaScript" to obtain the attributes of HTML elements.
function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};
If we don't write this way, we may need to use two if statements to process it, and the above code is not only concise and effective, but also highly readable.
If you think about it carefully, we can find effective ways to solve the problem in many cases, but the key is whether we are careful to find a better way.
【javascript skills】Abbreviation if(x==null)
if(x==null) or if (typeof (x) == 'undefined') can be abbreviated as if(!x), and is not verified.
On the contrary, if(x) means x is not empty
Determine whether the object exists
The code copy is as follows:
if(document.form1.softurl9){
//Judge whether softurl9 exists to prevent js errors
}
The code copy is as follows:
if(document.getElementById("softurl9")){
//Judge whether softurl9 exists to prevent js errors
}
Replenish:
javascript || && abbreviation if
The code copy is as follows:
<script type="text/javascript">
If you want to write
if (!false)
{
alert('false');
}
Consider writing:
false || alert('false');
false || alert('false'); true || alert('true'); //output false;
When using "||", the first condition is true, and the second condition is returned directly without detecting the second condition. The first condition is false, and the second condition detection will be performed.
false && alert('false'); true && alert('true'); //output true
When using "&&", the first condition is true and the second condition will be detected. The first condition is false, and it directly returns false to exit.
In short, the simple and practicality of replacing if, ? : the practicality of replacing if else. Write short and concise code
usage:
$("#regform input[type!=hidden]").each(
function(index) {
$(this).parent().has("div.valid-under").length || $('<div></div>').appendTo($(this).parent());
}
);
</script>