There are a lot of JavaScript frameworks, control libraries,JQuery, EXT, prototype, MooTools, Dojo, and so on, which are all on Google to search for "Javascript+framework" on the first page. Among them, except for the MooTools, others are aware of, but only in the project using EXT and Dojo. But has been not too fond of ext, performance problems, the new version is also charged.
In addition, ext official examples are the use of JavaScript to create and initialize the control, a JavaScript supporting an HTML to use, so management is very confusing. And the official example is best Practice, so it's not very receptive to this model. Dojo in my eyes is a disadvantage and the pros are very prominent guy:
Disadvantages:
1, the document is very poor;
2, CodeBase is very big (advantage, disadvantage?);
3, the version of the evolution of fast, and each version of the evolution, there are a large number of API changes, is not mature enough.
Advantages:
1, is a very good control development framework;
2, fully embodies the JavaScript object-oriented side.
Ext and Dojo, I think ext is a control library, and dojo is a framework. First contact with Dojo, At that time, version 0.3.X, there was a demand in today's project to use Dojo, the version is 1.3.1, compared to 0.3 and 1.3, found that the core of the idea has not changed much, but the factory-provided control has changed dramatically, but has been preconceived about its controls have stereotypes, leading to now have no interest in the study, or talk about how to get Dojo Make a custom control. Dojo is complicated, but we can simply think of it as a three-tier:
1, the bottom is the core API
The core API provides methods that simplify the operations associated with DOM, strings, CSS, events, and so on. The core API also implements a Java-like package concept and import mechanism that facilitates code organization and dependency management.
2, based on the core API, creating a "control lifecycle" concept
This is a highlight of dojo, allowing third parties to develop controls in a standardized manner. The control based on dojo has strong cohesion and object-oriented characteristics.
3, based on 2 of the development of various types of controls
Dojo itself provides a relatively complete control, just because of historical reasons, has not been deeply studied.
The dojo controls are collectively called Dijit, and to write the dojo version of the Hello World control, you don't have much knowledge:
A control is a JS class;
All controls inherit from _widget or their subclasses, and the _widget class provides a lifecycle management function for the control;
You can inherit _templated at the same time, inheriting the class, and you can describe the display of the control by binding the template to the control.
Introduction to _widget base classes
1. Life Cycle method
_widget provides a series of methods called "lifecycle methods" that the dojo framework invokes in turn when initializing a control, and our custom controls can override specific methods to add their own initialization logic, method invocation order, and Description:
Copy Code code as follows:
Preamble (/*object*/params,/*domnode*/node)
This is a method that is not usually used, the return value of this method, as the input parameter of the constructor param
Constructor (/*object*/params,/*domnode*/node)
This method is equivalent to the constructor of the Java class
To perform an initialization action in this class
PostScript (/*object*/params,/*domnode*/node)
The actual control creation process, in turn, calls the following methods (all can be overridden)
_widget.create (/*object*/params,/*domnode*/node)
_widget.postmixinproperties ()
_widget.buildrendering ()
_widget.postcreate ()
The most I use is the PostCreate method, in which the control has been initialized and the interface has been shown,
Typically, business-related processing is initiated in this method
2. Several important properties of the class (controls can be accessed through this)
ID: The unique number that the control is granted, and if the user does not specify, then dojo randomly creates one.
Domnode: The corresponding DOM node of the control in HTML.
The most basic examples of custom controls:
JS file:./hello/world.js (The following refers to the file name, all with a relative path, where./representative and "Dojo,dijit,dojox" sibling directory).
Copy Code code as follows:
Declare the class name of your own output
Dojo.provide ("Hello.world");
Declare the class name Dojo.require ("Dijit._widget") that you rely on;
Dojo.require ("dijit._templated");
Dojo.declare defines the control class, the first argument: class name, second argument: Parent class array, third parameter: class prototype
Dojo.declare ("Hello.world", [dijit._widget,dijit._templated],
{
Postcreate:function () {
This.domnode.innerhtml= "Hellow World";
}
}
);
The behavior of the control is extremely simple, in the PostCreate method, the contents of the corresponding DOM node in the HTML page are set to Hellow world.
Copy Code code as follows:
<title>hello world</title>
<!--first introduce dojo.js,modulepaths to define the JS directory containing controls, similar to JSP's custom tag introduction mechanism-->
<script type= "Text/javascript" src=./dojo/dojo.js "djconfig=" Parseonload:true,modulepaths:{hello: '. /hello '} ' ></script>
<script type= "Text/javascript" >
Dojo.require ("Dojo.parser");
Dojo.require ("Hello.world"); Introducing Custom Controls
</script>
<body>
<div dojotype= "Hello.world" >
</div>
</body>
Modulepaths's specific role and usage, please Google. Next, we parameterize the control, we can pass the name as a parameter when the label is written, and then the control displays Hello XXX, and the HTML file is first changed to:
Copy Code code as follows:
<title>hello world</title>
<!--first introduce dojo.js,modulepaths to define the JS directory containing controls, similar to JSP's custom tag introduction mechanism-->
<script type= "Text/javascript" src=./dojo/dojo.js "djconfig=" Parseonload:true,modulepaths:{hello: '. /hello '} ' >
</script><script type= "Text/javascript" >
Dojo.require ("Dojo.parser");
Dojo.require ("Hello.world");
</script><div dojotype= "Hello.world" yourname= "Jinxfei" ></div>
</body>
It's been noted that we added the "YourName" attribute to the label, how do we use the property in the control? You can receive the value of this property in the Construtctor method, assign the value to a variable of the control class itself, and then use it in PostCreate, the JavaScript code is as follows:
Copy Code code 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 into, add an input box, input text in this input box at the same time, dynamically update Hello XXX, which will use Dojo's event binding mechanism, the most common pattern is: dojo.connect (Node,event,obj, method), which is used as the event event handler for Domnode, for example:
Copy Code code as follows:
Dojo.connect (Inputtext, "OnKey", this, "Updatehello");
This time, first change the control, in the PostCreate, dynamically add an input box, and for the input box dynamic binding events:
Copy Code code 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);
Dojo.connect (This.typein, "onkeyup", this, "Updatehello"); Dynamic binding Events
This.updatehello ()//Call method initialization, first show an empty Hello
} ,
Updatehello:function ()
{
This.echodiv.innerhtml= "Hello" +this.typein.value;
}
}
);
Instead of making any changes to the control's reference in the HTML file (strictly speaking, you need to delete the yourname= "Jinxfei" attribute). From this slightly more complex control, we can already see Dojo's advantage: Real object-oriented! The DOM elements within the control management category can be used as attributes in the class (directly with this.xxx), thus avoiding the document.getElementById () flying, the control is cohesive. The method of responding to events is also a method of class, which is to avoid declaring a large number of discrete function in the page and managing poorly.
