Freemarker风格的JavaScript模板引擎EasyTemplate

在前后端分离的解决方案中，模板起到了重要作用！

在使用Struts或Spring的后端中，使用Freemarker模板作为载体，能够非常有效的实现前后端的分离。

有人或许会认为使用前端模板一样可以实现此效果，而且实现的会更好。

如果单纯从技术和实现的角度去考虑，确实是使用前端模板效果会更好，前后端分离的会更彻底，但如果真的这样做，任何地方都采用前端模板去渲染，那这样的WEB应用将会失去高可靠性及易用性。

我们的建议是，一般的页面由后端模板渲染，页面中的某些特殊模组，可以由前端模板进行渲染，比如，一个具有诸多交互且内容不断变化的数据列表。

在使用过Freemarker模板后，感觉它的语法比较朴实，平易近人，容易上手，于是决定按它的语法风格实现一个前端的模板引擎，这就有了下面的EasyTemplate!

EasyTemplate模板的函数大小为1.34k（未压缩），暂时只实现了list，list index，if elseif else等功能，应该可以满足大部分的使用需求了。

EasyTemplate模板引擎的解析速度测试，渲染1000行数据，在不同的浏览器中，平均速度大约在30毫秒以内（测试机器性能较弱）。

EasyTemplate可用标签：

<#et tname dataname> //模板开始标签，tname为此模板的名称，dataname为此模板中用到的数据名称

<#if (condition)>

<#elseif (condition)>

<#else>

</#if>

${x?a:b} //三元表达式，最后不能加分号"；" 注意：在所有的 {} 中都不能出现分号！

<#list List as list> //遍历一个数组对象

${list_idx} //在此次遍历中的当前索引

${list.xxx} //取值

</#list> //结束遍历

</#et> //模板结束标签

 

调用方法：

var x = easyTemplate(sTemplate,oData);

 

EasyTemplate模板引擎函数下载：http://www.easyui.org.cn/easyTemplate.js

EasyTemplate模板引擎在线演示：http://www.easyui.org.cn/easyTemplate.html

[本日志由 dh20156 于 2010-08-06 03:48 PM 编辑]
文章来自: DHTML精英,WEB前端专家!
引用通告: 查看所有引用 | 我要引用此文章
Tags: freemarkerfreemarker easyTemplateeasyTemplate