js模板引擎渐进--each/for（5）

之所以使用模板引擎主要是为了避免麻烦的字符串拼接，同时，还用在重复的列表处理中。笔者自己开始就是因为要处理列表数据才接触的js模板引擎。而处理列表数据，自然是少不了 for 循环，而for循环对应的处理指令在很多模板中，都以 each 来标识。这里我们也用each.

通过前面几篇我们已经知道如何在模板中区分代码内容和字符串内容，那在这里，我们只需要对代码内容做进一步解析即可。

前面我们说了，遇到 } 时， { 到 } 里的内容则被当作是代码内容，那么我们只需要在遇到 } 那里对获取到的代码内容做进一步处理。


//我们将改进这里，在push之前判断代码内容是否为each
case "}":isvarcode = false;resultcode.push(" result.push(" + varcode.join("") + ") ;");varcode=[];break;

模板代码：

<h3>{data.length}</h3><ul>{each}<li>{$index}:{$value}</li>{/each}</ul>

ps:$index $value 为循环体中指定的变量，处理时将会替换为对应的下标和值

目标代码：

function func(data) { var result=[]; result.push("<h3>") ; result.push(data.length) ; result.push("</h3><ul>") ;for (var index in data) {var value = data[index]; result.push("<li>") ; result.push(index) ; result.push(":") ; result.push(value) ; result.push("</li>") ; }return result.join("");
}

分析：

>从目标源码看，再结合我们前面已经实现的模板转换例子来看，我们这里不一样的地方就只有 {each}变成了 for (var index in data) { var value = data[index]; ，{/each} 变成了 } ,其它地方还是该代码内容还是原来的代码内容，原来push字符串内容的依旧是字符串内容。

>实际上，each的这个处理就是，遇到 each 那就说明这里是循环的开始，在这里只需要将 each 变成 for循环的开始部分， /each 当作是结束标识，遇到 /each 直接替换成 } 即可 (之后讲到的 /if 也是如此)。

>而模板中的 $index $value 将根据 for 循环中具体使用的名称来替换，比如 $index 对应的是 for(var index in data) 中的 index,$value 对应的是 var value = data[index]; 中的 value,那么在模板中，若是遇到了 $index/$value 则将他们替换为对应的实际名称即可。

代码实现：

function Template2code(template) {var resultcode = [];resultcode.push("function func(data) { var result=[];");var tempcode = [];var varcode = [];var isvarcode = false;for (var key in template) {var value = template[key];switch (value) {case "\"":if (isvarcode) {varcode.push("\\\"")}else {tempcode.push("\\\"");}break;case "{":isvarcode = true;resultcode.push(" result.push(\"" + tempcode.join("") + "\") ;");tempcode=[];break;case "}":isvarcode = false;var varvalue = varcode.join("");if(varvalue==="each"){resultcode.push("for (var index in data) {var value = data[index];");}else if(varvalue==="/each"){resultcode.push(" }");}else{varvalue = varvalue.replace("$index","index").replace("$value","value");resultcode.push(" result.push(" + varvalue + ") ;");}varcode=[];break;default:if (isvarcode) {varcode.push(value)}else {tempcode.push(value);}}}resultcode.push(" result.push(\"" + tempcode.join("") + "\") ;");resultcode.push("return result.join(\"\");}")return resultcode.join("");}

生成方法：

var  code = Template2code("<h3>{data.length}</h3><ul>{each}<li>{$index}:{$value}</li>{/each}</ul>");document.getElementById("code").innerText = code;var func = eval("(" + code + ")");

渲染的数据：

["11111","2222222","3333333333","4444444444"]

渲染结果：

到了这里，我们已经可以基本使用each来循环我么的列表数据了。

但是，实际情况还要更复杂，比如我想多层嵌套，我还想在多层嵌套中的子层级引用父层级的内容，等等等等。。。

下一篇讲 each 的改进

js模板引擎渐进--前言

js模板引擎渐进--区别js代码和html字符串（1）

js模板引擎渐进--生成最简单的function（2）

js模板引擎渐进--区别js代码和html字符串2（3）

js模板引擎渐进--改进字符串拼接方式（4）

js模板引擎渐进--each/for（5）

js模板引擎渐进--each改进（6）

js模板引擎渐进--if/else（7）

js模板引擎渐进--处理需要输出 { 或者 } 的情况（8）

js模板引擎渐进--代码改进封装（9）

js模板引擎渐进--后记

js模板引擎渐进--each/for（5）相关推荐

js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...
js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
js模板引擎之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
简单实用的js模板引擎
转自:微点阅读 https://www.weidianyuedu.com 不足50行的js模板引擎,支持各种js语法: <script id="test_list" typ ...
doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
JS模板引擎handlerbars入门
handlebars -- 前端的模板引擎 <!DOCTYPE html> <html lang="en"> <head><meta ...

js模板引擎渐进--each/for（5）

js模板引擎渐进--each/for（5）相关推荐

最新文章

热门文章