Quick Dojo Setup Snippet for MooTools Developers

By  on  

We're all used to aliasing methods within our favorite JavaScript frameworks. For example, you'll see the following pattern within jQuery:

(function($) {
	//your jQuery here, referenced by $
})(jQuery);

You may also see the following pattern within MooTools code:

(function($) {
	//your MooTools here, referenced by $
})(document.id);

Within the Dojo community I frequently see the following pattern:

;(function(d, $) {
	//your dojo here, selector engine referenced by $
})(dojo, dojo.query);

I love that pattern but I've created my own that I think will be a bit easier for MooTools developers looking to use Dojo:

;(function(d, $, $$) {
	//your dojo here
	//byId referenced by $
	//selector engine referenced by $$
})(dojo, dojo.byId, dojo.query);

While the $$ method is unique to MooTools, Dojo features both a byId method to get a single node and a query method to retrieve multiple nodes. You could just as easily retrieve one element with dojo.query but I like the security (and speed) that associating $ with byId gives me.

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

  • By
    Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

Discussion

  1. Wonderful, Mr Walsh!

  2. CarlitoS

    Man, sorry to bother, but why did you change the layout of the Code? Now is almost illegible.

    (Sorry if I have bad English, I’m kinda rusty)

  3. @CarlitoS: Not sure what you mean.

  4. Joe

    What’s with the semicolon in the front of the last two code snippets?

  5. @Joe: It’s a built-in safety for if there’s no “;” on the previous line. Learned that from Dojo Lead Pete Higgins.

  6. CarlitoS

    What I meant was that earlier you used to have the code inbetween frames with gray backround. Now the code is over white background and the font color is like gray 35%. Also the size looks like 4 points, I wear glasses but still is hard to read it. Thanks!

  7. @CarlitoS: Ahhh, the comments in the syntax highlighter. I’ll address that soon.

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