聊聊PegJS

QQ音乐前端团队

发布于 2021-04-19 01:40:13

1.5K00

代码可运行

文章被收录于专栏：QQ音乐前端团队专栏QQ音乐前端团队专栏

运行总次数：0

代码可运行

在开发前端BFF框架的时候，需要将团队后台使用的JCE协议（类似ProtoBuff协议）转换成nodejs对应的语法，这里参考@tencent/jce2node-cli的实现，使用PEG.js解析生成AST，下面就来介绍一下PEG.js是如何进行解析的？

我们在对文本进行解析的时候，通常可以使用正则表达式从目标文本中提取所需信息。但是仅使用正则表达式来解析，会发现非常难以阅读，可维护性比较差，而PegJs 则是一种更加简便可维护的 parser 工具。

PEG.js是一个JavaScript的词法解析器，可以用来处理复杂的数据或计算机语言，并轻松构建转换器、解释器、编译器和其他工具。它的语法对前端工程师很友好，只需要掌握基本的正则语法即可，并提供在线体验网址。下面是基于PegJS语法的一个官方示例，它的语法有这样两个特点：

PegJS的语法由一组规则组成，从上至下进行解析。起始规则是整个语法的『根』,后面的所有规则定义都应该是这个『根』的子节点，如果某个规则无法从『根』溯源下去，那么这个规则就是一条无效的规则。
规则形似变量声明，由名称和解析表达式组成。解析表达式可以是正则表达式，也可以是其他规则定义。

// additive.pegjs
start
  = additive

additive
  = left:multiplicative "+" right:additive { return left + right; }
  / 
  multiplicative

multiplicative
  = left:primary "*" right:multiplicative { return left * right; }
  / 
  primary

primary
  = integer
  / 
  "(" additive:additive ")" { return additive; }

integer "integer"
  = digits:[0-9]+ { return parseInt(digits.join(""), 10); }

上面的语法定义了加法和乘法的混合运算规则，可以将文本中符合规则的字符，比如 (2+7)*8，进行解析和运算。我们首先从简单的表达式开始分析：

interger = [0-9] // 只匹配一个数字
// "1" -> "1"
// "12" -> Line 1, column 2: Expected end of input but "2" found.

integer = [0-9]+ // 至少匹配一个数字
// "12" -> ["1", "2"]
// "" -> Line 1, column 1: Expected [0-9] but end of input found.

integer = [0-9]* // 匹配0个或者多个数字
// "124" -> ["1", "2", "4"]
// "" -> []

符号+表示至少匹配1个，符号*表示匹配0个或者多个。默认情况下，使用了+和* 匹配出的结果会返回一个数组，PegJS 提供在表达式中通过变量名和一个format函数来自定义返回值。

integer = digits:[0-9] { return digits.join() }
// "124" -> "124"

我们再来看上面的"integer"规则，显然，这条规则匹配多个数字并返回number类型的返回值。

integer "integer"
  = digits:[0-9]+ { return parseInt(digits.join(""), 10); }
// "124" -> 124

这里来做一个小练习，匹配一个浮点数：

float = number:interger "." decimal:interger {return parseFloat(number + '.' + decimal);}
interger = digits:[0-9]+ { return digits.join(''); }
// "124.35" -> 124.35

再看一下符号/，它表示or 的含义。

number = float / integer

为避免歧义，如果定义规则start = a / b，当输入即可以匹配a也可以匹配b，那么PegJS则优先使用a来进行解析。

下面介绍一个重要的概念：递归，这在描述嵌套或者树状结构的时候非常有用。先来看一个简单的例子：

commaSeparatedIntegerList
    = integer ',' commaSeparatedIntegerList
    / integer
integer = [0-9]

当解析输入"1,2"的时候，首先匹配了"1,"，接下来"2"去递归匹配commaSeparatedIntegerList规则，发现符合integer表达式，最终的返回值是：

[
   "1",
   ",",
   "2"
]

这里对匹配到的结果返回的value做一个说明：

与文字字符串匹配的表达式会生成包含匹配文本的JavaScript字符串。
与某个子表达式的重复出现匹配的表达式将生成具有所有匹配项的JavaScript数组。

