Clever JavaScript code

Recently, I came into contact with some js-related framework components, such as jquery. I learned some code written by others and summarized it myself. I think some JS Code is actually very clever. We will record some summary of the encoding techniques as follows for your note:

Tip 1: Obtain the default value: var v = Arg | defaultvalue;

Code annotation:"Arg" is an expression. When "Arg" is "undefined" or "null", the program will continue to calculate the value of the expression "defaultvalue" if it is converted to a false value of the boolean type, the value of the entire expression will be "defaultvalue ". When "Arg" is converted to the boolean type but not false, "defaultvalue" is not calculated. The value of the entire expression is "Arg ".

Tip 2: Get the valid integer: var v = parseint (ARG) | 0;

Code annotation:When Arg can be parsed as an integer, the entire expressed value is the parsed integer. If Nan (non-numeric value) is parsed and converted to boolean, false is obtained. Therefore, the value of the entire expression is 0. Of course, if "Arg" is parsed to 0, although it is converted to boolean and false, the entire expression is still 0, so don't worry.

Tip 3: More "complex" Default Value var v = (ARG | []) [0];

Code annotation:The expression Arg is an array. We want to obtain an element of the parameter. However, Arg may be empty. If you write Arg [I] directly, an error is returned. What should I do? Like the above, when Arg is null, we will create an empty array (or even an array containing default values) to replace it!

Tip 4: obtain the first "valid" value in multiple expressions or the value of the last expression var v = arg0 | arg1 | arg2 | arg3;

Code annotation:Summarizing the previous techniques, we can find that they use a very clever function of the logical or operator (|): An expression concatenated by multiple (|) operators, the final value is the value of the first "valid" expression. The "valid" here refers to the expression used to convert a value of the boolean type to true. So if you still need values such as 0 or false, this method seems to be somewhat unsuitable. However, in practice, most of the cases where we use this technique are to judge whether the variable is valid, whether the object is null, and whether the value is not 0, I think it is rare to judge a series of Boolean values consecutively.

Tip 5: When an expression is "valid", obtain another expression value var v = obj. Method & obj. Method ();

Code annotation:This is a much-seen code. This Code indicates that when OBJ has a method named "method", the value obtained by calling this method is returned. The exact explanation should be that when the expression "obj. if method is converted to boolean to true, the return expression "obj. value of method (); otherwise, the expression "obj. the value of method.

Tip 6: obtain the first "invalid" value in multiple expressions or the value of the last expression var v = arg0 & arg1 & arg2 & arg4;

Code annotation:This technique corresponds to Tip 4. In a series of expressions that are logically connected with operators (&), if an expression with an "invalid" value is found, the "invalid" value is returned, it does not calculate the subsequent expressions. If all the expressions in series are "valid", the last "valid" value is returned. Here, "invalid" means that if the type is converted to boolean, "false" is returned.

Tip 7: oelement. onclick = function (event ){
Event = event | window. event;
Event.tar get = event.tar GET | event. srcelement;
}; // Correct !!
Oelement. onclick = function (event ){
Event = event | window. event;
// Event.tar get = event.tar GET | event. srcelement;
// The above line of code has an error. In ff, the event object already has the target attribute, which is read-only.
// Change it to the following:
VaR target = event.tar GET | event. srcelement;
// Or:
Event.tar GET | (event.tar get = event. srcelement );
};

Code annotation:In Internet Explorer (IE) and Firefox (ff), the sources of event objects are different. In ff, the event is passed in as a parameter, while in IE, the event is an attribute of the window object. The source object of the trigger event is also different. In ff, it is invalid event.tar get, and in IE, it is "event. srcelement ". The execution of the above Code in FF is as follows: the object referenced by variable eventcategory is still valid because the expression event.tar get is invalid. Therefore, the attribute "target" of the object "Event" is not changed. The execution in IE is as follows: Invalid get is also invalid, so an attribute "target" is added to the object "Event" and points to "event. srcelement ". After the authorization code is processed, you can use the allow eventtoken to reference the event source object using the allow event.tar get function.

Tip 8: Convert the if statement to a more concise form

If format	Concise form
If (B ){ V = X; }	V = B & X;
If (B1 & B2 & B3 ){ V = X; }	V = B1 & B2 & B3 & X;
If (b1 | B2 | B3 ){ V = X; }	V = (b1 | B2 | B3) & X;
If (B1 ){ V = b1; } Else if (B2 ){ V = B2; } Else { V = B3; }	V = b1 | B2 | B3;
If (B1 ){ V = x1; } Else if (B2 ){ V = x2; } Else { V = X3; }	V = (B1 & X1) | (B2 & x2) | X3;

Code annotation:In fact, it is an application summary of the previous skills. As a result, many codes can be refreshed. Of course, this conversion method is not omnipotent. Use it as needed. Note: The "invalid" value mentioned above does not only mean "undefined". "null, 0, false, Nan" and so on are all "invalid" values, the values converted to boolean are both false, so pay attention to some situations.