baiduTemplate.js 百度JS模板引擎
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模板引擎的更多相关文章
- Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade —— 源于 Node.js 的 HTML 模板引擎 开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- node.js 使用ejs模板引擎时后缀换成.html
这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 代码如下: var ejs = require('ej ...
- node.js中的模板引擎jade、handlebars、ejs
使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...
- vue.js与后台模板引擎“双花括号”冲突时的解决办法
后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的产生冲突,此时只要在新建Vue对象时,添加delimiters: ['${', '}'],就搞定了,代码如下 <!DOCTYP ...
- 说说如何用js实现一个模板引擎
本文同步更新在: https://github.com/whxaxes/blog/issues/4 ,在 github 看文章显示效果会更好一些. 前言 不知不觉就很长时间没造过什么轮子了,以前一直想 ...
- doT.js——前端javascript模板引擎问题备忘录
我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想 ...
- epii.js简约而不简单的JS模板引擎
epii.js是什么 epii.js是一个 模板引擎,可快速实现数据与ui绑定,快速实现事件绑定,与处理,不依赖任何第三方库,仅仅8k,在native+webapp开发 和 web开发,h5微网页上均 ...
随机推荐
- 简单的数据库备份语句--Oracle+SQLSERVER
1. 工作中经常需要备份数据库表, 有时候经常需要baidu或者是询问,简单些一下.. 如果备份表不存在时: Oracle的语法 create table zhaobsh as select * fr ...
- vue原理探索--响应式系统
Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...
- Idea for Mac 过期 IntelliJ IDEA 2017 完美注册方法(附idea for Mac破解方法)
Idea 不能使用了: 开始破解: (1)首先下载 jar包: https://download.csdn.net/download/engerla/10573069 放到位置: /Applicati ...
- PHP IF ELSE简化/三元一次式的使用
一般我们会这样写: <? if($_GET['time']==null) { $time = time(); } else { $time = $_GET['time']; } echo $ti ...
- selenium之截图
selenium支持对当前页面保存截图,使用方法: driver.get_screenshot_as_file(file_path) 代码举例: ...... def get_screenshot(d ...
- linux ssh和scp消除每次问yes/no
ssh 10.11.3.61The authenticity of host '10.11.3.61 (10.11.3.61)' can't be established.RSA key finger ...
- day11 高阶函数 函数式编程
高阶函数,满足 接收函数作为参数或者返回有函数 函数可以当做参数传递给另一个函数 def foo(n): print(n) def bar(name): print("my name is ...
- JavaScript 数据类型检测总结
JavaScript 数据类型检测总结 原文:https://blog.csdn.net/q3254421/article/details/85483462 在js中,有四种用于检测数据类型的方式,分 ...
- 【刷题】UOJ #374 【ZJOI2018】历史
九条可怜是一个热爱阅读的女孩子. 这段时间,她看了一本非常有趣的小说,这本小说的架空世界引起了她的兴趣. 这个世界有 \(n\) 个城市,这 \(n\) 个城市被恰好 \(n-1\) 条双向道路联通, ...
- php laravel 多条件筛选
效果如图,点击的条件出现在已选择的地方,点击已选择的条件可以删除当前点击的条件 语言是php 框架是laravel. 一.html <div class="doctor-conditi ...