Sizzle Step-by-step implementation of all functions (i)

Source: Internet
Author: User
Tags rtrim

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.