JavaScript refactoring (4): JavaScript encoding rules

Without rules, JavaScript brings flexibility, uncontrolled variables, and access. Therefore, you must use rules to limit it. A mature team or a fresh team should have different rules. I just want to list some common or effective methods to constrain jumping developers, and their thinking can soar at will, the code must be continuously controlled. Of course, any rule is based on a certain degree of cognition, and the base of object-oriented JavaScript is necessary, otherwise everything will not be discussed.
 
Variable and method control:
Module development does not allow independent global variables and global methods. It only allows variables and methods to be placed in the "namespace" of the corresponding module. For more information, see this article. How can I use anonymous functions?
Java code
(Function (){
Var value = 'xxx ';
Var func = function (){...};
})();
 
Modularity requires strict control over the code's region. This is not only a component of code maintainability and customization, but also allows the JavaScript engine to recycle attributes and methods in a timely manner.
Native objects cannot be contaminated in module code, such
Js Code
String. prototype. func = new function (){...};
 
Such code must be centrally controlled, for example, uniformly placed in common. js and strictly protected.
 
Data storage constraints:
Common variables, prototype variables, and function variables are separated and governed. The method names start with uppercase. The variable names still follow the camel naming method:
Java code
Function T (name ){
T. prototype. _ instance_number ++;
This. name = name;
This. showName = function (){
Alert (this. name );
}
};
T. prototype = {
_ Instance_number: 0,
GetInstanceNum: function (){
Return T. prototype. _ instance_number;
}
};
 
Var t = new T ("PortalONE ");
T. showName ();
New T ("Again ");
Alert (t. getInstanceNum (); // print: 2
 
Here, we intentionally did one thing. The internal attributes and private methods of T start with an underscore, which achieves encapsulation well (if t is used in the above Code. instanceNum, you cannot access this value). If you cannot understand this code, please review the JavaScript object-oriented code :). JavaScript provides closure and prototype methods to implement inheritance and polymorphism. For the application of refactoring, I will continue with the subsequent sections.
In addition, the native objects and containers of JavaScript, such as Array and Ajax, are preferentially switched to JSON to avoid using hidden fields. In addition, generally, DOM objects cannot be expanded at will.
Inter-module communication: Inter-module communication means that inter-module coupling needs to be strictly avoided. The communication path usually uses method-level attributes or module-level prototype variables.
 
DOM control rules:
In the module code, DOM control is usually required to be independent to the module js. Do not display the write time on the DOM model to trigger the function. For example:
<Div onclick = "xxx"/>
With JQuery's bind-based method, after the behavior logic is independent, you can see the refreshing HTML Tag.
DOM object access usually uses id for search, and occasionally searches based on name. traversing DOM trees too many times or unreasonably is a big obstacle to front-end performance persistence.
 
CSS style control:
(1) Try to reject style = "xxx". The main purpose is to unify the style into the theme style form. Of course, the theme style form is also stored by module, it facilitates customization of different languages and switching of different styles.
(2) JavaScript controls the style. Ideally, the encapsulated UI can freely replace its style set.
 
The above can only be regarded as the tip of the iceberg. The actual project needs to be refined and improved gradually in the development process.

Author's "four-fire BLOG"