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
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • 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...

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
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

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!