NetEase front-end JavaScript coding specification

In the years of development mailbox Webmail process, NetEase mailbox front-end team accumulated a lot of experience, we developed a lot of basic JS Library, to achieve a large number of front-end effect components, developed a mature OPOA framework and API components, here to do some sharing. Today I'd like to talk to you about JavaScript coding specifications.

As is known to all, JavaScript is a language with extremely flexible syntax. JavaScript was designed to add dynamic effects to HTML at the beginning of the design. Because of his dynamic, weak type and other features, as well as the compatibility of different browsers, the cost of development is much higher than in Java and other languages. Because it is too flexible, we have developed a code for the use of NetEase mailbox JavaScript coding specifications, as much as possible to reduce the grammatical flexibility caused by the problem. The following are specific:

1. Variable Naming conventions

Variable names include global variables, local variables, class variables, function parameters, and so on, and they all fall into this category.

Basic specifications

Variable names are made up of type prefixes + meaningful words, and the first letter of the word needs to be capitalized. For example: Susername,ncount.

Prefix specification

Each local variable needs to have a type prefix, which can be categorized by type:

S: Represents a String. For example: sname,shtml;

N: Represents a number. For example: npage,ntotal;

B: Representation logic. For example: Bchecked,bhaslogin;

A: Represents an array. For example: Alist,agroup;

R: Represents the regular expression. For example: Rdomain,remail;

F: Represents a function. For example: Fgethtml,finit;

O: Other objects that are not mentioned above, for example: obutton,odate;

Exceptions:

1: The scope of the small temporary variable can be abbreviated, for example: Str,num,bol,obj,fun,arr.

2: Cyclic variables can be abbreviated, such as: I,j,k.

Why do you need to force the definition of a variable prefix? Formally because JavaScript is a weak language. When defining a large number of variables, we need to be very clear about what the current variable is, and it is hard to tell if it is only through ordinary words.

For example:

var group = [];
Group.name = ' MyGroup ';

You can see it at a glance. What IS group?

Another example:

var checked = false;
var check = function () {
return true;
}

if (check) {//May write checked as a check, due to the inability to quickly discover that check is a function, resulting in a logic error
Do some thing
}

If we write:

var bchecked = false;
var fcheck = function () {
return true;
}

if (bchecked) {
Do some thing
}
if (Fcheck ()) {
Do other thing
}

It's a lot clearer.

Global variables and Constants specification

NetEase Mailbox front-end is based on the concept of "class" to develop JavaScript (later specifically), each class definition is in a closure function, in addition to the definition of the class under window, only allow two variables defined in the global, that is, global variables and constants.

The global variable uses g as the prefix, defined under window. such as Gusername,glogintime.

Some variables that are not allowed to modify values are considered constants and all letters are capitalized. For example: Copyright,pi. A constant can exist in a function, or it can exist in a global.

It's easy to see an example of why this is defined:

var userName = "Dongua";
function CheckName (userName) {
There is a function parameter username and a global variable username, if you want to compare two values for equality, it must be written as
return Window.username = = UserName
}

If you use a global variable prefix, it's very clear.

2. Function Naming conventions

Unify the use of verbs or verbs [+ noun] forms, for example: Fgetversion (), Fsubmitform (), finit (); functions involving returning logical values can use words such as is,has to represent logic instead of verbs.

If there is an intrinsic function, using the __f+ verb [+ noun] form, the intrinsic 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 ());//alert 101

Object method implementation

Object method naming uses F+ object class name + verb [+ noun] form; 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 (), Faddresssubmitbuttonclic K ()

3. Other precautions

1: All names are best used in English expression.

2: All variable names should be clear and necessary to avoid unnecessary and easily confusing abbreviations as much as possible.

3:netease.events.mouse.handler, not netease.events.mouse.MouseEventHandler.

4: The corresponding method should use the corresponding verb, for example: Get/set, Add/remove, Create/destroy, Start/stop, Insert/delete, Begin/end.

5: Should avoid the double negative meaning of the variable, for example: Bisnoterror, Bisnotfound, not advisable.

6: Variables should be defined in the smallest range and keep the minimum amount of active time as possible.

7: The loop variable is best defined in the loop. For example, for (Var i=0,m=10;i

8: Try to avoid complex conditional statements, you can use temporary Boolean variables instead.

9: Be sure to avoid executing the statement in the condition, for example: if ((i=3) >2) {}, it is undesirable.

10: Do not reuse the same meaning in the code of numbers, with a variable instead, such as ntotal=100; num= total.

NetEase mailbox page In window only allow the definition of three variables--1: global variable; 2: constant; 3: Class. Any business logic needs to be implemented through a class method or an example method. The first two variables are described in the previous article and are no longer described here, followed by a detailed description of the class definition and usage specifications.

The definition class is done by a closure:

(function () {
The first step: introduce the existing classes. Introducing the Support class
var support = window. Support;

$ is a reference to the "base" of the NetEase Mailbox Base library will be introduced later
Step Two: Define the class. It can be assumed that a class definition function () {} is returned, and an image class is defined under Window
var Image = $.createclass ("image");

Can be thought of as the extend method of jquery

Step three: Define class Properties/Method definitions
$. Object.extend (image,{
_language:null,//internal properties
Getsize:fimagegetsize
});
Fourth step: defining instance Properties/Method definitions
$. Object.extend (image.prototype,{
Name:null,
Url:null,
Ext:null,
width:0,
height:0,
Setname:fimagesetname,
Getname:fimagegetname,
Init:fimageinit
});
Fifth Step: Method implementation

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);
}

})();

As we can see, this closure completes the following several things:

1. Introduce the other classes that this class needs to use.

2. Define this class.

3. Define the properties and methods of the class.

4. Define instance properties and methods for the class.

5. Implementation of class and instance methods.

On the naming, we followed the rules:

1. The first letter of the class name must be capitalized, such as Image,support.

2. Attribute names need to be meaningful nouns, first letter lowercase, for example oimage.width.

3. Method name needs to be meaningful verb [+ noun], first letter lowercase, e.g. support.getwidth

4. If you do not want to be called by another method, you need to precede the property or method name with "_", for example Oimage._language

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

The following points need to be specifically stated here:

1. The definition of a method is not defined by an anonymous function, but is concentrated within the class definition. The advantage of this is that the class's attribute method definitions are listed at the beginning, so that the corresponding properties and methods can be viewed through the source code.

2. In the class/instance method, use local variables instead of this. This is not a good thing, accidentally will be dizzy. The use of local variables can avoid such problems as much as possible, and can be more effective when compression is confused.

3. In the actual development process, each class definition is a single JS implementation.

In addition to the class definition, closures do not implement any other logic. Using closures to constrain many variables in the closure scope and to be better in compression obfuscation, in addition to using closures to define classes, the dynamic loading that will be introduced later becomes a very easy thing to share with you later.

NetEase front-end JavaScript coding specification