Javascript practice skills

Based on Javascript advanced programming, This article summarizes the knowledge of Javascript in practical work based on its own experience. I. maintainability 1. Code Convention 1.1: readability this section mainly includes indentation and comment indent: Use a uniform indent (4 spaces are recommended) Note: In the following situations, note 1 should be included. Functions and methods should contain comments, including the purpose of the function and possible algorithms. If the parameter is included, the returned value is better. 2. For code that completes a large segment of a single task, you need to put a comment in front to explain the role of the Code. 3. If complicated algorithms are used, annotations are required to explain them. 4. Note the Hack code. Otherwise, someone else will think it is useless code and delete it. 1.2: To name variables and functions, you must first avoid meaningless names (such as a, x, and doSomething). Here we provide some recommended naming methods. 1. The variable name should be a noun, such as car and person. 2. The function name starts with a verb, for example, getName (); a function that returns boolean generally starts with is, for example, isPerson (); 3. The variable name should use a logical name, you don't have to worry about the length. You can use compression to solve the length problem. 1.3: The variable type is transparent because in Js, the variable type is loose and it is easy to forget what the variable type is. We recommend that you give an initial value to indicate the variable type during initialization. 2. Loose coupling 2.1: Structure-performance-behavior separation. Specifically, avoid writing css and js (Inline style, event attributes, etc.) in html ). Avoid using expressions in css. Avoid dynamically creating a large number of html (using templates) in js, set styles (using methods that add css classes), and 2.2 decouple events and application logic. You usually write all the logic in an event, such as element. onclick = function () {// do something // some other code} Here we suppose there are a large number of logics in the function, and such writing is also common, but there are two fatal points 1. If the event is not triggered, what if the execution logic? 2. If another event will execute the corresponding logic, can the code be copied only once. Therefore, a better method is to encapsulate a large number of logic in a method. Principles of event decoupling and application logic: 1. Do not pass the event object to the method, but only data from the event object. 2. Any action at the application layer can be performed without executing an event. 3. Any event handler should process the event and then forward the process to the application logic. 3: Programming Practice 3.1: do not modify objects that you cannot control. You can use the following method to create a new function for the object. 1. Create a new object and add attributes and methods for this object. 2. Create a custom type and inherit the type to be modified. Extend the method on the custom type. 3.2: avoid global variables. Create a global variable. All other variables are used as attributes or methods of the global object. A single global variable is derived from the namespace concept. You can use a global object, and then all objects belong to it. Generally, you can use the company name, for example, var BAIDU ={}; BAIDU. util = {}; BAIDU. util. cookie = {...}; // 3.3 for cookie processing: Use constants to separate data from the business logic. Common Errors include interface URLs and incorrect forms. After the separation, it provides convenience for subsequent modifications or internationalization. In the following situations, we need to extract the values that need to be separated. 1. Repeat values-repeated values should be extracted for multiple times. In this way, subsequent modifications are convenient and the case of missed changes is avoided. 2. User Interface string-paves the way for future international calls. 3. You can quickly modify the url after the url is changed. 4. Any value that may be changed.-each time you use the literal, ask yourself if the value will change in the future. If yes, it should be proposed as a constant. Ii. Performance 1. Note that the scope saves the global variables used multiple times as local variables in a function. 2. Avoid using the with statement. 3. Access the array faster than the access object, reducing the number of times the object attribute is searched. If you can access the data by using the numeric location and naming attribute, use a number. For example, var img = document. getElementsByTagName ("img"); img [0] // use this method to access the first img4 and avoid calling eval for display or implicit display, for example, if you directly use eval or input string 5 in setTimeout and use native methods, such as finding the square of a number, the method provided by the Math object is faster. 6. The switch is faster than the complex if-else, and the switch is arranged in the most likely and impossible order to further optimize switch7. Using a single var to declare all variables can speed up the process. 8. var name = values [I]; I ++; can be optimized to var name = values [I ++]; 9. DOM operations can be minimized. For example, to insert Multiple lists, You can assemble them in js and insert them once. Using innerHTML is faster than appendChild. 10. Use event delegation. 11. Reduce the access to the NodeList object, because each access will be queried in real time. The cached jquery object can be extended here. For example, var images = document. getElementsByTagName ("img"); for (var I = 0, len = images. length; I <len; I ++) {} Use len to save images. to avoid accessing the length attribute of images during each judgment. Then, images is used to save document. getElementsByTagName ("img"), which also avoids subsequent searches. Iii. Deployment 1. Divide js into multiple files during construction process development to improve maintainability. Merge the code by using the build tool during release. 2. You can add verification tools to verification build tools, such as jslint3 and 3.1 File compression (reduce code length, delete blank space, delete comments, and shorten variable name 3.2 HTTP compression (reduce the number of transmitted bytes) generally by setting the web server to use gzip compression. All browsers can decompress gizp.