MooTools Class Sniffer Bookmarklet

By  on  

I was recently reviewing a few MooTools-driven websites and one of the questions I wrote down was "Which MooTools Core classes do you use and how many classes have you created?" Then I asked myself if there was a way I could figure that out myself. The end result is a JavaScript bookmarklet that finds all of the MooTools classes defined within the Window object.

The MooTools JavaScript

(function() { 
if(window.MooTools == undefined) return false;
var classes = [];
for(obj in window) {
	try {
		var typo = (window.$type != undefined ? $type(window[obj]) : typeOf(window[obj]));
		if(typo == 'class') {
			classes.push(obj);
		}
	} catch(e) { }
}
classes.sort();
console.log('# Classes: ' + classes.length);
classes.each(function(klass) {
	console.log(klass);
}); })();

The key to finding each class is using the $type (< MooTools 1.3) or typeOf (MooTools 1.3) functions. If the result is "class", we've found a class in the given scope. The scope we're searching for is window scope. You can easily change the code snippet to change scope. Checking every scope would be far too taxing so I've stuck to window-level objects.

There you have it. MooTools 1.3 is structured a bit differently than 1.2 so you'll see far fewer classes with 1.3. Just a part of minimizing globals and tightening up this masterful framework!

Recent Features

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

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

Discussion

  1. deos

    very nice and quite useful.
    but it isn’t that beautiful like that, so i took the styling from WTFramework, looks way better: http://code.thaberzettl.de/mootools/Bookmarklet%20-%20MooClasses.js ;)

  2. You should have a console for this, enabling firebug console was my solution.

  3. great idea david!

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