炫意html5
最早CSS3和HTML5移动技术网站之一

javascript 视图模板 2.0

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

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

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

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

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

从后台请求回来的数据比如是 

Javascript代码 
 

[javascript]
var data = {
name : "cc",
desc : " dddddd ",
deschtml : "<a href=”>ddddd</a>",
href : "我是谁",
playtime : 100,
today : ‘2011-09-05 01:00:00’,
}
[/javascript]

 Javascript代码 

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

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

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

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

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

$time{ playtime }  显示为  00:01:40 
说明:计算数据,会转为  小时:分钟:秒 这样的格式 
异常: 
error(lib.TemplateNew.evaluate): time format is incorrect") 数据的格式不对 

$date{ today ,YY MM DD  hh_mm_ss}  显示为  2011 09 05 01_00_00
 
说明:将时间格式化 
      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 第二个参数格式不对 

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

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

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

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

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


$cache{http://www.xxxx.com?name=${name}&&desc=$trim{desc},url}  不显示
 
说明:$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’字符而不是地址 


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

$f_sum{12,23,45}  显示为  80 
说明: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  函数名不存在 

 

       转自:iteye

炫意HTML5 » javascript 视图模板 2.0

(adsbygoogle = window.adsbygoogle || []).push({});
分享到:更多 ()

CSS3教程HTML5教程