jQuery 1.4 Improves Code and Solves IE Issues

DZone 's Guide to

jQuery 1.4 Improves Code and Solves IE Issues

· Web Dev Zone ·
Free Resource
Currently slated for mid-January, jQuery 1.4 is going to be lighter, faster, and feature newer functionality.  The ubiquitous JavaScript library is already elegantly written, but the jQuery team is going to make it's code even less complex.  1.4 will add more support for Bubbling events that don't work Internet Explorer.  jQuery 1.4 will also add a new script loader to dynamically load code.

Improving the Code, Not the Time
To reduce code complexity, the jQuery team took a step back and stopped looking at their framework in terms of absolute times.  Instead of weighing jQuery performance against other frameworks, they started comparing their speed to older versions of jQuery.  With this upcoming version, the team started spending more time on improving the overall code quality and flow, and less time on worrying about other frameworks.  To improve their code, jQuery used the FireUnit JavaScript test suite embedded in Firebug.  John Resig, the creator and lead developer of jQuery, built a FireUnit add-on to get at the full data dump of a profile run in Firebug.  With the whole JSON data structure, the jQuery team could look at a number of things, most importantly, the number of function calls.  With the function calls stats, the team could test the complexity of the code.  For example, they could find the complexity of adding a class by running .addClass("test"); against a given number of elements and seeing the number of function calls that occur.  Although function calls don't necessarily indicate slow performance, they might indicate a poorly written piece of code.  This method helped the jQuery team focus on improving the code and not just the time performance.


Event Bubbling and Internet Explorer
A long standing problem for web builders has been dealing with Bubbling events in Internet Explorer.  In jQuery 1.3, a new "live" method was added to allow simple event delegation.  An event delegation occurs when events on the page bubble up so they can be handled and captured.  This requires less event handlers, and makes the page run faster.  Unfortunately, for people using Internet Explorer, events won't always bubble.  Specifically, focus, blur, change, and submit won't bubble in IE.  Juriy Zaytsev came up with a way to fix this problem in jQuery 1.4.  His solution first identifies whether or not something will bubble up in IE and then implements an approximate IE event that will bubble.  Focus and blur are replaced by IE's focusin and focusout events.  For submit, a different solution was used.  The solution had to watch for the click event, but if there was no submit button, a keypress handler was attached and that was watched.  The change event was the most difficult to deal with.  The solution essentially has to implement the whole change event and track every input change that occurs.  Some of these workarounds for jQuery required a lot of code.

                                                                                        Event Delegation

jQuery 1.4 adds the jQuery.require() script loader in order to dynamically load pieces of code without harming applications.  The basic requirements for the script loader included support for loading multiple scripts with a single statement, making sure duplicate scripts aren't loaded, and loading a script synchronously if the dependent code comes immediately after.  jQuery also wanted to make sure that the loader worked asynchronously so scripts could be downloaded in parallel and executed in the right order.  The script loader includes URL mapping for custom URL mappers and namespaces.  For example, jQuery.require("ajax", "dimensions"); will map out to ajax.js and dimensions.js.  You can also use jQuery.require("jquery.ajax", jquery.fx"); to translate the full filenames jquery/ajax.js and jquery/fx.js.  The URL mapper also specifies full namespaces.

To learn about all the new features coming in jQuery 1.4, you can check out the roadmap on the jQuery site.  Information on jQuery 1.4 can also be found on John Resig's blog.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}