日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前言

創(chuàng)新互聯(lián)建站專注于張店網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供張店?duì)I銷型網(wǎng)站建設(shè)，張店網(wǎng)站制作、張店網(wǎng)頁設(shè)計(jì)、張店網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造張店網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供張店網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

虛擬語法樹(Abstract Syntax Tree, AST)是解釋器/編譯器進(jìn)行語法分析的基礎(chǔ), 也是眾多前端編譯工具的基礎(chǔ)工具, 比如webpack, postcss, less等. 對(duì)于ECMAScript, 由于前端輪子眾多, 人力過于充足, 早已經(jīng)被人們玩膩了. 光是語法分析器就有 uglify , acorn , bablyon , typescript , esprima 等等若干種. 并且也有了AST的社區(qū)標(biāo)準(zhǔn): ESTree。

這篇文章主要介紹如何去寫一個(gè)AST解析器, 但是并不是通過分析JavaScript, 而是通過分析 html5 的語法樹來介紹, 使用 html5 的原因有兩點(diǎn): 一個(gè)是其語法簡(jiǎn)單, 歸納起來只有兩種: Text 和 Tag , 其次是因?yàn)镴avaScript的語法分析器已經(jīng)有太多太多, 再造一個(gè)輪子毫無意義, 而對(duì)于 html5 , 雖然也有不少的AST分析器, 比如 htmlparser2 , parser5 等等, 但是沒有像 ESTree 那么標(biāo)準(zhǔn), 同時(shí), 這些分析器都有一個(gè)問題: 那就是定義的語法樹中無法對(duì)標(biāo)簽屬性進(jìn)行操作. 所以為了解決這個(gè)問題, 才寫了一個(gè)html的語法分析器, 同時(shí)定義了一個(gè)完善的AST結(jié)構(gòu), 然后再有的這篇文章。

AST定義

為了跟蹤每個(gè)節(jié)點(diǎn)的位置屬性, 首先定義一個(gè)基礎(chǔ)節(jié)點(diǎn), 所有的結(jié)點(diǎn)都繼承于此結(jié)點(diǎn):

 
 
 
 

  
  
  
  
export interface IBaseNode {
  
  
  
  
  start: number;  // 節(jié)點(diǎn)起始位置
  
  
  
  
  end: number;    // 節(jié)點(diǎn)結(jié)束位置
  
  
  
  
}
 
 
 
 

如前所述, html5的語法類型最終可以歸結(jié)為兩種: 一種是 Text , 另一種是 Tag , 這里用一個(gè)枚舉類型來標(biāo)志它們.

 
 
 
 

  
  
  
  
export enum SyntaxKind {
  
  
  
  
  Text = 'Text', // 文本類型
  
  
  
  
  Tag  = 'Tag',  // 標(biāo)簽類型
  
  
  
  
}
 
 
 
 

對(duì)于文本, 其屬性只有一個(gè)原始的字符串 value , 因此結(jié)構(gòu)如下:

 
 
 
 

  
  
  
  
export interface IText extends IBaseNode {
  
  
  
  
  type: SyntaxKind.Text; // 類型
  
  
  
  
  value: string;         // 原始字符串
  
  
  
  
}
 
 
 
 

而對(duì)于 Tag , 則應(yīng)該包括標(biāo)簽開始部分 open , 屬性列表 attributes , 標(biāo)簽名稱 name , 子標(biāo)簽/文本 body , 以及標(biāo)簽閉合部分 close :

 
 
 
 

  
  
  
  
export interface ITag extends IBaseNode {
  
  
  
  
  type: SyntaxKind.Tag;  // 類型
  
  
  
  
  open: IText;           // 標(biāo)簽開始部分, 比如 
  
  
  
  
  name: string;          // 標(biāo)簽名稱, 全部轉(zhuǎn)換為小寫
  
  
  
  
  attributes: IAttribute[];  // 屬性列表
  
  
  
  
  body: Array // 子節(jié)點(diǎn)列表, 如果是一個(gè)非自閉合的標(biāo)簽, 并且起始標(biāo)簽已結(jié)束, 則為一個(gè)數(shù)組
  
  
  
  
    | void                  // 如果是一個(gè)自閉合的標(biāo)簽, 則為void 0
  
  
  
  
    | null;                 // 如果起始標(biāo)簽未結(jié)束, 則為null
  
  
  
  
  close: IText              // 關(guān)閉標(biāo)簽部分, 存在則為一個(gè)文本節(jié)點(diǎn)
  
  
  
  
    | void                  // 自閉合的標(biāo)簽沒有關(guān)閉部分
  
  
  
  
    | null;                 // 非自閉合標(biāo)簽, 但是沒有關(guān)閉標(biāo)簽部分
  
  
  
  
}
 
 
 
 

標(biāo)簽的屬性是一個(gè)鍵值對(duì), 包含名稱 name 及值 value 部分, 定義結(jié)構(gòu)如下:

 
 
 
 

  
  
  
  
