腾讯art-template4，即vue后又获一利器
腾讯art-template4，即vue后又获一利器
art-template是一个简约、超快的模板引擎，官方给出的优点及特性是：
1.拥有接近 JavaScript 渲染极限的的性能
2.调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
3.支持 Express、Koa、Webpack
4.支持模板继承与子模板
5.浏览器版本仅 6KB 大小
其中第2点看出来不错哦，支付打断点，其它几个优点见仁见智。
首先了解一下框架工作流程，大致可以分为两步：编辑模板和渲染模板。
编辑模板就是将需要动态生成的DOM抽象成为模板，渲染则是利用渲染函数，把后端返回的数据 填入模板中相应的位置上，生成最终的html串并且回填到html页面的指定位置中。
下面开始学习这旅吧。
1.先去网络或github上去下载art-template.js文件，然后在html或jsp里引入文件即可以使用
<script src="https://github.com/aui/art-template/tree/master/lib/template-web.js"></script>2.学习一个框架，从3点开始下手
第一：数据怎么展示
第二：数据怎么提供
第三：数据怎么生效。
2.1 第一：数据怎么展示：
ArtTemplate提供2种语法
1.标准语法或叫做极简语法，使用的是双大括号或者叫“胡子”，推荐使用，看起来简洁
{{if data}}<h2>{{data.name}}</h2>
{{/if}}只将数据放到胡子，其它标签安jsp或html语法写
2.原始语法，<%%>
<% if (data) { %><h2><%= data.name %></h2><% } %>使用jsp的语法，我们知道”<%%>”里是可以写java代码的，可以定义局部变量和java代码语句。把数据和逻辑那块放到<%%>里写，其它按正常的逻辑写，类似写jsp。缺点是看起来不整洁，特别是页面复杂的，优点是拥有强大的逻辑表达能力
3.双大括号或胡子里可以使用的逻辑符包括“.””[]”,”三目运算符”,”||&”,”逻辑运算符”。如下：
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
例子如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../lib/template-web.js"></script>
</head><body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{name}}性别是{{sex==1?'男':'女'}}</h1><ul>{{each list value i}}<li>第{{i + 1}}门课 ：{{value}}</li>{{/each}}
</ul>
<h1>其中数学和英语总分：{{math+english}}</h1>
</script><script>
var data = {name:"小明",sex:1,math:90,english:73,list: ['文艺','数学','英语', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>渲染出来的结果：
1).红色部分是我们特别关注的地方，强调一点，这里的模块指的是用
<script type="text/html">XXXX代码</script>包裹的部分。胡子和标签都在里面写，脚本视做一个模块。
2).胡子里可以使用指定的操作符，如逻辑判断有运算符，如果不足够，可以使用原始语法，那里逻辑运算比较全面。
3).让渲染出来的元素在页面上生效。
var html = template('test', data);document.getElementById('content').innerHTML = html;4.条件判断
{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
所以取数据和逻辑判断都在胡子里。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../lib/template-web.js"></script>
<script src="../lib/jquery.2.1.1.min.js"></script>
</head><body>
<div id="content"></div>
<script id="testP" type="text/html">
<h1>{{name}}性别是{{sex==1?'男':'女'}}</h1>
{{if math > 90}}
<2>数学成绩上等</h2>
{{else if math >70}}
<h2>数学成绩中等</h2>
{{else if math > 60}}
<h2>数学成绩及格</h2>
{{/if}}
<ul>{{each list value i}}<li>第{{i + 1}}门课 ：{{value}}</li>{{/each}}
</ul>
<h1>其中数学和英语总分：{{math+english}}</h1>
</script><script>
var data = {name:"小明",sex:1,math:90,english:73,list: ['文艺','数学','英语', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('testP', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>结果如下：
看红色部分，以{{if value}}开头，以{{/if}}结尾，中间可以有else if。可以做到java里
if(value){}else if(value){}else if(value){}5.模拟for或foreach逻辑。如上面的例子：
<ul>{{each list value i}}<li>第{{i + 1}}门课 ：{{value}}</li>{{/each}}
</ul>6.设置变量：{{set temp = value}}
例如：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../lib/template-web.js"></script>
<script src="../lib/jquery.2.1.1.min.js"></script>
</head><body>
<div id="content"></div>
<script id="testP" type="text/html">
{{set nb=math+english}}
<h2>数字的别名nb值:{{nb}}</h2>
<h1>{{name}}性别是{{sex==1?'男':'女'}}</h1>
{{if math > 90}}
<2>数学成绩上等</h2>
{{else if math >70}}
<h2>数学成绩中等</h2>
{{else if math > 60}}
<h2>数学成绩及格</h2>
{{/if}}
<ul>{{each list value i}}<li>第{{i + 1}}门课 ：{{value}}</li>{{/each}}
</ul>
<h1>其中数学和英语总分：{{math+english}}</h1>
</script><script>
var data = {name:"小明",sex:1,math:90,english:73,list: ['文艺','数学','英语', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('testP', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>7.过滤器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};
使用{{value|filter}}
使用类似管道符来传递数据，数据会传递到定义的过滤器函数filter里
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../../lib/template-web.js"></script>
</head><body>
<h1>自定义过滤器</h1>
<div id="content"></div>
<script id="test" type="text/html">
<h2>过滤的第一种使用方法：{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}</h2>
<h2>过滤的第二种使用方法：{{$imports.dateFormat(1408536771253,'yyyy年 MM月 dd日 hh:mm:ss')}}</h2>
<h2>特例：{{$imports.test(1408536771253)}}</h2>
</script><script>/*** 对日期进行格式化，* @param date 要格式化的日期* @param format 进行格式化的模式字符串* 支持的模式字母有：* y:年,* M:年中的月份(1-12),* d:月份中的天(1-31),* h:小时(0-23),* m:分(0-59),* s:秒(0-59),* S:毫秒(0-999),* q:季度(1-4)* @return String* @author yanis.wang* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/*/function test(value){return value;}template.defaults.imports.dateFormat = function (date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份"d": date.getDate(), //日"h": date.getHours(), //小时"m": date.getMinutes(), //分"s": date.getSeconds(), //秒"q": Math.floor((date.getMonth() + 3) / 3), //季度"S": date.getMilliseconds() //毫秒};format = format.replace(/([yMdhmsqS])+/g, function(all, t){var v = map[t];if(v !== undefined){if(all.length > 1){v = '0' + v;v = v.substr(v.length-2);}return v;}else if(t === 'y'){return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;
};// --------var data = {time: 1408536771253,
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>结果如下
第一种方式是直接使用方式，通过管道符将数据拿到过滤器里，第二种方式是函数方式，我们知道，模板通过 $imports可以访问到模板外部的全局变量与导入的变量，我们可以使用$import直接方式通过template.defaults.imports导入的函数或变量，也可以访问全局的函数或变量，注意是全局的，所以通过$imports可以直接调用方法或变量，所以，有第3个例子，通过$imports模板变量访问了没导入但是是全局的test函数。
art-template.js提供了如下几种内置变量：
1.$data 传入模板的数据，如上数据可以$data.math访问到数学分数是多少
2.$imports外部导入的变量以及全局变量，（重要，重点，重量，重要的事说3遍，还不带重的）
3.print 字符串输出函数，后面可根随机个值，然后将拼接的字符串打印出来，比如如上数据：<h2>print函数：print name "的数学是" math "，英文是" english ",总分是" {{math + english}}</h2>
结果如下：
4.include子模板载入函数
5.extend模板继承模板导入函数
6.block 模板块声明函数
第二：数据怎么提供
我们知道js里提供数据常用json格式，数据怎么提供的问题涉及到art-template的2种渲染方式。
第一种直接提供模板名和数据源渲染，再将渲染后的模板页面添加到jsp里某个dom元素里。使用template(“filename”,content)
Filename:模板名，如上面script脚本id，或者单独抽出来的子模板路径，
Content:如果提供的是object，一般当做提供的是json格式数据，那么template方法会渲染模板将以string形势返回渲染后的结果，最张将返回的string添加到dom元素上。
如果 content为string，则编译模板并返回function，
一般使用方式是var html = template('testP', data);然后将返回的字符串html插入到dom元素上document.getElementById('content').innerHTML = html;
第二种。以字符串形势提供模板，调用 compile或者render编译模板，然后将数据提供给模板。注意以字符串形势提供的模板严格来讲并不是”模板“，必需经过编译才行。例如：
var source = '<ul>'
+ '{{each list value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var data = {list: ['摄影', '电影', '民谣', '旅行', '吉他']
}
var render = template.compile(source);
var html = render(data);
结果：
compile(source, options)编译模板并返回一个渲染函数。先编译再提供数据
或者编译和提供数据放一起
var render = template.render(source,data);
document.getElementById('content').innerHTML = render;
结果同上。
所以：
template(filename, content)
compile(source, options)
render(source, data)
即是提供数据和让数据怎么生效的三种方式。这也解释了第三个问题数据怎么生效。
第三：数据怎么生效
见第二解答。
高级用法include函数，
{{include '模板id'}}
{{include '模板id' data}}
data 数默认值为$data，也可赋值，指定数据源
例子：
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script><script id="list" type="text/html">
<ul>{{each list value i}}<li>索引 {{i + 1}} ：{{value}}</li>{{/each}}
</ul>
</script><script>var data = {title: '嵌入子模板',list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>结果如下：
模板id为test使用Includ函数包裹了一个模板id为list的模板。虽然显示出来了，但这里有个坑。所以模板都必需写在同一个html或jsp里，不同模板可以写在不 同的<script id="xxx" type="text/html">，用id区别。换名话说include只能包裹同一页面的模板，如果模板存放在其它目录中则include无效。如果想要独立出模板放在单独文件里，需要使用企鹅开发的另一个框架TmodJS，它和art-template都是一家公司开发的TmodJS框架依赖于art-template框架的一款模板预编译器，感觉兴趣的同学可以自行百度
到这里我们基本上学会了art-template.js。如果说还有什么要学习的，估计就是框架的配置了。
配置
1.框架提供了.defaults属性，里面可以设置很多框架的默认属性。上面我们学习到的imports就是.defaults里的属性template.defaults.imports.XXX变量=XXX值。
它也提供了其它一些默认参数设置。
// 模板名
filename: null,
// 模板语法规则列表
rules: [nativeRule, artRule],
// 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
// escape 可以防范 XSS 攻击
escape: true,
// 启动模板引擎调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,
// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: true,
// 是否开启缓存
cache: true,
// 是否开启压缩。它会运行 htmlMinifier，将页面 HTML、CSS、CSS 进行压缩输出
// 如果模板包含没有闭合的 HTML 标签，请不要打开 minimize，否则可能被 htmlMinifier 修复或过滤
minimize: true,
// 是否编译调试版
compileDebug: false,
// 模板路径转换器
resolveFilename: resolveFilename,
// 子模板编译适配器
include: include,
// HTML 压缩器。仅在 NodeJS 环境下有效
htmlMinifier: htmlMinifier,
// HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
htmlMinifierOptions: {collapseWhitespace: true,minifyCSS: true,minifyJS: true,// 运行时自动合并：rules.map(rule => rule.test)ignoreCustomFragments: []
},
// 错误事件。仅在 bail 为 false 时生效
onerror: onerror,
// 模板文件加载器
loader: loader,
// 缓存中心适配器（依赖 filename 字段）
caches: caches,
// 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
root: '/',
// 默认后缀名。如果没有后缀名，则会自动添加 extname
extname: '.art',
// 忽略的变量。被模板编译器忽略的模板变量列表
ignore: [],
// 导入的模板变量
imports: runtime至于有多少是有用的，只能见仁见智
2.除了直接使用.defaults外，框架还提供了config(name,value)函数,按上面提供的配置属性填值即可。
想要了解最多建议去gitHub上看。
art-template@4 新特性一览
Github源码
教程
腾讯art-template4，即vue后又获一利器相关推荐
- 腾讯数据解读：95后基本不爱用微信，98%都是成年人，社交应用存在巨大机会...
这几天一份<2015年最新微信用户数据报告>引起了PMcaff产品经理社区会员之间传阅.同时也引起了小编的兴趣,截止今年第一季度末,微信每月活跃用户已达到5.49亿,用户覆盖200多个国家 ...
- 电巢：继腾讯与联通混改后，又有两家企业官宣，科技巨头与国企混改，意味着什么？
前言: 11月2日,一则"中国联通和腾讯成立合营企业"的消息引发热议,一时间众说纷纭.随后,"腾讯副总裁已担任中国联通董事"相关话题登上微博热搜,中国联通股价尾 ...
- [经验教程]腾讯视频VIP会员开通后如何申请退款取消腾讯视频会员VIP退款教程
腾讯视频VIP会员开通后如何申请退款? 1.打开腾讯视频VIP会员开通支付订单,如确实不需要用腾讯视频VIP会员在再申请退款,请不要恶意申请. 2.进入后,选择遇到的问题:不满意商家的会员服务或充错会 ...
- 谷歌跟风推微信小程序；中兴解禁后首获订单；Yahoo Messenger正式关闭 | 极客头条...
「CSDN 极客头条」,是从CSDN网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有料的新闻资讯,让所有技术人,时刻紧跟业界潮流. 快讯速知 雪中送 ...
- 腾讯云图片(行为)验证码，腾讯天御验证码，前vue后python端配置。前后端分离drf下的
腾讯验证码功能开通 官网相关链接:腾讯T-Sec 天御 验证码 腾讯防水墙 点击进入腾讯T-Sec 天御 验证码注册登录后,送一周20000条验证测试数据. 可以先体验一下 在图形验证中创建一个验证 ...
- Vue - 使用 腾讯云SCF部署Vue项目（支持GitHub Action）
一.前提条件 1.本地已有一个Vue2/Vue3项目 腾讯云SCF本身支持使用模板创建(模板创建参考)一个Vue项目并部署,但本文主要讲解将本 地原有的Vue项目改造为支持Serverless SCF ...
- 在腾讯云服务器跑Vue + SpringBoot项目
背景:闲来无事,跟着做了个Vue+SpringBoot项目,做了一些之后项目内容没什么思路搞什么了,然后就想着再搭个服务器. 一:项目及云服务器还有域名准备 项目:这个-自己准备吧,只要自己做好的能在 ...
- 阿里云、腾讯云纷纷宕机后，用户只能坐等损失？
这个夏天,云服务日子都不太好过!继上月末阿里云服务出现技术故障后,腾讯云服务又出了大岔子. 昨天上午7点开始,陆续有网友反映,腾讯云服务出现宕机.随后,腾讯云广州区域全面断网,腾讯云主页.控制台.DN ...
- 82.使用vue后怎么针对搜索引擎做SEO优化？
什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...
- ＜必知＞在腾讯云买了服务器后不知道登录密码，如何重置密码
在购买腾讯云服务器时,如果在购买时没有设置密码,那么云服务器创建后是没有初始码的 ###我们可以在控制台"重置密码"来获取密码 1.登录云服务器控制台 2.将正在运行的服务器关机 ...
最新文章
- 「思想钢印」成真！33位中美科学家最新成果：用光成功改变大脑认知
- “Z世代”崛起，网易云信助力猫耳FM引领声音风潮
- ESP32-S3与ESP32-S2相比,有什么不同呢?
- Java 对象和类的一些笔记总结
- 51单片机实现4位数以内的加减法
- python语言的开发者_写给.NET开发者的Python教程(一):引言
- 检测c/c++中内存泄露
- 《第一行代码第三版》总结篇
- github contribbution 没记录怎么破？
- 都说DBA 是越老越值钱， 那你是没干过DBA
- 为什么自动驾驶遇瓶颈，但自动代客泊车却很热？
- 公众号开发素材管理，php删除微信素材
- 以太坊毕业设计DAPP开发-彩票的设计与实现
- SpringBoot | SpringBoot快速入门
- 如何转换DWG文件格式？来试试这两种方法
- 禅道讲义之超级管理员
- 免费有效站外推广方法(附录经典案例)
- 前端 == Javascript
- PHP medoo怎么样,Medoo很强大啊！
- smalldatetime mysql_SQLSERVER中datetime和smalldatetime类型分析说明
热门文章
- Excel高级图表制作②——帕累托图
- python实现合并多个excel中同名的sheet
- fixed在ios失效解决方案
- 2021年真正还能够用的一键制作词云图网站
- CPU卡指令返回错误集
- 彻底解决Android Studio Minimum supported Gradle version is X.Y.Z. Current version is x.y.z.问题
- windows server服务器打安全补丁
- 科研linux发型版本,[合集]哪些Linux系统科研能用呢 - 优秀的Free OS(Linux)版 - 北大未名BBS...
- 从400亿估值的链家网成长为4000亿的房地产产业平台，贝壳做对了这三点创新
- 如何在图片上添加边框和文字