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

痛定思痛。 2022-10-02 14:42 72阅读 0赞

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

转载于:https://www.cnblogs.com/mole/p/3853563.html

[html]: http://www.2cto.com/kf/qianduan/css/