export interface IAttribute extends IBaseNode {
  
  
  
  
  name: IText;  // 名稱
  
  
  
  
  value: IAttributeValue | void; // 值
  
  
  
  
}
 
 
 
 

其中名稱是普通的文本節(jié)點(diǎn), 但是值比較特殊, 表現(xiàn)在其可能被單/雙引號(hào)包起來, 而引號(hào)是無意義的, 因此定義一個(gè)標(biāo)簽值結(jié)構(gòu):

 
 
 
 

  
  
  
  
export interface IAttributeValue extends IBaseNode {
  
  
  
  
  value: string; // 值, 不包含引號(hào)部分
  
  
  
  
  quote: '\'' | '"' | void; // 引號(hào)類型, 可能是', ", 或者沒有
  
  
  
  
}
 
 
 
 

Token解析

AST解析首先需要解析原始文本得到符號(hào)列表, 然后再通過上下文語境分析得到最終的語法樹.

相對(duì)于JSON, html雖然看起來簡(jiǎn)單, 但是上下文是必需的, 所以雖然JSON可以直接通過token分析得到最終的結(jié)果, 但是html卻不能, token分析是***步, 這是必需的. (JSON解析可以參考我的另一篇文章: 徒手寫一個(gè)JSON解析器(Golang) ).

token解析時(shí), 需要根據(jù)當(dāng)前的狀態(tài)來分析token的含義, 然后得出一個(gè)token列表.

首先定義token的結(jié)構(gòu):

 
 
 
 

  
  
  
  
export interface IToken {
  
  
  
  
  start: number;    // 起始位置
  
  
  
  
  end: number;      // 結(jié)束位置
  
  
  
  
  value: string;    // token
  
  
  
  
  type: TokenKind;  // 類型
  
  
  
  
}
 
 
 
 

Token類型一共有以下幾種:

 
 
 
 

  
  
  
  
export enum TokenKind {
  
  
  
  
  Literal     = 'Literal',      // 文本
  
  
  
  
  OpenTag     = 'OpenTag',      // 標(biāo)簽名稱
  
  
  
  
  OpenTagEnd  = 'OpenTagEnd',   // 開始標(biāo)簽結(jié)束符, 可能是 '/', 或者 '', '--'
  
  
  
  
  CloseTag    = 'CloseTag',     // 關(guān)閉標(biāo)簽
  
  
  
  
  Whitespace  = 'Whitespace',   // 開始標(biāo)簽類屬性值之間的空白
  
  
  
  
  AttrValueEq = 'AttrValueEq',  // 屬性中的=
  
  
  
  
  AttrValueNq = 'AttrValueNq',  // 屬性中沒有引號(hào)的值
  
  
  
  
  AttrValueSq = 'AttrValueSq',  // 被單引號(hào)包起來的屬性值
  
  
  
  
  AttrValueDq = 'AttrValueDq',  // 被雙引號(hào)包起來的屬性值
  
  
  
  
}
 
 
 
 

Token分析時(shí)并沒有考慮屬性的鍵/值關(guān)系, 均統(tǒng)一視為屬性中的一個(gè)片段, 同時(shí), 視 = 為一個(gè)

特殊的獨(dú)立段片段, 然后交給上層的 parser 去分析鍵值關(guān)系. 這么做的原因是為了在token分析

時(shí)避免上下文處理, 并簡(jiǎn)化狀態(tài)機(jī)狀態(tài)表. 狀態(tài)列表如下:

 
 
 
 

  
  
  
  
enum State {
  
  
  
  
  Literal              = 'Literal',
  
  
  
  
  BeforeOpenTag        = 'BeforeOpenTag',
  
  
  
  
  OpeningTag           = 'OpeningTag',
  
  
  
  
  AfterOpenTag         = 'AfterOpenTag',
  
  
  
  
  InValueNq            = 'InValueNq',
  
  
  
  
  InValueSq            = 'InValueSq',
  
  
  
  
  InValueDq            = 'InValueDq',
  
  
  
  
  ClosingOpenTag       = 'ClosingOpenTag',
  
  
  
  
  OpeningSpecial       = 'OpeningSpecial',
  
  
  
  
  OpeningDoctype       = 'OpeningDoctype',
  
  
  
  
  OpeningNormalComment = 'OpeningNormalComment',
  
  
  
  
  InNormalComment      = 'InNormalComment',
  
  
  
  
  InShortComment       = 'InShortComment',
  
  
  
  
  ClosingNormalComment = 'ClosingNormalComment',
  
  
  
  
  ClosingTag           = 'ClosingTag',
  
  
  
  
}
 
 
 
 

整個(gè)解析采用函數(shù)式編程, 沒有使用OO, 為了簡(jiǎn)化在函數(shù)間傳遞狀態(tài)參數(shù), 由于是一個(gè)同步操作,

