Advanced jquery: Making good applications into powerful applications

Brief introduction

This series of jQuery articles helps you improve the ability to create JavaScript-based WEB applications. Even if you've never heard of jquery before reading these articles, you should already have the language skills and background you need to build a good WEB application using JQuery. However, sometimes good applications do not meet the requirements, and you will need a powerful WEB application. This requires several steps to modify an existing application to make it run smoothly on a variety of occasions and for all users. These steps are the last trick to optimize your WEB application.

In this article, I'll discuss the performance improvements for the code, as well as some of the easily overlooked questions about the JQuery library. Some things are critical for complex applications, plug-ins that are critical to all applications, and good design techniques for making applications easier to write. In the last section, I'll discuss some of the new features in jquery 1.3, which were recently released and added some new features to the jquery library.

The first sample application

Most of the tips in this article can be found in the accompanying sample application (see downloads), an intuitive e-mail Web application. You might be familiar with it, because that's what I used in the first article in this series. However, you can see how it evolved from the first article, how its performance was improved, and how these last steps turned it into a powerful WEB application.

Figure 1. Sample Application

Bind/unbind

There are two functions in the events module, which are bind () and unbind () that are used to complete the tasks of all other event methods. If you can add a click () method to a page element, then where is it necessary to call bind ("click")? It's just a waste of time. However, these functions are convenient in specific cases and can significantly improve the performance of your application if they are used correctly. Not only can these functions add events to specific page elements, just like many other event methods in the module, but they can also be removed from page elements. Why did you do that? Let's look at this Web application and how to use these functions in certain situations.

Figure 2. Bind/unbind sample

Listing 1 shows the code for the above settings, which is the original code that was not improved:

Listing 1. A widget that has not been optimized

$ (document). Ready (function () {
Cache this query since it's a search by CLASs
Selectable = $ (": checked.selectable");
When the select/deselect are clicked, do this function
$ ("#selectall"). Click (SelectAll);
Whenever any individual checkbox was checked, change the text
Describing how many are checked
Selectable.click (changenumfilters);
Calculate how many are initially checked
Changenumfilters ();
});

var selectable;

function Changenumfilters ()
{
This needs to is checked on every call
Since the length can change with every click
var size = $ (": checked.selectable"). Length;
if (Size > 0)
$ ("#selectedCount"). html (size);
Else
$ ("#selectedCount"). HTML ("0");
}

Handles the select/deselect of all checkboxes
function SelectAll ()
{
var checked = $ ("#selectall"). attr ("checked");
Selectable.each (function () {
var subchecked = $ (this). attr ("checked");
if (subchecked!= checked)
{
$ (this). Click ();
}
});
Changenumfilters ();
}