Although the sparrow is a little dirty, the Dojo custom control application _ dojo

Dojo is an open source DHTML toolbox written in JavaScript. Dojo solves some historical issues left over by DHTML. These problems have made development impossible for a large number of dynamic web programs, but Dojo has outstanding advantages and disadvantages. Now Javascript frameworkThere are many control libraries, JQuery, Ext, prototype, MooTools, and Dojo, all of which are listed on the first page by Google's search for "javascript + framework. Among them, except for MooTools, all others have some knowledge, but only Ext and Dojo are used in the project. However, I have never liked Ext very much, and the performance is faulty. I still pay for the new version.

In addition, the official examples provided by Ext are to use JavaScript to create and initialize controls. A JavaScript file is used with an HTML file, which makes management messy. In addition, the official example is Best Practice, so this mode is not acceptable. In my opinion, Dojo is a guy with outstanding shortcomings and advantages:

Disadvantages:

1. Very poor documentation;

2. CodeBase is very large (Advantages and Disadvantages ?);

3. Version evolution is fast, and each version evolution has a large number of API changes, which are not mature enough.

Advantages:

1. It is a very good control development framework;

2. fully embodies the object-oriented aspect of javascript.

Comparing EXT with Dojo, I think EXT is a control library, while Dojo is a framework. The first time I came into contact with Dojo, the version 0.3.X at that time. Now I want to use Dojo in the project. The version is 1.3.1. Compared with 0.3 and 1.3, I found that the core idea has not changed much, however, the controls provided by the factory have undergone dramatic changes, but they are already preemptible to their own controls. As a result, they are not interested in studying them now, let's talk about how to use Dojo for custom controls. Dojo is complex, but we can simply think of it as three layers:

1. Core APIs

The core API provides methods to simplify DOM, String, CSS, and event-related operations. The core API also implements the package concept and import mechanism similar to Java, facilitating Code Organization and dependency management.

2. The core API creates the concept of "control lifecycle ".

This is the highlight of Dojo and allows third parties to develop controls in a standardized manner. Widgets developed based on Dojo have strong cohesion and object-oriented features.

3. Various controls developed based on 2

The controls provided by Dojo are also comprehensive, but they have not been thoroughly studied for historical reasons.

Dojo controls are collectively referred to as DIJIT. To write a Hello World Control for the Dojo version, you need to know little about it:

◆ A control is a JS class;

◆ All controls inherit from _ widgets or their subclasses. _ widgets provide the control lifecycle management functions;

◆ It can inherit the _ Templated class at the same time and bind a template to the control to describe the display of the control.
Introduction to _ Widget base classes
1. lifecycle Method
_ Widget provides a series of methods called "life cycle methods". When initializing a control, the Dojo Framework calls them one by one. Our custom controls, you can override a specific method to add your own initialization logic. The sequence and Description of method calls are as follows:

The Code is as follows:

Preamble (/* Object */params,/* DOMNode */node)
// This is a method that is not usually used. The return value of this method is used as the input parameter param of constructor.
Constructor (/* Object */params,/* DOMNode */node)
// This method is equivalent to the java class constructor.
// Perform initialization in this class
Postscript (/* Object */params,/* DOMNode */node)
// The actual control creation process, which calls the following methods in sequence (both can be overwritten)
_ Widget. create (/* Object */params,/* DOMNode */node)
_ Widget. postMixInProperties ()
_ Widget. buildRendering ()
_ Widget. postCreate ()
// The postCreate method is used most often. In this method, the control has been initialized and displayed on the interface,
// Usually start business-related processing in this method

2. Several important attributes of the class (controls can be accessed through this)
◆ Id: the unique id assigned to the control. If you do not specify the id, Dojo creates a random id.
◆ DomNode: DOM node corresponding to the control in HTML.
Example of the most basic custom control:
Js file:./hello/world. js (the file names involved in the following are all relative paths, where./represents the same directory as "Dojo, dijit, Dojox ).

The Code is as follows:

// Declare the name of the output class
Dojo. provide ("hello. world ");
// Declare the name of the dependent class Dojo. require ("dijit. _ Widget ");
Dojo. require ("dijit. _ Templated ");
// Dojo. declare defines the control class. The first parameter is the class name, the second parameter is the parent class array, and the third parameter is the prototype of the class.
Dojo. declare ("hello. world", [dijit. _ Widget, dijit. _ Templated],
{
PostCreate: function (){
This. domNode. innerHTML = "hellow world ";
}
}
);

The action of this control is extremely simple. In the postCreate method, set the content of the DOM node corresponding to the control in the HTML page to hellow world.

The Code is as follows:

Hello World