1. Self-closing tags without using script
Use self-closing tags in script. Although it is legal in XHTML, it does not comply with HTML specifications and cannot get the correct parsing of some browsers. I used this method just when I introduced EXT, which caused the script to be unable to be executed correctly.
<script src="example.js"/> --> <script src="example.js"></script>
2. Put the script in front of </body>
If you put the script file in <head>, you must download and execute the script before displaying the page, which increases the user's waiting time. Place the style sheet in <head> to prevent the content from displaying abnormally. The general method is as follows:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="theme.css" /></head><body> <!-- html code--> <script src="example.js"/></body></html>
3. Use strict mode within the function
If you use strict mode outside the function, it may cause the third-party library and colleagues' code to fail to work properly. Inside the function, it can only affect your own code and not others' code.
function myfunction(){ "use strict"; //function code}4. Do not omit the semicolon at the end of the statement
No semicolon at the end of the code can easily cause compression errors. In addition, in some cases, the performance of the code can be improved. The interpreter should not spend time guessing where to insert semicolons. Another more common problem is that automatically inserting semicolons can sometimes make mistakes, so it is not recommended to omit semicolons.
5. Use var to define variables
Use the var keyword when defining variables and all are advanced to the beginning of the function.
The benefits of doing this will prevent unconsciously creating global variables and make your code easier to understand.
function myfunction(){ var result = 10 + value; var value = 10; return result;}There is no problem with this function syntax, but it is not very intuitive and does not conform to human logic. It would be better to modify it as follows:
funciton myfunction(){ var result; var value; result = 10 + value; value = 10; return result; }Let me explain to you that the above two codes are equivalent, and the value of result is NAN. JavaScript will promote all variable declarations in the function to the beginning of the function. Code 1 will become code 2 when the code is executed. When it is run to result = 10 + value;, the value of value is undefined, and 10 is added to NAN, and then the value is assigned to 10.
Everyone must be clear about the problems caused by global variables, otherwise the concept of namespace would not appear.
6. Declare the function first and then use it
Like variable declarations, function declarations are also advanced by the JavaScript engine, so in the code, the call of the function can appear before the declaration of the function. Another thing worth noting is that function declarations should not appear in statement blocks, such as:
if (condition) { function myfunction(){ alert("true"); }}else{ function myfunction(){ alert("false"); }}myfunction();When we run the code, we found that the output will be related to the browser. It outputs true in Chrome 51 and Firefox 46, and false in IE 10. So try to avoid declaring functions in statement blocks.
7. Use typeof underfined null with caution
null is a special value, which we are often confused with undefined. The following scenarios should use null:
Null should not be used in the following situations:
The best way to understand null is to use it as a placeholder for the object. The reason we often confuse null and undefined is that we think that null and undefined are both variables that are not initialized, but only undefined means that a variable has not been initialized, and null means that it is initialized as an object. Look at the following code:
var person;console.log(typeof person); //undefinedconsole.log(typeof foo); //undefinedvar house = null;console.log(typeof house); //object
So try not to use typeof to determine whether the variable is initialized. You cannot be sure whether the variable does not exist or the variable is not initialized. Returning null is also not sure whether the variable has been assigned correctly, so be careful to use typeof.
8. Be careful with the Number type
I believe everyone knows that JavaScript integers support decimal, octal, and hexadecimal literal values. If the numeric value in the literal value exceeds the range in octal, the leading zero will be ignored and the subsequent numeric value will be parsed as decimal.
console.log(012); //10
console.lgo(082); //82
If octal and hexadecimal are used for decimals, there will be a syntax error. Another point is that octal literals are invalid in strict mode. Everyone knows the problem of floating point calculation errors. This is true for all floating point calculations based on IEEE754 values, so never test a specific floating point value.
There is a special value in the numeric type, NaN (Not a Number), which is used to indicate that the value should have been returned but is not the numeric type. NaN and any value are not equal, including NaN itself. We can use the isNaN() function to test.
9. Dynamic assignment using logical operations
What you prefer
var person={ age:10}var condition;var myVar = condition && person;alert(myVar)If condition is converted to boolean type false, then myVar = condition, if true, then myVar = person.
var person={ age:10 }var condition;var myVar = condition || person; alert(myVar)If condition is converted to boolean and true, then myVar = condition, if false, then myVar = person.
10. Do not use the with statement
An important reason for not using with is that in strict mode the syntax itself disables the with statement, which also shows that the ECMAScript committee is convinced that with should not be used. Let's look at the following example:
var book = { title : "Maintainable JavaScript", author: "Nicholas C. Zakas"};var message = "The book is ";with(book) { message += title; message += "by " + author;}The problem with the above code is that it is difficult for us to distinguish the location where title and author appear, and it is also difficult to distinguish a local variable to address from message or a property of a book. Moreover, JavaScript engine and compression tools cannot optimize this code, so they cannot guess the correct meaning of the code.
Okay, there are already ten items, let’s see you next ten.