JS Best Practices

1. Maintainability:

• Understandable: Understanding intentions and general approaches
• Intuitive:
• Adaptable to
• Extensibility
• Debugger-Selectable

2. Code Conventions:

1. Readability: Indents and annotations. Comments are required in the following places:
A. Functions and methods: Describing the purpose and algorithm used to complete the task
B. Large fragment code: a comment describing the task
C. Complex algorithms:
D. Hack: Because of browser differences, JS code will have some Hack
2. Variable and function naming
A. Variable name is noun
B. The function is named starting with a verb
C. Variables and functions should be logical, do not worry about length (length problem through post-processing and compression)
3. Variable type transparency: How variable data types are represented
A. Initialize: Var person=null;//object var name= "";//String
B. Other infrequently used

3 Loose coupling: High coupling, not conducive to code modification maintenance

• 1. Decoupling HTML from JavaScript
• 2. Decoupling Css/javascript
• 3. Decoupling application logic and event handlers

4 Programming Practices:
1. Respect for object ownership:
A. Do not add attributes to an instance or prototype
B. Do not add methods for instances or prototypes
C. Do not redefine existing methods
D. Create a new feature for an object in the following ways:
I. Creating an object that contains the required functionality for an object
II. Create a custom type. Inherited types that need to be modified
2. Avoid global variables
3. Avoid comparisons with null: see a comparison attempt with NULL to replace the technique:
A. If the value is a reference type, use the instanceof operator
B. If the value is a basic type, use the TypeOf

4. Using constants: How to abstract data into separate defined constants

var constants={invalid_vlaue_msg:"INVALID value", Invalid_value_url:"/error/invalid.php"}; function Validate (value) {if(!  Value) {alert (constants.invalid_vlaue_msg); Location.href=Constants.invalid_value_url;}}

The key is separating the data from the logic that uses it:
Duplicate values: Any value that is used in the multi-out should be extracted as a constant
User interface Definition string--any string to display to the user
urls--recommend a common place to store URLs
Any value that may change

5, performance increases as the number of scopes in the scope increases, and the time to access variables outside the current scope is also increasing. As long as you reduce the time spent on the scope, you can increase the performance of the script

1. Avoid global lookups

 //   function   UpdateUI () { /*   First store the document object in a local doc variable, then replace the remaining code with the original document  */ Span style= "COLOR: #0000ff" >var  doc=document;  var  imgs=doc.getelementsbytagname ("img"  for  (var  index = 0; index < imgs.length; Index++ =doc.title+ "image" +index;}  var  Msg=doc.getelementbyid ("msg"  = "Update Complete" ;}  

2. Avoid the WITH statement: The new scope that the WITH statement can introduce. Wasted performance due to additional scope chain lookups

6, choose the correct method:
1. Avoid unnecessary property lookups: Once you have called the object properties multiple times, you should store them in a local variable
2. Optimize the cycle:
A. Impairment iterations: Iterators with constant impairment in the loop are more efficient starting with the maximum value
B. Simplifying termination conditions: Each cycle calculates the termination condition, so avoid property lookups or other O (n) operations
C. Simplifying the Loop body:
D. Post-use test loop: the most common for and while loops are pre-test loops, such as do-while, which can avoid the calculation of the final initial conditions and therefore run faster
　　　　

var i = values.length-1; if (I >-1) { Do while (---->= 0);}

3. Expand the loop: Consider using a technique called a duff device if the number of iterations in the loop is not predetermined beforehand
4. Avoid double interpretation: JS code to parse the JS code when there is a double analytic penalty. Occurs when an eval () function, or a function constructor, and a settimeout pass in a string parameter.

// avoid constructing new functions var sayname=New Function ("alert (' Hello World ');");

5. Other Considerations for performance:
1. Native Method Faster
2. Switch statement faster
3. Faster bit operation

7. Minimize the number of statements-a single statement that completes multiple operations is faster than multiple statements that complete a single operation
1. Declaration of multiple variables: use commas to declare with a VAR
2. Insert the iterator: var name=value[i];i++; Change to Var name=value[i++];
3. Using Arrays and Object arguments

8. Optimize DOM Interaction
In all aspects of JS, Dom is the slowest part, Dom operation and interaction consumes a lot of time, because it needs to re-render the entire page or a part.
1. Minimize on-site updates (even if the number of page changes is minimized): Use a document fragment to build the DOM structure, and then add it to the list element

/**/var list = document.getElementById ("myList" = Document.createdocumentfragment (),// Create a new blank document fragment because the document fragment exists in memory and not in the DOM tree, inserting child elements into the document fragment does not cause the page to Reflow ( Reflow) (calculations on the position and geometry of the element).  Item;  for (var index = 0; index < index++= document.createelement ("li"); Fragment.appendchild ( Item); Item.appendchild (document.createTextNode (' item ' + index));} List.appendchild (fragment);

2. Using innerHTML: For large dom changes, it is faster to use innerhtml than to create the same DOM structure using standard DOM methods (such as createelement () and appendchild (), etc.)

/**/var list = document.getElementById ("mylist" = ";  for (var index = 0; index < index+++ = "<li>item" + index + "</li>"= html;

3. Use the event Proxy: Any event that can be bubbling can be handled not only on the event target, but also on any ancestor node of the target
4. Note Htmlcollection
Htmlcollection objects have a huge impact on Web performance, minimizing the number of accesses to Htmlcollection

/**/var images=document.getelementsbytagname (' img '), image;  for (var i = 0; i < images.length; i++= images[i]; // The current image is assigned to images and there is no need to access images's htmlcollection within the loop. }

The Htmlcollection object is returned when the following conditions occur:
1. A call to getElementsByTagName () was made
2. Gets the childnodes attribute of the element
3. Gets the attributes attribute of the element
4. Access to Special Collections: such as Document.form document.images, etc.
9 Compression:
1. File compression: Yui compression Tool
2. HTTP compression: Most Web servers have HTTP compression capabilities

JS Best Practices