Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II

By  on  

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!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

  • By
    Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level.

Discussion

  1. Johan André

    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.

    • EmEhRKay

      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.

  2. 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!

    • Zlatan Halilovic

      MooTools ftw! :)

  3. 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.

  4. 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.

  5. 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

  6. 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.

  7. Simply, i can’t understand jQuery. Mootools syntax is the best in all ways.

  8. Dutchie

    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.

    • Dutchie

      Ok, you convinced me ;)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!