Netease front-end JavaScript code specification

In general, javascript is a language with extremely flexible syntax. Javascript was designed to add dynamic effects to HTML. Due to its dynamic, weak type, and compatibility issues with different browsers, the development cost is much higher than that of java and other languages. Because... SyntaxHighlighter. all ();

In general, javascript is a language with extremely flexible syntax. Javascript was designed to add dynamic effects to HTML. Due to its dynamic, weak type, and compatibility issues with different browsers, the development cost is much higher than that of java and other languages. Because it is too flexible, we have developed javascript code specifications for Netease mail, as much as possible to reduce the problems caused by flexible syntax. The following is a detailed introduction:

1. variable naming rules

Variable names include global variables, local variables, class variables, and function parameters.

Basic specifications

Variable names are composed of prefix types and meaningful words, and the first letter of a word must be capitalized. For example, sUserName and nCount.

Prefix Specification

Each local variable must have a type prefix, which can be divided:

S: string. Example: sName, sHtml;

N: Number. Example: nPage, nTotal;

B: indicates the logic. Example: bChecked, bHasLogin;

A: array. Example: aList, aGroup;

R: indicates a regular expression. Example: rDomain, rEmail;

F: indicates a function. Example: fGetHtml, fInit;

O: other objects not involved above, such as oButton and oDate;

Exceptions:

1: temporary variables with little scope can be abbreviated as str, num, bol, obj, fun, and arr.

2: cyclic variables can be abbreviated as I, j, and k.

Why do we need to force a variable prefix like this? This is because javascript is a weak language. When defining a large number of variables, we need to clearly understand the attributes of the current variable. It is difficult to distinguish only common words.

 

For example:

Var group = [];
Group. name = 'mygroup ';
/****
Some code
***/
// At this time, can you see at a glance what the group is?

 

For example:

Var checked = false;
Var check = function (){
Return true;
}
/**
Some code
**/
If (check) {// The checked may be written as check. Because check cannot be quickly found to be a function, it may cause a logic error.
// Do some thing
}

 

If we write:

Var bChecked = false;
Var fCheck = function (){
Return true;
}
/**
Some code
**/
If (bChecked ){
// Do some thing
}
If (fCheck ()){
// Do other thing
}

 

It is clear.

Global variables and constant specifications

Netease mail front-end is based on the concept of "class" to develop javascript (will be introduced later), each class definition is in a closure function, in addition to class definitions in windows, only two types of variables can be defined globally, that is, global variables and constants.

The global variable uses g as the prefix and is defined under the window. For example, gUserName and gLoginTime.

Some variables that cannot be modified are considered constants, and all letters are capitalized. For example, COPYRIGHT and PI. Constants can exist in functions or globally.

Let's take a look at the example to figure out why the definition is as follows:

Var userName = "dongua ";
Function checkName (userName ){
// The userName parameter and the global variable userName exist. To compare the two values, you must enter
Return window. userName = userName
}

 

If the prefix of global variables is used, it is very clear.

2. Function naming rules

The verb or verb [+ noun] form is used in a unified manner, for example, fGetVersion (), fSubmitForm (), fInit (); functions that involve returning logical values can use is, has and other words that represent logic replace verbs.

If an internal function exists, use the _ f + Verb [+ noun] form. The internal function must be defined at the end of the function. For example:

Function fGetNumber (nTotal ){
If (nTotal <100 ){
NTotal = 100;
}
Return _ fAdd (nTotal );

Function _ fAdd (nNumber ){
NNumber ++;
Return nNumber;
}
}
Alert (fGetNumber (30); // alert 101

 

Object method implementation

Object method naming uses the form of f + object class name + Verb [+ noun]; for example, fAddressGetEmail

Event Response Function

An event response function is named by the trigger event object name + event name or module name + trigger event object name + event name, for example, fDivClick (), fAddressSubmitButtonClick ()

3. Other considerations

1: All names are best represented in English.

2: all variable names should be clear and necessary, and try to avoid unnecessary abbreviations that are easy to confuse.

3: netease. events. mouse. Handler, instead of netease. events. mouse. MouseEventHandler.

4: The corresponding method should use the corresponding verb, such as get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end.

5: Double Negative variables, such as bIsNotError and bIsNotFound, should be avoided.

6: variables should be defined within the minimum range and the minimum active time should be kept as much as possible.

7: it is best to define the loop variable in the loop. For example, for (var I = 0, m = 10; I

8: avoid complex condition statements as much as possible. Use a temporary boolean variable instead.

9: do not execute the statement in the condition. For example, if (I = 3)> 2) {} is not advisable.

10: Do not repeatedly use numbers of the same meaning in the code, instead of a variable, such as nTotal = 100; num = total.

 

On the Netease mailbox page, only three variables can be defined in window: 1: global variable; 2: constant; 3: class. Any business logic needs to be implemented through the class method or sample method. The first two variables have been introduced in the previous article and will not be described here. Next we will detail the class definition and usage specifications.

The definition class is completed through a closure:

(Function (){
// Step 1: Introduce existing classes. Introduce support Class
Var Support = window. Support;

// $ Is a reference to the basic library "base" of Netease mail. It will be introduced later.
// Step 2: Define the class. It can be considered that a class definition function () {} is returned, and an Image class is defined under window.
Var Image = $. createClass ("Image ");

// It can be considered jQuery's extend Method

// Step 3: define class attributes/method Definitions
$. Object. extend (Image ,{
_ Language: null, // internal attribute
GetSize: fImageGetSize
});
// Step 4: Define instance attributes/method Definitions
$. Object. extend (Image. prototype ,{
Name: null,
Url: null,
Ext: null,
Width: 0,
Height: 0,
SetName: fImageSetName,
GetName: fImageGetName,
Init: fImageInit
});
// Step 5: implement the Method

Function fImageGetSize (nWidth, nHeight ){
Return nWidth * nHeight;
}

Function fImageSetName (sName ){
Var oImage = this;
OImage. name = sName;
}

Function fImageGetName (){
Var oImage = this;
Return oImage. name;
}

Function fImageInit (sUrl ){
Var oImage = this;
OImage. url = sUrl;
OImage. ext = Support. getExt (sUrl );
OImage. width = Support. getWidth (sUrl );
OImage. height = Support. getHeight (sUrl );
}

})();

 

We can see that this closure completes the following tasks:

1. Introduce other classes required for this class.

2. Define this class.

3. Define the attributes and methods of a class.

4. Define the instance attributes and methods of the class.

5. Implementation of classes and instance methods.

In terms of naming, we follow the following rules:

1. The first letter of the class name must be in uppercase, such as Image and Support.

2. the attribute name must be a meaningful noun with a lowercase letter, for example, oImage. width.

3. The method name must be a meaningful verb [+ term] with the first letter in lowercase, for example, Support. getWidth.

4. If you do not want to be called by other methods, add "_" before the attribute or method name, for example, oImage. _ language.

5. If you do not want the quilt class to be called, add "_" before the property or method name, for example, oImage. _ fire ()

Note the following points:

1. The method definition is not defined by anonymous functions, but is implemented under the class definition. The advantage is that the attribute method definitions of the class can be listed at the beginning, so that the corresponding attributes and methods can be viewed through the source code.

2. Use local variables instead of this in class/instance methods. This is not a good thing. It will be dizzy if you are not careful. Using local variables can avoid such problems as much as possible and improve the compression and obfuscation performance.

3. In the actual development process, each class definition has a separate js implementation.

Except for the definition of classes, closures do not implement any other logic. Using closures can constrain a lot of variables in the closure scope and improve the effect in compression obfuscation.

Author: zdrjlamp