這里利用了JavaScript的事件模型, 采用全局變量來保存狀態(tài). Token分析時(shí)所需要的全局變量列表如下:

 
 
 
 

  
  
  
  
let state: State          // 當(dāng)前的狀態(tài)
  
  
  
  
let buffer: string        // 輸入的字符串
  
  
  
  
let bufSize: number       // 輸入字符串長(zhǎng)度
  
  
  
  
let sectionStart: number  // 正在解析的Token的起始位置
  
  
  
  
let index: number         // 當(dāng)前解析的字符的位置
  
  
  
  
let tokens: IToken[]      // 已解析的token列表
  
  
  
  
let char: number          // 當(dāng)前解析的位置的字符的UnicodePoint
 
 
 
 

在開始解析前, 需要初始化全局變量:

 
 
 
 

  
  
  
  
function init(input: string) {
  
  
  
  
  state        = State.Literal
  
  
  
  
  buffer       = input
  
  
  
  
  bufSize      = input.length
  
  
  
  
  sectionStart = 0
  
  
  
  
  index        = 0
  
  
  
  
  tokens       = []
  
  
  
  
}
 
 
 
 

然后開始解析, 解析時(shí)需要遍歷輸入字符串中的所有字符, 并根據(jù)當(dāng)前狀態(tài)進(jìn)行相應(yīng)的處理

(改變狀態(tài), 輸出token等), 解析完成后, 清空全局變量, 返回結(jié)束.

 
 
 
 

  
  
  
  
export function tokenize(input: string): IToken[] {
  
  
  
  
  init(input)
  
  
  
  
  while (index < bufSize) {
  
  
  
  
    char = buffer.charCodeAt(index)
  
  
  
  
    switch (state) {
  
  
  
  
    // ...根據(jù)不同的狀態(tài)進(jìn)行相應(yīng)的處理
  
  
  
  
    // 文章忽略了對(duì)各個(gè)狀態(tài)的處理, 詳細(xì)了解可以查看源代碼
  
  
  
  
    }
  
  
  
  
    index++
  
  
  
  
  }
  
  
  
  
  const _nodes = nodes
  
  
  
  
  // 清空狀態(tài)
  
  
  
  
  init('')
  
  
  
  
  return _nodes
  
  
  
  
}
 
 
 
 

語法樹解析

在獲取到token列表之后, 需要根據(jù)上下文解析得到最終的節(jié)點(diǎn)樹, 方式與tokenize相似，均采用全局變量保存?zhèn)鬟f狀態(tài), 遍歷所有的token, 不同之處在于這里沒有一個(gè)全局的狀態(tài)機(jī)。

因?yàn)闋顟B(tài)完全可以通過正在解析的節(jié)點(diǎn)的類型來判斷。

 
 
 
 

  
  
  
  
export function parse(input: string): INode[] {
  
  
  
  
  init(input)
  
  
  
  
  while (index < count) {
  
  
  
  
    token = tokens[index]
  
  
  
  
    switch (token.type) {
  
  
  
  
      case TokenKind.Literal:
  
  
  
  
        if (!node) {
  
  
  
  
          node = createLiteral()
  
  
  
  
          pushNode(node)
  
  
  
  
        } else {
  
  
  
  
          appendLiteral(node)
  
  
  
  
        }
  
  
  
  
        break
  
  
  
  
      case TokenKind.OpenTag:
  
  
  
  
        node = void 0
  
  
  
  
        parseOpenTag()
  
  
  
  
        break
  
  
  
  
      case TokenKind.CloseTag:
  
  
  
  
        node = void 0
  
  
  
  
        parseCloseTag()
  
  
  
  
        break
  
  
  
  
      default:
  
  
  
  
        unexpected()
  
  
  
  
        break
  
  
  
  
    }
  
  
  
  
    index++
  
  
  
  
  }
  
  
  
  
  const _nodes = nodes
  
  
  
  
  init()
  
  
  
  
  return _nodes
  
  
  
  
}
 
 
 
 

不太多解釋, 可以到GitHub查看源代碼.

結(jié)語

項(xiàng)目已開源, 名稱是 html5parser , 可以通過npm/yarn安裝:

 
 
 
 

  
  
  
  
npm install html5parser -S 
  
  
  
  
# OR 
  
  
  
  
yarn add html5parser
 
 
 
 

或者到GitHub查看源代碼: acrazing/html5parser 。

目前對(duì)正常的HTML解析已完全通過測(cè)試, 已知的BUG包括對(duì)注釋的解析, 以及未正常結(jié)束的

輸入的解析處理(均在語法分析層面, token分析已通過測(cè)試).

名稱欄目：AST解析基礎(chǔ):如何寫一個(gè)簡(jiǎn)單的html語法分析庫
分享地址：http://www.dlmjj.cn/article/copgogs.html