Comprehensive comparison of the three UI frameworks Dijit, ExtJS, and jQuery UI

Comprehensive comparison of the three UI frameworks Dijit, ExtJS, and jQuery UI

Introduction to Dijit, ExtJS, and jQuery UI

Dojo is one of the first pioneers in the open-source ja vasc ript library. Founded in 2004 by Alex Russell, David Schontzler, Dylan schiann, and others. With a packaging system similar to Java, Dojo modularize JS code based on functions. It mainly includes three packages: Dojo, Dijit, and Dojox. The Dojo package provides stable kernel APIs, And the Dijit package provides various UI controls, the Dojox package contains a series of experimental APIs and controls (some of which have long-term maintenance and high stability, such as dojox. charting package and dojox. grid package ). In Dojo 1.7, the internal structure of the Dijit package is split and reconstructed in more detail, but it was not released at the time of writing this article, the Dijit-related content in this article will still be based on Dojo 1.6.1.

 

ExtJS is a set of Ajax and control frameworks widely used in front-end development. Its History can be traced back to Yahoo! User Interface. With Jack Slocum's hard work, ExtJS gradually grew. Since the release of ExtJS 2.0, its application scope has been gradually expanded to all over the world. 3. more easy-to-use controls are introduced in Version X. The advantage of ExtJS is its powerful control library and its encapsulation of various foreground functions, formed a complete set of object-oriented JS control libraries. With the merger with Sencha, ExtJS is also evolving to the touch screen, but its Ext JS library has never stopped. Today's ExtJS 4.0 provides a more complete ja vasc ript API library, which reduces rewriting of underlying classes such as Array, Function, and String, greatly reducing conflicts between different JS libraries. Because version 4.0 is not backward compatible, it has had some impact on the upgrade. I have no chance to use ExtJS 4.0 in depth. Therefore, this article focuses on ExtJS 3.X.

 

JQuery UI is the official UI control library of jQuery. JQuery is famous in the industry. Since its first stable version was released in 2006, its lightweight and easy-to-use features have been deeply rooted in the hearts of the people. JQuery UI was released in 2007. It is based entirely on the plug-in mechanism provided by jQuery, and provides underlying interaction and animation functions as well as some UI controls with customizable styles. Although the number of controls provided is small, they all have the small characteristics of jQuery, and their usage style is consistent with that of jQuery core APIs. At the time of writing this article, the latest stable version is 1.8.16. The jQuery UI content in this article is based on this version.

 

Control usage

Before discussing the architecture implementation of various control libraries, let's take a look at the usage of Dijit, ExtJS, and jQuery UI controls from the user's perspective and have an intuitive understanding of them.

The use of controls is nothing more than creating controls and operation controls. Before creating controls, we often need to load control resources first. Let's start with the control resource loading (the control CSS file writing and loading are not within the scope of this article ).

 

Control Resource Loading

Dijit: with the help of the automatic module dependency loading mechanism provided by Dojo, it is very simple to load resources required for Dijit controls. users do not need to know which JS files a control requires, you only need to add the Dojo core file to the page. js and use dojo. you can import the require function to the corresponding module of the control.

 

Listing 1. Dijit resource Loading

<SC riptype = "text/ja vasc rept" src = "lib/dojo. js"> </SC ript>

<SC riptype = "text/ja vasc rept">

Dojo. require ("dijit. form. Button ");

</SC ript>

The above code will automatically load all JS files on which the Button control depends.

 

ExtJS: ExtJS does not have a complete mechanism for automatically loading dependent resources. In most cases, users use the complete ExtJS library, just import the/ExtJS/adapter/ext/ext-base.js and/ExtJS/ext-all.js files. In general, ext-base-bug.js and ext-all-debug.js are used to facilitate debugging.

 

Listing 2. ExtJS resource Loading

<SC riptype = "text/ja vasc rept" src = "JsLib/ExtJS/adapter/ext/ext-base-debug.js"> </SC rept>

