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:

1 2 3 4 5 6

Vargroup = []; Group.name = ' MyGroup '; /**** some code ***///You can see it at one glance. What is group?

Another example:

1 2 3 4 5 6 7 8 9 10

Varchecked =false; Varcheck =function () {returntrue;}/** some code **/if (check) {//May write checked as check, due to the inability to quickly discover that check is a function, resulting in a logic error//do Some thing}

If we write:

1 2 3 4 5 6 7 8 9 10 11 12 13

Varbchecked =false; Varfcheck =function () {returntrue;}/** some code **/if (bchecked) {//Do some thing} if (Fcheck ()) {//do OT Her 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:

1 2 3) 4 5

Varusername = "Dongua"; Functioncheckname (userName) {//existence of function parameter UserName and global variable userName, if you want to compare two values for equality, must be written as Returnwindow.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:

1 2 3 4 5 6 7 8 9 10 11 12

Functionfgetnumber (ntotal) {if (ntotal<100) {ntotal = 100;     } return__fadd (Ntotal);   Function__fadd (nnumber) {nnumber++;  Returnnnumber; }} 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 (), Faddresssubmitbuttonclick ()

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 (Var i=0,m=10;i<m;i++) {do something}.

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.

Front-end JavaScript coding specification