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. vCenter简单查看多少虚拟机在开机状态和一共多少虚拟机

    vCenter 界面上面不好找 具体的开机 运行数目 但是数据库里面比较好差 登录vCenter的数据库. 查看表主要是 查看正在开机的虚拟机 select * from dbo.VPX_VM WHE ...

  2. [转帖]召冠总的 SQLSERVER常用的性能诊断语句. --保存学习备查

    CopyFrom https://www.cnblogs.com/zhaoguan_wang /*常规服务器动态管理对象包括:dm_db_*:数据库和数据库对象dm_exec_*:执行用户代码和关联的 ...

  3. Python 2和Python 3的编码问题

    在Python2中,字符串无法完全地支持国际字符集和Unicode编码.为了解决这种限制,Python2对Unicode数据使用了单独的字符串类型.要输入Unicode字符串字面量,要在第一个引号前加 ...

  4. 微信小程序的界面下拉刷新

    小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  

  5. Lodop导出excel及提示成功【回调和直接返回值】

    高版本的火狐和谷歌不再支持np插件之后,Lodop公司推出了C-Lodop,解决了这些浏览器不能用Lodop插件方式打印的问题,相比较Lodop插件,C-Lodop由于是以服务的形式出现,返回值不能直 ...

  6. BZOJ3530[Sdoi2014]数数——AC自动机+数位DP

    题目描述 我们称一个正整数N是幸运数,当且仅当它的十进制表示中不包含数字串集合S中任意一个元素作为其子串.例如当S=(22,333,0233)时,233是幸运数,2333.20233.3223不是幸运 ...

  7. BZOJ1014 JSOI2008火星人（splay+哈希）

    splay维护哈希值即可. #include<iostream> #include<cstdio> #include<cmath> #include<cstd ...

  8. poj 2236 Wireless Network (并查集）

    链接:http://poj.org/problem?id=2236 题意: 有一个计算机网络,n台计算机全部坏了,给你两种操作: 1.O x 修复第x台计算机 2.S x,y 判断两台计算机是否联通 ...

  9. 洛谷P2257 YY的GCD

    今日份是数论 大概是..从小学奥数到渐渐毒瘤 那就简单列一下目录[大雾 同余 质数密度 唯一分解定理 互质 完全剩余系 简化剩余系 欧拉函数 逆元 斐蜀定理 阶(及其性质) 欧拉定理 费马小定理 原根 ...

  10. 【转】ls 命令的 20 个实用范例

    Linux中一个基本命令是ls.没有这个命令,我们会在浏览目录条目时会遇到困难.这个命令必须被每个学习Linux的人知道. ls是什么 ls命令用于列出文件和目录.默认上,他会列出当前目录的内容.带上 ...