的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用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 | 女 | 静态的表格 | 静态的表格 | 静态的表格 |