=波波日志 > JavaScript/Ajax > Freemarker风格的JavaScript模板引擎EasyTemplate=
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> //遍历一个数组对象
{$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
来源:http://topic.csdn.net/u/20100607/10/6d8b3654-30dd-4c82-8d66-0133136880ce.html?70912
在使用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> //遍历一个数组对象
{$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
来源:http://topic.csdn.net/u/20100607/10/6d8b3654-30dd-4c82-8d66-0133136880ce.html?70912
类别:JavaScript/Ajax 作者:波波 日期:2010-12-16 【评论:0】
相关文章
暂时没有评论!
发表留言
热门博文
- AJAX跨域问题解决办法
- ajax问题总结
- jQuery dataType指定为json的问题
- ajax+asp.net+mssql无刷新聊天室
- ajax无刷新上传文件,使用iframe模仿
- ajax对象abort方法
最新博文
- jquery+flash显示图片实时加载进度插件
- jquery浮动层拖动插件
- firefox NPMethod called on non-NPObject wrapped JSObject!错误
- IE浏览器setCapture和releaseCapture介绍
- 51.la统计出问题了
- 隐藏删除ckeditor状态栏
随机博文
- fck编辑器配置文件fckconfig.js中文注释
- 仿163网盘无刷新多文件上传系统
- firefox下使用快捷键Ctrl+Enter发送信息时出现系统的下载窗口
- 图片切割效果
- 哪些浏览器支持HTML5的WebSocket API
- web编辑器过滤word文档信息时出现的问题
广告商赞助

