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

Incredible Demos

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    CSS Transforms

    CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

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!