Comparison of JavaScript frameworks (1)

Abstract: modern websites and web applications tend to rely on a large amount of javascript on the client to provide rich interaction. In particular, you can return data or get a response from a server script (or data system) by not refreshing the asynchronous request of a new page. In this article, you will learn how the javascript framework can quickly and conveniently create highly interactive websites and web applications.

Introduction: JavaScript is an object-oriented scripting language that has been used as a choice for client scripting interfaces of Web browser applications. JavaScript allows Web developers to program and work with objects on webpages, providing a platform for operating these objects out of thin air. When JavaScript was first launched, it was generally used to provide some trivial functions, such as clock and scrolling text in the browser status bar. Another common feature is "rolover link", which means that when a user's mouse slides over an object, the text color or background image changes. However, in recent years, Ajax has brought about a new interaction for network programming, and JavaScript has become more useful. Before Ajax, any server processing or database access requires the whole page to be refreshed or displayed by a browser. This not only slows down users, but also wastes bandwidth and resources.

Ajax is Asynchronous JavaScript and XML. Although the referenced XML is not valid, Ajax can respond to data in other formats than XMl, such as JSON (JavaScript Object Notation ). The working principle of Ajax is to submit an HTTP request asynchronously to the web server, neither refreshing nor rendering the entire page, but only displaying the response content. On the contrary, developers usually use DOM (Document Object Model) operations to modify part of a webpage, and the data returned by the HTTP response will reflect these changes.

What is a JavaScript framework?

JavaScript itself is a very powerful language. You can create a rich Internet Application System (RIA) supported by it without any additional framework ). However, using JavaScript is not easy, mainly because of the appearance of various complications when trying to provide support for multiple browsers. Like HTML and CSS, different browsers have different JavaScript execution methods, so it is a nightmare to ensure cross-browser compatibility of your JavaScript code.

A JavaScript framework or library is actually a series of tools and functions, which can more easily generate cross-browser compatible JavaScript code. Each library is strictly tested in many popular Web browsers of the latest version. Therefore, you can fully believe that using any of these frameworks, your JavaScript-based RIA will be roughly the same in different browsers and platforms.

In addition to browser compatibility, the JavaScript framework can easily write code to retrieve, traverse, and manipulate DOM elements. They not only provide a quick function to get reference to a DOM element, but also allow chrysanthemum DOM traversal function chain to find parent, child, or any deep sibling node element. Finally, the framework provides a series of functions to make it easier to manipulate these objects, allowing them to change, add, or delete their content, or manipulate the style of the class to influence the appearance of the elements.

Another important feature of the JavaScript framework is its ability to better support event processing. Because of the different implementations of browsers, cross-browser event processing is a nightmare. Therefore, JavaScript frameworks usually wrap browser events and provide a series of useful cross-browser functions to handle them. Some frameworks also provide standardized events that represent the keyboard key code series (such as Esc, Enter, and cursor ).

All these functions are very useful, and the JavaScript framework has played an important role in its recent popular Ajax applications. Like other aspects of JavaScript, each Web browser tends to support Ajax in different ways, making Ajax support for all browsers very heavy. Almost all JavaScript frameworks include some forms of Ajax libraries, usually provide Ajax requests and response objects. After evaluating the response, update the DOM element and round-robin a specific request.

Typical features of a JavaScript framework

Now let's take a look at some functions of most JavaScript frameworks. These features include:

Selector
DOM Traversal
DOM operations
Practical Functions
Event Processing
Ajax
To better interpret these features, I will list one or more examples of JavaScript frameworks: Prototype, jQuery, YUI, ExtJS, and MooTools. Although the execution and syntax of each framework are different, their concepts are roughly the same. Each framework has a detailed API reference. You can refer to it to determine how to use the features of these specific libraries.

Selector

Most JavaScript frameworks provide some form of quick element selection. In general, these selectors make it easier to get an element reference and allow you to select an element by ID, class, element type, or pseudo-class selector.

For example, using common JavaScript, you can use the following code to retrieve DOM elements with ID.

Var theElement = document. getElementById (the _ element ');
Like other frameworks, MooTools provides a shortcut for performing this operation. In addition to the selection element, MooTools extends the element through a series of function functions.

Var theElement = $ (the _ element ');
$ Functions are available in several popular frameworks (not all) with the same syntax. Prototype goes deeper. Multiple elements can be selected by ID at any time, and an element array is returned. And

Like MooTools, these elements use Prototype's practical function extension. The syntax for selecting multiple elements at any time using the Prototype library is as follows:

Var elementArray = $ ('element _ one', 'element _ two', 'element _ three ');
In this part of practical functions, you will understand some functions provided by the JavaScript framework to iterate our set more easily.

In the previous example, you must provide the ID of the element you want to select. But what if you want to select multiple elements? Each row of all images and tables with a specific className. MooTools (several other libraries) provides a very simple method to do this -- $ function. In addition to the element ID, it can also accept the following parameters: element name, class name, and pseudo class selector. The working principle is similar to that of the $ function. For example, if you use MooTools to retrieve all images on the page, you can use the following code:

Var allImages =$ $ ('img ');
This will get all imag arrays in the document, each of which is extended through the $ function and actually using the function.

It is very useful to use tag tags to select objects. But what if you only want to select partial subsets of an object based on the element class? It is also very simple. In the following example, MooTools selects the row whose class is "odd" in the table, which is useful for operations on each row (changing the color of each row in the table ).

Pre class = "brush: javascript">
Var allOddRows =$ $ ('tr. odd ');

In fact, MooTools provides a better way to perform row operations. In the previous example, it is assumed that the class name "odd" is assigned to the odd row of the table ". The following code does not need to define any class names on each row of the table.

Var allOddRows =$ ('tbody dd ');
This is an example of a pseudo-class selector that returns any object that matches the specification. In this example, the result is the child element of all odd rows in the tbody element of the page. Examples of other pseudo-class elements of MooTools include:

All checked elements (for example, check boxes );
Enabled all available elements;
All elements containing text (passed as a parameter to the selector) in contains
As mentioned above, not all JavaScript frameworks use the $ function to select DOM elements. In the third version of YUI (Yahoo User Interface), the following code selects elements by ID (Note: YUI3 needs to add a character # Before the ID #).

Var theElement = Y. one ('# the_element ');
Similarly, using tag or class to select elements is not using the $ function. In YUI, you must use Y. all instead.

Var allOddRows = Y. all ('tr. odd ');
ExtJS works in the same way. Use the following syntax to select elements by ID:

Var theElement = Ext. get (the _ element ');
The following syntax is used to obtain elements through tags and classes:

Var allOddRows = Ext. select ('tr. odd ');
In the next chapter, you will learn how to use the JavaScript framework to easily traverse DOM objects. In other words, find the elements with parent-child and sibling relationships with the selected elements.

Reprint address: http://www.denisdeng.com /? P = 699

Address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html