jQuery 1.4.3 & jQuery Mobile Released

As expected jQuery 1.4.3 and jQuery Mobile (alpha) have dropped today. The official announcements are here

Having had the chance to play around with these already here are a few of the highlights that I think are worth mentioning. This first post will talk about jQuery Core as I need a bit more time with jQuery Mobile to get a better feel for it.

jQuery 1.4.3

.data()

One of the first cool things that 1.4.3 brings with it is a tweak to the .data() method to allow it to work with not only DOM objects but plain old JavaScript objects as well. So what? Well it opens the doors for the recently announced Data Linking plugin from Microsoft (blogged about it before) until now ran on a patched version of jQuery Core. Essentially this give us the ability to perform data binding between UI elements and a model object. This will be familiar to people who use binding in Silverlight. This is all made possible via the newly introduced changeData event that will get fired when .data() is used to modify a data value.

var user = {
    username: 'jameshu',
    fullName: 'James Hughes'
};

$(user).bind("changeData", function( event, name, value ) {
  console.log(name + " changed to " + value);
});

$(user).data("username", "jameshu2");

// => username changed to jameshu2

Another nice new feature rolled into .data() is that all HTML data attributes are automatically parsed as data on initial selection of the element(s). This behaviour is similar to the metadata plugin that has been around for some time. In fact data values are coerced into the applicable types ("true" becomes Boolean, "{o:1}" becomes a JavaScript object etc.). This is a nice feature to have but I wonder how resilient it is to weird strings.

So for,

<div data-role="container" data-hidden="true" data-options='{"name":"James Hughes"}'></div>

The following will be true

$("div").data("role") === "container";
$("div").data("hidden") === true;
$("div").data("options").name === "James Hughes";

This is going to play very nice with the Unobtrusive JavaScript/Ajax features of the ASP.NET MVC3 (which already employs something similar)

Modularity

One of the issues many people had with jQuery was it was "all or nothing". This was fine at the start but as the file size started to grow people felt that they should be able to only use a small part of jQuery without having to pull the whole thing down. This release sees a fairly big refactoring to try and make this wish a reality. jQuery Core has been broken up into a number of sub modules which gives us the ability to load modules on demand (see Modernizr and Require.JS) or simply use the modules we need.

jQuery.type()

There are plenty of little cross browser differences in the typeof operator and as such it's not always reliable. The jQuery type method abstracts out all those little quirks to correctly determine arrays etc.

jQuery.type(true) === 'boolean'
jQuery.type(3) === 'number'
jQuery.type('test') === 'string'
jQuery.type(function(){}) === 'function'
jQuery.type([]) === 'array'
jQuery.type(new Date()) === 'date'
jQuery.type(/test/) === 'regexp'

And The Rest

There are a load more improvements and tweaks in 1.4.3 that are fully explained in the original announcement including,

Performance tweaks across CSS and Traversal modules
Tweak to allow pausing the DOM Ready event until explicitly specified
Event helpers can now be passed data objects

Now onto jQuery Mobile....