| 1. = = = Replace = = = =
There are two different equality operators in JavaScript: ===|! = = and ==|! = By contrast, the former is more worthy of recommendation. Please try to use the former.
Reference:
"If two comparison objects have the same type and value, = = = Return true,!== returns FALSE." ”
–javascript:the Good Parts
However, if you use = = and!=, you may encounter some unexpected problems when manipulating different data types. JavaScript attempts to convert them to a string, number, or Boolean before making equality judgments.
2. Avoid using the Eval function
The Eval function takes a string as a parameter and executes the string as a JavaScript statement, returning the result (reference).
Not only does this function reduce the execution efficiency of your script, but it also greatly increases the security risk because it gives too much power to the arguments as text. Don't use it!
3. Do not use the quick wording
Technically, you can omit most of the curly braces and the end of the semicolon, and most browsers will correctly execute the following statement:
Copy content to Clipboard code:
if (somevariableexists)
x = False
However, if this is the case:
Copy content to Clipboard code:
if (somevariableexists)
x = False
Anotherfunctioncall ();
You might think it's the same as the following statement:
Copy content to Clipboard code:
if (somevariableexists) {
x = false;
Anotherfunctioncall ();
}
Unfortunately, that is not the case. The reality is that it is equivalent to:
Copy content to Clipboard code:
if (somevariableexists) {
x = false;
}
Anotherfunctioncall ();
As you can see, the beautiful indentation is no substitute for this gorgeous curly bracket. In all cases, write clearly the curly braces and the end of the sentence semicolon. It can be omitted occasionally when there is only one line of statements, although it is highly deprecated to do so:
Copy content to Clipboard code:
if (2 + 2 = = 4) Return to ' nicely done ';
Think more about the future, son.
Suppose you need to add more commands to this if statement in the future development process? And you're not going to have to add the parentheses?
4. Make good use of JS Lint
JSLint is a debugger written by Douglas Crockford. All you have to do is post your code and it will quickly scan you for any obvious bugs and problems.
Reference:
"JSLint scans for incoming code. Find the problem, describe the problem, and give the approximate location in the source code. The problems that can be found include, but are not limited to, grammatical errors, although grammatical errors are indeed the most common. JSLint will also use
Conventional habits Check the formatting style of the code, as well as the structural errors. Scanning through the JSLint does not guarantee that your program will be completely correct. It just provides you with an extra pair of wrong eyes to find. ”
–jslint Document
Before you complete the code, put it in the jslint to check it out and quickly eliminate the unintentional.
5. Load script at bottom of page
As the following illustration shows:
Remember-we have to make every effort to ensure that the client's page loads as fast as possible. When the script is not loaded, the browser cannot load the remainder of the page.
If your JS file just adds some extra functionality--for example, to click on a link binding event--that can be done after the page is basically loaded. Put the JS file to the end of the page, the body of the end tag, this is best.
The better way to do this is
Copy content to Clipboard code:
<p> Super Brother is the most handsome man in the world. Benhuoer.com is the most beautiful 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>
6. Declare a variable outside of a for statement
When you need to execute a lengthy for statement, do not let the JavaScript engine repeat the unnecessary actions each time. For example:
It's not good.
Copy content to 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 will redefine the length of the array each time, traversing the DOM to find the container element--that's silly!
That's better.
Copy content to 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 would like to give a message to improve the code of the people of the extra surprise! Welcome to the message discussion!
7. Quickly build strings
To do a loop on an array or object, don't dwell on the handsome for statement, get some ideas out! There are many quicker ways to do it:
Copy content to Clipboard code:
var arr = [' Item 1 ', ' Item 2 ', ' Item 3 ', ...];
var list = ' <ul><li> ' + arr.join (' </li><li> ') + ' </li></ul> ';
Reference:
"There's not so much red tape bothering you, you just trust me once (or you can try it yourself)--it's really the quickest way to find out!"
Use a little Earth method, also regardless of what happened behind it what abstract things, usually the soil method is more efficient than those elegant way! ”
8. Reduce global variables
Reference:
"Put your foot in the overall situation of those messy footprints are attributed to one person, can significantly reduce the use of other applications, gadgets or JS library conflict possibilities." ”
–douglas Crockford
Copy content to Clipboard code:
var name = ' Jeffrey ';
var lastName = ' Way ';
function dosomething () {...}
Console.log (name); Jeffrey--
A better way to spell
Copy content to Clipboard code:
var dudenamespace = {
Name: ' Jeffrey ',
LastName: ' Way ',
Dosomething:function () {...}
}
Console.log (Dudenamespace.name); Jeffrey
Notice how we dramatically put "messy footprints" under the "Dudenamespace" object.
9. Write a good note
It may not be necessary at first, but trust me, you will be willing to write the code as much as possible in the future. When you look back at a project a few months later, it turns out it's hard to remember what your brain is thinking when you write something, is that frustrating? Or, what if a co-worker wants to revise your code? Be sure to annotate important parts of your code.
Copy content to Clipboard code:
Iterate through the array, outputting their names
for (var i = 0, len = Array.Length i < len; i++) {
Console.log (array);
}
10. Try Progressive Enhancement
Be sure to remember to provide an alternative to JavaScript-not-enabled scenarios. You might think, "most of my visitors have JavaScript enabled, and I don't have to worry about it." In that case, you would be mistaken!
Have you ever tried to see what your pretty sliders are like when you disable JavaScript? (You can download the Web Developer ToolBar easily complete this task.) After disabling your site may be completely out of usability! Experience: The early stages of development are always to design your site without JavaScript, and then incrementally function to enhance and carefully change your layout. |
