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. dotnet core的下载地址 以及sdk和runtime的 version 简单说明

    1. dotnet core 2.1 的下载地址 https://dotnet.microsoft.com/download/dotnet-core/2.1 2. dotnet core 2.2 的下 ...

  2. scipy优化器optimizer

    #optimazer优化器 from scipy.optimize import minimize def rosem(x): return sum(100.0*(x[1:]-x[:-1])**2.0 ...

  3. tomcat启动失败问题总结

    一.端口占用 linux下启动tomcat的时候,如果服务启动不成功,可以到查看logs文件夹下的catalina.out  日志文件,cat我的日志文件可得到如下的错误信息:(Caused by:  ...

  4. CF1037D Valid BFS?

    Valid BFS? CodeForces - 1037D The BFS algorithm is defined as follows. Consider an undirected graph ...

  5. PKUWC 2019&WC 2019爆零记

    PKUWC 2019&WC 2019爆零记 毕竟过了很久了,杂七杂八的东西就不写了,并且除成绩之外的内容不保证其正确性. Day1 T1:看到这道题很舒服啊,枚举top序算合法图的数量,状压D ...

  6. python---str和repr

    在 Python 中要将某一类型的变量或者常量转换为字符串对象通常有两种方法,即 str() 或者 repr() . 区别与使用 函数str() 用于将值转化为适于人阅读的形式,而repr() 转化为 ...

  7. java 前台使用枚举方法（二）

    最近发现,前台jsp使用枚举,有一个更方便的方法. 首先 枚举类的封装大家看一下:http://blog.csdn.net/hanjun0612/article/details/72845960 然后 ...

  8. 【HDU1219】AC Me（水题）

    BUPT2017 wintertraining(16) #4 A HDU1219 题意 多组样例,每组给一行,输出该行各字母个数,每组输出之间输出空行 代码 #include <cstdio&g ...

  9. Deep Learning（深度学习）学习笔记整理系列 一

    声明: 1)该Deep Learning的学习系列是整理自网上很大牛和机器学习专家所无私奉献的资料的.具体引用的资料请看参考文献.具体的版本声明也参考原文献. 2)本文仅供学术交流,非商用.所以每一部 ...

  10. 自学Zabbix11.1 Zabbix 配置SNMP监控

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix11.1 Zabbix 配置SNMP监控 1. 概述 zabbix采集数据方式: ...