1. Embed Rules
Javascript programs should be placed in .js files as much as possible. When you need to call them, you should include them in the form of <script src="filename.js"> on the page. If Javascript code is not dedicated to the page, try to avoid writing Javascript code directly on the page.
2. Align indentation and line break
a) Indentation
The same indentation standard should be adopted in the same system. This article advocates that the indentation size is 4 spaces. Each compiler defines different blank sizes for the Tab keys. It is recommended to reset the Tab shortcut keys in the editor to 4 spaces when setting up the development environment. Most compilers provide this feature. Otherwise, it is recommended to press 4 spaces to indent.
b) Line break
Line breaks must be:
After each independent statement ends;
if, else, catch, finally, while before keywords such as keywords;
When an operator breaks a line, the operator must be at the beginning of the new line.
For line breaks that occur when a single line length exceeds the limit, separate the reference policy in line length.
1). The string is too long and truncated
Each line of code should be less than 80 characters. If the code is long, try to break the line. The new line should be selected after the operator and punctuation mark, preferably after the semicolon ";" or comma ",". The next line of code is indented by 4 spaces relative to the previous line. This can effectively prevent code missing errors caused by copy-paste and enhance readability.
Truncate the string by a certain length and use the + operator to concatenate. Try to perform semantics as much as possible, such as not to break in a complete noun. In particular, for the splicing of HTML fragments, the same structure as HTML is maintained by indentation:
You can also use arrays to splice it, which is easier to adjust indentation than + operations:
2). The ternary operator is too long
The ternary operator consists of 3 parts, so its line breaks should form 3 different situations according to the length of each part:
The following situations shall not occur:
3). Excessively long logical condition combination
When 80 characters cannot meet the needs due to the complex combination of logical conditions, each condition should be placed independently of one line, and the logical operator should be placed at the beginning of the line for separation, or part of the logic should be separated by logical combination. Finally, place the closing brackets) and the opening brackets { on an independent line to ensure that the statement blocks with the if can be easily visually identified. like:
4). Excessively long JSON and array
If there are many object properties, causing each property to take up too much space, it can be organized by semantics or logic, such as:
Through 5 groups of groups, each row is controlled within a reasonable range and is logically segmented. For arrays with more projects, the same method can also be used, such as:
5).return statement
If the expression execution is used as the return value, please place the expression and return in the same line to avoid the newline being misinterpreted as the end of the statement and causing a return error. If no expression is returned after the return keyword, undefined will be returned. The default return value of the constructor is this.
Example:
3. Naming
Naming methods usually have the following categories:
a). Description of nomenclature
1).camel nomenclature, like thisIsAnApple
2).pascal nomenclature, like ThisIsAnApple
3). Underline nomenclature, like this_is_an_apple ・
4). The nomenclature of the middle marking is like this-is-an-apple
Depending on different types of content, the following nomenclature must be strictly adopted:
b).Variable name: Camel nomenclature must be used
c). Parameter name: Camel nomenclature must be used
d). Function name: The camel nomenclature must be used
e). Method/property: Camel nomenclature must be used
f).Private (protected) member: Must be underlined_begin
g). Constant name: All capital underscore nomenclature must be used, such as IS_DEBUG_ENABLED
h).Class name: The pascal nomenclature must be used
i). Enumeration name: The pascal nomenclature must be used
j). Enumeration properties: underscore nomenclature must be used in all capitals
k). Namespace: Camel nomenclature must be used
l).Semantics: Naming also requires attention to semantics, such as:
Nouns should be used for variable names;
Boolean type should start with is, has, etc. to indicate its type; ・
Function names should use verb-object phrases;
Class names should be made with nouns.
4. Comments
The comments should be as simple as possible and clear as possible. Focus on the meaning of comments and annotate the less intuitive parts:
(Of course, this practice of directly defining a bunch of global variables is not recommended)
In addition, JavaScript comments have two types of "//" and "/* ...... */". It is recommended that "//" be used as line of code comments, and the form "/* .... */" is used as a cancellation of the entire code segment, or in more formal declarations, such as descriptions of function parameters, functions, file functions, etc.:
In addition: When copying and pasting, you should pay attention to whether the comments correspond to the code.
5. Statement
1). Variable declaration
Although the JavaScript language does not require variable declarations before they are used. But we should still develop this good habit. This makes it easier to detect undeclared variables, avoiding them becoming hidden global variables and causing hidden dangers.
At the beginning of the function, you should first use the var keyword to declare the local variables to be used in the function, comment on the functions and representative meanings of the variables, and should be sorted alphabetically. Each variable takes up a single line to add comments. This is because only the {} of the function in JavaScript indicates scope, local variables declared with the var keyword are only valid within the function, while variables not declared by var are considered global variables. Example:
There is a difference between the variable valueA declared with var and the variable valueB declared without a declared. It is particularly important to note that the variable declared with var inside the function is a local variable, which can effectively avoid errors caused by the same name as the local variable and the global variable.
2). Function declaration
Functions should also be declared before calling, and internal functions should be declared after var statements that declare internal variables, which can clearly indicate the scope of internal variables and internal functions.
In addition, there should be a space between the function name immediately between the left bracket '(', and the close bracket ')' and the following '{' to clearly display the function name with its parameter part and the beginning of the function body. If the function is an anonymous/nameless function, leave a space between the function keyword and the opening bracket '(', otherwise it may be mistaken for the function name of the function.
Example of internal function declaration:
From the output of the above example, it can be seen that the inF() function only takes effect inside the outF() function, and the local variable innerA takes effect on the scope of the internal function. This encoding method makes the scope of variables and functions clear.