久草香蕉影视视频,国内自慰一区二区三区,狠狠躁夜夜躁天天躁婷婷

Sizzle詞法解析(上)

什么是詞法分析器(tokenize)？

詞法分析器又稱掃描器，詞法分析是指將我們編寫的文本代碼流解析為一個一個的記號，分析得到的記號以供后續語法分析使用

'div > div.aaron input[name=ttt]'是一個相對復雜的選擇器，這樣的結構在不支持高級API的瀏覽器中是無法直接通過獲取的，那么所有選擇器的庫就必須要干的一件事，把復雜選擇器按照一樣的設計規則，分解成瀏覽器原始API能夠識別的結構，然后通過其他的方法找個這個結構。所以這里就要引入一個切割的算法了，也有點類似編譯原理的詞法分析。

所以引擎在遇到無法直接處理的復雜選擇器時，就需要按照內部的規則進行分組了。

Sizzle的tokenize格式如下：

{
   value:'匹配到的字符串', 
   type:'對應的Token類型',
   matches:'正則匹配到的一個結構'
}

tokenize需要解析的幾種情況：

多重選擇器,逗號分組

selector = 'div,input'

在出現逗號分隔符的時候，就說明選擇所有指定的選擇器的組合結果，所以需要分割成各自的處理模塊，這種事情當然交給正則來做是最合適的

A: 常規的思路先是通過split(,)先把選擇器劈成二部分，然后依次處理各自的模塊

B：sizzle的思路則是循環一個一個分組出來的

我們假設一個復雜的選擇器

div.aaron > input[name=ttt] , div p > span

這里涉及了3大塊

1、分組逗號

2、層級關系

3、每種元素處理

具體我們參考下我寫的代碼區域

$("#test2").click(function() {
   //sizzle解析區域
}

其中分3大塊的處理，其實很明了，因為這個案例的問題，我們沒有層級關系的具體代碼，下章會詳細講解，我們先理解這個思路。

sizzle對于分組過濾處理都用正則，其中都有一個特點，就是都是元字符^開頭，限制匹配的初始，所以tokenize也是從左邊開始一層一層的剝離。

其中會用到的正則：

//分組
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 whitespace = "[\\x20\\t\\r\\n\\f]";

所以最終的結構:

groups: [
  tokens： {
    matches: ? type : ? value : ?
  },
  tokens： {
    matches: ? type : ? value : ?
  }
]

當然為什么是這樣的結構，這是sizzle內部的一個解析規則罷了。后面就用這個規則去做匹配與篩選。

任務

?不會了怎么辦

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <title></title> </head> <body> 多重選擇器,逗號分隔處理 <button id="test1">通過split分組</button> <button id="test2">sizzle的分組方式</button> <div id="text"> <p> <input type="text" /> </p> <div class="aaron"> <input type="checkbox" name="readme" /> <input type="checkbox" name="ttt" /> <input type="checkbox" name="aaa" /> <p>慕課網</p> </div> </div> <div> <input type="checkbox" name="readme" /> <input type="checkbox" name="ttt" /> <input type="checkbox" name="aaa" /> <p>Aaron</p> </div> <script type="text/javascript"> //最簡單的選擇器 var selector = 'div,input'; //常規分組，可以通過split $("#test1").click(function() { var soFar = selector.split(","); alert(soFar[0]) alert(soFar[1]) }) //sizzle的分組方式 $("#test2").click(function() { //分組 var rcomma = /^[\x20\t\r\n\f]*,[\x20\t\r\n\f]*/; //TAG var TAG = /^((?:\\.|[\w*-]|[^\x00-\xa0])+)/; var soFar = selector; var match; var matched; var tokens; var groups = []; while (soFar) { //第一大塊，分組關系 //查找最左邊的選擇是不是逗號開頭 //matched用于處理第一進入 //因為div input,div p 開始分解，第一個不是特殊符號 if (!matched || (match = rcomma.exec(soFar))) { if (match) { // Don't consume trailing commas as valid soFar = soFar.slice(match[0].length) || soFar; } groups.push((tokens = [])); } //退出處理 matched = false; //第二大塊，層級關系 // // 這里用的最簡單的處理關系， // 不涉及層級關系 // ............................ // //第三大塊，選擇器 match = TAG.exec(soFar) matched = match.shift(); tokens.push({ value : matched, type : 'TAG', matches : match }); soFar = soFar.slice(matched.length); if (!matched) { break; } } alert(groups) }) </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-4 Sizzle詞法解析(上)

Sizzle詞法解析(上)

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7-4 Sizzle詞法解析(上)

熱搜

最近搜索清空

Sizzle詞法解析(上)

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～