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

先展示两个例子，然后说说对baidutemplate.js的理解，从而将这一工具加到个人百宝箱里。

<script id="bd_t1" type="text/template">

<div>

    <h1>title:<%=title%></h1>

    <%if(list.length>) { %>

        <h2>list:<%=list.length%></h2>

        <ul>

            <%for(var i=;i<;i++){%>

                <li><%=list[i]%></li>

            <%}%>

        </ul>

    <%}else{%>

        <h2>list不存在</h2>

    <%}%>

</div>

</script>

从上面代码可以看到JSP的影子，只是这些代码写到了Script块里面去了。很自然，模版少不了编号来标识，这里ID就是唯一标识模版。

.怎么为模版添加数据（渲染）？

<!-- 使用模版 -->

    <script type="text/javascript">

        var data2 = {

            "title" : "先编译模版，然后填入数据",

            "list" : [ "data1", "data2", "data3" ]

        };

        var bt = baidu.template;

        var fun = bt("bd_t1");

        var html2 = fun(data2);

        document.getElementById("bd_div_2").innerHTML = html2;

    </script>

从上面代码看baidu.template(模版ID)编译模版，然后编译添加数据后会生成HTML，最后添加到要放置的位置。

.png

如上图数通过模版渲染到DOM中。

<!DOCTYPE html>

<html>

<head>

<title>test1.html</title>

<meta charset="utf-8">

<script type="text/javascript" src=\'#\'" /script>

</head>

<body>

<script type="text/javascript">

    var bt=baidu.template;

    function show(){

        var s="<h1>内容：<%=title%></h1>";

        var fun=bt(s);

        var data={"title":"this is a title"};

        var html=fun(data);

        document.getElementById("bt_div_1").innerHTML=html;

    }

</script>

<input type="button"  value="查看"/>

<div id="bt_div_1"></div>

</body>

</html>

上面的模版作为string直接编译，然后添加数据进行渲染，这是另外一种方式。

.数据来源可以通过Ajax获取JSON数据文件，或者服务器端返回JSON格式的数据通过JavaScript来操作。

.模版可以在页面中定义，亦可以通过服务器端以字符串的类型返回。

.模版的编写和JSP页面嵌套Java代码相似，当然 <% xxx %> 分隔符可以自定义。

.JSON对象来在页面通过模版的形式展现，使的Ajax获取JSON数据并且在DOM中渲染交付给浏览器客户端处理。

.如实例一中要显示5个元素值，但是JSON中数据中只有3个，baidutemplate做了很好的处理用空字符串代替，而不是“undefined”这样的对象未定义。

.baidutemplate模版代码200多好，轻巧，灵便，还有很多转义字符处理，HTML标签，URL处理等。

.一个好用的JS工具，值得收藏并适时实地的使用。

百度模板引擎：http://baidufe.github.io/BaiduTemplate/

artTemplate模板引擎: https://github.com/aui/artTemplate

JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用： http://www.cnblogs.com/Fengger/p/3826241.html

各种JS模板引擎(Template)对比数据(高性能JavaScript模板引擎) http://www.07net01.com/program/306389.html

各种浏览器测试结果

ie8浏览器（8.0.6001.18702）

各种JS模板引擎(Template)对比数据(高性能JavaScript模板引擎)

chrome浏览器（版本 26.0.1410.64 m）

各种JS模板引擎(Template)对比数据(高性能JavaScript模板引擎)

Firefox浏览器（19.0.）

各种JS模板引擎(Template)对比数据(高性能JavaScript模板引擎)内核版本：21.0.1180.89）

各种JS模板引擎(Template)对比数据(高性能JavaScript模板引擎)

通过对各模板引擎测试结果，可以看出

artTemplate，juicer与doT引擎模板整体性能要有绝对优势；

其中doT引擎模板在IE与safari浏览器表现非常优越；

tmpl模板引擎在IE中运行能完美胜出，但在其它浏览器中表现就差很多；

延伸

通过对模板引擎的熟知，不同浏览器渲染能力也不一样；渲染快的打开网页速度就快；chrome与360浏览器打开速是最快的；IE浏览器的速度是最慢；

各个模板引擎下载地址：

baiduTemplate:  http://baidufe.github.io/BaiduTemplate/

artTemplate: https://github.com/aui/artTemplate

