Mastering the Dojo Toolkit, part 7th: the extension of Dojo

By studying the first six parts of this series, you've got a good idea of the power of Dojo. But sometimes some of the dojo's features do not fully meet the actual requirements, and you need to extend the dojo, for example, to extend the Widget so that it is more responsive to the requirements of the project. This article will detail the object-oriented features of dojo and how to develop new Dojo modules on this feature, create new Dijit, and define your own personalized widgets.

Dojo class definition

JavaScript based on prototype inheritance

JavaScript is an object-based language in which objects can be inherited from other objects, but JavaScript employs a prototype (prototype based) inheritance mechanism, which is very different from the class-based inheritance known to developers. In JavaScript, each function object (in fact, the function definition code in JavaScript) has an attribute prototype, which points to an object that is the prototype object of the function object, and the prototype object has a prototype attribute. The default points to a root prototype object. If a particular object is a prototype object, and the object's prototype object is another object, it will form a prototype chain over and over again, and the end of the prototype chain is the root prototype object. When JavaScript accesses an object's properties, it first checks to see if the object has an attribute of the same name, and if not, it goes up the inheritance chain until it is found in one of the prototype objects, and the object does not have this attribute if it reaches the root prototype object. Such low-level objects seem to inherit some of the properties of the high-level object. The following is an example of how a prototype based inheritance works.

Listing 1. Prototype-based inheritance

function Plane (w, s) {
This.weight = w;
This.speed = s; 　
}
Plane.prototype.name = "";
　function Jetplane () {
This.seats = 0;
　　this.construct = function (name, weight, speed, seats) {
THIS.name = name;
This.seats = seats;
This.weight = weight;
This.speed = speed; 　
}
}
JetPlane.prototype.erased = true;
Jetplane.prototype = new Plane ();
var p1 = new Plane (2000, 100);
P1.name = "Boeing";
var J1 = new Jetplane (500, 300);
J1.construct ("F-22", 500, 500, 2); 　
Console.log ("P1.weight: + P1.weight +", P1.speed: "+ P1.speed +", P1.name: "+
P1.name);
Console.log ("J1.name:" + J1.name + ", J1.weight:" + j1.weight + ",
J1.speed:" + J1.speed + ", J1.seats:" + j1.seats);

In this example, the properties of the two function objects Plane and Jetplane,plane objects have the weight defined in the constructor, the speed, and the name defined in the Plane object of the prototype. These properties are used without distinction, and can be passed through the object. property to access the. The value of two attributes seats and construct,construct defined in Jetplane is a function. The Jetplane prototype object adds a property erased and then sets the prototype of Jetplane to a Plane object, so that Jetplane has Plane object (note not Pl Ane object) in all of the properties. The subsequent code uses the Plane and Jetplane constructors to generate some objects and output the object's property values. The relationship between the objects in the example is shown in Figure 1.

Figure 1. Object graph

The function object represented by the green color box; The blue color box represents the prototype object, and each function object has a prototype object, such as Plane Planprototype, and Jetplane has jetplaneprototype. The normal object that the yellow color box represents. Each object has a Prototype attribute that points to a prototype object. From the diagram, you can see how the internal properties of each object are distributed, and only the properties defined in the Plane object in its own constructor weight,spead,name exist in the Plane prototype object Planeprototype; P1 copies the attributes in Plane. Instead of copying the attributes in the Planeprototype. When visiting the Name property of P1, the JavaScript interpreter found that P1 did not have the name attribute, looked up the prototype attribute and then found name in Planeprototype, so it actually accessed the name here. Similarly j1 copies only the seats and construct in Jetplane, while J1 prototype is somewhat special; in the statement jetplane.prototype = new Plane (); Before execution, Jetplane's prototype attribute points to jetplaneprototype, and when this statement is executed, the Jetplane prototype is set to an anonymous Plane object, originally to Jetplaneprototy The chain of PE was "cut off". When you access the weight and speed of J1, you are actually accessing Plane and weight in the anonymous Plane object [speed]. Simply put, JavaScript looks for the attributes that need to be accessed on the prototype chain, which is how JavaScript is based on prototype inheritance.