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
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

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!