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
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

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

Incredible Demos

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

  • By
    CSS Triangles

    I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of needing to make an image for...

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!