Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II
My love of the JavaScript frameworks knows no bounds. Unfortunately too many developers stick to one framework without taking the time to learn the others. The more frameworks you know, the better a programmer you will be and the more money you'll make. Let me show you how to accomplish a few more tasks using three JavaScript frameworks: MooTools, jQuery, and Dojo.
Loop Through an Element Collection
MooTools
$$('div').each(function(div) {
/* do stuff here */
});
jQuery
jQuery('div').each(function(){
/* do stuff; "this" is the element */
});
Dojo
dojo.query('div').forEach(function(div){
/* do stuff */
});
Get an Element Attribute Value
MooTools
var rel = document.id('myElement').get('rel');
jQuery
var rel = jQuery('#myElement').attr('rel');
Dojo
//var rel = dojo.query('#myElement').attr('rel')[0];
var rel = dojo.attr('myElement','rel');
Create a Plugin / Class - Template
MooTools
var myClass = new Class({
initialize: function(options) {
/* do initial processing */
}
});
jQuery
jQuery.fn.myClass = function(options) {
return this.each(function() {
/* do initial processing */
});
};
Dojo
dojo.provide('mynamespace.PluginName');
dojo.declare('mynamespace.PluginName',null,{
constructor: function(options) {
/* do initial processing */
}
});
Set and Get Cookie Key=>Values
MooTools
/* set */
Cookie.write('key','value',{ duration: 5 }); //5 days
/* get */
var cookieValue = Cookie.read('key');
jQuery
/*
requires this plugin: http://plugins.jquery.com/project/cookie
*/
/* set */
jQuery.cookie('key','value', { expires: 5 });
/* get */
var cookieValue = jQuery.cookie('key');
Dojo
/* get dojo's cookie class */
dojo.require('dojo.cookie');
/* set */
dojo.cookie('key','value', { expires: 5 }); //5 days
/* get */
var cookieValue = dojo.cookie('key');
Retrieve JSON via XHR
MooTools
var jsonRequest = new Request.JSON({
url: 'info.json',
onSuccess: function(json){
/* do something with results */
}
}).get();
jQuery
jQuery.getJSON('info.json',function(json) {
/* do something with results */
});
Dojo
dojo.xhrGet({
url: 'info.json',
handleAs: 'json',
load: function(json) {
/* do something with results */
}
});
There you are -- more proof that the toolkits are one in the same, all except the syntax. Do yourself a favor and learn more than one JavaScript framework -- you'll be better for it!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
Maybe it’s because I’m using alot of jQuery, but to me jQuerys syntax makes most sense. Dojo is just terrible.
I disagree completely; for me, jQuery has the worst syntax, but to each his own.
Oh God, I am working on a jquery based project and it is a fucking mess.
That’s what I’m talking about!
I hate when others make decisions for us! See drupal xen theme for example. Even *it* has jQuery inside the admin panel!
I’m not a big fan of Dojo as well. But jQuery is pretty annoying. I understand that using a centralized object (the jQuery object) is better in a lot of ways (avoids name collisions, overheads, etc), but the syntax is stale. MooTools is prototype based, so the syntax feels more like native JavaScript. Like how it ought to be.
But then again, this is all up to personal preference. It’s all subject to argument.
If we’re gonna have a “which syntax is better (or nicer)” debate, then for me, mootools is definitely the king.
I prefer MooTools as well!
MooTools ftw! :)
Mootools ftw x2 +1, but the next generation forum software (xenforo.com) will use jQuery…
I have tried using jQuery but found the syntax to be confusing, so I prefer mootools all the way!
… Curious to know but what the hell does “ftw” on the end of mootools mean?
http://www.urbandictionary.com/define.php?term=F.T.W.
The second is what my brain translates the “ftw” to.
I find it odd how you switch back and forth between using jQuery and $ for jQuery, yet use document.id, rather than just $ in mootools.
No way… the best syntax is Mootools…
the others can be more complete or have more examples and plugin.. but the syntax that in my opinion refelect the rule: as you thinky you’ll write, is mootools
Luckily there’s a great deal more to which library/toolkit you choose than syntax. These examples show the common, base functionality that you’d expect *any* library to provide. Its where you go from there that its starts to matter.
So for example, you’ll probably not use dojo.xhrGet very much in dojo, as where data lives and how you get it tend to be abstracted away from day-to-day tasks by data stores. When I’m building a data store, I might care (though if I’m using SMD maybe not). When I’m building UI I’m more interested in a consistent interface to my *data*, not where it comes from and what syntax I have to use to fashion a request to get it.
Simply, i can’t understand jQuery. Mootools syntax is the best in all ways.
Let’s be honest David.. you’re only blogging about jQuery and Dojo next to Moo because you’ll end up high in Google!! No matter what you search, it’s davidwalsh.name at the top… YEAH MOO FTW!
I don’t just write about topics because they’ll help my SEO; I write about topics because I find them interesting and others may think so too.
Ok, you convinced me ;)