jQuery的JavaScript模版引擎

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_30530339

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端后端 ViewUI

原文链接：http://www.cnblogs.com/mininet/articles/6262338.html

本文对比了两种JavaScript模版引擎JsRender和BaiduTemplate的使用方式与特性。JsRender基于jQuery，功能强大但文档资源较少；BaiduTemplate则以简单易用著称，学习成本低。

我在前端开发中我们经常使用的两种JavaScript模版引擎，一种是基于jQuery的JavaScript模版引擎JsRender，另一种常用的是baiduTemplate，从个人的使用习惯来就，本人更加习惯使用baiduTemplate，今天就以demo示例来对比一下两种JavaScript模版引擎在使用上的不异同。

1、JsRender

JsRender是一款基于jQuery的JavaScript模版引擎，它具有如下特点：

· 简单直观

· 功能强大

· 可扩展的

· 快如闪电

这些特性看起来很厉害，但几乎每个模版引擎，都会这么宣传。。。

由于工作需要，本人刚接触到此款模版引擎。使用了一段时间，发现它确实比较强大，但本人觉得有些地方强大的过头了，反倒让人觉得很难理解。

另一方面，JsRender的官方文档比较详细，但其他资料出奇的少，遇到点什么问题，基本搜不到，不仅仅是相关问题搜不到，几乎就是没有结果。

再加上JsRender有些地方确实是不好理解，所以急需本人分享一些“最佳实践”。

基于最近一段时间的使用，本人总结了一些实用经验，当然，这些经验在官方文档上是找不到的。

注意：本文不是基础入门教程，以下例子中自带注释，不做过多说明，读者自行体会，不懂的地方可以留言。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>嵌套循环使用参数访问父级数据 --- by 杨小亮</title>
      <style>
      </style>
    </head>
    <body>
      <div>
        <table>
          <thead>
            <tr>
              <th width="10%">序号</th>
              <th width="10%">姓名</th>
              <th width="80%">家庭成员</th>
            </tr>
          </thead>
          <tbody id="list">
          </tbody>
        </table>
      </div>
      <script src="jquery.min.js"></script>
      <script src="jsviews.js"></script>
      <!-- 定义JsRender模版 -->
      <script id="testTmpl" type="text/x-jsrender">
        <tr>
          <td>{{:#index + 1}}</td>
          <td>{{:name}}</td>
          <td>
            {{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}
            {{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}
            {{for family ~parentIndex=#index ~parentName=name}}
              <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>
              {{!-- #data相当于this --}}
              {{:~parentName}}的{{:#data}}
            {{/for}}
          </td>
        </tr>
      </script>
      <script>
        //数据源
       var dataSrouce = [{
          name: "张三",
          family: [
            "爸爸",
            "妈妈",
            "哥哥"
          ]
        },{
          name: "李四",
          family: [
            "爷爷",
            "奶奶",
            "叔叔"
          ]
        }];
        //渲染数据
       var html = $("#testTmpl").render(dataSrouce);
        $("#list").append(html);
      </script>
    </body>
  </html>

View Code

2、BaiduTemplate

BaiduTemplate最简单好用的JS模板引擎，JS语法学习无成本，调用也只是一个函数哦！

A、baiduTemplate 简介

1、baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎

注：等不及可以直接点左侧导航中的”C、使用举例“，demo即刻试用。
2、应用场景：
前端使用的模板系统或后端Javascript环境发布页面
3、功能概述：

提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，
生成对应数据产生的HTML片段，渲染不同的效果。
4、特性：

1、语法简单，学习成本极低，开发效率提升很大，性价比较高（使用Javascript原生语法）；
2、默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义；
3、变量未定义自动输出为空，防止页面错乱；
4、功能强大，如分隔符可自定等多种功能；

//直接复制即可使用，记得要下载baiduTemplate.js
//index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>

<!-- 引入baiduTemplate -->
<script type="text/javascript" src="./baiduTemplate.js"></script>

</head>
<body>
<div id='result'></div>

<!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 -->
<script id="t:_1234-abcd-1" type="text/html">
<div>
    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->
    <!-- 输出变量语句，输出title -->
    <h1>title:<%=title%></h1>
    <!-- 判断语句if else-->
    <%if(list.length>1) { %>
        <h2>输出list，共有<%=list.length%>个元素</h2>
        <ul>
            <!-- 循环语句 for-->
            <%for(var i=0;i<5;i++){%>
                <li><%=list[i]%></li>
            <%}%>
        </ul>
    <%}else{%>
        <h2>没有list数据</h2>   
    <%}%>
</div>  
</script>
<!-- 模板1结束 -->

<!-- 使用模板 -->
<script type="text/javascript">
var data={
    "title":'欢迎使用baiduTemplate',
    "list":[
        'test1:默认支持HTML转义，如输出<script>，也可以关掉，语法<:=value> 详见API',
        'test2:',
        'test3:',
        'test4:list[5]未定义，模板系统会输出空'
    ]
};

//使用baidu.template命名空间
var bt=baidu.template;

//可以设置分隔符
//bt.LEFT_DELIMITER='<!';
//bt.RIGHT_DELIMITER='!>';

//可以设置输出变量是否自动HTML转义
//bt.ESCAPE = false;

//最简使用方法
var html=bt('t:_1234-abcd-1',data);

//渲染
document.getElementById('result').innerHTML=html;
</script>

</body>
</html>