Full Awesomeness with dojo.partial and MooTools’ Function.partial

By  on  

Much like MooTools, the Dojo Toolkit features a host of JavaScript language helpers.  One of those helpers is dojo.partial.  This method, which lives in Dojo Base, allows you to call a method with additional arguments appended to the front of a function signature.  Sound a bit weird?  It did to me too.  Let's take a quick peek at dojo.partial's syntax and when you'd use it.

dojo.partial

Let's say you have a function whose main purpose is to place content into a node:

// A sample function which could use partial
function placeContent(node, content) {
	node.innerHTML = content;
}

Note that the function expects two arguments: node and content.  This is a simple, general purpose function that could be used anywhere and by many different functions, right?  Now let's say that I'm making a xhrGet call:

dojo.xhrGet({
	url: "content.html",
	load: function(content, ioArgs) {  }
});

The signature of the load method is (content, ioArgs).  To use my placeContent function with the load handler, you'd have to code:

dojo.xhrGet({
	url: "content.html",
	load: function(content, ioArgs) {
		placeContent("myNode", content);
	}
});

That's not the worst thing in the world, but it's a bit...meh.  Using dojo.partial, we could instead code:

dojo.xhrGet({
	url: "content.html",
	load: dojo.partial(placeContent, "myNode")
});

Even though the first argument of the load callback signature is the content, the dojo.partial call shifts the provided arguments to the front of the argument list, thus placing the node argument before the content argument when used with placeContent. dojo.partial allows us to avoid using "wrapping" functions to add an argument to the arguments array. dojo.partial allows you to add any number of arguments which may be pushed to the front of the signature, not just one.

Function.partial

I've taken a quick moment to duplicate the dojo.partial function for MooTools:

// The implementation
Function.implement("partial", function(/* all args */) {
	var self = this, args = Array.from(arguments);
	return function() {
		self.apply(this, args.append(arguments));
	};
});

An example usage would look like:

new Request({
	url: "partial.html",
	//onComplete: myFn.partial("myNode").bind(this)
	onComplete: placeContent.partial("myNode")
}).send();

Just as easy to use as Dojo's method and just as useful.  I love that this method allows you to skip writing one-line callback wrappers and allow you to keep your utility function signatures the way they are.  dojo.partial and Function.partial are fully FTW!

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • By
    Add Styles to Console Statements

    I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message: WARNING! Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS. Do not enter or paste code that you...

Discussion

  1. Isn’t this exactly like Function#pass? This is also easily done using Function#bind

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