Understanding Sizzle: A Lightweight CSS Selector Engine

Slide Note

Sizzle is a pure JavaScript CSS selector engine, powered by jQuery and designed to be standalone with no dependencies. It boasts competitive performance in a small 4kB package. This tool makes selecting elements in the DOM easier with CSS3 support and efficient handling of various browser bugs and issues.

arlette Follow

Uploaded on Aug 01, 2024 | 1 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Sizzle By zhangpeng12@baidu.com

sizzle A pure-JavaScript CSS selector engine (power jQuery) Standalone(no dependencies) Competitive performance Only 4kB with gzipped Easy to use Css3 support Bla bla

sizzle Bugs 1. Id div.container li:last-of-child a,div.container ul+a IE<=8 iuput name id var mySelector = function(){ 2. class bla bla . IE getAttribute html attribute dom property There gone be at least 100 lines here . IE getElementsByClassName bla bla . 3.Tag } getElementsByTagName(*)

(querySelector)

Sizzle

{matches: ["div"],type: "TAG",value: "div }, {matches: ["aaron"], type: "CLASS", value: ".aaron"}, {match:[ ], type: " ", value: " "}, {matches: ["input"], type: "TAG", value: "input"}, {matches: ["name"], type: "ATTR", value: "[name=ttt]"} div.aaron input[name=ttt]

() (,) /^[\x20\t\r\n\f]*,[\x20\t\r\n\f]*/ ( >+~) /^[\x20\t\r\n\f]*([>+~]|[\x20\t\r\n\f])[\x20\t\r\n\f]*/ Id Tag Class Attribute var characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+" var ID = new RegExp("^#(" + characterEncoding + ")") var TAG = new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" ) var Class = new RegExp( "^\\.(" + characterEncoding + ")" ) .

while (selector) { // if (match = rcomma.exec(selector)) { selector = selector.slice(match[0].length) groups.push((tokens = [])); } // if ((match = rcombinators.exec(selector))) { matched = match.shift(); tokens.push({ value: matched, type: match[0].replace(rtrim, " ") }); selector = selector.slice(matched.length); } // for (type in matchExpr) { if ((match = matchExpr[type].exec(selector))) { matched = match.shift(); tokens.push({ value: matched, type: type, matches: match }); selector = selector.slice(matched.length); } } } ( ) // var rcomma = /^[\x20\t\r\n\f]*,[\x20\t\r\n\f]*/; // var rcombinators = /^[\x20\t\r\n\f]*([>+~]|[\x20\t\r\n\f])[\x20\t\r\n\f]*/ // var TAG = /^((?:\\.|[\w*-]|[^\x00-\xa0])+)/; var matchExpr = { CLASS: /^\.((?:\\.|[\w-]|[^\x00-\xa0])+)/, TAG: /^((?:\\.|[\w*-]|[^\x00-\xa0])+)/ }

// token Expr.filter = { ATTR : function (name, operator, check) {return function} CHILD : function (type, what, argument, first, last) {return function} CLASS : function (className) {return function} ID : function (id) {return function} PSEUDO : function (pseudo, argument) {return function} TAG : function (nodeNameSelector) {return function} } //tag nodeName TAG: function(nodeNameSelector) { return function(elem) { return elem.nodeName && elem.nodeName.toLowerCase() === nodeNameSelector; }; }

TAG div.aaron input[name=ttt] div.aaron [name=ttt] Input { matches: ["div"],type: "TAG",value: "div }, {matches: ["aaron"], type: "CLASS", value: ".aaron"}, {match:[ ], type: " ", value: " "}, {matches: ["input"], type: "TAG", value: "input"}, {matches: ["name"], type: "ATTR", value: "[name=ttt]"} { matches: ["div"],type: "TAG",value: "div }, {matches: ["aaron"], type: "CLASS", value: ".aaron"}, {match:[ ], type: " ", value: " "}, {matches: ["name"], type: "ATTR", value: "[name=ttt]"} Token

token { matches: ["div"],type: "TAG",value: "div }, {matches: ["aaron"], type: "CLASS", value: ".aaron"}, {match:[ ], type: " ", value: " "}, {matches: ["name"], type: "ATTR", value: "[name=ttt]"} div.aaron [name=ttt] function(){ .. } Expr.filter = { ATTR : function (name, operator, check) {return function} CHILD : function (type, what, argument, first, last) {return function} CLASS : function (className) {return function} ID : function (id) {return function} PSEUDO : function (pseudo, argument) {return function} TAG : function (nodeNameSelector) {return function} }

token(+> ~) token div [name=ttt] ( )[name=ttt] [name=ttt] Function(elem){ //attribute filter } Function(elem){ while(matcher=matchrs.pop()){ if(!matcher(elem)){ return false; } } return true; } Function(elem){ elem=elem[ parentNode ]; return Function(elem){ tag filter } } Function(elem){ //tag filter } Function(elem){ elem=elem[ parentNode ]; return Function(elem){ //tag filter } } Matchers