javascript模版引擎的基本实现方法浅析_基础知识

《javascript模版引擎的基本实现方法浅析_基础知识》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JavaScript模版引擎的基本实现方法浅析模板分离了数据与展现，使得展现的逻辑和效果更易维护。利用javascript的Function对彖，一步步构建一个极其简单的模板转化引擎模板简介模板通常是指嵌入了某种动态编程语言代码的文本，数据和模板通过某种形式的结合，可以变化出不同的结果。模板通常用来定义显示的形式，能够使得数据展现更为丰富，而且容易维护。例如，下面是一个模板的例子：

<%for(variinitems){%>'X%二items[i].text%><%}%>

2、{text:'tcxt2'{text:'text3'{text:'text4'如果有如下items数据：,status:'done，},,status/pending'},,status:'pending，},,status:,processing，}通过某种方式的结合，可以产生下面的Htrnl代码:

textl
• <1iclass二'pending'>text2
• text3
• tcxt4〈li>

3、果的样子，需要像下面这样做：vartemp='

J;for(variinitems){temp+=〃〈liclass二'"+items[i]・status+〃‘>〃+items[i]・text+}temp+二'〈/ul>';可以看出使用模板有如下好处：简化了html的书写通过编程元素(比如循环和条件分支)，对数据的展现更具冇控制的能力分离了数据与展现，使得展现的逻辑和效果更易维护模板引擎通过分析模板，将数据和模板结合在一起输出最后的结果的程序称为模板引擎，模板有很多种，相对应的模板引擎也有很多种。一种比较占老的模板称为ERB,在很多的web框架中被釆用,比如：ASP.NET、Rails-

4、上面的例子就是ERB的例子。在ERB中两个核心的概念:evaluate和interpolate。表面上evaluate是指包含在〈%%>中的部分,interpolate是指包含在〈%二%>中的部分。从模板引擎的角度，evaluate中的部分不会直接输出到结果中，一•般用于过程控制；而interpolate中的部分将直接输出到结果中。从模板引擎的实现上看，需要依赖编程语言的动态编译或者动态解释的特性，以简化实现和提高性能。例如：ASP.NET利用.NET的动态编译，将模板编译成动态的类，并利用反射动态执行类屮的代码。这种实现实际上是比较复杂的，因为C#是一门静态的编程语言，但是使用javascr

5、ipt口J以利用Function,以极少的代码实现一个简易的模板引擎。本文就来实现一个简易的ERB模板引擎，以展现javascript的强大Z处。模板文木转化针对上面的例子，回顾一下使用模板和不使用模板的差别：模板写法：

<%for(variinitems){%>'X%二items[i].text%><%}%>
非模板写法：vartemp二'
，;for(variinitems){temp+二"〈liclass二'"+itemsEi].status+〃‘〉〃+itcms[i]・text+仔细观察，实际上这

6、两种方法十分“相似”，能够找到某种意义上的一一对应。如果能够将模板的文木变成代码执行，那么就能实现模板转化。在转化过程中有两个原则：遇到普通的文本直接当成字符串拼接遇到interpolate(即〈%二%»,将其中的内容当成变量拼接在字符吊中遇到evaluate(B

7、J<%%»,直接当成代码将上面的例子按照上述原则进行变换，再添加一个总的函数：vartemplate二function(items){vartemp二''；〃开始变换temp+='

，;for(variinitems){temp+二Z/<1iclass二'"+itemsEi].status+〃‘>〃+items[i]・text

8、+}temp+二'〈/ul>';最后执行这个函数，传入数据参数即可:varresult=template(items);javascript动态函数可见上面的转化逻辑其实十分简单，但是关键的问题是，模板是变化的，这意味着生成的程序代码也必须是在运行吋生成并执行的。好在javascript有许多动态特性，其中一个强大的特性就是Functiono我们通常使用function关键字在js中声明函数，很少