Search code examples
jquerysizzle

decoupling jquery, sizzle?


Does anyone have experience / insight re: decoupling jquery / sizzle?

this is for general interest, but here's the scenario that triggered my question:

..i already have jquery in the project. wanted to try out http://ecsstender.org/, which requires the Sizzle selector engine. I dont really want to include a 2nd copy of Sizzle - its already part of jquery ..

Seems a good idea. Although I guess it could hurt performace, and I would want to see benchmarking comparisons against the jQuery production release..

Does anyone know if this has been done ? (github fork?) Or is there a good reason against this approach? .


Solution

  • There's no need for Sizzle to be included in the jQuery build. It can be removed...the jQuery code all references Sizzle., you can just grab/compile jQuery yourself (including Sizzle beforehand) and have it exposed to any other library (not actually including it in the compiled version, just as an extern to the closure compiler).


    Here's the option to leave it embedded, but expose Sizzle for outside use:

    If you know jQuery will be used (dependency), just add this after jQuery:

    ​window.Sizzle = jQuery.find;
    

    This will re-expose Sizzle as a property you can use.


    Here's the manual version to remove Sizzle from being embedded:

    In jQuery (version 1.4.3 link) you'll see this :

    /*!
     * Sizzle CSS Selector Engine - v1.0
     *  Copyright 2009, The Dojo Foundation
     *  Released under the MIT, BSD, and GPL Licenses.
     *  More information: http://sizzlejs.com/
     */
    (function(){
    //...
    //lots of code!
    //...
    
    // EXPOSE
    jQuery.find = Sizzle;
    jQuery.expr = Sizzle.selectors;
    jQuery.expr[":"] = jQuery.expr.filters;
    jQuery.unique = Sizzle.uniqueSort;
    jQuery.text = Sizzle.getText;
    jQuery.isXMLDoc = Sizzle.isXML;
    jQuery.contains = Sizzle.contains;
    
    })();
    

    Replace that section with only:

    (function(){    
    // EXPOSE
    jQuery.find = Sizzle;
    jQuery.expr = Sizzle.selectors;
    jQuery.expr[":"] = jQuery.expr.filters;
    jQuery.unique = Sizzle.uniqueSort;
    jQuery.text = Sizzle.getText;
    jQuery.isXMLDoc = Sizzle.isXML;
    jQuery.contains = Sizzle.contains;    
    })();
    

    Then all you need to do in include Sizzle before jQuery and it'll work fine.

    Here's a fiddle showing it working, including Sizzle directly from github, not embedded in jQuery.