Using dojo/aspect

By on  

Simply put: the Dojo Toolkit has tools that other JavaScript toolkits don't. One of those tools includes Dojo 1.7's aspect, a module that allows developers to react to function calls by executing another function before or after that call. This aspect resource originates from Dojo's awesome connect mechanism. Let's check out how it works!

aspect Basics

The idea and value of aspect is that it allows you to be notified of function calls without needing to modify the original function's contents. You also don't need to implement pub/sub to know when methods are called. The basic setup looks like:

// Load the dojo/aspect dependency
require(["dojo/aspect"], function(aspect) {
	// Create an object and method to spy on
	var original = {
		someMethod: function(arg1, arg2) {
			console.warn("original.someMethod called: ", arg1, arg2);
			return "Hello " + arg1 + " " + arg2;
	// Use aspect.after ("before" also available)
	aspect.after(original, "someMethod", function(arg1, arg2) {
		console.warn("After method called with arguments: ", arg1, arg2);
	}, true);
	// ...and a while later, call the original method
	original.someMethod("David", "Walsh");

The first argument is the origin object, the second argument is the method to listen in on, and the third is the function to fire before or after, depending on which aspect method you call.


The before method will fire before the originally called method fires:

// Fire a function before the original
aspect.before(original, "someMethod", function(arg1, arg2) {
	console.warn("aspect.before: ", arg1, arg2);

// "aspect.before: ", David, Walsh
// "original.someMethod called:", David, Walsh

Since this method is fired before the original function call, the arguments passed to the original method are automatically received by the aspect method.


The after method fires after the original method fires, and accepts an extra parameter called receiveArguments, where you may direct the second method to receive the original method's arguments, or the return value of the original method.

receiveArguments = true

Passing the receiveArguments as true will pass the two arguments from the original function call to the aspect method:

// First scenario:  aspect.after that accepts the same arguments as the origin function
// because the fourth argument is passed as "true"
aspect.after(original, "someMethod", function(arg1, arg2) {
	console.warn("After method called with arguments: ", arg1, arg2);
}, true);

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "original.someMethod called:", David, Walsh
// "aspect.after: ", David, Walsh

Removing the last argument instead allows the aspect method to receive the return value of the original function call:

// Second scenario: aspect.after that accepts the result of the original function call
aspect.after(original, "someMethod", function(arg1, arg2) {
	console.warn("aspect.after: ", arg1, arg2);
	// "arg2" will be "undefined" since only the return value is provided 
}); // No "true"

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "original someMethod: David Walsh"
// "aspect.after: ", David Walsh

In most cases, aspect.after is what you will want to use. An object with a remove method will be returned, allowing you to remove the connection whenever you'd like.


What if you want to execute code both before and after the original method? Simple: use aspect.around. The around method allows you to call the original function when you want, within your listener:

// Call the around method, which gets one argument, the original method
aspect.around(original, "someMethod", function(originalMethod) {
	// Return a new method, which receives the same arguments as the original, just like "aspect.after"
	return function(arg1, arg2) {
		// Execute "before" functionality
		console.warn("before!", arg1, arg2);
		// Execute the original method as desired
		originalMethod.apply(this, arguments);
		// Execute "after" functioanlity

// Call the original method, see what happens!
original.someMethod("David", "Walsh");

// "before!", David, Walsh
// "original someMethod: David Walsh"
// "after! David Walsh"

The idea behind aspect.around is very much like using this.inherited(arguments) within Dojo classes; you can make that call any time you'd like, so other code may run before or after.

Real Use of aspect

One realistic use of aspect relates to extending Dijit widgets, or building a Dijit layout that uses multiple widgets. Often you'll see something like:

// When the onChange event fires
aspect.after(this.dropdown, "onChange", function(value) {
	// ...fire an xhr request to get information about it
		url: "/data.php?value=" + value
	}).then(function(data) { 
		// Do something with it.
}, true);

When the dropdown's value changes, an XHR request is fired to get information about that value.

Explaining aspect and the value of function-to-function connections can be difficult. I usually try a parent-to-child analogy that just further confuses people. Think of it this way: aspect allows you to know when other functions are called, without needing to modify the other function. This happens all over the Dijit UI framework, Brilliant!

Track.js Error Reporting

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • CSS Vertical Centering

    Front-end developing is beautiful, and it's getting prettier by the day. Nowadays we got so many concepts, methodologies, good practices and whatnot to make our work stand out from the rest. Javascript (along with its countless third party libraries) and CSS have grown so big, helping...

  • Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...


  1. Christian Toma

    In the first code sample, the second argument of after shouldn’t it be a string ? The identifier “someMethod” does not exist

  2. Aspects are a powerful paradigm.
    One real example would be to test if the user is logged before execute some action.
    For a RIA app with many actions calling the server this can be easily solved with aspect.
    Great !!!

  3. In the first code block, you wrote original.someMethod("David Walsh");
    Ehrm.. hinting something about ", " to seperate things a bit.

  4. From what I’ve heard, it seems that a common tenet within aspect-oriented programming is to use the “least powerful” method you need to get the job done. aspect.around is significantly heavier than even connecting both before and after advice. Therefore, you should use aspect.around only when you truly need full control over if and when to call the original function. Otherwise, resist the urge – it may be tempting to overuse, due to its conceptual similarity to declare’s this.inherited.

  5. shawn

    Has anyone hoisted the aspect primitives of dojo into a framework to handle cross-cutting concerns? An aspect I like to apply to code is auto-tracing – e.g. logging info at method entry and exit without polluting the actual methods themselves. Maybe dojo can do this in a declarative fashion?

    For example, something like the interception behavior built-in to libraries like Unity on the .NET platform.

  6. Aspect is really nice, but why not use events instead?
    I prefer to expose events on my modules.

    I see Aspect beeing a hack where there are no events to hook.

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

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...