做外贸建网站多少钱,百度关键词快速优化,大学生旅游网站策划书,永平建设有限公司网站[mustache] 是 “胡子”的意思#xff0c;因为它的嵌入标记 {{ }} 旋转过来很像[胡子]#xff0c;Vue中的 {{ }} 语法也引用了mustache#xff0c;这也是我深入学习的目的。 1、原始js方式使 数据 变为视图 ul idlist/ulscriptvar arr …
[mustache] 是 “胡子”的意思因为它的嵌入标记 {{ }} 旋转过来很像[胡子]Vue中的 {{ }} 语法也引用了mustache这也是我深入学习的目的。 1、原始js方式使 数据 变为视图 ul idlist/ulscriptvar arr [{name:张三, age:12, sex:男},{name:李四, age:13, sex:女},{name:王五, age:14, sex:女},{name:赵六, age:15, sex:男},]var list document.getElementById(list);// jion法——遍历arr数组每遍历一项就将HTML 字符串添加到list 中for(let i 0; iarr.length; i){list.innerHTML [li, div classhd arr[i].name /div, div classbd, p姓名 arr[i].name /p, p年龄 arr[i].age /p, p性别 arr[i].sex /p, /div,/li].join()}// 反引号法——遍历arr数组每遍历一项就将HTML 字符串添加到list 中for(let i 0; iarr.length; i){list.innerHTML lidiv classhd ${arr[i].name} /divdiv classbdp姓名${arr[i].name}/pp年龄${arr[i].age }/pp性别${arr[i].sex }/p/div/li;}
/script2、mustache的底层原理 要实现这样的 script// 模板var templateStr h1今天我买了一辆{{thing}},{{money}}W,很{{mood}}/h1;// 数据var data {thing: 兰博基尼,money: 50,mood: 开心};// 1.使用正则实现简单数据填充正则中的 g 表示全局把你替换成 我// console.log(你很帅你很有钱.replace(/你/g,我));// 2.最简单的模板引擎实现机理利用正则表达式中的replace()方法// replace()的第二个参数$1 可以是一个函数这个喊啊书提供的东西的参数就是$1function render(templateStr, data){return templateStr.replace(/\{\{(\w)\}\}/g,function(findStr, $1){return data[$1];});}var result render(templateStr, data);console.log(result);
/script实现方式Mustache.render(templateStr, data); templateStr模板字符串data数据render返回填充后dom字符串。 实现原理第①步将模板字符串编译成tokens 形式第②步将tokens与数据结合解析成dom字符串。 2、什么是tokens? JS的嵌套数组模板字符串的JS表示形式。
模板字符串
我买了一辆{{thing}},{{money}}W tokens:
[[text, h1 我买了一辆],[name, ”thing“],[text, ,],[name, ”money“],[text, W /h1 ],
]实现tokens思路用到了《数据结构》中栈的原理遇到 # 号进栈遇到 / 线出栈 # 号标记的tokens需要递归处理它的下标为2的小数组。遍历传入的 tokens 的每一个 token遇到第一项是 # 和 / 的分别做处理其余的做一个默认处理。大致思路是当遍历到的 token 的第一项为 # 时就把直至遇到配套的 / 之前遍历到的每一个 token 都放入一个容器collector中把这个容器放入当前 token 里作为第 3 项元素。
// nestTokens.js
export default (tokens) {const nestTokens []const stack []let collector nestTokens // 一开始让收集器 collector 指向最终返回的数组 nestTokenstokens.forEach(token {switch (token[0]) {case #:stack.push(token)collector.push(token)collector token[2] [] // 连等赋值breakcase /:stack.pop(token)collector stack.length 0 ? stack[stack.length-1][2] : nestTokensbreak;default:collector.push(token)break}})return nestTokens
}
