Sizzle and Peppy Selector Engines in MooTools

By  on  

A few weeks back I touched on how you could implement the Peppy and Sizzle selector engines in MooTools. Both posts showed how to remove the default Moo engine from use and instead make each respective selector engine the one and only. It doesn't have to be that way. You could use all three engines within the page as well.

Peppy, Sizzle, and Moo Together

//assuming that the JavaScript files we brought in via simple XHTML above...

/* MooTools */
var divs = $$('div');

/* Sizzle */
Window.$Sizzle = function(selector){
	return new Elements(new Sizzle(selector));
}
//sizzle usage
var divs = $Sizzle('div');

/* Peppy */
Window.$Peppy = function(selector){
	return new Elements(new peppy.query(selector));
}
//Peppy usage
var divs = $Peppy('div');

Why do this? Each engine has its advantages. Sizzle generally does better with Internet Explorer so if you detect that the user is using IE, you may want to use Sizzle to grab the elements instead.

In most cases the overhead of bringing in each engine makes this strategy overkill. It's definitely an option though.

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Submit Button Enabling

    "Enabling" you ask? Yes. We all know how to disable the submit upon form submission and the reasons for doing so, but what about re-enabling the submit button after an allotted amount of time. After all, what if the user presses the "stop"...

  • By
    Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

    I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most...

Discussion

  1. Is there any REAL and REAL-WORLD benefit to actually do this or include one of the other selector engines? Does one get the performance from Sizzle when just using its selector engine? .. :f

    Great shit though David. :)

  2. I can’t wait to test sizzle. Where can I get a break down of each engine’s benefits?

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