The above explores the source code of Vue: mustache template engine (9) Convert single-layer no-like result tokens into DOM strings We simply processed the business logic of token conversion into strings , but we only dealt with
the cheapest curly braces
Let’s also deal with the number sign.
Let’s open the project and change the index.html code in www back to what it was before.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "/xuni/bundle.js"></script>
<script>
let templateStr = `
<div>
{
{#students}}
<ul>
<li>{
{ item.name }}</li>
{
{#item.list}}
<li>{
{ . }}</li>
{
{/item.list}}
</ul>
{
{/students}}
</div>
`;
let data = {
name: "小猫猫",
age: 2,
students: [
{
id: 0,
name: "小明",
list: [
"篮球",
"唱",
"跳"
]
},
{
id: 1,
name: "小红",
list: [
"电子游戏",
"计算机编程"
]
}
]
}
GrManagData.render(templateStr,data);
</script>
</body>
</html>
Let's deal with this loop nested structure
Then when we run the project, we will find that there is a problem with the number sign, which cannot be handled.
Here we obviously cannot handle it with a parallel structure, and recursion is required.
First of all, we can think of a very simple idea. Without the number sign,
we call renderTemplate. Isn't it possible to call this renderTemplate recursively?
Is the idea very simple?
But before writing recursion, we have to solve a problem first
For example, we changed the index.html under www
to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "/xuni/bundle.js"></script>
<script>
let templateStr = `
<div>
我超喜欢我家的{
{name}}，我家{
{name}}也超喜欢我，它今年{
{a.b.c}}岁啦
</div>
`;
let data = {
name: "小猫猫",
a: {
b: {
c: 2
}
}
}
GrManagData.render(templateStr,data);
</script>
</body>
</html>
In this way, we used the c object under the b object under the a object in the data,
and then we ran the project,
and it became undefined directly because it could not recognize the point
. way to identify
In fact, we can print it to see what the name generated by abc here is.
Here we use console.log to see what is inside.
That's right, what you got here is indeed abc
, but your current grammar is equivalent to
data["a.b.c"]
Here we js brackets only support direct subscripting. He doesn’t know the grammar of our point and he won’t help you find it. So there is a
problem here
. Really,
let’s create a lookup.js under src
first . Put a piece of code like this
/*
可以在data中，用连续点符号的形式找到对应键值
*/
export default function lookup(data,keyName) {
}
First expose a function.
This function requires two parameters. The first is the total data. If you are looking for it, you must give the total data, right?
Then the second parameter is the field name. For example, abc
can get the object of the object of the object after writing this function.
We change the lookup content to this
/*
可以在data中，用连续点符号的形式找到对应键值
*/
export default function lookup(data,keyName) {
//判断keyName字符串中是否有 . 符号
if(keyName.indexOf(".") > 0) {
//将keyName按点拆分成数组
var names = keyName.split('.');
//存一个 指向 data 的临时变量
let temp = data;
//循环遍历 用点拆分开的数组names
for(let i = 0;i < names.length;i++) {
// 一层一层寻找对应字段
temp = temp[names[i]];
}
//将得到的结果返回
return temp;
}
//没有 点符号 就直接将data中的keyName字段返回就ok了
return data[keyName]
}
When we come in, we first judge whether the keyName has a dot symbol.
If it comes in, we use the split of the string split to split it into an array
, then use a zero-time variable to store the data
, and then we loop the array that we split with the dot symbol. Then The content is naturally ["a", "b", "c"]
, then the content is abc once the loop is made
, then the first time the value of temp points to data, the first subscript is a, and the
second time is to find a under data Temp is currently a under data, and the second subscript is b, which is to search for b under a for the
third time, and it is established under b. Finding c
is very simple and finally processed and returned to temp
If there is no dot symbol and it does not enter if, then it is easier to directly find the keyName value under data
Then we
change the renderTemplate.js code under src
Here we introduce and use lookup
to run the project,
you can see the data and read it
