Premise:
1.HTML5 bring Queryselectall can completely replace Sizlle, so we write below sizzle, is not considered QSA.
2. The authors consider a number of compatibility cases, such as the BlackBerry 4.6 system, which is almost inaccessible. So the study value is not high but takes the time question I do not consider. Mainly consider IE8, this is also sizzle not be eliminated the main reason.
3. I like to use VAR to declare each variable, rather than a VAR declaration of many variables. The reason is that I am in step by step to improve the imitation of the sizzle, there will be a lot of changes.
The principle of 4.Sizzle is actually very simple, it is really possible to iterate through all the elements of the page, to exclude each element, and then insert into the result array . But the function is numerous, the level is complex, the difficulty is the structure.
5. This is an ultra-long article.
The first step: Implement Sizzle (' #ID), Sizzle ("TAG"), Sizzle (". CLASS ")
1(function(window) {2 3 vararr = [];4 varSelect;5 varPush =Arr.push;6 //http://www.w3.org/TR/css3-selectors/#whitespace7 //various blanks to be worn regular string8 varwhitespace = "[\\x20\\t\\r\\n\\f]";9 //with space selector regular, memory no space selectorTen varRTrim =NewRegExp ("^" + whitespace + "+| ( (?:^| [^\\\\]) (?:\ \\\.) *) "+ whitespace +" +$ "," G " ); One //Quick Selector Regular ID or TAG (including *) or CLASS selector A varrquickexpr =/^ (?: # ([\w-]+) | ( \w+|\*) |\. ([\w-]+)) $/; - - //Browser Code Regular the varrnative =/^[^{]+\{\s*\[native \w/; - //entrance to functionSizzle (selector) { + //Clear Spaces -selector = Selector.replace (RTrim, "$" ) the varResults = []; * varmatch; $ varMatcher;Panax Notoginseng varElem; - varm; the varContext =document; + A //is a minimalist selector the if(match =rquickexpr.exec (selector)) { + //Sizzle (' #ID) - if((M = match[1]) ) { $Elem =Context.getelementbyid (m); $ if(elem) { - Results.push (elem); - } the returnresults; - Wuyi //Sizzle ("TAG") the}Else if((M = match[2]) ){ - push.apply (results, Context.getelementsbytagname (selector)); Wu returnresults; - About //Sizzle (". CLASS ") $}Else if((M = match[3]) ){ - //Support Getelementsbyclassname - if(support.getelementsbyclassname) { - push.apply (Results, Context.getelementsbyclassname (m)); A returnresults; + the //Getelementsbyclassname not supported -}Else { $ //get traversal of all elements the //if the element class name matches the class name of our selector, it is inserted into the result array the varElems = document.getElementsByTagName (' * ')); the varPattern =NewREGEXP (Selector.slice (1)); the for(vari = 0; i<elems.length; i++) { - if(Pattern.test (elems[i].classname)) { in Results.push (elems[i]) the } the } About } the } the } the returnresults; + } - //version supports external access to variables the varSupport = Sizzle.support = {};Bayi the //determine if Getelementsbyclassname is supported the //Support: Ie<9 -Support.getelementsbyclassname =rnative.test (document.getelementsbyclassname); - the //External Entrance theWindow. Msizzle =Sizzle; the the }) (window) -Console.log (Msizzle ("#id")) theConsole.log (Msizzle (". Class"))) theConsole.log (Msizzle ("div"))
1.rquickexpr.exec (selector) returns an array, the Exec method returns an array, the NO. 0 item is the matching content, the 1th item is the memory in the first parenthesis, and the 2nd entry is the contents of the first parenthesis, and so on.
// //["3", Undefined, Undefined, "3"]
2. Determine if the browser supports a regular rnative of a piece of code =/^[^{]+\{\s*\[native \w/
Sizzle Step-by-step implementation of all functions (i)