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("+"))
    }
}）;

${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  函数名不存在


希望大家多提提意见，上次就给了我很多灵感

评论

3 楼 jj7jj7jj 2011-12-05  

修复了一下bug，新添加了一些方法，已上传到附件

2 楼 jj7jj7jj 2011-09-05  

shiren1118 写道

看看jquery的模板插件。。。

非常感谢推荐，但jquery模板太依赖于jquery类库，有些功能相对来说显得过于强大，可能一个独立轻量级的框架会更加适合我~

1 楼 shiren1118 2011-09-05  

看看jquery的模板插件。。。