Using MooTools’ Alias Functionality

By  on  

Not having internet at home for a month gave me a great opportunity to really study the MooTools core JavaScript file. One fun part of the library is its alias() functionality. Alias allows you to do exactly what the word means -- alias one functionality by calling it something else. For example, one usage of alias in the library is:

Hash.alias('forEach', 'each');	//Hash iteration
Array.alias('forEach', 'each');	//Array iteration

Using "each" is shorter and faster to type than "forEach." With aliasing in mind, I thought of a few fun usages of MooTools' alias. All of the following are aliases for the Element.dispose() functionality:


	/* prison house */
	Element.alias('dispose', 'shank');
	$('prisoner').shank();
	
	/* animals */
	Element.alias('dispose', 'beach');
	$('whale').beach();
	
	/* automobiles */
	Element.alias('dispose', 'compound');
	$('car').compound();
	
	/* mafia */
	Element.alias('dispose', 'concreteShoes');
	$('wiseguy').concreteShoes();
	

In all seriousness, I recommend using alias when you want to refer to a specific functionality by giving it your own name.

Recent Features

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    MooTools Link Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2, you can achieve that effect. The MooTools...

  • By
    The Simple Intro to SVG Animation

    This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery. An SVG element is a special type of DOM element...

Discussion

  1. Great functionality and funny too..!!

  2. Brent Anderson

    So I just got in trouble in a study hall for laughing out loud at "$('prisoner').shank();". That’s hilarious.

  3. Quite funny actually! But how much is this slowing JavaScript down, as it has to go an extra step to check what the function is an alias for?

  4. I never knew that alias existed! I’ve always wanted a short version for domready. Could alias handle that or would be better to just extend Window?

  5. @Ronny-André: The speed difference must be slim to none. MooTools uses ‘.each’ everywhere.

    @Ryan: I don’t believe that alias would be applicable to your example.

  6. This got a chuckle out of me. The .shank example was choice.

    @Ryan, alias just creates an extra pointer to a method, so it doesn’t work with events.

    @Ronny-Andre David is correct; the expense here is nil. It doesn’t invoke some methodology every time you call .each or anything. The alias function just applies it’s logic when it is parsed and after that you have two pointers to the same method.

    As for using this to create your own fun names for things, you certainly could. I think that a far more powerful method for creating your own functionality for native elements is the custom methods that MooTools allows you to define. For instance, look at the element shortcuts in Fx.Tween:

    Element.implement({
        //there are other shortcuts, but let's just look at highlight...
        highlight: function(start, end){
            if (!end){
                end = this.retrieve('highlight:original', this.getStyle('background-color'));
                end = (end == 'transparent') ? '#fff' : end;
            }
            var tween = this.get('tween');
            tween.start('background-color', start || '#ffff88', end).chain(function(){
                this.setStyle('background-color', this.retrieve('highlight:original'));
                tween.callChain();
            }.bind(this));
            return this;
        }
    });
    

    Using implement (combine with element storage) you can create a lot of customized behavior. For instance, let’s say you liked jQuery’s method for adding click events.

  7. Damned formatting. I indented that crap!

  8. Goutte

    Note that the parameters have been reversed in newer Mootools (using 1.3.2) versions :

    Element.alias('shank', 'dispose');
    Element.alias('concreteShoes', 'dispose');

    etc.

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