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
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

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!