概述
随着Ajax技术的普及,纯前端模板的使用频率越来越高。我们需要一个易学、易用、高性能的模板系统来处理日益繁杂的需求变化。
前端模板处理,有90%以上的情况都是在处理html相关字符串,针对这一特性我们设计了一种只包含html和js两种语法的模板系统AceTemplate。
对于前端开发者,html和js是无需额外的学习成本。
特点
- 易学(只需html和js基础),易用(最少的输入)
- 智能(自动识别语法、标识符)
- 扩展便捷
语法
以行为单位,分为两种html行和js行,自由穿插
判断是否为html行的规则
- 特殊字符开头;
示例: 汉字、#{value}、<div>
- Html标记结尾;
示例: >、src="1.gif" />
- 没有“双引号、单引号、分号、逗号,大小括号”,不是else等单行语句;
示例: hello world
- Html属性;
示例: a="12"、a='ab' b="cd"
- 样式表达式。
示例: div.focus{color: #fff;}、#btnAdd span{}
html行负责输出内容
两种表达式输出;#{表达式}和!#{表达式}
#{表达式} 采用html字符串编码输出,默认规避xss漏洞
!#{表达式} 采用原文字符串编码输出
js行负责逻辑处理
方法
format
格式化输出
/**
* 格式化输出
* @param {String|Element} id 模板ID或是模板本身(非标识符将识别为模板本身)
* @param {Object} data 格式化的数据
* @param {Object} helper 附加数据(默认为模板对象)
*/
AceTemplate.format = function(id, data, helper)
register
注册模板
/**
* 注册模板,如果没有参数则是注册所有script标签模板
* @param {String} id 模板ID
* @param {Element|String} target 模板对象或者是模板字符串,如果没有则默认获取id对应的DOM对象
*/
AceTemplate.register = function(id, target)
unregister
注销模板
/**
* 注销模板
* @param {String} id 模板ID
*/
AceTemplate.unregister = function(id)
例子
输入输出用例
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/case.html
调试:http://jsfiddle.net/zswang/hA7Jd/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/ace-template.js"></script>
<title>ace template examples</title>
<style type="text/css">
#log{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<textarea id="log"></textarea>
<script id="t1" type="text/template">
if (this["title"])
{
#{title}
}
else
{
<b>无</b>
}
</script>
<script>
(function() {
var log = document.getElementById("log");
var list = [
{
input: ["#{this}", "<b>b</b>"],
output: "<b>b</b>"
},
{
input: ["!#{this}", "<b>b</b>"],
output: "<b>b</b>"
},
{
input: ["#{title}#{size}", {
title: "t"
}],
output: "t"
},
{
input: ["#{title}#{size + 2}", {
title: "t"
}],
error: true
},
{
input: ["#{1 + 2 + 3 + 4}"],
output: "10"
},
{
input: ["t1"],
output: "\t\t\t\t<b>无</b>\n"
}
];
var message = [];
for (var i = 0; i < list.length; i++) {
var item = list[i];
try {
var output = AceTemplate.format(item.input[0], item.input[1]);
if (output == item.output) {
message.push("√" + i + "输出结果符合预期。");
} else {
message.push("×" + i + "输出结果不符合预期。-- " + output);
}
} catch(ex) {
if (item.error) {
message.push("√" + i + "异常符合预期。");
} else {
message.push("×" + i + "异常不符合预期。-- " + ex.message);
}
}
}
log.value = message.join("\n");
})();
</script>
</body>
</html>
示例普通循环用法
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/base1.html
调试:http://jsfiddle.net/zswang/S3rwL/
- 模板中的this代表数据本身,即format的data参数;
- 逻辑部分用js,输出部分用html,#{表达式}为变量替换。
示例和jquery混用
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/base2.html 调试:http://jsfiddle.net/zswang/dehd6/
示例默认防止XSS漏洞
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/secuity1.html
调试:http://jsfiddle.net/zswang/aXKQA/
- 输出表达式默认采用html编码;
- 也可以使用!#{表达式}输出原文。
示例嵌套模板
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/nesting1.html
调试:http://jsfiddle.net/zswang/YJWZA/
- 模板中helper是一个附加参数,默认指AceTemplate本身;
- 采用不编码输出另一个模板渲染结果既实现嵌套。
示例递归模板
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/recursion1.html
调试:http://jsfiddle.net/zswang/JcwHg/
示例关键词
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/keyword.html
调试:http://jsfiddle.net/zswang/fvLX3/
- 使用html编码输出可以这样:AceTemplate.format("#{this}", text);
- 通过helper参数,加入keyword方法
作者微博
http://weibo.com/zswang http://weibo.com/zinkey
分享到:
相关推荐
国产CAD新品上海滩高调亮相.pdf
国产CAD新品上海滩高调亮相 (1).pdf
国产CAD产业联盟高调亮相.pdf
在青岛市主办的第七届中国国际消费电子博览会现场,海信数字家庭系统DNet-home率先将概念变成现实亮相电博会。而以“网络,从家庭、社区到城市”为主传播语的海信,已经将网络化、数字化的生活从家庭延伸到社区和...
答辩ppt,计算机系,数学系,答辩PPT是辅助演讲的, 不属于阅读型,所以,在PPT中只需要呈现一些关键信息即可,毕业答辩场合是相当严肃和正式的,所以,作为过来人,劝告各位同学,少用一些奇怪、高调的字体,一般...
思辨性话题作文五则:苦与乐、低调与高调、择业与家国、文化传承与科技发展、疫情中的距..docx
小游戏源码-七夕节就要高调秀恩爱!送TA一纸婚书.rar
支付宝与新蛋商城高调结盟.docx
随着国家十一五规划区域经济发展战略宏伟蓝图的制定,面对大北京经济圈腾飞和廊坊城市发展战略赋予的历史机遇,固安已经成为京津冀地区最有活力的区域之一。 固安工业园区空间发展总体规划60平方公里,起步区规划...
小学生运动会入场高调响亮口号.pdf
陈年:“寒冬”唱高调.docx
高调光比LED恒流驱动器PT4115资料手册pdf,高调光比LED恒流驱动器PT4115资料手册.pdf
亚马逊高调入局ChatGPT大战,发布Titan大模型
摄影培训课件:高调人像摄影的布光.ppt
传媒行业:斗鱼上市&快手高调进场,游戏直播巨头之争或许才刚刚开始-0724-中信建投-16页.pdf
人生大智慧——低调做人,高调做事!!.doc