Since we are using Bespin for a new web project we are working on, it is only natural that we use the Dojo Toolkit as well. But we have had some issues with dojo.declare().

In short, when using dojo.declare(), all functions defined in a class are anonymous functions. It looks something like this:

Uh... What?

Nasty. Too many “anonymous” functions.

I recalled a write-up about how a new feature had been added to WebKit (and, by extension, Safari 4): functions can have display names just for this purpose.  That would be perfect, except that I’d have to go to each function and add a "this.functionName.displayName = 'somename'", or something like that.

Then I realized that all of the classes are declared through one function: dojo.declare(). So, with a quick modification, I added these lines near the beginning of the function (you can find it in dojo.js.uncompressed.js, if you search for dojo.declare = function):

// preprocess props, updating functions
	for (var i in props)
		if (typeof props[i] == "function")
			props[i].displayName = i;

And now, that profiler output looks much better:

Much nicer output with displayName

And that’s it.

Side Note

I tried first to implement it by wrapping dojo.declare kind of like this:

dojo.olddeclare = dojo.declare;
dojo.declare = function(name, base, props) {
    //stuff here
    dojo.olddeclare(name, base props);
};

It didn’t work, I think because of something to do with the arguments.callee and a few other things. So, I settled for modifying the original function.

Update

A thought just occurred to me: you can display the class name quite easily too. Just change the line that sets the display name in the above example to:

props[i].displayName = className + "::" + i;