Introduction to the dojo class Mechanism

With the development of AJAX and RIA technology, JavaScript is widely used and plays an increasingly important role in development. JavaScript provides a unique class mechanism, but its syntax is quite different from the traditional object-oriented language, which makes many JavaScript developers feel that... SyntaxHighlighter. al

With the development of AJAX and RIA technology, JavaScript is widely used and plays an increasingly important role in development. JavaScript provides a unique class mechanism, but its syntax is quite different from the traditional object-oriented language, which makes many JavaScript developers confused, as a powerful JavaScript class library, dojo has a complete class mechanism. This article will introduce the class mechanism of dojo through examples. This is a powerful and flexible function provided by dojo, and its dijit UI component framework is also implemented on this basis.
1. Use dojo to define classes
Declare the dojo class through dojo. the declare () method, for example, we want to define a name named com. levinzhang. person class, which includes the name, age attributes, and the getName and getAge methods:
 
Js Code
Dojo. declare ("com. levinzhang. Person", null ,{
Name: null,
Age: null,
Constructor: function (name, age ){
This. name = name;
This. age = age;
},
GetName: function (){
Return this. name;
},
GetAge: function (){
Return this. age;
}
});
In addition to the attribute and method mentioned above, we also define a method named constructor in the code, which is crucial in the class mechanism of dojo, when we instantiate this class to get the object, this method will be called to complete the initialization operation.
The declare of dojo accepts three parameters: the class name, the parent class to be inherited, and the attributes and methods of the class. The syntax of the instantiation class is also very simple, and there is no difference with the instantiation of common JavaScript classes:
 
Js Code
Var person = new com. levinzhang. Person ("levinzhang", 30 );
Alert (person. getName (); // The levinzhang prompt is displayed.
2. Implement static variables
In common object-oriented languages, static variables at the class level are often used, while classes defined by dojo can also achieve static variables. However, static variables are limited to arrays and object types.
 
Js Code
StaticInfo: {count: 0 },
Constructor: function (name, age ){
This. name = name;
This. age = age;
+ + This. staticInfo. count;
}
As shown above, if arrays and objects are defined without being modified in the constructor, the object will become a static attribute of the class. The test code is as follows:
 
 
Js Code
Var person = new com. levinzhang. Person ("levinzhang", 30 );
Alert (person. staticInfo. count); // at this time, 1 is displayed.
 
Var person2 = new com. levinzhang. Person ("levin", 30 );
Alert (person2.staticInfo. count); // 2 is displayed.
Note the following two points: 1) for original type variables such as numbers, Boolean values, and strings, the dojo class mechanism does not provide the function to implement static attributes; 2) if the defined array or object attribute is assigned a value again in the constructor method, this attribute is no longer a static attribute, but each instantiated object holds its own backup.
3. Use dojo to implement inheritance
There are no directly implemented inheritance keywords in JavaScript. Therefore, there are many implementation methods for inheritance, represented by class inheritance and original type inheritance, however, any inheritance method requires developers to have a deep understanding of the JavaScript language itself. Dojo encapsulates the Inheritance Mechanism of JavaScript and implements powerful class definitions. We will introduce some common functions.
Dojo. the second parameter in the declare method specifies the parent class to be inherited. This parameter can be null (the class to be defined has no parent class), a single class (the class to be defined inherits from one parent class) or an array (the class to be defined inherits from multiple parent classes ).
1) single inheritance
We need to define a class named com. levinzhang. Employee, inherit from com. levinzhang. Person, add the attribute named workExperience, and override the getName method:
 
