Sparrow is small and dirty: Write a simplest Control Using dojo

Currently, there are many JavaScript frameworks and control libraries, such as jquery, ext, prototype, mootools, and dojo,
These 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. The new version still charges fees,
I hate making money using open-source code, such as jgraph and Jep. If you are fooled in, you will start charging fees,

In addition, the official examples provided by ext are to use js to create and initialize controls. a js is used together with an HTML,
This makes management messy. I think the official example should be best practice, so it 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 JavaScript side

Comparing ext with dojo, I think ext is a control library, while dojo is a framework.,
I first came into contact with dojo in. At that time, I had 0.3.x. Now I want to use dojo in my project. The version is 1.3.1,
Compared with 0.3 and 1.3, we found that the core idea has not changed much, but the controls provided by the factory have changed dramatically,
However, the primary component has some insights on its controls. As a result, I am not interested in studying them now,
Let's talk about how to use dojo for custom controls.

---

Dojo is very complicated, but we can simply think that it is divided into 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:
1. A control is a JS class.
2. All controls inherit from _ widget or its subclass. _ widget class provides the control lifecycle management function.
3. You 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
_ Widgets provide a series of methods called "lifecycle methods". The dojo Framework calls them in sequence when initializing a control,
Our custom controls can rewrite specific methods to add their own initialization logic. The sequence and Description of method calls are as follows:

JScript code

   Preamble (/* object */Params,/* domnode */node) // This is a method that is not usually used. The returned value of this method is, as the constructor input parameter paramconstructor (/* object */Params,/* domnode */node) // This method is equivalent to the Java class constructor // execute the initialization action postscript (/* object */Params,/* domnode */node) in this class) // The actual control creation process. Call the following method 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 by the control. If this parameter is not specified, Dojo creates a random
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)

JScript code

   // 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 prototypedojo of the class. declare ("hello. world ", [dijit. _ widget, dijit. _ templated], {postcreate: function () {This. domnode. innerhtml = "Hellow world ";}});

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

HTML file:./helloworld.htm

HTML code

   <HTML> 
 

For the specific functions and usage of modulepaths, Google.

Next, we will parameterize the control,
When writing tags, we can pass the name as a parameter, and then the control displays Hello XXX,
First, change the HTML file:

HTML code

   <HTML> 
 

We have noticed that we have added the "yourname" attribute to the tag. How can we use this attribute in the control?
You can receive the value of this attribute in the construtctor method, assign the value to the variable of the control class, and then use it in postcreate,
The JS Code is as follows:

JScript code

   dojo.provide("hello.world");dojo.require("dijit._Widget");dojo.require("dijit._Templated");dojo.declare("hello.world",[dijit._Widget,dijit._Templated],{    yourName:'world',    constructor:function(params,node){        this.yourName=params.yourName;            },    postCreate:function(){        this.domNode.innerHTML="hellow "+this.yourName;    } });

Next, we will further increase the complexity of the control.,
Add an input box to dynamically update Hello XXX,
This requires the event binding mechanism of dojo. The most common mode is:
Dojo. Connect (node, event, OBJ, method );
The method of obj is used as the event handler function of domnode,
For example:
Dojo. Connect (inputtext, "onkey", this, "updatehello ");

This time, first change the control. During postcreate, an input box is dynamically added and events are dynamically bound to the input box:

JScript code

   Dojo. provide ("hello. world "); dojo. require ("dijit. _ widget "); dojo. require ("dijit. _ templated "); dojo. declare ("hello. world ", [dijit. _ widget, dijit. _ templated], {yourname: 'World', typein: NULL, echodiv: NULL, constructor: function (Params, node) {This. yourname = Params. yourname;}, postcreate: function () {This. typein = document. createelement ("input"); this. typein. type = "text"; this. domnode. appendchild (this. typein); this. echodiv = document. createelement ("Div"); this. domnode. appendchild (this. echodiv); dojo. connect (this. typein, "onkeyup", this, "updatehello"); // dynamically binds the event this. updatehello (); // call method initialization. An empty Hello}, updatehello: function () {This. echodiv. innerhtml = "hello" + this. typein. value ;}});

The reference to the control in the HTML file does not need to be changed (strictly speaking, you need to delete the property yourname = "jinxfei ).

From this slightly complex control, we can see the advantages of dojo:
Real object-oriented!
DOM elements in the control management category can be put in the class as attributes (directly referenced using this. XXX ),
In this way, the control of document. getelementbyid () is not nested.
The method for responding to events is also a class method, so that you do not declare a large number of discrete functions on the page, which is difficult to manage.

Let me take a rest first. Next we will sort out the template mechanism of dojo, and it is easier to use templates for complex controls,
There is also a combination with DWR and so on.