baiduTemplate.js 百度JS模板引擎

时间：2022-09-02 10:29:56

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&period;js 的 HTML 模板引擎

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 台大《机器学习基石》课程感受和总结---Part 1&lpar;转&rpar;

    期末终于过去了,看看别人的总结:http://blog.sina.com.cn/s/blog_641289eb0101dynu.html 接触机器学习也有几年了,不过仍然只是个菜鸟,当初接触的时候英文 ...

  2. MongoDB 学习笔记&lpar;python操作&rpar;

    转自: http://blog.csdn.net/daillo/article/details/7030910

  3. 启动TOMCAT报错 java&period;util&period;zip&period;ZipException&colon; invalid LOC header &lpar;bad signature&rpar;

    报错信息大致如下所示: at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect. ...

  4. asp&period;net 的那点事（1、当用户在浏览器地址栏输入了网址后，发生了什么？）

    从今天开始我将抽出空闲时间复习asp.net相关知识.此篇博文只是为了记录学习当中的知识点和感觉到比较重要的知识点. 本人才疏学浅,如有遗漏或者错误希望广大博友尽情拍砖.我会在后续中进行更正. 这个问 ...

  5. Python连接MySQL数据库的多种方式

    上篇文章分享了windows下载mysql5.7压缩包配置安装mysql 后续可以选择 ①在本地创建一个数据库,使用navicat工具导出远程测试服务器的数据库至本地,用于学习操作,且不影响测试服务器 ...

  6. 【洛谷P1230】智力大冲浪

    题目大意:给定 N 项任务,每项任务有一个截至完成时间,若在截止时间之后完成要罚款 \(w_i\) 元,最初有 M 元,怎样完成能够留下最多得钱. 题解:按照罚款从多到少贪心,在查找能够最晚完成一项任 ...

  7. oracle的备份与恢复

    转自:https://blog.csdn.net/kepa520/article/details/78958029 dba的职责: 1.安装和升级oracle数据库 2.建库.表空间.表.视图.索引. ...

  8. Hibernate框架 hilo 方式配置MySQL 数据库的主键自增

    hilo(高低位方式high low)是hibernate中最常用的一种生成方式,需要一张额外的表保存hi的值.保存hi值的表至少有一条记录(只与第一条记录有关),否则会出现错误.可以跨数据库. 创建 ...

  9. CSS单行、多行文本溢出显示省略号（……）解决方案

    单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...

  10. &lbrack;转载&rsqb;SVN trunk、branch、tag的用法

    Subversion有一个很标准的目录结构,是这样的. 比如项目是proj,svn地址为svn://proj/,那么标准的svn布局是 svn://proj/|+-trunk+-branches+-t ...

相关文章