Qwrap selector W3C

There have been a series of "qwrap selector decryption"Article, Talked about most of the key points in DOM/selector. js in qwrap. Today, another slector version of queryselectorall, which relies entirely on the browser, is selector_w3c.js. It is the same as the previous selector. js interface name.

We write a selector. js by ourselves, so that we have the freedom to make up for the shortcomings of the standard. For example, no one strictly implements matchesselector even in the latest browser. In selector. JS, the filter and test methods have long been available to implement the matchesselector function.
From another perspective, we sometimes need to customize someCodeTo save network traffic. Selector_w3c.js assumes that the browser supports the queryselectorall method. A typical example is Web JS development based on mobile terminals.
The names of all methods provided by selector_w3c.js and selector. js are the same, but the W3C version only requires parameter processing and is more dependent on browsers.
For example:

1. Difference 1: the selector. Query (document. Body, 'body Div ') in the original selector. js won't return the result. For ease of use, it adds ": Scope" to the selector string, which is equivalent to the selector in selector_w3c.js. query (document. body, ': Scope body Div'), although Chrome does not implement: Scope pseudo class. This difference is also described in this article "Understanding selector writing ".RigorAndEase of useA typical example of a conflict.
2. Difference 2: Selector parameters in the test method in seletor_w3c.js now support various Relational operators. For example, you can write selector. Test (document. Body, 'html body '). It also produces a side effect, that is, if the tested element does not have a parent element (for example, a newly created node that has not been inserted into the DOM tree), the test result is false.
3. Difference 3: Filter (ELS, sselector, PEL) in seletor_w3c.js will ignore nodes that are not transferred to PEL outside the DOM tree.

Unfortunately, because Chrome does not implement matchesselector, I can only implement the test and filter methods in the shanzhai, so there is a difference between 2 and 3. ----This shows that the "standard" always fails to meet our expectations, and the actual browser does not win the standard.. ---- Regardless of him, I can't control whether the "standard" is "draft", "suggestion", or anything else.

Code specific code here: https://github.com/wedteam/qwrap/blob/master/resource/js/dom/selector_w3c.js
It is actually very simple, as follows:

 /* 
Copyright (c) Baidu youa wed qwrap
Version: $ version $ release $ released
Author: JK
  */ 


 /*  *
* @ Class selector CSS selector-related methods
* @ Singleton
* @ Namespace QW
  */ 
( Function (){
 VaR Selector = {
 /* *
* Converts a selector string into a filter function.
* @ Method selector2filter
* @ Static
* @ Param {string} sselector filter Selector
* @ Returns {function}: returns the filter function.
* @ Example:
VaR fun = selector2filter ("input. AAA"); alert (fun );
  */ 
Selector2filter: Function (Sselector ){
 Return S2f (sselector );
},
 /* *
* Determine whether an element conforms to a selector.
* @ Method Test
* @ Static
* @ Param {htmlelement} el: parameters to be investigated
* @ Param {string} sselector: Filter Selector
* @ Returns {function}: returns the filter function.
  */ 
Test: Function (EL, sselector ){
 Return S2f (sselector) (EL );
},
 /* *
* Use a CSS selector to filter an array.
* @ Method Filter
* @ Static
* @ Param {array | collection} els: array of Elements
* @ Param {string} sselector: Filter selector.
* @ Param {element} Pel: parent node. The default value is document.
* @ Returns {array}: returns an array composed of elements that meet the filtering conditions.
  */ 
Filter: Function (ELS, sselector, PEL ){
 VaR Allels = (PEL | document). queryselectorall (sselector );
 Return Array. Filter (ELS, Function (EL ){
 Return Array. indexof (allels, El)>-1;
});
},
 /*  *
* Take refel as a reference to obtain the HTML elements. refel that meets the filter conditions can be element or document.
* @ Method Query
* @ Static
* @ Param {htmlelement} refel: reference object
* @ Param {string} sselector: Filter selector,
* @ Returns {array}: returns the elements array.
* @ Example:
VaR els = query (document, "Li input. AAA ");
For (VAR I = 0; I <els. length; I ++) els [I]. style. backgroundcolor = 'red ';
  */ 
Query: Function (Refel, sselector ){
 Return Toarray (refel | document). queryselectorall (sselector ));
},
 /*  *
* Take refel as a reference to obtain an element that meets the filter conditions. refel can be an element or a document.
* @ Method One
* @ Static
* @ Param {htmlelement} refel: reference object
* @ Param {string} sselector: Filter selector,
* @ Returns {htmlelement}: returns the element. If no value is obtained, the return value is null.
* @ Example:
VaR els = query (document, "Li input. AAA ");
For (VAR I = 0; I <els. length; I ++) els [I]. style. backgroundcolor = 'red ';
  */ 
One: Function (Refel, sselector ){
 Return (Refel | document). queryselector (sselector );
}
};


 /*  
* S2f (sselector): a selector obtains a filter function.
  */ 
 VaR Filtercache = {};
Filtercache [''] = Function (){
 Return   True ;
};
Filtercache ['*'] = Function (EL ){
Return !! El. tagname;
};
 Function S2f (sselector ){
 If (! Filtercache [sselector]) {
Filtercache [sselector] = Function (EL ){
 Return El. parentnode & array. indexof (El. parentnode. queryselectorall (sselector), El)>-1;
}

}
 Return Filtercache [sselector];
}
Function Toarray (ARR ){
 For ( VaR I = arr. Length-1, ret = []; I>-1; I --){
RET [I] = arr [I];
}
 Return RET;
}
QW. selector = selector;
}());

In addition, because qwrap has a flexible apps mechanism, we can customize an app for apps/qwrap_webkit.js and replace selector_w3c.js with selector. js. The code in other places does not need to be changed.

Appendix:
Qwrap blog site: http://www.qwrap.com
Selector speed match: http://dev.qwrap.com/resource/js/_tools/speedmatch/_examples/SelectorSpeed.html