Js Code
Dojo. declare ("com. levinzhang. Employee", com. levinzhang. Person ,{
WorkExperience: null,
Constructor: function (name, age, workExperience ){
This. workExperience = workExperience;
},
GetWorkExperience: function (){
Return this. workExperience;
},
GetName: function (){
Return "Employee:" + this. name;
},
GetInput: function (){
Return 5000;
}
});
In the above Code, the defined com. levinzhang. Employee inherits com. levinzhang. Person and adds custom methods. The test code is as follows:
 
 
Js Code
Var employee = new com. levinzhang. Employee ("levin );
Alert (employee. getName (); // the message "Employee: levin" is displayed.
Alert (employee. getWorkExperience (); // 4 is displayed.
Alert (employee. getAge (); // 30 is displayed.
We can see that in the Employee instance, we can call the methods defined in the parent class. In the constructor Initialization Method of the class, we did not call the methods related to the parent class, but we successfully initialized the attributes name and age, this is because dojo automatically calls the initialization method of the parent class to complete the initialization of the inheritance requirements.
2) Multi-Inheritance
Dojo supports multi-inheritance. dojo implements the C3 algorithm that is used by Python and many support multi-inheritance languages. When using the multi-inheritance function of dojo, note that only the first element in the array will act as the real parent class, other elements are added using mixin to build the prototype chain.
For example, we need to define a class to indicate the stock holder (com. levinzhang. registrant holder), and employees in the company may also hold shares, so we define a name named com. levinzhang. the ShareholderEmployee class inherits from com. levinzhang. registrant holder and com. levinzhang. employee.
 
Js Code
Dojo. declare ("com. levinzhang. incluholder", com. levinzhang. Person ,{
Share: null,
Constructor: function (args ){
This. share = args. share;
},
GetShare: function (){
Return this. share;
}
});
 
Dojo. declare ("com. levinzhang. incluholderemployee", [com. levinzhang. Employee, com. levinzhang. incluholder], {
GetInfo: function (){
Alert ("I'm an Employee with stock. my share is "+ this. getShare () + ". "+" My name is "+ this. getName () + ". ");
}
});
In the above Code, we adjusted the format of the original initialization input parameter, the method of passing in multiple parameters is changed to passing in a simple JavaScript literal object (the original code should be slightly adjusted ), in addition, a class is implemented to describe the employees who hold shares by means of multi-inheritance. The test code is as follows:
 
 
Js Code
Var using holderemployee = new com. levinzhang. Using holderemployee ({name: "levin", age: 30, workExperience: 4, share: 300 });
Incluholderemployee. getInfo ();
// The message "I'm an Employee with stock. My share is 300. My name is Employee: levin." will be displayed ."
For more information about multiple inheritance of dojo, see the documentation of dojo.
3) Call the method of the parent class
In programming, we often encounter the need to call the methods of the parent class in a method of the subclass to collaborate to complete the function. For example, we define com. levinzhang. manager class, which inherits from com. levinzhang. the Employee class and the getInput method are rewritten. The Manager's income is divided into two parts. levinzhang. with the same fixed income as the Employee, the other part is other income related to management experience. In this way, when defining the Manager, you need to call the parent class method. The implementation method is as follows:
 
Js Code
Dojo. declare ("com. levinzhang. Manager", com. levinzhang. Employee ,{
ManageExperience: null,
Constructor: function (args ){
This. manageExperience = args. manageExperience;
},
GetInput: function (){
Var fromBase = this. inherited (arguments );
Return fromBase + 1000 * this. manageExperience;
}
});
From the code above, we can see that with the use of the inherited method, the Manager can call the method of the parent class. The test code is as follows:
 
 
Js Code
Var manager = new com. levinzhang. Manager ({name: "levin", age: 30, workExperience: 4, manageExperience: 2 });
Alert (manager. getinputs (); // 7000
In the above test code, the return value of getInput is 7000, indicating that the value is determined jointly by the subclass and the parent class method.
In addition to using inherited to call methods in the parent class, dojo 1.4 provides the function to call the parent class method in a chained manner. You can set the method to automatically call the parent class, it also supports before or after configurations similar to AOP (dojo is in development version 1.7 and provides more rich AOP functions, so we will continue to pay attention to them ).
4. Other functions of the Dojo class Mechanism
In addition to the class definition functions described above, dojo also provides many convenient tool classes for use.
The objects generated by the dojo class have some unique attributes and methods. common attributes include isInstanceOf and declaredClass attributes. The isInstanceOf method determines whether the object is an instance of a class, the declaredClass attribute indicates the declared class of the object. For example:
 
Js Code
Var manager = new com. levinzhang. Manager ({name: "levin", age: 30, workExperience: 4, manageExperience: 2 });
Alert (manager. isInstanceOf (com. levinzhang. Employee); // The prompt is true.
Alert (manager. isInstanceOf (com. levinzhang. Person); // The prompt is true.
Alert (manager. declaredClass); // The prompt is "com. levinzhang. Manager"
The class mechanism also involves packet management and other functions, which are limited by space and will not be described. Interested readers can refer to the online documents or books of dojo.
5. Summary
The class mechanism of JavaScript itself is complicated and has high requirements on developers. While dojo provides powerful class functions, some of which reduce the difficulty of development. This article briefly introduces the basic functions of the dojo class mechanism, including class definition, inheritance, and static attributes. This is one of the most basic and core contents of dojo, many of dojo's advanced functions are implemented based on this. Therefore, understanding how to use these functions and even source code implementation are of great benefit to the overall grasp of the dojo framework.

Author: "xiangma, Shandong Province"