Angularjs 1.3 中的$parse实例代码(2)

以上则是"a = a + 1"的代码执行过程。9步执行结束之后,跳出while循环。刚才我们看到了,每次匹配成功,源码会生成一个token。因为匹配类型的不同,生成出来的token的键值对略有不同:

number:{ index: start, text: number, constant: true, value: Number(number) }, string: { index: start, text: rawString, constant: true, value: string }, ident: { index: start, text: this.text.slice(start, this.index), identifier: true /* 字符表示 */ }, '(){}[].,;:?': { index: this.index, text: ch }, "操作符": { index: this.index, text: token, operator: true } //text是表达式,而value才是实际的值

number和string其实都有相对应的真实值,意味着如果我们表达式是2e2,那number生成的token的值value就应该是200。到此我们通过lexer类获得了一个具有token值得数组。从外部看,实际上Lexer是将我们输入的表达式解析成了token json。可以理解为生成了表达式的语法树(AST)。但是目前来看,我们依旧还没有能获得我们定义表达式的结果。那就需要用到parser了。

2.Parser

先看一下Parser的内部结构:

//构造函数 var Parser = function(lexer, $filter, options) { this.lexer = lexer; this.$filter = $filter; this.options = options; }; //原型 Parser.prototype = { constructor: Parser, parse: function(){}, primary: function(){}, throwError: function(){ /* 语法抛错 */}, peekToken: function(){}, peek: function(){/*返回tokens中的第一个成员对象 */}, peekAhead: function(){ /* 返回tokens中指定成员对象,否则返回false */}, expect: function(){ /* 取出tokens中第一个对象,否则返回false */ }, consume: function(){ /* 取出第一个,底层调用expect */ }, unaryFn: function(){ /* 一元操作 */}, binaryFn: function(){ /* 二元操作 */}, identifier: function(){}, constant: function(){}, statements: function(){}, filterChain: function(){}, filter: function(){}, expression: function(){}, assignment: function(){}, ternary: function(){}, logicalOR: function(){ /* 逻辑或 */}, logicalAND: function(){ /* 逻辑与 */ }, equality: function(){ /* 等于 */ }, relational: function(){ /* 比较关系 */ }, additive: function(){ /* 加法,减法 */ }, multiplicative: function(){ /* 乘法,除法,求余 */ }, unary: function(){ /* 一元 */ }, fieldAccess: function(){}, objectIndex: function(){}, functionCall: function(){}, arrayDeclaration: function(){}, object: function(){} }

Parser的入口方法是parse,内部执行了statements方法。来看下statements:

statements: function() { var statements = []; while (true) { if (this.tokens.length > 0 && !this.peek('}', ')', ';', ']')) statements.push(this.filterChain()); if (!this.expect(';')) { // optimize for the common case where there is only one statement. // TODO(size): maybe we should not support multiple statements? return (statements.length === 1) ? statements[0] : function $parseStatements(self, locals) { var value; for (var i = 0, ii = statements.length; i < ii; i++) { value = statements[i](self, locals); } return value; }; } } }

这里我们将tokens理解为表达式,实际上它就是经过表达式通过lexer转换过来的。statements中。如果表达式不以},),;,]开头,将会执行filterChain方法。当tokens检索完成之后,最后返回了一个$parseStatements方法。其实Parser中很多方法都返回了类似的对象,意味着返回的内容将需要执行后才能得到结果。

看一下filterChain:

filterChain: function() { /* 针对angular语法的filter */ var left = this.expression(); var token; while ((token = this.expect('|'))) { left = this.filter(left); } return left; }

其中filterChain是针对angular表达式独有的"|"filter写法设计的。我们先绕过这块,进入expression

expression: function() { return this.assignment(); }

再看assignment:

assignment: function() { var left = this.ternary(); var right; var token; if ((token = this.expect('='))) { if (!left.assign) { this.throwError('implies assignment but [' + this.text.substring(0, token.index) + '] can not be assigned to', token); } right = this.ternary(); return extend(function $parseAssignment(scope, locals) { return left.assign(scope, right(scope, locals), locals); }, { inputs: [left, right] }); } return left; }

我们看到了ternary方法。这是一个解析三目操作的方法。与此同时,assignment将表达式以=划分成left和right两块。并且两块都尝试执行ternary。

ternary: function() { var left = this.logicalOR(); var middle; var token; if ((token = this.expect('?'))) { middle = this.assignment(); if (this.consume(':')) { var right = this.assignment(); return extend(function $parseTernary(self, locals) { return left(self, locals) ? middle(self, locals) : right(self, locals); }, { constant: left.constant && middle.constant && right.constant }); } } return left; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygydw.html