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

有了 each 的经验后，要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可。

模板代码：

        {if data.value==1}<h3>11111111111</h3>{else-if data.value==2}<h3>22222222222</h3>{else}<h3>33333333333</h3>{/if}

目标代码：

       function func(data) {var result = []; result.push(" ");if (data.value == 1) {result.push(" <h3>11111111111</h3> ");} else if (data.value == 2) {result.push(" <h3>22222222222</h3> ");} else {result.push(" <h3>33333333333</h3> ");} result.push(" ");return result.join("");}

分析：

>这里我们直接对照代码来看，对于 if 和 else-if ，花括号 {} 内的内容，除了作为指令识别字符的 if/else-if 空格分隔后的第二个都是按照原样当作 js 代码来处理的。而不管是 if还是 else if 我们会发现我们写js代码时，一般都会用 {} 将方法体抱起来（单行一般不需要包也可以，但是这里统一使用 {} 来包住方法体），而 if () 之后接的就是 { 。

>对于 else/else-if 指令，通过代码我们看到， else 即代表前一个情况的处理结束了，那就需要 } 包回来，同时 else 说明了另一个情况的开始,所以后面需要加上 { 开始新的方法体。

>/if 跟 /each 一样，这里的 /if 代表这一层的判断结束，遇到 /if 时只需要将方法体包回来，所以提供 } 即可。

实现代码：

function Template2code(template) {var resultcode = [];resultcode.push("function func(data) { var result=[];");var tempcode = [];var varcode = [];var isvarcode = false;var eachIndex = 0;for (var key in template) {var value = template[key];//console.log(value);switch (value) {case "\n":if (isvarcode) {varcode.push(" ")}else {tempcode.push(" ");}break;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.indexOf("each") == 0) {// each index,value arr  var eachInfo = varvalue.split(' ');if (eachInfo.length != 3) throw "each 参数无效：each index,value arr";var itemInfo = eachInfo[1].split(',');if (itemInfo.length != 2) throw "each 参数无效：each index,value arr";resultcode.push("for (var " + itemInfo[0] + " in " + eachInfo[2] + ") {var " + itemInfo[1] + " = " + eachInfo[2] + "[" + itemInfo[0] + "];");}else if (varvalue === "/each") {resultcode.push(" }");}else if (varvalue.indexOf("if") == 0) {var ifInfo = varvalue.split(" ");resultcode.push("if(" + ifInfo[1] + "){");}else if (varvalue.indexOf("else-if") == 0) {var ifInfo = varvalue.split(" ");resultcode.push(" } else if(" + ifInfo[1] + "){");}else if (varvalue.indexOf("else") == 0) {var ifInfo = varvalue.split(" ");resultcode.push(" } else {");}else if (varvalue.indexOf("/if") == 0) {resultcode.push(" }");}else {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 data = {value: 3}

渲染结果：

<h3>33333333333</h3>

在 each 的基础上处理 if 是简单很多了，这里也一篇就处理完了。

下一篇处理需要输出的内容里包含 {或者 } 的情况

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模板引擎渐进--if/else（7）相关推荐

js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
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模板引擎渐进--if/else（7）

js模板引擎渐进--if/else（7）相关推荐

最新文章

热门文章