<SC riptype = "text/ja vasc rept" src = "JsLib/ExtJS/ext-all-debug.js"> </SC ript>

 

Of course, to save resources, you can only load part of the ExtJS resource library. ExtJS provides a resource named ext. jsb2 file (this file describes the dependencies between various JS files), allowing you to query the dependencies between various files, so that you can easily import a single ExtJS control.

 

JQuery UI: Because jQuery does not provide a complete mechanism for automatically loading dependent resources, you need to manually import the dependent resources of the controls to the page one by one. Taking the button control in jQuery UI as an example, you need to manually add the following code to the page to import the required js file.

 

Listing 3. jQuery UI resource Loading

<! --Import jquery core -->

<SC riptype = "text/ja vasc rept" src = "lib/jquery/jquery-1.6.2.js"> </SC rept>

<! --Import the JS resources on which the Button control depends -->

<SC riptype = "text/ja vasc rept" src = "lib/jquery/ui/jquery. ui. core. js"> </SC rept>

<SC riptype = "text/ja vasc rept" src = "lib/jquery/ui/jquery. ui. widget. js"> </SC rept>

<SC riptype = "text/ja vasc rept" src = "lib/jquery/ui/jquery. ui. button. js"> </SC rept>

 

In this way, you need to know which resource items a control depends on by manually loading resources, which may cause problems when using some controls with many dependencies, such as dialog. In the final product, all the JS Code used on the page is often merged and compressed. You only need to import the merged and compressed JS files on the page, however, you still need to merge and compress the resources required by the page (of course, you can also merge all jQuery UI code and compress it into a file at a time ).

 

Control Creation

Dijit: There are two ways to create Dijit controls: programmatic and declarative ).

The use of Dijit controls in programming is very similar to the use of traditional object-oriented languages for UI programming. Generally, you only need to provide a DOM node, a hash parameter table, and use the new keyword to create a required dijit control object.

 

Listing 4. Dijit using the new keyword to create a Button control

<Html>

<Head>

<SC riptype = "text/ja vasc rept">

Dojo. addon load (function (){

Var button = new dijit. form. Button ({

Id: "programmatic ",

}, "ButtonNode ");

});

</SC ript>

</Head>

<Body>

<Div>

<Button id = "buttonNode">

</Button>

</Div>

</Body>

</Html>

The code above creates a Button control and replaces the button Tag Element with the id of buttonNode with the DOM tree of the instantiated control. The button variable points to the reference of the control instance. In addition, you can create a control instance and insert it into the DOM tree of the page.

 

Listing 5. Dijit use the new keyword to create a Button control

<Html>

<Head>

<SC riptype = "text/ja vasc rept">

Dojo. addon load (function (){

Var button = new dijit. form. Button ({

Id: "programmatic ",

Label: "This is a button"

});

Button. placeAt ("buttonContainer ");

});

</SC ript>

</Head>

<Body>

<Div>

<P id = "buttonContainer">

</P>

</Div>

</Body>

</Html>

The code above creates a Button control instance and inserts its DOM tree under the p Tag Element with the id of buttonContainer.

 

When the Dijit control is declared, you must add the data-dojo-type and data-dojo-props attributes to the HTML Tag. data-dojo-type indicates the name of the control to be generated, data-dojo-props contains the construction parameters required to generate the control. When using this method to create a Dijit control, you can configure whether to automatically instantiate all the controls on the page through the parseon load attribute when importing the Dojo core file.

 

Listing 6. Enable the parseon load attribute to automatically create a control

<Html>

<Head>

<SC riptype = "text/ja vasc rept" src = "lib/dojo. js" data-dojo-config = "parseon load:

True "/>

</Head>

<Body>

<Button data-dojo-type = "dijit. form. Button"

Data-dojo-props = 'id: "declarative"; label: "This is a button" '/>

</Body>

</Html>

