| 1. Replace = with =
There are two different equal operators in JavaScript: ===|! ==And ==|! =. In contrast, the former is more recommendable. Use the former as much as possible.
Reference:
"If two comparison objects share the same type and value, = true is returned ,! = False is returned ."
-JavaScript: The Good Parts
However, if the = and! =, You may encounter unexpected problems when operating on different data types. Before equality determination, JavaScript tries to convert them into strings, numbers, or Boolean values.
2. Avoid using Eval Functions
The Eval function uses a string as a parameter and executes the string as a JavaScript statement to return the result (for reference ).
This function not only reduces the execution efficiency of your script, but also greatly increases the security risk, because it gives too much rights as text parameters. Never use it!
3. Do not use Quick writing
Technically, you can omit most of the curly arc and semi-colon. Most browsers can correctly execute the following statements:
Copy the content to the clipboard code:
If (someVariableExists)
X = false
However, if so:
Copy the content to the clipboard code:
If (someVariableExists)
X = false
AnotherFunctionCall ();
You may think it is equal to the following statement:
Copy the content to the clipboard code:
If (someVariableExists ){
X = false;
AnotherFunctionCall ();
}
Unfortunately, this is not the case. The reality is that it is equivalent:
Copy the content to the clipboard code:
If (someVariableExists ){
X = false;
}
AnotherFunctionCall ();
As you noted, the beautiful indentation cannot replace this gorgeous curly arc. In all cases, please clearly write curly braces and semicolons. It can be omitted occasionally when there is only one line of statements, although this is not recommended below:
Copy the content to the clipboard code:
If (2 + 2 = 4) return 'nicely done ';
Think about the future, child.
Suppose that you need to add more commands for this if statement in the future development process? Why don't you add brackets?
4. Make good use of JS Lint
JSLint is a debugger written by Douglas Crockford. You only need to paste your code to quickly scan for any obvious errors and problems.
Reference:
"JSLint scans the received code. Locate the problem, describe the problem, and give the approximate location in the source code. Possible problems include but are not limited to syntax errors, although syntax errors are indeed the most common. JSLint will also use
It is customary to check the formatting style and structure errors of the Code. Scanning through JSLint does not guarantee that your program is completely correct. It just provides you with an extra pair of eyes for error detection ."
-JSLint document
Before you complete the code, put it in JSLint and check it to quickly eliminate your unintentional experience.
5. Load the script at the bottom of the page
As shown in:
Remember-we have to do everything possible to ensure that the page loading speed on the client is as fast as possible. When the script is not loaded, the browser cannot load the rest of the page.
If your JS file only adds some additional functions-for example, bind an event to click a link-that can be done after page loading is complete. Put the JS file at the end of the page, Before the end tag of the body, it is best to do so.
A better way of writing is
Copy the content to the clipboard code:
<P> super brother is the most handsome man in the world. Benhuoer.com is the best blog in the world. </P>
<Script type = "text/javascript" src = "path/to/file. js"> </script>
<Script type = "text/javascript" src = "path/to/anotherFile. js"> </script>
</Body>
</Html> & lt ;! -- Mce: 0 -- & gt; & lt ;! -- Mce: 1 -- & gt;
6. Declare variables outside the For statement
When you need to execute lengthy for statements, do not let the JavaScript engine repeat unnecessary operations every time. For example:
This is not good
Copy the content to the clipboard code:
For (var I = 0; I <someArray. length; I ++ ){
Var container = document. getElementById ('Container ');
Container. innerHtml + = 'My number: '+ I;
Console. log (I );
}
This code re-defines the length of the array every time and traverses the DOM to find the container element. This is too silly!
This is much better.
Copy the content to the clipboard code:
Var container = document. getElementById ('Container ');
For (var I = 0, len = someArray. length; I <len; I ++ ){
Container. innerHtml + = 'My number: '+ I;
Console. log (I );
}
I want to leave a message to improve this code! You are welcome to leave a message for discussion!
7. quickly build strings
When you want to perform loop operations on an array or object, don't worry about the for statement of a table of talents. Let's get creative! Obviously there are many faster methods:
Copy the content to the clipboard code:
Var arr = ['item 1', 'item 2', 'item 3',...];
Var list = '<ul> <li>' + arr. join ('</li> <li>') + '</li> </ul> ';
Reference:
"You don't have to bother you with so much red tape; you just trust me once (or you can try it on your own)-this is really the fastest way to find it!
Do not worry about the abstract behind it. Generally, it is much faster than the elegant methods !"
8. Reduce global variables
Reference:
"Putting all the messy footprints you step on the whole under one person can significantly reduce the possibility of conflicts with other applications, gadgets, or JS libraries ."
-Douglas Crockford
Copy the content to the clipboard code:
Var name = 'Jeffrey ';
Var lastName = 'way ';
Function doSomething (){...}
Console. log (name); // Jeffrey --
Better Writing
Copy the content to the clipboard code:
Var DudeNameSpace = {
Name: 'Jeffrey ',
LastName: 'way ',
DoSomething: function (){...}
}
Console. log (DudeNameSpace. name); // Jeffrey
Note: how can we dramatically classify "messy footprints" under "DudeNameSpace.
9. write comments
You may feel unnecessary at first, but believe me, you will take the initiative to write the comments of the Code as much as possible in the future. When you look back at a project a few months later, it turns out that it is hard to remember what your mind was thinking when you wrote something. Isn't that frustrating? Or, what if a colleague wants to revise your code? Be sure to add comments to important parts of your code.
Copy the content to the clipboard code:
// Traverse the array and output their names
For (var I = 0, len = array. length; I <len; I ++ ){
Console. log (array );
}
10. Try incremental Enhancement
Be sure to provide an alternative for cases where JavaScript is not enabled. You may think, "most of my visitors use JavaScript, so I don't have to worry about it ". In this case, you are wrong!
Have you ever tried to see what your pretty slide looks like when JavaScript is disabled? (You can download the Web Developer ToolBar to complete this task easily .) Once disabled, your website may lose its availability! Experience: In the early stages of development, you always design your website based on no JavaScript, and then perform Progressive Function enhancement, carefully changing your layout. |
