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. DELPHI 解决DBGrid SHIFT键多选问题

    在实际项目中,偶然遇到需要按下SHIFT键,在DBGrid中进行多选的情况,测试了几种方法,最终确定了一个比较好的解决方法,总结如下: procedure TTestFrame.TestDBGridM ...

  2. 安卓创始人计划推出能帮你约会的AI手机

    安卓操作系统的创始人安迪·鲁宾早些年已经离开谷歌公司,离开谷歌后鲁宾成立Essential  Phone手机品牌.不过正如你所知道的那样尽管安迪·鲁宾有着很大的名气,但Essential  Phone ...

  3. Unsupported major.minor version ... JDK具体对应版本

    java.lang.UnsupportedClassVersionError: hudson/remoting/Launcher : Unsupported major.minor version 5 ...

  4. Laravel框架简单的用户管理[CURD]操作

    一个基于laravel和bootstrap的简单的用户管理,适合刚入门的我们,在做的过程中可以加深自己对laravel基础理解,里面存在一些问题,还未修改,比如css和js的引入,表单提交地址等不规范 ...

  5. C# 文件比较差异

    参考:https://www.cnblogs.com/vaevvaev/p/7115721.html 这里我就比较2个文件 使用了fc命令. 2个文件路径如下  path1,path2 static ...

  6. Ouroboros Snake POJ - 1392（数位哈密顿回路）

    看hdu 2894的题意  两个题一样 旋转鼓的表面分成m块扇形,如图所示(m=8).图中阴影区表示用导电材料制成,空白区用绝缘材料制成,终端a.b和c是3(k=3)处接地或不是接地分别用二进制信号0 ...

  7. Codeforces Round #337 (Div. 2) B. Vika and Squares

    B. Vika and Squares time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. MT【17】利用柯西不等式求三角的最大值

    评:此题也可以设$1+cos\theta=t$,平方后变成$t$的单变量利用均值去做. 柯西平衡系数法其实就是待定系数法,利用等号取到的条件.

  9. 自学Linux Shell14.2-在脚本中使用其他文件描述符

    点击返回 自学Linux命令行与Shell脚本之路 14.2-在脚本中使用其他文件描述符 在脚本中重定向输入和输出,并布局限于以上讲的3个默认的文件描述符,shell最多可以有9个打开的文件描述符.这 ...

  10. Java -- JDBC 学习--数据库连接池

    JDBC数据库连接池的必要性 在使用开发基于数据库的web程序时,传统的模式基本是按以下步骤: 在主程序(如servlet.beans)中建立数据库连接. 进行sql操作 断开数据库连接. 这种模式开 ...