baiduTemplate / artTemplate
转载自 baiduTemplate / artTemplate
JS引擎模板
一、baiduTeplate
模板语法
提供一套模板语法,用户可以定义一个模板区块,每次根据传入的数据生成对应数据产生的html片段,从而渲染不同的界面效果;
优点:
- 语法简单直观,学习成本低,开发效率低,采用JavaScript的原生语法;
- 效率较高,默认html转义(防止XSS攻击),并且支持包括URL转义等多种转义;
- 变量未定义直接输出为空,防止页面错乱;
- 分隔符可以自定义;
用法
- 1.引入文件
使用百度模板时,需要引入baiduTemplate.js文件
<script src='./baiduTemplate.js' type='text/javascript'></script>
2.放置模板片段
- 页面中,模块可以放在<script>标签中,设置type为
text/html 或 text/template,用 id 标识
,代码示例:
<script id="container1" type="text/html"> 模板部分 </script>
2.或者存放在<textarea>中,一般情况设置其CSS样式display:none
来隐藏掉textarea,同样用id来标识,代码示例:
<textarea id="container2" style="display:none;"> 模板部分 </textarea>
3.直接定义变量存储模板
var tpl = "模板内容"
;
- 页面中,模块可以放在<script>标签中,设置type为
3.调用引擎方式
模板数据结构是json,可以在本地加载也可以从服务端加载过来
方式1:baidu.template('container1',data); // 直接传入id即可
方式2:baidu.template(tpl,data); //tpl是传入的模板(String类型),可以是模板的id也可以是一个模板片段的字符串,传入模板和对应的数据返回对应的html片段
方式3:只传入tpl,这是返回的是一个编译后的函数,可以把这个函数缓存下来,传入不同的data就可以生成不同的html片段;
代码示例: var fun = baidu.template(tpl);
fun(data); // data 产生的html片段
fun(data1); // data1 产生的html片段
自定义 分隔符
模板的分隔符为%,也可以自定义,自定义语法如下:设置左分隔符:baidu.template.LEFT_DELIMITER = '<!';设置右分隔符:baidu.template.RIGHT_DELIMITER = '!>'
模板js语法
<% var test = function(){//函数体};if(1){}else{};function testFun(){return;};%>` 数据设置value值时,需要使用 =`var data={"title":'欢迎使用baiduTemplate',"list":['test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API','test2:','test3:','test4:list[5]未定义,模板系统会输出空']};
二、atrTempalte
模板语法(两个版本可供使用,原生与简洁)
- 原生语法 原生语法需要引入原生语法版 template-native.js
1.使用:
在页面中引用引擎:<script src='./template-native.js'></script>
2.表达式:
<% %> 符号包裹起来的语句则为模板的逻辑表达式;
对内容编码输出:<%=data%>
不编码输出:<%=#data%>
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。
3.逻辑 支持js原生语法
a.使用一个type="text/html"的script标签存放模板:
<h1><%=#name%></h1><%for(var i = 0; i<friends.length;i++){%><ul><li><%=friends[i]%></li></ul><%}%>
b.渲染模板:
var data = {name:'tom',friends:[{name:'cat'},{name:'jerry'},{name:'lily'}]}var html = template(id,data);document.body.innerHTML = html;
4.模板包含表达式,用于嵌套子模板
5.模板不能访问全局对象,使用公用方法 template.helper(name,callback)注册公用辅助方法
template.helper('$ubb2html', function (content) {// 处理字符串...return content;});
模板中使用方式:
<% $ubb2html(content) %>
- 简介用法 简洁语法需要引入简洁语法版 template.js
推荐使用,语法简单实用,利于读写。
1.使用:
在页面中引用引擎:<script src='./template.js'></script>
2.表达式:
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
条件表达式:
{{if admin}}<p>admin</p>{{else if code > 0}}<p>master</p>{{else}}<p>error!</p>{{/if}}
遍历表达式:
{{each list as value index}}<li>{{index}} - {{value.user}}</li>{{/each}}// 或者 (此方法需要加$符){{each list}}<li>{{$index}} - {{$value.user}}</li>{{/each}}
方法
- 1.template(id, data);根据渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数,那么将返回一渲染函数。
- 2.template.compile(source, options); 返回一个渲染参数
- 3.template.helper(name, callback); 返回一个渲染结果(添加辅助方法)
- 4.template.config(name, value); 更改引擎的默认设置
artTemplate 支持nodejs Express
- 1.安装:npm-install art-template
- 2.使用: var template = require('art-template');
var data = {list:['data1','data2']};
var html = template(__dirname + 'index/main',data);
Nodejs + Express
var template = require('art-template');template.config('base', '');template.config('extname', '.html');app.engine('.html', template.__express);app.set('view engine', 'html');//app.set('views', __dirname + '/views');
运行demo:
node demo/node-template-express.js
baiduTemplate / artTemplate相关推荐
- 广告等第三方应用嵌入到web页面方案 之 使用js片段
在自己的项目中嵌入过广告的朋友们可能都用过百度联盟, 只需要嵌入如下一段js代码片段, 就可以在自己的项目中嵌入广告, 来获得收益. <script type="text javasc ...
- AJAX04 JQ的AJAX
一.jQuery中的Ajax 1.jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以PO ...
- 学习使用templete.js
2019独角兽企业重金招聘Python工程师标准>>> 官网: https://github.com/yanhaijing/template.js 相关链接 BaiduTemplat ...
- 必须掌握的前端模板引擎之art-template
常用的模板引擎有tpl.js.baiduTemplate.doT.js.art-template等等: 我所理解的模板引擎就是把js数据传到html中展示出来: art-template 是一个简约. ...
- 使用artTemplate模板将json转换为html页面
2019独角兽企业重金招聘Python工程师标准>>> 有个小的工作任务将给定的一个大的json文件转换为html页面展示,搜索了一下有一些js模板可以完成这个需求,上网搜索之有ar ...
- js模板引擎之art-template
1.模板引擎介绍 1.1 为什么要使用模板引擎 我们通过ajax获取到数据后,需要把数据渲染到页面中,在使用模板引擎前,我们的做法是大量的拼接字符串. 拼接字符串的缺点:1.代码可阅读性非常 ...
- 腾讯的模板引擎---artTemplate
主要方法如下5种,在此不详细说artTemplate的方法,主要记录三种使用artTemplate的方法. template(id, data) 根据 id 渲染模板.内部会根据document.ge ...
- lodop+art-template实现web端漂亮的小票样式打印
一. 现状 由于之前采用Lodop打印控件(商业版付费,可以使用免费版 但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现. 二. 介绍 art ...
- artTemplate使用
bower install artTemplate --save https://github.com/aui/artTemplate 快速上手 模板定义: <div id="co ...
最新文章
- Ubuntu16下安装kaldi(使用物理主机)
- MikroTik RouterOS使用SATA光驱安装时提示:no CD-ROM found press ENTER to reboot
- Web测试要点 做移动端的测试,也做web端的测试,甚至后面桌面端的测试和后台的测试也做了,基本上把我们产品各个端都玩了一轮...
- 2019蓝桥杯省赛---java---B---1(组队)
- 在 Visual C++ 中使用内联汇编
- 优粮生活炒菜机器人_闫寒 - 外卖O2O「优粮生活」合伙人 | 到「在行」来约见我...
- linux系列之常用运维命令整理笔录
- 耳机插在主机后面声音很小,音频软件测试很大声音,如何解决电脑前面耳机没声音后面却正常的问题...
- 计算机硬件技术基础教程mcs-51单片机原理及应用,mcs51单片机原理及应用
- android 坐标度分秒转换工具,android 经纬度度分秒与十进制之间的相互转换
- 软考-信息安全工程师-下午题常考
- 基于java+jsp房屋租赁管理系统
- 数字html显示e的格式化,表格中数字显示是E+数字 怎么正常显示
- html5跳棋游戏,跳棋小游戏大全
- 为什么天蝎座出互联网大佬,我来告诉你原因!
- 压敏电阻原理、参数、选型
- P1458 [USACO2.1]顺序的分数 Ordered Fractions
- R语言安装Sampling包
- 2022年流动式起重机司机考题及模拟考试
- SLAM中相机位姿求解(李群李代数)
热门文章
- mysql anyvalue函数_Mysql 的ANY_VALUE()函数和 ONLY_FULL_GROUP_BY 模式
- leetcode115. 不同的子序列
- linux 启动程序 绑定id,linux如何根据进程ID查找启动程序的路径
- 4位无符号比较器设计
- 《C++ Primer》7.5.2节练习
- [蓝桥杯2018决赛]换零钞-枚举
- 列名无效如何解决_XSKY ClickHouse如何实现存算分离
- Fine-tunning适用情况
- Codeforces Round #590 (Div. 3) E. Special Permutations 差分 + 思维
- Educational Codeforces Round 80 (Rated for Div. 2) 二分 + 状压