javascript模板系统 ejs v9
我的模板系统升一下级, 继续在新公司里面用。 现在几在互联网公司没有不用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)
});
当前标签: javascript
共22页: 1 2 3 4 5 6 7 8 9 下一页 末页
javascript模板系统 ejs v9 司徒正美 2012-03-19 12:04 阅读:629 评论:0
mass Framework lang模块 v4 司徒正美 2012-03-17 21:41 阅读:422 评论:0
mass Framework waterfall（瀑布流）插件 司徒正美 2012-03-15 09:10 阅读:1901 评论:6
mass Framework switchable插件 司徒正美 2012-03-11 11:12 阅读:1721 评论:2
mass Framework tabs插件 v2 司徒正美 2012-03-04 12:20 阅读:2253 评论:0
mass Framework tabs插件 司徒正美 2012-02-25 16:53 阅读:2607 评论:1
mass Framework pagination插件v2 司徒正美 2012-02-23 09:01 阅读:2869 评论:4
mass Framework pagination插件 司徒正美 2012-02-22 11:19 阅读:3054 评论:3
mass Framework flip插件 司徒正美 2012-02-20 20:52 阅读:2928 评论:4
mass Framework placeholder插件 司徒正美 2012-02-17 21:45 阅读:2621 评论:5
javascript suggest效果 司徒正美 2012-02-16 10:34 阅读:3147 评论:3
javascript题目，重写函数让其无限相加 司徒正美 2012-02-15 10:19 阅读:3462 评论:19
javascript 瀑布流 司徒正美 2012-02-06 14:43 阅读:5052 评论:12
(转)HTML5 全屏 API 司徒正美 2012-02-05 21:56 阅读:1709 评论:0
新锐浏览器支持原生CustomEvent事件 司徒正美 2012-02-05 13:24 阅读:1472 评论:0
javascript题目，如何在重写alert后还能正常弹出alert 司徒正美 2012-02-03 09:21 阅读:4347 评论:24
奇技淫巧之Object.keys 司徒正美 2011-12-24 11:03 阅读:3574 评论:4
mass Framework第四种模板函数 司徒正美 2011-12-17 12:03 阅读:1822 评论:1
属性监听器 司徒正美 2011-12-13 18:58 阅读:1232 评论:2
FF或将支持返回一个HTML文档对象 司徒正美 2011-12-02 10:14 阅读:994 评论:0
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于javascript模板系统 ejs v9的详细内容...