In my off time which I still have a lot of because I am on overhead at the consulting group that I work for, I've been learning JQuery and Prototype, though mostly JQuery. Today I refactored some of the JavaScript code that I wrote for a Movable Type plugin that I wrote using JQuery, and the following before and after is a good illustration of what a good toolkit can do for code that reimplements the wheel
var feedUrl;The same JavaScript functions rewritten with JQuery and switching from XML to JSON for communicating data back and forth between the browser and web server:
var removeSelector;
function btnAddFeed_onClick()
{
var ajax = createAjaxObject();
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4)
{
var parser = createXmlParser(ajax.responseText);
var id = parser.getElementsByTagName("id");
var title = parser.getElementsByTagName("title");
if (id.length == 0 || id[0].firstChild == undefined)
return;
if (title.length == 0 || title[0].firstChild == undefined)
return;
var newElement = document.createElement("option");
newElement.value = id[0].firstChild.nodeValue;
newElement.text = title[0].firstChild.nodeValue;
removeSelector.appendChild(newElement);
}
}
ajax.open("GET", "<$mt:CGIPath$>mt.cgi?__mode=add_feed_mode&blog_id=<$mt:var name="blog_id" $>&feed_url=" + feedUrl.value, true);
ajax.send(null);
}
function btnRemoveFeed_onClick()
{
if (removeSelector.options.length == 0)
return;
var ajax = createAjaxObject();
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4)
{
var options = removeSelector.getElementsByTagName("option");
var toRemove = null;
var toRemoveValue = removeSelector.options[removeSelector.selectedIndex].value;
for (var index = 0; index < options.length; index++)
{
if (options[index].value == removeSelector.options[removeSelector.selectedIndex].value)
{
toRemove = options[index];
break;
}
}
if (toRemove != null)
removeSelector.removeChild(toRemove);
}
}
ajax.open("GET", "<$mt:CGIPath$>mt.cgi?__mode=del_feed_mode&blog_id=<$mt:var name="blog_id" $>&feed_id=" + removeSelector.value, true);
ajax.send(null);
}
var feedUrl;
var removeSelector;
function btnAddFeed_onClick()
{
$.ajax({
url: "<$mt:CGIPath$>mt.cgi?__mode=add_feed_mode&blog_id=<$mt:var name="blog_id" $>&feed_url=" + feedUrl.value,
dataType: "text",
type: "GET",
timeout: 30000,
error: function() { alert("Could not download and parse " + feedUrl.value); },
success: function(json) {
try
{
var obj = eval("("+json+")");
$("#removeSelector").append("<option value='" + obj.id + "'>" + obj.title + "</option>");
} catch (ex) { alert("Error adding feed"); }
}
});
}
function btnRemoveFeed_onClick()
{
if (removeSelector.options.length == 0)
return;
var label = removeSelector.options[removeSelector.selectedIndex].text;
$.ajax({
url: "<$mt:CGIPath$>mt.cgi?__mode=del_feed_mode&blog_id=<$mt:var name="blog_id" $>&feed_id=" + removeSelector.value,
dataType: "text",
type: "GET",
timeout: 30000,
error: function() { alert("Could not remove " + label); },
success: function() {
$("#removeSelector option:selected").remove();
}
});
}
That's a lot more readable, and requires a lot less maintenance on my part.
Leave a comment