Peppy and MooTools
This post has been updated after more tinkering and testing.
A while back James Donaghue boasted his new selector engine Peppy. Lets say for giggles that we wanted to use MooTools and Peppy together. Here's how I got things to work.
The JavaScript
//sets peppy as the default engine
Window.$$ = function(selector){
return new Elements(new peppy.query(selector));
}
//get elements
window.addEvent('domready',function() {
$$('div').each(function(el) { // straight cash homey
el.setStyle('color','#f00');
});
});
I have no idea why you'd want to do this; MooTools' selector engine is rock solid. I was simply playing around and wanted to show you what I came up with.
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![Form Element AJAX Spinner Attachment Using MooTools]()
Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...
![HTML5’s window.postMessage API]()
One of the little known HTML5 APIs is the window.postMessage API. window.postMessage allows for sending data messages between two windows/frames across domains. Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...
Awesome! I’ve been waiting for this. The Peppy selector engine is really faster, and in some tests faster than Sizzle, I thought sizzle might make it’s way to MooTools but Peppy’s better ayway.
Have you even looked at the source of Peppy? I find it quite funny to compare it to Mootools or Sizzle, it’s not on the same level at all. For example binding DOM mutation events for caching slows down every DOM operation a lot! Way much more than the gain of the faster queries. It gets even the attribute getter wrong: e.getAttribute( a ) || e[a]; It’s good that it’s small but there’s a lot of space for improvements, so to say.
I’m not saying that I believe Peppy is better — quite frankly, it’s not. I just wanted to show you what I had at the end of my experimenting. Hell, I wouldn’t even say that this is quality. It’s not, quite honestly, but it worked.
Hey guys,
You can also use John Resig’s Sizzle in MooTools, by using this code:
Window.$$ = function(selector){ return new Elements(new Sizzle(selector)); }This overwrites the
$$function, but you can rename it to whatever you want, obviously.@Ryan: You stole my upcoming blog article! :) Thanks for the submission!