javascript 视图模板 2.0

最近根据项目中的实际的问题,对原有模板进行了一些调整,修复了在复杂嵌套情况下的BUG

数据会分成3部分存放
this._tmp_cache = {}
缓存,通过$cache{value,key}设置

this.params = {}
所有参数,包括callbackObj + 自定义的参数

this.self_params = {}
自定义的参数


(注:callbackObj属于数据层的对象,但有时也许会想在基础上加上自己的参数,自定义参数与callbackObj同名,则会覆盖callbackObj)

从后台请求回来的数据比如是
var data = {
name : "cc",
desc : " dddddd ",
deschtml : "<a href=''>ddddd</a>",
href : "我是谁",
playtime : 100,
today : '2011-09-05 01:00:00',
}




//str3为模板
var t = new Template(str3,{
//自定义属性
category : "haha",
//自定义函数
sum : function(){
//arguments全部是字符串,得自己转化类型
return eval( [].slice.apply(arguments).join("+"))
}
});


[b]
${name} 显示为 cc[/b]
说明:其他所有(如:$trim,$date,$f_,$encode)都会走这个接口
实现:直接从this.params或this._tmp_cache里面寻找,如果找到就返回数据,否则原样输出(输出为 name 而不是cc)

[b]$trim{ desc } 显示为 dddd[/b]
说明:trim函数,去掉两边空格

[b]$trim{ deschtml ,html} 显示为 dddd[/b]
说明:清空标签,只显示内容,第二个参数暂时只能是'html'

[b]$encode{ href } 显示为 %E6%88%91%E6%98%AF%E8%B0%81[/b]
说明:相当于encodeURIComponent函数

[b]$time{ playtime } 显示为 00:01:40[/b]
说明:计算数据,会转为 小时:分钟:秒 这样的格式
异常:
error(lib.TemplateNew.evaluate): time format is incorrect") 数据的格式不对
[b]
$date{ today ,YY MM DD hh_mm_ss} 显示为 2011 09 05 01_00_00[/b]
说明:将时间格式化
YYYY/YY 年 , MM 月 , DD 日 , hh 小时 , mm 分钟 , ss 秒
异常:
error(lib.TemplateNew.evaluate): date format is incorrect 第一个参数格式不对
error(lib.TemplateNew.evaluate): date format argument[1] is null 第二个参数格式不对

[b]$fixed{asdjfkajskldjflk,2} 显示为 as[/b]
说明:data里面没有asdjfkajskldjflk,就会直接原样输出(asdjfkajskldjflk),第二个参数决定截取几个字符,相当月substring

[b]$fixed{asdjfkajskldjflk} 显示为 asdjfkajskldjflk[/b]
说明:相当于${asdjfkajskldjflk},这么处理是用了容错,还是建议${..}

[b]$pick{1,2,是,不是} 显示为 不是[/b]
说明:相当于 1 == 2 ? 是 : 不是

[b]$pick{1 < 2,是,不是} 显示为 是[/b]
说明:相当于 eval("1 < 2") ? 是 : 不是

[b]$pick{1 < 2,对了} 显示为 对了[/b]
说明:相当于 eval("1 < 2") ? 是 : ""
异常:
error(lib.TemplateNew.evaluate): the parameter num is incorrect 参数个数不正确

[b]
$cache{http://www.xxxx.com?name=${name}&&desc=$trim{desc},url} 不显示[/b]
说明:$cache是不返回任何字符的,但这函数是干嘛的呢?假设有下面这种需求

"<a href='http://www.xxxx.com?name=${name}&&desc=$trim{desc}'>地址1</a>"
"<a href='http://www.xxxx.com?name=${name}&&desc=$trim{desc}'>地址2</a>"

如果有N个这种连接,是不是要写N个,而且替换起来也不方便,解决方法:

$cache{http://www.xxxx.com?name=${name}&&desc=$trim{desc},url} 不显示 但this._tmp_cache['url'] == 'http://www.xxxx.com?name=cc&&desc=dddddd'

"<a href='${url}'>地址1</a>" 显示为 "<a href='http://www.xxxx.com?name=cc&&desc=dddddd'>地址1</a>"
"<a href='${url}'>地址2</a>" 显示为 "<a href='http://www.xxxx.com?name=cc&&desc=dddddd'>地址2</a>"

注意:
"<a href='${url}'>地址1</a>" 显示为 "<a href='url'>地址1</a>"

$cache{http://www.xxxx.com?name=${name}&&desc=$trim{desc},url} 不显示 但this._tmp_cache['url'] == 'http://www.xxxx.com?name=cc&&desc=dddddd'

"<a href='${url}'>地址2</a>" 显示为 "<a href='http://www.xxxx.com?name=cc&&desc=dddddd'>地址2</a>"

模板是动态执行的,所以$cache一定要放在最前面,比如在未定义之前就是用变量是会原样输出,所以第一行会输出‘url’字符而不是地址

[b]
上面例子已经看见了,模板还支持嵌套(深度为6层)[/b]
$cache{$pick{123,34,${category},${name}},imgsrc } 不显示 但this._tmp_cache['imgsrc '] == 'cc'


[b]$f_sum{12,23,45} 显示为 80[/b]
说明:sum为自定义的函数名,还可以是别的,但前缀必须是$f_,主要是为了在上面函数不满足需求的情况下使用
实现:sum函数里面的this指向模板,有以下属性
arguments 为参数
this.params 相当于 data + 自定义的参数
this.get(value) 相当于 ${}
this.encode(value) 相当于 $encode{}
this.trim(value) 相当于 $trim{}
this.trimHTML(value) 相当于 $trim{value,html}
this.fixed(value,len) 相当于 $fixed{value,len}
this.date_format(date,format) 相当于 ${date,format}
this.time_format(time) 相当于 $time{time}
异常:
error(lib.TemplateNew.evaluate): function "+f_name+" is not exists 函数名不存在


希望大家多提提意见,上次就给了我很多灵感
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值