forked from ygs-code/vue
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparseFilters.html
238 lines (214 loc) · 8.63 KB
/
parseFilters.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
匹配 ) 或 . 或 + 或 - 或 _ 或 $ 或 ]
*/
var validDivisionCharRE = /[\w).+\-_$\]]/;
/*处理value 解析成正确的value，把过滤器 转换成vue 虚拟dom的解析方法函数
* 表达式中的过滤器解析 方法
* @param {*} exp
*/
console.log(parseFilters(' ab | c | d'))
function parseFilters(exp) {
// 是否在 ''中
var inSingle = false;
// 是否在 "" 中
var inDouble = false;
// 是否在 ``
var inTemplateString = false;
// 是否在 正则 \\ 中
var inRegex = false;
// 是否在 {{ 中发现一个 culy加1 然后发现一个 } culy减1 直到culy为0 说明 { .. }闭合
var curly = 0;
// 跟{{ 一样 有一个 [ 加1 有一个 ] 减1
var square = 0;
// 跟{{ 一样 有一个 ( 加1 有一个 ) 减1
var paren = 0;
var lastFilterIndex = 0;
var c, prev, i, expression, filters;
for (i = 0; i < exp.length; i++) {
prev = c;
c = exp.charCodeAt(i);
console.log('c ='+exp[i])
console.log('c === 0x7C='+(c === 0x7C))
console.log('exp.charCodeAt(i + 1) !== 0x7C='+(exp.charCodeAt(i + 1) !== 0x7C) )
console.log('exp.charCodeAt(i - 1) !== 0x7C='+(exp.charCodeAt(i - 1) !== 0x7C))
console.log('curly='+(curly))
console.log('!curly='+(!curly))
console.log('square='+(square ))
console.log('!square='+(!square ))
console.log('!paren='+(!paren))
console.log('最后一个='+( c === 0x7C && // pipe
exp.charCodeAt(i + 1) !== 0x7C &&
exp.charCodeAt(i - 1) !== 0x7C && !curly && !square && !paren))
if (inSingle) {
// ' \
if (c === 0x27 && prev !== 0x5C) {
inSingle = false;
}
} else if (inDouble) {
// " \
if (c === 0x22 && prev !== 0x5C) {
inDouble = false;
}
} else if (inTemplateString) {
// `
if (c === 0x60 && prev !== 0x5C) {
inTemplateString = false;
}
} else if (inRegex) {
// 当前在正则表达式中 /开始
// / \
if (c === 0x2f && prev !== 0x5C) {
inRegex = false;
}
} else if (
// 如果在 之前不在 ' " ` / 即字符串 或者正则中
// 那么就判断 当前字符是否是 |
// 如果当前 字符为 |
// 且 不在 { } 对象中
// 且 不在 [] 数组中
// 且不在 () 中
// 那么说明此时是过滤器的一个 分界点
c === 0x7C && // |
exp.charCodeAt(i + 1) !== 0x7C &&
exp.charCodeAt(i - 1) !== 0x7C && !curly && !square && !paren
) {
/*
如果前面没有表达式那么说明这是第一个 管道符号 "|"
再次遇到 | 因为前面 expression = 'message '
执行 pushFilter()
*/
if (expression === undefined) {
// first filter, end of expression
// 过滤器表达式 就是管道符号之后开始
lastFilterIndex = i + 1;
// 存储过滤器的 表达式
expression = exp.slice(0, i).trim(); //这里匹配如果字符串是 'ab|c' 则把ab匹配出来
console.log(expression)
debugger
} else {
pushFilter();
}
} else {
switch (c) {
case 0x22:
inDouble = true;
break // 匹配"
case 0x27:
inSingle = true;
break // 匹配'
case 0x60:
inTemplateString = true;
break // 匹配`
case 0x28:
paren++;
break // 匹配(
case 0x29:
paren--;
break // 匹配)
case 0x5B:
square++;
break // 匹配[
case 0x5D:
square--;
break // 匹配]
case 0x7B:
curly++;
break // 匹配 {
case 0x7D:
curly--;
break // 匹配 }
case 0x5C:
break // 匹配 \
case 0x2f:
break; // 匹配 /
case 0x7C: // 匹配 |
break;
}
if (c === 0x2f) { // /
var j = i - 1;
var p = (void 0);
// find first non-whitespace prev char
//查找第一个非空白的prev字符
for (; j >= 0; j--) {
p = exp.charAt(j);
if (p !== ' ') {
break
}
}
if (!p || !validDivisionCharRE.test(p)) {
inRegex = true;
}
}
}
}
if (expression === undefined) {
expression = exp.slice(0, i).trim();
} else if (lastFilterIndex !== 0) {
pushFilter();
}
// 获取当前过滤器的 并将其存储在filters 数组中
// filters = [ 'filterA' , 'filterB']
function pushFilter() {
(filters || (filters = [])).push(exp.slice(lastFilterIndex, i).trim());
lastFilterIndex = i + 1;
}
if (filters) {
console.log(filters)
for (i = 0; i < filters.length; i++) {
//把过滤器封装成函数 虚拟dom需要渲染的函数
expression = wrapFilter(expression, filters[i]);
}
}
console.log(expression)
//返回值
return expression
}
/*
生成过滤器的 表达式字符串
如上面的
exp = message
filters = ['filterA','filterB(arg1,arg2)']
第一步 以exp 为入参 生成 filterA 的过滤器表达式字符串 _f("filterA")(message)
第二步 以第一步字符串作为入参 生成第二个过滤器的表达式字符串 _f("filterB")(_f("filterA")(message),arg1,arg2)
=> _f("filterB")(_f("filterA")(message),arg1,arg2)
* @param {string} exp 上一个过滤器的值 没有就是 表达式的值
* @param {string} filter
* @returns {string}
*/
// console.log(wrapFilter('abc','defg(hijk)')) //结果 _f("defg")(abc,hijk)
function wrapFilter(exp, filter) {
var i = filter.indexOf('('); //返回字符串第一次出现索引的位置
console.log('i='+i)
if (i < 0) {
// _f: resolveFilter
return ("_f(\"" + filter + "\")(" + exp + ")") //闭包
} else {
//name 是 从字符串开始到(结束的字符串,不包含(
var name = filter.slice(0, i); //截取字符串 arrayObject.slice(start,end)
console.log('==name==')
console.log(name)
//args是从(开始匹配，到字符串末端，不包含(
var args = filter.slice(i + 1); //如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
console.log('==args==')
console.log(args)
return (
"_f(\"" + name + "\")(" + exp +
(
args !== ')' ?
',' + args
: args
)
)
}
}
</script>
</body>
</html>