2016年于我是多灾多难的一年,原因很简单,我因为运动而受伤,又因为结石这个毛病,真真正正地感受了“伤病”二字的含义。这里略去五千字不表。
即便如此,因为2016年有许多前端的工作,因此接触了相关技术框架,如 Vue(作者 尤小右),laytpl (作者 贤心)。laytpl 的特点是对各类浏览器支持很好,简单易用,而且功能强大,但我尤其不喜欢渲染列表时,需要自行在 html 模版里写 for 循环语句的做法。而Vue 通过模型的构建,实现了 对象 和视图的双向映射,功能非常强大好用,而且还在不停地扩充当中,是一个明星产品。但由于 Vue 需要浏览器的某些特性,因此 IE 8及以下版本无法支持。
总之,对于我这样一个苛刻而又有点不安分的人来说,即便这些工具强大而且很有拥趸,而我总是挑着骨头。虽然代码里头用 laytpl 的有,用 Vue 的也不少(不同项目阶段,以及不同的同事撰写的,当时没有专门去统一),我总是觉得不很合意。
于是自己动手,参照 Vue 和 laytpl 的语法,结合实际需求,够用就好的原则,实现了 TplTool 这个简洁的单向的用于html渲染的前端工具组件(谈不上框架,没有那么宏大啦)。简称 TplTool 。
以下是其简单说明(实际上其语法综合了 iBatis, Vue, laytpl 的诸多特质 ):
一, 支持以下特性:
1. 标签渲染,带转义
<div>#this_is_title#</div> // this_is_title 会被转义
2. 标签渲染,不转义,适合生成 html 的动态内容
<div>$this_is_html$</div> // this_is_html 原始的html内容,不做转义
3. 多种表达式渲染支持:
允许程序使用表达式来生成相关数据。支持以下模式:
1). 带 html 转义
<div>{{item.title ? item.title : "--"}}</div> // {{}} 里面放上表达式,其中可引用属性的字段值。
2). 直接输出 html ,不转义
<div>{{$ "<br>" }}</div> // {{$ }} 里面放上表达式,并且不会做转义。注意, $必须直接跟在 {{ 后面。
3). 在双引号里面,对双引号进行转义
<div title="{{$quote item.title }}">good</div>
4). 在单引号里面,对 单引号进行转义
<div title='{{$single_quote item.title}}'>good</div>
4. 属性条件渲染,针对单个元素,若表达式为真,则什么也不做,否则隐藏该元素
<div t-show="{{ 1==1 || item.title }}" >good</div>
5. 容器条件渲染,支持批量按条件渲染。渲染后不包含容器自身。参阅例子:
<div t-if="{{ item.is_good_man }}">
<div>xxxx</div>
<a>xxxxx</a>
</div>
若条件满足,则渲染后为:
<div>xxxx</div>
<a>xxxxx</a>
若条件不满足,则渲染后为空。
NOTE: 上述条件渲染仅在 render 被调用之后的下一个时钟周期里真正生效。也就说,render 完成后html被添加到 dom 里面去之后,必须等
下一个时钟周期才能生效。马上去访问Dom 元素是不确定的。建议 setTimeout(xxx, 0), 在 xxx 的回调函数里继续操作。
设计思路解读:
1. 为何容器条件渲染,不采用 template 作为容器?
因为 template 作为容器,其子孙不可见,不利于 jquery 挂载事件。
2. 为何不支持 t-else 标签(类似 vue的 v-else) 呢?因为如果使用了 t-else,则会导致 html 渲染过程与 前后位置相关,
导致调换顺序会引起逻辑错误,因此不推荐使用 t-else 标签。毕竟模板应该就是模板,不应该出现类似(laytpl.js) 那样得for 语句,if 和 else 语句等
内容与 html 混杂的情况。
二,使用方法:
1. 在 html 或 jsp 里面定义模板(建议以 script 标签作为载体,因为它可以原封不动地给出模板内容。)
<script id="template" type="text/html">
<div>#title#</div>
<span>$subject$</span>
<div t-if="{{ item.is_good_man }}">
<div>xxxx</div>
<a>xxxxx</a>
</div>
<div t-show="{{ 1==1 || item.title }}" >good</div>
<div title="{{$quote item.title }}">good</div>
</script>
2. 在 js 语句中进行渲染并设置 html 值。
// 渲染单个对象。
var html = TplTool(template).render(data);
document.getElementById('view').innerHTML = html;
// 渲染一个列表
var html = TplTool(template).renderList(data.list, function(item) {
});
document.getElementById('view').innerHTML = html;
上述回调 function(item) 是用来对单个数据对象进行渲染前的加工,以避免在模版里出现复杂的数据加工的代码。
3. {{item.title}} ,其中 "item" 可以是其他值。具体是 TplTool 的第二个参数为 options 对象。 若 options.key = "row" 则可以用 row.title 来引用单个对象。
组件在此下载:https://cc.onesoul.cn/ucmweb/TplTool.js