这次我们来看一下angular的SandBoxing Angular Expressions。关于内置方法的，核心有两块：Lexer和Parser。其中大家对$parse可能更了解一点。好了不多废话，先看Lexer的内部结构：
1.Lexer
rush:js;">
//构造
函数
var Lexer = function(options) {
this.options = options;
};
//原型
Lexer.prototype = {
constructor: Lexer,lex: function(){},is: function(){},peek: function(){ /* 返回表达式的下
一个位置的数据，如果没有则返回false */ },isNumber: function(){ /* 判断当前表达式是否是
一个数字 */ },isWhitespace: function(){/* 判断当前表达式是否是空格符 */},isIdent: function(){/* 判断当前表达式是否是英
文字符(包含_和$) */},isExpOperator: function(){/* 判断当时表达式是否是-，+还是数字 */},throwError: function(){ /* 抛出异常 */},readNumber: function(){ /* 读取数字 */},readIdent: function(){ /* 读取字符 */},readString: function(){ /*读取携带''或""的字符串*/ }
};
这里指出一点，因为是表达式。所以类似"123"这类的东西，在Lexer看来应该算是数字而非字符串。表达式中的字符串必须使用单引号或者双引号来标识。Lexer的核心逻辑在lex方法中：
rush:js;">
lex: function(text) {
this.text = text;
this.index = 0;
this.tokens = [];
while (this.index < this.text.length) {
var ch = this.text.charat(this.index);
if (ch === '"' || ch === "'") {
/ 尝试判断是否是字符串 /
this.readString(ch);
} else if (this.isNumber(ch) || ch === '.' && this.isNumber(this.peek())) {
/ 尝试判断是否是数字 /
this.readNumber();
} else if (this.isIdent(ch)) {
/ 尝试判断是否是字母 /
this.readIdent();
} else if (this.is(ch,'(){}[].,;:?')) {
/ 判断是否是(){}[].,;:? /
this.tokens.push({index: this.index,text: ch});
this.index++;
} else if (this.isWhitespace(ch)) {
/ 判断是否是空白符 /
this.index++;
} else {
/ 尝试匹配操作运算 /
var ch2 = ch + this.peek();
var ch3 = ch2 + this.peek(2);
var op1 = OPERATORS[ch];
var op2 = OPERATORS[ch2];
var op3 = OPERATORS[ch3];
if (op1 || op2 || op3) {
var token = op3 ? ch3 : (op2 ? ch2 : ch);
this.tokens.push({index: this.index,text: token,operator: true});
this.index += token.length;
} else {
this.throwError('Unexpected next character ',this.index,this.index + 1);
}
}
}
return this.tokens;
}
主要看一下匹配操作运算。这里源码中会调用OPERATORS。看一下OPERATORS：
rush:js;">
var OPERATORS = extend(createMap(),{
'+':function(self,locals,a,b) {
a=a(self,locals); b=b(self,locals);
if (isDefined(a)) {
if (isDefined(b)) {
return a + b;
}
return a;
}
return isDefined(b) ? b : undefined;},'-':function(self,b) {
a=a(self,locals);
return (isDefined(a) ? a : 0) - (isDefined(b) ? b : 0);
},'*':function(self,b) {return a(self,locals) * b(self,locals);},'/':function(self,locals) / b(self,'%':function(self,locals) % b(self,'===':function(self,locals) === b(self,'!==':function(self,locals) !== b(self,'==':function(self,locals) == b(self,'!=':function(self,locals) != b(self,'<':function(self,locals) < b(self,'>':function(self,locals) > b(self,'<=':function(self,locals) <= b(self,'>=':function(self,locals) >= b(self,'&&':function(self,locals) && b(self,'||':function(self,locals) || b(self,'!':function(self,a) {return !a(self,//Tokenized as operators but parsed as assignment/filters
'=':true,'|':true
});
可以看到OPERATORS实际上存储的是操作符和操作符函数的键值对。根据操作符返回对应的操作符函数。我们看一下调用例子：
rush:js;">
var _l = new Lexer({});
var a = _l.lex("a = a + 1");
console.log(a);
结合之前的lex方法，我们来回顾下代码执行过程：
1.index指向'a'是一个字母。匹配isIdent成功。将生成的token存入tokens中
2.index指向空格符，匹配isWhitespace成功，同上
3.index指向=，匹配操作运算符成功，同上
4.index指向空格符，匹配isWhitespace成功，同上
5.index指向'a'是一个字母。匹配isIdent成功。同上
7.index指向+，匹配操作运算符成功，同上
8.index指向空格符，匹配isWhitespace成功，同上
9.index指向1，匹配数字成功，同上
以上则是"a = a + 1"的代码执行过程。9步执行结束之后，跳出while循环。刚才我们看到了，每次匹配成功，源码会生成一个token。因为匹配类型的不同，生成出来的token的键值对略有不同：
rush:js;">
number:{
index: start,text: number,constant: true,value: Number(number)
},string: {
index: start,text: rawString,value: string
},ident: {
index: start,text: this.text.slice(start,this.index),identifier: true /* 字符表示 */
},;:?': {
index: this.index,text: ch
},"操作符": {
index: this.index,operator: true
}
//text是表达式，而value才是实际的值
number和string其实都有相对应的真实值，意味着如果我们表达式是2e2，那number生成的token的值value就应该是200。到此我们通过lexer类获得了一个具有token值得数组。从外部看，实际上Lexer是将我们输入的表达式解析成了token json。可以理解为生成了表达式的语法树（AST）。但是目前来看，我们依旧还没有能获得我们定义表达式的结果。那就需要用到parser了。
2.Parser
先看一下Parser的内部结构：
rush:js;">
//构造
函数
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(){},arrayDecl
aration: function(){},object: function(){}
}
Parser的入口方法是parse，内部执行了statements方法。来看下statements：
0 && !this.peek('}',')',';',']'))
statements.push(this.filterChain());
if (!this.expect(';')) {
// optimize for the common case where there is only one statement.
// T
odo(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：
rush:js;">
filterChain: function() {
/* 针对angular语法的filter */
var left = this.expression();
var token;
while ((token = this.expect('|'))) {
left = this.filter(left);
}
return left;
}
其中filterChain是针对angular表达式独有的"|"filter写法设计的。我们先绕过这块，进入expression
rush:js;">
expression: function() {
return this.assignment();
}
再看assignment：
rush:js;">
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(s
cope,locals) {
return left.assign(s
cope,right(s
cope,locals),locals);
},{
inputs: [left,right]
});
}
return left;
}
我们看到了ternary方法。这是一个解析三目操作的方法。与此同时，assignment将表达式以=划分成left和right两块。并且两块都尝试执行ternary。
rush:js;">
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,{
constant: left.constant && middle.constant && right.constant
});
}
}
return left;
}
在解析三目运算之前，又根据?将表达式划分成left和right两块。左侧再去尝试执行logicalOR，实际上这是一个逻辑与的解析，按照这个执行流程，我们一下有了思路。这有点类似我们一般写三目时。代码的执行情况，比如： 2 > 2 ? 1 : 0。如果把这个当成表达式，那根据?划分left和right，left就应该是2 > 2，right应该就是 1: 0。然后尝试在left看是否有逻辑或的操作。也就是，Parser里面的方法调用的嵌套级数越深，其方法的优先级则越高。好，那我们一口气看看这个最高的优先级在哪？
logicalAND -> equality -> relational -> additive -> multiplicative -> unary
好吧，嵌套级数确实有点多。那么我们看下unary。
rush:js;">
unary: function() {
var token;
if (this.expect('+')) {
return this.primary();
} else if ((token = this.expect('-'))) {
return this.binaryFn(Parser.ZERO,token.text,this.unary());
} else if ((token = this.expect('!'))) {
return this.unaryFn(token.text,this.unary());
} else {
return this.primary();
}
}
这边需要看两个主要的方法，一个是binaryFn和primay。如果判断是-，则必须通过binaryFn去添加函数。看下binaryFn
rush:js;">
binaryFn: function(left,op,right,isBranching) {
var fn = OPERATORS[op];
return extend(function $parseBinaryFn(self,locals) {
return fn(self,left,right);
},{
constant: left.constant && right.constant,inputs: !isBranching && [left,right]
});
}
其中OPERATORS是之前聊Lexer也用到过，它根据操作符存储相应的操作函数。看一下fn(self,right)。而我们随便取OPERATORS中的一个例子：
rush:js;">
'-':function(self,locals);
return (isDefined(a) ? a : 0) - (isDefined(b) ? b : 0);
}
其中a和b就是left和right，他们其实都是返回的跟之前类似的$parseStatements方法。默认存储着token中的value。经过事先解析好的四则运算来生成最终答案。其实这就是Parser的基本功能。至于嵌套，我们可以把它理解为js的操作符的优先级。这样就一目了然了。至于primay方法。塔刷选{ ( 对象做进一步的解析过程。
Parser的代码并不复杂，只是函数方法间调用密切，让我们再看一个例子：
rush:js;">
var _l = new Lexer({});
var _p = new Parser(_l);
var a = _p.parse("1 + 1 + 2");
console.log(a()); //4
我们看下1+1+2生成的token是什么样的：
rush:js;">
[
{"index":0,"text":"1","constant":true,"value":1},{"index":2,"text":"+","operator":true},{"index":4,{"index":6,{"index":8,"text":"2","value":2}
]
Parser根据lexer生成的tokens尝试解析。tokens每一个成员都会生成一个函数，其先后执行逻辑按照用户输入的1+1+2的顺序执行。注意像1和2这类constants为true的token，parser会通过constant生成需要的函数$parseConstant，也就是说1+1+2中的两个1和一个2都是返回$parseConstant函数，通过$parseBinaryFn管理加法逻辑。
rush:js;">
constant: function() {
var value = this.consume().value;
return extend(function $parseConstant() {
return value; //这个函数执行之后，就是将value值返回。
},{
constant: true,literal: true
});
},binaryFn: function(left,isBranching) {
var fn = OPERATORS[op];//加法逻辑
return extend(function $parseBinaryFn(self,right);//left和right分别表示生成的对应函数
},right]
});
}
那我们demo中的a应该返回什么函数呢？当然是$parseBinaryFn。其中的left和right分别是1+1的$parseBinaryFn，right就是2的$parseConstant。
再来一个例子：
rush:js;">
var _l = new Lexer({});
var _p = new Parser(_l);
var a = _p.parse('{"name": "hello"}');
console.log(a);
这边我们传入一个json，理论上我们执行完a函数，应该返回一个{name: "hello"}的对象。它调用了Parser中的object
rush:js;">
object: function() {
var keys = [],valueFns = [];
if (this.peekToken().text !== '}') {
do {
if (this.peek('}')) {
// Support trailing commas per ES5.1.
break;
}
var token = this.consume();
if (token.constant) {
//把key取出来
keys.push(token.value);
} else if (token.identifier) {
keys.push(token.text);
} else {
this.throwError("invalid key",token);
}
this.consume(':');
//冒号之后，则是值，将值存在valueFns中
valueFns.push(this.expression());
//根据逗号去迭代下
一个
} while (this.expect(','));
}
this.consume('}');
return extend(function $par
SEObjectLi
teral(self,locals) {
var object = {};
for (var i = 0,ii = valueFns.length; i < ii; i++) {
object[keys[i]] = valueFns[i](self,locals);
}
return object;
},{
li
teral: true,constant: valueFns.every(isConstant),inputs: valueFns
});
}
比方我们的例子{"name": "hello"}，object会将name存在keys中，hello则会生成$parseConstant函数存在valueFns中，最终返回$parSEObjectLiternal函数。
下一个例子：
rush:js;">
var a = _p.parse('{"name": "hello"}["name"]');
这个跟上一个例子的差别在于后面尝试去读取name的值，这边则调用parser中的objectIndex方法。
rush:js;">
objectIndex: function(obj) {
var expression = this.text;
var indexFn = this.expression();
this.consume(']');
return extend(function $par
SEObjectIndex(self,locals) {
var o = obj(self,//par
SEObjectLi
teral，实际就是obj
i = indexFn(self,//$parseConstant，这里就是name
v;
ensureSafeMemberName(i,expression);
if (!o) return undefined;
v = ensureSafeObject(o[i],expression);
return v;
},{
assign: function(self,value,locals) {
var key = ensureSafeMemberName(indexFn(self,expression);
// prevent overwriting of Function.constructor which would break ensureSafeObject check
var o = ensureSafeObject(obj(self,expression);
if (!o) obj.assign(self,o = {},locals);
return o[key] = value;
}
});
}
很简单吧，obj[xx]和obj.x类似。大家自行阅读，我们再看一个函数调用的demo
rush:js;">
var _l = new Lexer({});
var _p = new Parser(_l,'',{});
var demo = {
"test": function(){
alert("welcome");
}
};
var a = _p.parse('
test()');
console.log(a(demo));
我们传入一个test的调用。这边调用了parser中的functionCall方法和identifier方法
rush:js;">
identifier: function() {
var id = this.consume().text;
//Continue reading each `.identifier` unless it is a method invocation
while (this.peek('.') && this.peekAhead(1).identifier && !this.peekAhead(2,'(')) {
id += this.consume().text + this.consume().text;
}
return getterFn(id,this.options,this.text);
}
看一下getterFn方法
rush:js;">
...
forEach(pathKeys,function(key,index) {
ensureSafeMemberName(key,fullExp);
var lookupJs = (index
// we simply dereference 's' on any .dot notation
? 's'
// but if we are f
irst then we check locals f
irst,and if so read it f
irst
: '((l&&l.hasOwnProperty("' + key + '"))?l:s)') + '.' + key;
if (expensiveChecks || isPossiblyDangerousMemberName(key)) {
lookupJs = 'eso(' + lookupJs + ',fe)';
needsEnsureSafeObject = true;
}
code += 'if(s == null) return undefined;\n' +
's=' + lookupJs + ';\n';
});
code += 'return s;';
/* jshint -W054 */
var evaledFnGetter = new Function('s','l','eso','fe',code); // s=s
cope,l=locals,eso=ensureSafeObject
/* jshint +W054 */
evaledFnGetter.toString = valueFn(code);
...
这是通过字符串创建一个匿名函数的方法。我们看下demo的test生成了一个什么匿名函数：
rush:js;">
function('s','fe'){
if(s == null) return undefined;
s=((l&&l.hasOwnProperty("test"))?l:s).test;
return s;
}
这个匿名函数的意思，需要传入一个上下文，匿名函数通过查找上下文中是否有test属性，如果没有传上下文则直接返回未定义。这也就是为什么我们在生成好的a函数在执行它时需要传入demo对象的原因。最后补一个functionCall
rush:js;">
functionCall: function(fnGetter,contextGetter) {
var argsFn = [];
if (this.peekToken().text !== ')') {
/* 确认
调用时有入参 */
do {
//形参存入argsFn
argsFn.push(this.expression());
} while (this.expect(','));
}
this.consume(')');
var expressionText = this.text;
// we can safely reuse the array across invocations
var args = argsFn.length ? [] : null;
return function $parseFunctionCall(s
cope,locals) {
var context = contextGetter ? contextGetter(s
cope,locals) : isDefined(contextGetter) ? undefined : s
cope;
//或者之前创建
生成的匿名
函数
var fn = fnGetter(s
cope,context) || noop;
if (args) {
var i = argsFn.length;
while (i--) {
args[i] = ensureSafeObject(argsFn[i](s
cope,expressionText);
}
}
ensureSafeObject(context,expressionText);
ensureSafeFunction(fn,expressionText);
// IE doesn't have apply for some native functions
//执行匿名
函数的时候需要传入上下文
var v = fn.apply
? fn.apply(context,args)
: fn(args[0],args[1],args[2],args[3],args[4]);
if (args) {
// Free-up the memory (arguments of the last function call).
args.length = 0;
}
return ensureSafeObject(v,expressionText);
};
}
下面我们看一下$ParseProvider，这是一个基于Lex和Parser函数的angular内置provider。它对scope的api提供了基础支持。
rush:js;">
...
return function $parse(exp,interceptorFn,expensiveChecks) {
var parsedExpression,oneTime,cacheKey;
switch (typeof exp) {
case 'string':
cacheKey = exp = exp.trim();
var cache = (expensiveChecks ? cacheExpensive : cacheDefault);
parsedExpression = cache[cacheKey];
if (!parsedExpression) {
if (exp.ch
arat(0) === ':' && exp.ch
arat(1) === ':') {
oneTime = true;
exp = exp.substring(2);
}
var par
SEOptions = expensiveChecks ? $par
SEOptionsExpensive : $par
SEOptions;
//
调用lexer和parser
var lexer = new Lexer(par
SEOptions);
var parser = new Parser(lexer,par
SEOptions);
parsedExpression = parser.parse(exp);
//
添加$$watchDelegate,为s
cope部分提供
支持
if (parsedExpression.constant) {
parsedExpression.$$watchDelegate = constantWatchDelegate;
} else if (oneTime) {
//oneTime is not part of the exp passed to the Parser so we may have to
//wrap the parsedExpression before adding a $$watchDelegate
parsedExpression = wrapSharedExpression(parsedExpression);
parsedExpression.$$watchDelegate = parsedExpression.li
teral ?
oneTimeLi
teralWatchDelegate : oneTimeWatchDelegate;
} else if (parsedExpression.inputs) {
parsedExpression.$$watchDelegate = inputsWatchDelegate;
}
//做相关缓存
cache[cacheKey] = parsedExpression;
}
return addInterceptor(parsedExpression,interceptorFn);
case 'function':
return addInterceptor(exp,interceptorFn);
default:
return addInterceptor(noop,interceptorFn);
}
};
总结：Lexer和Parser的实现确实让我大开眼界。通过这两个函数，实现了angular自己的语法解析器。逻辑部分还是相对复杂
以上所述是小编给大家介绍的Angularjs 1.3 中的$parse实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
