自创的 TplTool，一个简单易用的前端模版JS组件（2016年小小成果）

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