The code above will automatically instantiate a Button control after the page is loaded. When you choose to disable the parseon load option, you can manually instantiate the required control.

 

Listing 7. Disable the parseon load attribute and manually create a control

<Html>

<Head>

<SC riptype = "text/ja vasc rept" src = "lib/dojo. js" data-dojo-config = "parseon load:

False "/>

<SC riptype = "text/ja vasc rept">

Dojo. addon load (function (){

Dojo. parser. parse ();

});

</SC ript>

</Head>

<Body>

<Button data-dojo-type = "dijit. form. Button"

Data-dojo-props = 'id: "declarative"; label: "This is a button" '/>

</Body>

</Html>

Whether or not the parseon load option is enabled, it uses the dojo. parser object to scan the page, parse the attributes in the HTML tag, and instantiate the control based on these attributes. It should be noted that dojo. parser is not part of the Dojo base, that is, the core file Dojo. js does not contain dojo. the parser module. Therefore, dojo. parser requires additional code to import to dojo. parser module.

 

Listing 8. Import the dojo. parser Module

Dojo. require ("dojo. parser ");

However, when using the Button control, we have imported dijit. form. the Button module. Dojo automatically loads all the resources that the module depends on, including dojo. the JS file corresponding to the parser module.

ExtJS: The ExtJS control is generated by creating an ExtJS control object based on the new keyword and placing it in the DOM node to be rendered. For example:

Listing 9. Using the new keyword to create a Button control in ExtJS

<SC riptype = "text/ja vasc rept">

Var button = new Ext. Button ({

Id: 'button ',

Text: 'button ',

RenderTo: Ext. getBody ()

});

</SC ript>

In the above Code, an Ext. Button Object is added to the body element by assigning the renderTo parameter to a DOM node on the page, so a simple ExtJS control is completed.

In addition, ExtJS allows you to add a child control with the default renderTo attribute to the Container control (control inherited from the Ext. Container class) through the add () and doLayout () methods.

 

Listing 10. ExtJS Add a child control to the Container Control

<SC riptype = "text/ja vasc rept">

Var mainPanel = new Ext. Panel ({

RenderTo: Ext. getBody ()

});

Var button = new Ext. Button ({

Id: 'click'

});

MainPanel. add (button );

MainPanel. doLayout ();

</SC ript>

The above code first renders the mainPanel object to the body element, and then adds the button object of the default renderTo attribute to the mainPanel object through the add () and doLayout () methods, and re-render the mainPanel object. In this case, the button object is also rendered to the page.

ExtJS does not provide the ability to create controls by parsing HTML tags as Dijit does, but provides a simple reflection mechanism that allows users to generate controls through descriptors.

 

Listing 11. ExtJS controls generated by Descriptor

<SC riptype = "text/ja vasc rept">

Var mainPanel = new Ext. Panel ({

Items :[{

Xtype: 'button ',

Id: 'click'

}],

RenderTo: Ext. getBody ()

});

</SC ript>

The above code first instantiates an ExtJS Panel control and adds a descriptor about the button control to its items attribute. During mainPanel object rendering, every object in the items array is traversed, if the object is not instantiated, The xtype attribute in the descriptor object will be searched. Then, when the control is created, Ext. the create () method of ComponentMgr looks for the file in Ext. the control class registered in reg creates a corresponding control instance through reflection.

 

JQuery UI: jQuery UI controls are used in a consistent and concise style. It does not provide. tools such as parser scan pages and automatically generate control instances based on HTML tags. They do not use the new keyword to create controls as traditional object-oriented languages do, instead, you can create controls using the commonly used chained Writing Method of the jQuery plug-in.

 

Listing 12. Create a Button control using jQuery UI

<Html>

<Head>

<SC riptype = "text/ja vasc rept">

$ (Function ){

$ ("# ButtonNode"). button ({

Label: "button"

});

});

</SC ript>

</Head>

<Body>

<Div>

