matchesSelector 匹配选择器表达式sizzle的实现

 

　Sizzle.matchesSelector = function( node, expr ) {
     return Sizzle( expr, null, null, [node] ).length > 0;
　};
　(function(){
     var html = document.documentElement,
         matches = html.matchesSelector || html.mozMatchesSelector || html.webkitMatchesSelector || html.msMatchesSelector;

     if ( matches ) {
        // Check to see if it's possible to do matchesSelector
         // on a disconnected node (IE 9 fails this)
         var disconnectedMatch = !matches.call( document.createElement( "div" ), "div" ),
             pseudoWorks = false;

        try {
            // This should fail with an exception
             // Gecko does not error, returns false instead
             matches.call( document.documentElement, "[test!='']:sizzle" );
   
         } catch( pseudoError ) {
             pseudoWorks = true;
         }

        Sizzle.matchesSelector = function( node, expr ) {
             // Make sure that attribute selectors are quoted
             expr = expr.replace(/\=\s*([^'"\]]*)\s*\]/g, "='$1']");

           if ( !Sizzle.isXML( node ) ) {
                 try {
                     if ( pseudoWorks || !Expr.match.PSEUDO.test( expr ) && !/!=/.test( expr ) ) {
                        var ret = matches.call( node, expr );

                        // IE 9's matchesSelector returns false on disconnected nodes
                      if ( ret || !disconnectedMatch ||
                                // As well, disconnected nodes are said to be in a document
                                 // fragment in IE 9, so check for that
                                 node.document && node.document.nodeType !== 11 ) {
                            return ret;
                        }
                    }
                 } catch(e) {}
            }

            return Sizzle(expr, null, null, [node]).length > 0;
        };
     }
　})();

 

偶然在github上看到一个很好的是示例实现代码为

(function(global, ElemProto) {

var matchesMethod = (function() {
if (ElemProto.matchesSelector) {
return 'matchesSelector';
}

var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];

for ( var i = 0, len = prefixes.length; i < len; i++) {
var prefix = prefixes[i];
var method = prefix + 'MatchesSelector';
if (ElemProto[method]) {
return method;
}
}
})();
console.log('abc');
// ----- match ----- //

function match(elem, selector) {
return elem[matchesMethod](selector);
}

// ----- appendToFragment ----- //

function checkParent(elem) {
// not needed if already has parent
if (elem.parentNode) {
return;
}
var fragment = document.createDocumentFragment();
fragment.appendChild(elem);
}

function query(elem, selector) {
// append to fragment if no parent
checkParent(elem);

// match elem with all selected elems of parent
var elems = elem.parentNode.querySelectorAll(selector);
for ( var i = 0, len = elems.length; i < len; i++) {
// return true if match
if (elems[i] === elem) {
return true;
}
}
// otherwise return false
return false;
}

// ----- matchChild ----- //

function matchChild(elem, selector) {
checkParent(elem);
return match(elem, selector);
}

// ----- matchesSelector ----- //

var matchesSelector;
if (matchesMethod) {

var div = document.createElement('div');
var supportsOrphans = match(div, 'div');
matchesSelector = supportsOrphans ? match : matchChild;
} else {
matchesSelector = query;
}
console.log(matchesSelector);
// transport
if (typeof define === 'function' && define.amd) {
// AMD
define('matches-selector/matches-selector', [], function() {
return matchesSelector;
});
} else {
// browser global
window.matchesSelector = matchesSelector;
}

})(this, Element.prototype);

 

源地址：https://gist.github.com/3062955