Netease mail frontend Javascript code specification: Class Specification

Previous Article.
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 many variables in the closure scope and improve the effect of compression obfuscation. In addition, using closures to define classes, it is very easy to load the introduced dynamic content later. I will share it with you later.

 

From Netease mail front-end technology center