今天就跟大家聊聊有關(guān)$parse如何在Angularjs 1.3 中使用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)從2013年開始,先為鎮(zhèn)康等服務(wù)建站,鎮(zhèn)康等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鎮(zhèn)康企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
1.Lexer
//構(gòu)造函數(shù) var Lexer = function(options) { this.options = options; }; //原型 Lexer.prototype = { constructor: Lexer, lex: function(){}, is: function(){}, peek: function(){ /* 返回表達(dá)式的下一個(gè)位置的數(shù)據(jù),如果沒有則返回false */ }, isNumber: function(){ /* 判斷當(dāng)前表達(dá)式是否是一個(gè)數(shù)字 */ }, isWhitespace: function(){/* 判斷當(dāng)前表達(dá)式是否是空格符 */}, isIdent: function(){/* 判斷當(dāng)前表達(dá)式是否是英文字符(包含_和$) */}, isExpOperator: function(){/* 判斷當(dāng)時(shí)表達(dá)式是否是-,+還是數(shù)字 */}, throwError: function(){ /* 拋出異常 */}, readNumber: function(){ /* 讀取數(shù)字 */}, readIdent: function(){ /* 讀取字符 */}, readString: function(){ /*讀取攜帶''或""的字符串*/ } };
這里指出一點(diǎn),因?yàn)槭潜磉_(dá)式。所以類似"123"這類的東西,在Lexer看來應(yīng)該算是數(shù)字而非字符串。表達(dá)式中的字符串必須使用單引號(hào)或者雙引號(hào)來標(biāo)識(shí)。Lexer的核心邏輯在lex方法中:
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())) { /* 嘗試判斷是否是數(shù)字 */ 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 { /* 嘗試匹配操作運(yùn)算 */ var ch3 = ch + this.peek(); var ch4 = ch3 + this.peek(2); var op1 = OPERATORS[ch]; var op2 = OPERATORS[ch3]; var op3 = OPERATORS[ch4]; if (op1 || op2 || op3) { var token = op3 ? ch4 : (op2 ? ch3 : 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; }
主要看一下匹配操作運(yùn)算。這里源碼中會(huì)調(diào)用OPERATORS??匆幌翺PERATORS:
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, locals, a, b) { a=a(self, locals); b=b(self, locals); return (isDefined(a) ? a : 0) - (isDefined(b) ? b : 0); }, '*':function(self, locals, a, b) {return a(self, locals) * b(self, locals);}, '/':function(self, locals, a, b) {return a(self, locals) / b(self, locals);}, '%':function(self, locals, a, b) {return a(self, locals) % b(self, locals);}, '===':function(self, locals, a, b) {return a(self, locals) === b(self, locals);}, '!==':function(self, locals, a, b) {return a(self, locals) !== b(self, locals);}, '==':function(self, locals, a, b) {return a(self, locals) == b(self, locals);}, '!=':function(self, locals, a, b) {return a(self, locals) != b(self, locals);}, '<':function(self, locals, a, b) {return a(self, locals) < b(self, locals);}, '>':function(self, locals, a, b) {return a(self, locals) > b(self, locals);}, '<=':function(self, locals, a, b) {return a(self, locals) <= b(self, locals);}, '>=':function(self, locals, a, b) {return a(self, locals) >= b(self, locals);}, '&&':function(self, locals, a, b) {return a(self, locals) && b(self, locals);}, '||':function(self, locals, a, b) {return a(self, locals) || b(self, locals);}, '!':function(self, locals, a) {return !a(self, locals);}, //Tokenized as operators but parsed as assignment/filters '=':true, '|':true });
可以看到OPERATORS實(shí)際上存儲(chǔ)的是操作符和操作符函數(shù)的鍵值對(duì)。根據(jù)操作符返回對(duì)應(yīng)的操作符函數(shù)。我們看一下調(diào)用例子:
var _l = new Lexer({}); var a = _l.lex("a = a + 1"); console.log(a);
結(jié)合之前的lex方法,我們來回顧下代碼執(zhí)行過程:
1.index指向'a'是一個(gè)字母。匹配isIdent成功。將生成的token存入tokens中
2.index指向空格符,匹配isWhitespace成功,同上
3.index指向=,匹配操作運(yùn)算符成功,同上
4.index指向空格符,匹配isWhitespace成功,同上
5.index指向'a'是一個(gè)字母。匹配isIdent成功。同上
7.index指向+,匹配操作運(yùn)算符成功,同上
8.index指向空格符,匹配isWhitespace成功,同上
9.index指向1,匹配數(shù)字成功,同上
以上則是"a = a + 1"的代碼執(zhí)行過程。9步執(zhí)行結(jié)束之后,跳出while循環(huán)。剛才我們看到了,每次匹配成功,源碼會(huì)生成一個(gè)token。因?yàn)槠ヅ漕愋偷牟煌?,生成出來的token的鍵值對(duì)略有不同:
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是表達(dá)式,而value才是實(shí)際的值
number和string其實(shí)都有相對(duì)應(yīng)的真實(shí)值,意味著如果我們表達(dá)式是2e2,那number生成的token的值value就應(yīng)該是200。到此我們通過lexer類獲得了一個(gè)具有token值得數(shù)組。從外部看,實(shí)際上Lexer是將我們輸入的表達(dá)式解析成了token json??梢岳斫鉃樯闪吮磉_(dá)式的語法樹(AST)。但是目前來看,我們依舊還沒有能獲得我們定義表達(dá)式的結(jié)果。那就需要用到parser了。
2.Parser
先看一下Parser的內(nèi)部結(jié)構(gòu):
//構(gòu)造函數(shù) 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(){ /* 語法拋錯(cuò) */}, peekToken: function(){}, peek: function(){/*返回tokens中的第一個(gè)成員對(duì)象 */}, peekAhead: function(){ /* 返回tokens中指定成員對(duì)象,否則返回false */}, expect: function(){ /* 取出tokens中第一個(gè)對(duì)象,否則返回false */ }, consume: function(){ /* 取出第一個(gè),底層調(diào)用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(){ /* 比較關(guān)系 */ }, additive: function(){ /* 加法,減法 */ }, multiplicative: function(){ /* 乘法,除法,求余 */ }, unary: function(){ /* 一元 */ }, fieldAccess: function(){}, objectIndex: function(){}, functionCall: function(){}, arrayDeclaration: function(){}, object: function(){} }
Parser的入口方法是parse,內(nèi)部執(zhí)行了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理解為表達(dá)式,實(shí)際上它就是經(jīng)過表達(dá)式通過lexer轉(zhuǎn)換過來的。statements中。如果表達(dá)式不以},),;,]開頭,將會(huì)執(zhí)行filterChain方法。當(dāng)tokens檢索完成之后,最后返回了一個(gè)$parseStatements方法。其實(shí)Parser中很多方法都返回了類似的對(duì)象,意味著返回的內(nèi)容將需要執(zhí)行后才能得到結(jié)果。
看一下filterChain:
filterChain: function() { /* 針對(duì)angular語法的filter */ var left = this.expression(); var token; while ((token = this.expect('|'))) { left = this.filter(left); } return left; }
其中filterChain是針對(duì)angular表達(dá)式獨(dú)有的"|"filter寫法設(shè)計(jì)的。我們先繞過這塊,進(jìn)入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方法。這是一個(gè)解析三目操作的方法。與此同時(shí),assignment將表達(dá)式以=劃分成left和right兩塊。并且兩塊都嘗試執(zhí)行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; }
在解析三目運(yùn)算之前,又根據(jù)?將表達(dá)式劃分成left和right兩塊。左側(cè)再去嘗試執(zhí)行l(wèi)ogicalOR,實(shí)際上這是一個(gè)邏輯與的解析,按照這個(gè)執(zhí)行流程,我們一下有了思路。這有點(diǎn)類似我們一般寫三目時(shí)。代碼的執(zhí)行情況,比如: 2 > 2 ? 1 : 0。如果把這個(gè)當(dāng)成表達(dá)式,那根據(jù)?劃分left和right,left就應(yīng)該是2 > 2,right應(yīng)該就是 1: 0。然后嘗試在left看是否有邏輯或的操作。也就是,Parser里面的方法調(diào)用的嵌套級(jí)數(shù)越深,其方法的優(yōu)先級(jí)則越高。好,那我們一口氣看看這個(gè)最高的優(yōu)先級(jí)在哪?
logicalOR -> logicalAND -> equality -> relational -> additive -> multiplicative -> unary
好吧,嵌套級(jí)數(shù)確實(shí)有點(diǎn)多。那么我們看下unary。
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(); } }
這邊需要看兩個(gè)主要的方法,一個(gè)是binaryFn和primay。如果判斷是-,則必須通過binaryFn去添加函數(shù)??聪耣inaryFn
binaryFn: function(left, op, right, isBranching) { var fn = OPERATORS[op]; return extend(function $parseBinaryFn(self, locals) { return fn(self, locals, left, right); }, { constant: left.constant && right.constant, inputs: !isBranching && [left, right] }); }
其中OPERATORS是之前聊Lexer也用到過,它根據(jù)操作符存儲(chǔ)相應(yīng)的操作函數(shù)??匆幌耭n(self, locals, left, right)。而我們隨便取OPERATORS中的一個(gè)例子:
'-':function(self, locals, a, b) { a=a(self, locals); b=b(self, locals); return (isDefined(a) ? a : 0) - (isDefined(b) ? b : 0); }
其中a和b就是left和right,他們其實(shí)都是返回的跟之前類似的$parseStatements方法。默認(rèn)存儲(chǔ)著token中的value。經(jīng)過事先解析好的四則運(yùn)算來生成最終答案。其實(shí)這就是Parser的基本功能。至于嵌套,我們可以把它理解為js的操作符的優(yōu)先級(jí)。這樣就一目了然了。至于primay方法。塔刷選{ ( 對(duì)象做進(jìn)一步的解析過程。
Parser的代碼并不復(fù)雜,只是函數(shù)方法間調(diào)用密切,讓我們?cè)倏匆粋€(gè)例子:
var _l = new Lexer({}); var _p = new Parser(_l); var a = _p.parse("1 + 1 + 2"); console.log(a()); //4
我們看下1+1+2生成的token是什么樣的:
[ {"index":0,"text":"1","constant":true,"value":1},{"index":2,"text":"+","operator":true},{"index":4,"text":"1","constant":true,"value":1},{"index":6,"text":"+","operator":true},{"index":8,"text":"2","constant":true,"value":2} ]
Parser根據(jù)lexer生成的tokens嘗試解析。tokens每一個(gè)成員都會(huì)生成一個(gè)函數(shù),其先后執(zhí)行邏輯按照用戶輸入的1+1+2的順序執(zhí)行。注意像1和2這類constants為true的token,parser會(huì)通過constant生成需要的函數(shù)$parseConstant,也就是說1+1+2中的兩個(gè)1和一個(gè)2都是返回$parseConstant函數(shù),通過$parseBinaryFn管理加法邏輯。
constant: function() { var value = this.consume().value; return extend(function $parseConstant() { return value; //這個(gè)函數(shù)執(zhí)行之后,就是將value值返回。 }, { constant: true, literal: true }); }, binaryFn: function(left, op, right, isBranching) { var fn = OPERATORS[op];//加法邏輯 return extend(function $parseBinaryFn(self, locals) { return fn(self, locals, left, right);//left和right分別表示生成的對(duì)應(yīng)函數(shù) }, { constant: left.constant && right.constant, inputs: !isBranching && [left, right] }); }
那我們demo中的a應(yīng)該返回什么函數(shù)呢?當(dāng)然是$parseBinaryFn。其中的left和right分別是1+1的$parseBinaryFn,right就是2的$parseConstant。
再來一個(gè)例子:
var _l = new Lexer({}); var _p = new Parser(_l); var a = _p.parse('{"name": "hello"}'); console.log(a);
這邊我們傳入一個(gè)json,理論上我們執(zhí)行完a函數(shù),應(yīng)該返回一個(gè){name: "hello"}的對(duì)象。它調(diào)用了Parser中的object
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(':'); //冒號(hào)之后,則是值,將值存在valueFns中 valueFns.push(this.expression()); //根據(jù)逗號(hào)去迭代下一個(gè) } while (this.expect(',')); } this.consume('}'); return extend(function $parseObjectLiteral(self, locals) { var object = {}; for (var i = 0, ii = valueFns.length; i < ii; i++) { object[keys[i]] = valueFns[i](self, locals); } return object; }, { literal: true, constant: valueFns.every(isConstant), inputs: valueFns }); }
比方我們的例子{"name": "hello"},object會(huì)將name存在keys中,hello則會(huì)生成$parseConstant函數(shù)存在valueFns中,最終返回$parseObjectLiternal函數(shù)。
下一個(gè)例子:
var a = _p.parse('{"name": "hello"}["name"]');
這個(gè)跟上一個(gè)例子的差別在于后面嘗試去讀取name的值,這邊則調(diào)用parser中的objectIndex方法。
objectIndex: function(obj) { var expression = this.text; var indexFn = this.expression(); this.consume(']'); return extend(function $parseObjectIndex(self, locals) { var o = obj(self, locals), //parseObjectLiteral,實(shí)際就是obj i = indexFn(self, locals), //$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, locals), expression); // prevent overwriting of Function.constructor which would break ensureSafeObject check var o = ensureSafeObject(obj(self, locals), expression); if (!o) obj.assign(self, o = {}, locals); return o[key] = value; } }); }
很簡(jiǎn)單吧,obj[xx]和obj.x類似。大家自行閱讀,我們?cè)倏匆粋€(gè)函數(shù)調(diào)用的demo
var _l = new Lexer({}); var _p = new Parser(_l, '', {}); var demo = { "test": function(){ alert("welcome"); } }; var a = _p.parse('test()'); console.log(a(demo));
我們傳入一個(gè)test的調(diào)用。這邊調(diào)用了parser中的functionCall方法和identifier方法
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方法
... forEach(pathKeys, function(key, index) { ensureSafeMemberName(key, fullExp); var lookupJs = (index // we simply dereference 's' on any .dot notation ? 's' // but if we are first then we check locals first, and if so read it first : '((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=scope, l=locals, eso=ensureSafeObject /* jshint +W054 */ evaledFnGetter.toString = valueFn(code); ...
這是通過字符串創(chuàng)建一個(gè)匿名函數(shù)的方法。我們看下demo的test生成了一個(gè)什么匿名函數(shù):
function('s', 'l', 'eso', 'fe'){ if(s == null) return undefined; s=((l&&l.hasOwnProperty("test"))?l:s).test; return s; }
這個(gè)匿名函數(shù)的意思,需要傳入一個(gè)上下文,匿名函數(shù)通過查找上下文中是否有test屬性,如果沒有傳上下文則直接返回未定義。這也就是為什么我們?cè)谏珊玫腶函數(shù)在執(zhí)行它時(shí)需要傳入demo對(duì)象的原因。最后補(bǔ)一個(gè)functionCall
functionCall: function(fnGetter, contextGetter) { var argsFn = []; if (this.peekToken().text !== ')') { /* 確認(rèn)調(diào)用時(shí)有入?yún)?nbsp;*/ 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(scope, locals) { var context = contextGetter ? contextGetter(scope, locals) : isDefined(contextGetter) ? undefined : scope; //或者之前創(chuàng)建生成的匿名函數(shù) var fn = fnGetter(scope, locals, context) || noop; if (args) { var i = argsFn.length; while (i--) { args[i] = ensureSafeObject(argsFn[i](scope, locals), expressionText); } } ensureSafeObject(context, expressionText); ensureSafeFunction(fn, expressionText); // IE doesn't have apply for some native functions //執(zhí)行匿名函數(shù)的時(shí)候需要傳入上下文 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,這是一個(gè)基于Lex和Parser函數(shù)的angular內(nèi)置provider。它對(duì)scope的api提供了基礎(chǔ)支持。
... 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.charAt(0) === ':' && exp.charAt(1) === ':') { oneTime = true; exp = exp.substring(2); } var parseOptions = expensiveChecks ? $parseOptionsExpensive : $parseOptions; //調(diào)用lexer和parser var lexer = new Lexer(parseOptions); var parser = new Parser(lexer, $filter, parseOptions); parsedExpression = parser.parse(exp); //添加$$watchDelegate,為scope部分提供支持 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.literal ? oneTimeLiteralWatchDelegate : oneTimeWatchDelegate; } else if (parsedExpression.inputs) { parsedExpression.$$watchDelegate = inputsWatchDelegate; } //做相關(guān)緩存 cache[cacheKey] = parsedExpression; } return addInterceptor(parsedExpression, interceptorFn); case 'function': return addInterceptor(exp, interceptorFn); default: return addInterceptor(noop, interceptorFn); } };
看完上述內(nèi)容,你們對(duì)$parse如何在Angularjs 1.3 中使用有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。