<Button id = "buttonNode"> </button>

</Div>

</Body>

</Html>

The above code first uses the jQuery core method $ () to obtain all html dom nodes that meet the query conditions on the page (in this example, only one DOM node with the id of buttonNode meets the conditions ), and wrap the returned DOM node array into a jQuery object. Call the button method provided by the $. ui. button plug-in for the jQuery object to create the $. ui. button control for these nodes based on the passed hash parameter table.

 

Control Operations

Dijit: After the Dijit control is created, you can obtain the control instance through methods such as dijit. byId, dijit. findWidgets, dijit. byNode, and dijit. getEnclosingWidget.

Listing 13. Getting Dijit control objects

// Obtain the widget whose id is programmatic

Var widget = dijit. byId ("programmatic ");

// Obtain all controls under the body tag

Var widgets = dijit. findWidgets (dojo. body ());

// Obtain the node control of the DOM root node.

Var widget = dijit. byNode (node );

// Obtain the control that contains node nodes in the DOM tree.

Var widget = dijit. getEnclosingWidget (node );

After obtaining the control instance, you can call the control method just like using the Java class. And use the get and set methods to get/set the properties of the control.

 

Listing 14. Get/set Dijit control attributes and call Methods

// Call the Control Method

Widget. someMethod ();

// Use get to get control attributes

Var value = widget. get (attributeName );

// Use set to set Control Properties

Widget. set (attributeName, value );

ExtJS: Unlike Dijit, ExtJS does not provide methods for finding controls through DOM nodes. Instead, it only provides methods for obtaining control objects through the control id.

 

Listing 15. Retrieving ExtJS control objects

// Obtain the control object

Var button = Ext. getCmp ("button ");

The Ext. getCmp method returns a complete ExtJS control object, which contains all the variables and methods of the control object. Different from Dijit, most of ExtJS member variables are obtained/set by using the variable name, only the corresponding get/set method is provided for some attributes (the reason and content will be described in the "attribute acquisition/configuration method" section below ), the method call of ExtJS controls is similar to that of Java methods.

 

Listing 16. Retrieving/setting attributes of ExtJS controls and calling methods

// Get control member variables and directly access member variables

Var buttonText = button. text;

// The button control adds the setWidth Method to the width attribute so that DOM nodes can be processed after the width attribute is changed.

Buttons. setWidth (100 );

// Call the control member function, similar to the Java object method call Method

Button. focus ();

JQuery UI: operations on jQuery UI controls are similar to creating jQuery UI controls.

 

Listing 17. jQuery UI control method call

<Html>

<Head>

<SC riptype = "text/ja vasc rept">

$ (Function ){

// Create a button control for the Button tag

$ ("# ButtonNode"). button ({

Label: "button"

});

// Call the disable method of the Button control

$ ("# ButtonNode"). button ("disable ");

});

</SC ript>

</Head>

<Body>

<Div>

<Button id = "buttonNode"> </button>

</Div>

</Body>

</Html>

In the above Code, the button method is called twice, but its meaning is completely different. When the button method is called for the first time, a hash parameter table is input, and the $. ui. button control is created for the corresponding node. When the button method is called for the second time, the parameter is a string. At this time, jQuery calls the control member method with the same name as the string.

 

JQuery UI does not provide the default get/set Method for the control attributes. However, you can obtain/set the control attributes in the following ways:

Listing 18. Getting/setting jQuery UI control attributes

// Call the option method to obtain the Attribute Table of the $. ui. button control.

Var options = $ ("# buttonNode"). button ("option ");

// Set the label attribute of the $. ui. button control corresponding to the buttonNode Node

$ ("# ButtonNode"). button ({

Label: "changed label"

});

In the above Code, although a hash parameter table is passed in when the button method is called for the second time, the parameter $ has been created for the DOM node whose id is buttonNode. ui. button control, so it does not create a control object again. Instead, it retrieves the created control object and sets its corresponding properties.