Although the sparrow is small, it has all the essentials. Dojo custom control application_dojo

Now there are many Javascript frameworks and control libraries, such as jQuery, Ext, prototype, MooTools, Dojo, etc. These are all listed on Google when searching for "javascript framework" One page. Among them, except MooTools, I know the others, but I have only used Ext and Dojo in projects. But I have never been very fond of Ext. There are performance issues, and the new version also charges a fee.

In addition, the examples officially provided by Ext all use JavaScript to create and initialize controls. One JavaScript is used with one HTML, which makes management very confusing. And the official example is Best Practice, so this model is not very acceptable. In my eyes, Dojo is a guy with outstanding shortcomings and advantages:

Disadvantages:

1. The documentation is very poor;

2. CodeBase is very large (advantages, disadvantages?);

3. The version evolves quickly, and every time the version evolves, a large number of APIs change, which is not mature enough.

Advantages:

1. It is an excellent control development framework;

2. It fully embodies the object-oriented aspect of JavaScript.

Comparing EXT and Dojo, I think EXT is a control library, while Dojo is a framework. The first time I came into contact with Dojo, it was version 0.3. It has undergone earth-shaking changes, but I already have a preconception about its controls, so now I am not interested in studying it anymore. Let's talk about how to use Dojo as a custom control. Dojo is very complex, but we can simply think of it as having three layers:

1. The lowest level is the core API

The methods provided by the core API simplify operations related to DOM, strings, CSS, events, etc. The core API also implements Java-like package concepts and import mechanisms, which facilitates code organization and dependency management.

2. Based on the core API, the concept of "control life cycle" was created

This is the highlight of Dojo, allowing third parties to develop controls in a standardized way. Controls developed based on Dojo have strong cohesion and object-oriented characteristics.

3. Various controls developed based on 2

The controls provided by Dojo are also relatively complete, but due to historical reasons, they have not been studied in depth.

Dojo’s controls are collectively called DIJIT. To write the Dojo version of the Hello World control, you don’t need to know much:

◆A control is a JS class;

◆All controls inherit from _Widget or its subclasses. The _Widget class provides the life cycle management function of the control;

◆You can inherit _Templated at the same time. By inheriting this class, you can bind a template to the control to describe the display of the control.
Introduction to the _Widget base class
1. Life cycle methods
_Widget provides a series of methods called "life cycle methods". When the Dojo framework initializes a control, They will be called in sequence. Our custom control can rewrite specific methods to add its own initialization logic. Method calling sequence and description:

Copy code 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 the constructor
constructor(/*Object*/ params, /*DOMNode*/node)
// This method is equivalent to the constructor of the java class
// Perform initialization actions in this class
postscript(/*Object*/ params, /*DOMNode*/node)
//In the actual control creation process, the following methods are called in sequence (all can be overridden)
_Widget.create(/*Object*/params, /*DOMNode*/node)
_Widget.postMixInProperties( )
_Widget.buildRendering( )
_Widget.postCreate( )
//I use The most common method is the postCreate method. In this method, the control has been initialized and the interface has been displayed.
//Business-related processing is usually started in this method

2. Several important attributes of this class (the control can be accessed through this)
◆id: The unique number assigned to the control. If the user does not specify it, Dojo will randomly create one.
◆domNode: The corresponding DOM node of this control in HTML.
The most basic custom control example:
js file: ./hello/world.js (the following file names are related to relative paths, where ./ represents the same level as "Dojo, dijit, Dojox" Table of contents).

Copy code The code is as follows:

//Declare the class name you output
Dojo.provide("hello.world");
//Declare the class name you depend on Dojo.require("dijit._Widget");
Dojo.require("dijit._Templated");
//Dojo.declare defines the control class, the first parameter: class name, the second parameter: parent class array, the third parameter: class prototype
Dojo.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 its corresponding DOM node in the HTML page to hellow world.

Copy code The code is as follows:

> ;

< ;/body>

For the specific function and usage of modulePaths, please google. Next, we parameterize the control. We can pass the name as a parameter when writing the label, and then the control displays HELLO XXX. First, change the html file to:

Copy code The code is as follows:

Attention everyone Yes, we have added the "yourName" attribute to the label. How to 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 itself, and then use it in postCreate. The JavaScript code is as follows:

Copy code The code is as follows:

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 and add an input box. While entering text in this input box, Dynamically updating hello For example:

Copy code The code is as follows:

Dojo.connect(inputText," onkey",this,"updateHello");

This time, change the control first. During postCreate, dynamically add an input box and dynamically bind events to the input box:

Copy code The code is as follows:

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 ; 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 attribute yourName="jinxfei"). From this slightly complex control, we can already see the advantage of Dojo: true object-oriented! DOM elements within the scope of control management can be placed in classes and used as attributes (directly referenced with this.xxx). In this way, document.getElementByID() is avoided and the control is cohesive. The methods that respond to events are also class methods, so as to avoid declaring a large number of discrete functions on the page, which is difficult to manage.