juicer: http://juicer.name/或https://github.com/PaulGuo/Juicer/zipball/master#download

doT：doT source:https://github.com/olado/doT   Docs:http://olado.github.com/doT/

tmpl：https://github.com/BorisMoore/jquery-tmpl

handlebars:http://handlebarsjs.com/或https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js

easyTemplate：https://github.com/qitupstudios/easyTemplate

underscoretemplate: http://documentcloud.github.io/underscore/

mustache:https://github.com/janl/mustache.js

kissytemplate:https://github.com/ktmud/kissy

baiduTemplate.js 百度JS模板引擎的更多相关文章

  1. Jade —— 源于 Node.js 的 HTML 模板引擎

    2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读  ·  读完需要 69 分钟 ...

  2. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

  3. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  4. node.js 使用ejs模板引擎时后缀换成.html

    这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 代码如下: var ejs = require('ej ...

  5. node.js中的模板引擎jade、handlebars、ejs

    使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...

  6. vue.js与后台模板引擎“双花括号”冲突时的解决办法

    后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的产生冲突,此时只要在新建Vue对象时,添加delimiters: ['${', '}'],就搞定了,代码如下 <!DOCTYP ...

  7. 说说如何用js实现一个模板引擎

    本文同步更新在: https://github.com/whxaxes/blog/issues/4 ,在 github 看文章显示效果会更好一些. 前言 不知不觉就很长时间没造过什么轮子了,以前一直想 ...

  8. doT.js——前端javascript模板引擎问题备忘录

    我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想 ...

  9. epii.js简约而不简单的JS模板引擎

    epii.js是什么 epii.js是一个 模板引擎,可快速实现数据与ui绑定,快速实现事件绑定,与处理,不依赖任何第三方库,仅仅8k,在native+webapp开发 和 web开发,h5微网页上均 ...

随机推荐

  1. Linux命令博客目录

    Linux 目录结构 Linux命令(一) pwd ,cd Linux命令(二) 复制文件 cp Linux命令(三) 移动文件 mv Linux命令(四)删除文件 rm Linux终端常用快捷键 L ...

  2. BZOJ3505 CQOI2014数三角形（组合数学）

    显然可以用总方案数减掉三点共线的情况.对于三点共线,一个暴力的做法是枚举起点终点,其间整点数量即为横纵坐标差的gcd-1.这样显然会T,注意到起点终点所形成的线段在哪个位置是没有区别的,于是枚举线段算 ...

  3. Code First NotMapped

    转载:http://www.cnblogs.com/libingql/p/3352058.html 不需要映射的字段,添加 NotMapped 6.非数据库字段属性 在类中,如果有一些属性不需要映射到 ...

  4. HDU 6162 Ch’s gift

    Mr. Cui is working off-campus and he misses his girl friend very much. After a whole night tossing a ...

  5. MT【233】染色正方形

    有$n$个正方形排成一行,今用红,白,黑三种颜色给这$n$个正方形染色,每个正方形只能染一种颜色.如果要求染白色的正方形必须是偶数个,问有多少种不同的染色方法. 解答:设有$a_n$种不同的染法,则$ ...

  6. MT【63】证明不是周期函数

    证明$f(x)=sinx^2$不是周期函数. 反证:假设是周期函数,周期为$T,T>0$. $$f(0)=f(T)\Rightarrow sinT^2=0\Rightarrow T^2=k_1\ ...

  7. Rsync 客户端配置

    安装rsync服务yum -y install rsync 创建密码文件rsync.passwordvi /etc/rsync.password只存储密码即可,无需用户名.密码为Rsync服务器端的/ ...

  8. 洛谷 P4408 逃学的小孩 解题报告

    P4408 [NOI2003]逃学的小孩 题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?&q ...

  9. luogu3646 巴厘岛的雕塑 (dp)

    我们一位一位地来做,每次判断这一位能否放0,而且要在满足前几位的情况下.用dp来判断 具体来说,设f[i][j]表示前i个划分成j个区间能否满足,那么我们会有转移trans[i][k+1],当区间[i ...

  10. Java NIO -- 缓冲区(Buffer)的数据存取

    缓冲区(Buffer): 一个用于特定基本数据类型的容器.由 java.nio 包定义的,所有缓冲区都是 Buffer 抽象类的子类.Java NIO 中的 Buffer 主要用于与 NIO 通道进行 ...