最后我们再来看一下下面两条规则，它们的功能完全相同，第一条规则中定义了一个规则名称"数字"，我们可以通过这种方式为规则起一个可读性高的名称：

interger "数字" 
	= [0-9]

interger = [0-9]

我们还可以在规则定义的最开始用"{"和"}"在大括号内部定义一些JavaScript代码：

{
  function makeInteger(digits) {
    return parseInt(digits.join(""), 10)
  }
}
interger = digits:[0-9]+ { return makeInteger(digits); }

以上就是 PegJS 语法的基本使用方法，我们可以用它来定义各种复杂的解析规则。

现在我们开始尝试去解析一个简单的JCE文件吧，它主要由两部分组成：struct和interface。struct定义了数据类型，interface 中则声明了服务的方法。

module MTT {
    struct HelloReq {
        0   require int id;
    };

    struct HelloRsp {
        0   require int     iCode;
        1   require string  sMessage;
    };

    interface Hello {
        int hello (HelloReq req, out HelloRsp rsp);
    };
};

首先定义struct的规则，它里面包含多个成员，每个成员由序号、关键字、类型、变量名和分号组成：

StructDefinition "struct"
  = "struct" _+ id: Identifier _* "{" _* members: MemberDeclaration+ _* "}" _* ";" _* {
    return {
      id,
      type: "struct",
      members
    }
  }
    
MemberDeclaration "member"
  = i: IntegerLiteral _+ 
    key: ("require" / "optional") _+ 
    type: TypeSpecifier _+ 
    id: Identifier _* ";" _*  {
      return {
        index: i,
        isRequired: key === "required",
        id,
        type,
        id
      };
    }
    
IntegerLiteral
  = digits: [0] { return parseInt(digits); }
  / head: [1-9] tail:[0-9]* { return parseInt([head, ...tail].join('')); }
  
Identifier
  = head: [_a-zA-Z] tail: [_a-zA-Z0-9]* {
    return [head, ...tail].join('');
  }

// 这里TypeSpecifier的定义仅为示例，没有罗列出所有的类型定义
TypeSpecifier
  = "void" / "bool" / "string" / "int" / "short" / type: "unsigned" blank "int" { return type.join("") } 
    
blank
  = [ ]+ {
    return "";
  }

_ "whitespace"
  = ([ \t\n\r]) {
    return "";
  }

通过上面的规则，我们就可以得到结构化的struct了。

struct.png

接下来用类似的思路来定义interface的规则：

InterfaceDefinition "interface"
	= "interface" _+ id: Identifier _* "{" _* methods: MethodDeclaration+ _* "}" _* ";" _* {
    return {
    	id,
      type: "interface",
      methods
  	}
  }
  
MethodDeclaration "method"
	= returnType: TypeSpecifier _+ id: Identifier _* "(" _* params: ParameterDefinition _* ")" _* ";" _* {
    return {
    	id,
    	type: "method",
      returnType,
    	params
  	}
  }
  
ParameterDefinition
	= first: SingleParameterDefinition _* "," _* left: ParameterDefinition {
    return [first, ...left]
  } / 
  param: SingleParameterDefinition { return [param]; }
  
  
SingleParameterDefinition
	= "out" _+ type: (Identifier / TypeSpecifier)  _+ id: Identifier {
    return {
      id,
      io: "out",
      type
    }
  } 
  / 
  _* type: (Identifier / TypeSpecifier) _+ id: Identifier {
    return {
      id,
      io: "",
      type
    }
  }

那么就得到了解析后的接口方法定义：

interface.png

最后，将struct规则和interface规则进行整合后，就可以得到一个简单的Pegjs语法的JCE解析器了。

jce
	= module: ModuleDefinition { return module; }

ModuleDefinition
	= _* "module" _+ id: Identifier _* "{" _* value: ValueDefinition+ _* "}" _* ";" _* {
    return {
    	type: "module",
      id,
    	value,
  	}
  }
  
ValueDefinition = StructDefinition / InterfaceDefinition