I've recently been working on a fairly large javascript project that was using the Ext javascript library. Ext is a powerful javascript library that provides lots of UI widgets, in addition to a DOM manipulation API. The complete Ext library comes in at 546KB, and on this project we were only really using the Ext DOM functions, which made the library a bit overkill. The decision was made to use jQuery instead, which weighs in at only 16KB.
I set about replacing all the existing Ext code with jQuery equivalents. The majority of Ext functions map directly onto jQuery equivalents, which made things easier. For example:
Ext.get('id') -> $('#id')
Ext.get('id').query('.class') -> $('#id .class')
Some things don't map quite so well, but are still relatively simple. The position functions are one such example:
Ext.get('id').getAbsoluteXY() -> [$('#id').offset().left, $('#id').offset().top]
Ext.get('id').bottom() -> $('#id').offset().top + $('#id').height()
However, some Ext functions have no equivalents at all in jQuery. Two Ext functions we were using with no jQuery equivalent were serialiseForm and decodeJson. I came up with the replacement functions below:
$.fn.decodeJson = function(string) {
// if we don't have a string then there isn't any decoding to be done, return as is
if(typeof(string) != "string") return string;
// make sure the string starts with { and ends with }
if (string.substr(0,1) == "{" && string.substr(string.length - 1,1) == "}") {
eval("var decoded = " + string);
return decoded;
}
return {};}
$.fn.serialiseForm = function(form) {
// We might have been passed a form ID, or a form object
if(typeof(form) == "string") form = jQuery('#' + form);
// lets try ourselves!
var getValuesFromForm = function(form) {
var serialised = [];
jQuery(form).children().each(function() {
var child = jQuery(this);
if (child.children().length > 0) {
var t = getValuesFromForm(child);
if(t.length > 0) jQuery.merge(serialised, t);
}
var name = child.attr('name');
var type = child.attr('type');
var val = child.val();
if(name) {
if (type != 'checkbox') {
serialised.push(encodeURI(name) + '=' + encodeURI(val));
} else {
var checked = child.attr('checked');
if (checked) {
serialised.push(encodeURI(name) + '=' + encodeURI(val));
}
}
}
});
return serialised;
}
var data = getValuesFromForm(form).join("&");
return data;
}
The only feature of Ext being used without a relatively simple replacement was Ext.basicDialog, a UI widget. The jQuery BlockUI plugin came to the rescue:
dialog.hide() -> $.unblockUI();
During this rewrite I came to appreciate just how powerful jQuery selectors are. The codebase was considerably smaller after the rewrite, due to the expressiveness of jQuery. Many 3 or 4 liners in Ext would condense down to a single expression in jQuery!