的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用javascript模板了, 什么TX, 百度, 新浪, 360什么的, 最后瀑布流的流行, 里面又有许多用到模板。
本版本就是改回v6的形态,后端数据还是带@前端才方便查看与调试。昨天也与一TX前端工程师讨论过这个必要性。取得模板中的需要填写的变量,再与后端传过来的JSON进行比较,尽早进行数据验证。这种技术,可以看一看PHP的变量命名就知了,带是带$前缀。
在之前的版本中,如果输出语句带分号或逗号是会报错的
< script type = "tmpl" id = "table_tmpl" >
< table >
<& for(var i=0,tl = @trs.length,tr;i< tl ;i++){ &>
<& tr = @trs[i]; &>
< tr >
< td ><&= tr.name; &></ td > < td ><&= tr.age; &></ td > < td ><&= tr.sex || "男" &></ td >
</ tr >
<& } &>
</ table >
<&# 怎么可能不支持图片 &>
< img src="<&= @href &>">
</ script >
|
因为内部生成的字符串是这个样子的:
__views(data.tr.name;) |
为了防止用户顺手把个逗号或分号上去,本版本自动帮你处理了.
rlastSemi = /[,;]\s*$/ // 略 case "=" : //处理后台返回的变量(输出到页面的);
logic = els[0].substring(1);
if (logic.indexOf( "@" )!==-1){
temp.push( startOfHTML, logic.replace(rAt, "$1data." ).replace(rlastSemi, '' ), endOfHTML );
} else {
temp.push( startOfHTML, logic.replace(rlastSemi, '' ), endOfHTML );
}
break ;
|
下面是一个模板,放置于浏览器会忽略解析JS代码的script标签之内, 注意trs与href前面都带有@标识符。
< script type = "tmpl" id = "table_tmpl" >
< table >
<& for(var i=0,tl = @trs.length,tr;i< tl ;i++){ &>
<& tr = @trs[i]; &>
< tr >
< td ><&= tr.name &></ td > < td ><&= tr.age &></ td > < td ><&= tr.sex || "男" &></ td >
<&# 导入子模板 &>
<&= $.ejs("tds_tmpl"); &>
</ tr >
<& } &>
</ table >
<&# 怎么可能不支持图片 &>
< img src="<&= @href &>">
</ script >
<!-- 这是子模板 -->
< script type = "tmpl" id = "tds_tmpl" >
< td >静态的表格</ d > < td >静态的表格</ d > < td >静态的表格</ d >
</ script >
|
这是它的JS代码:
$.require( "ready,more/ejs,node" , function (){
var trs = [
{name: "隐形杀手" ,age:29,sex: "男" },
{name: "索拉" ,age:22,sex: "男" },
{name: "fesyo" ,age:23,sex: "女" },
{name: "恋妖壶" ,age:18,sex: "男" },
{name: "竜崎" ,age:25,sex: "男" },
{name: "你不懂的" ,age:30,sex: "女" }
]
var html = $.ejs( "table_tmpl" ,{
trs: trs,
href: "http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_type4.jpg"
});
$( "#table_tc" ).html(html)
}); |
隐形杀手 | 29 | 男 | 静态的表格 | 静态的表格 | 静态的表格 |
索拉 | 22 | 男 | 静态的表格 | 静态的表格 | 静态的表格 |
fesyo | 23 | 女 | 静态的表格 | 静态的表格 | 静态的表格 |
恋妖壶 | 18 | 男 | 静态的表格 | 静态的表格 | 静态的表格 |
竜崎 | 25 | 男 | 静态的表格 | 静态的表格 | 静态的表格 |
你不懂的 | 30 | 女 | 静态的表格 | 静态的表格 | 静态的表格 |