详解js模板引擎art template数组渲染的方法


Posted in Javascript onOctober 09, 2018

JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高、错误处理调试优,执行速度快的有artTemplate(腾讯 14k)、juicer(国外 12k)这俩个,doT除了错误处理调试差以外其他的都和这两个一样,他有一个优点是小(4k),扯远啦。

art-template 是一个简约、超快的模板引擎。

什么是art-template

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码,以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容,如果html内容需要修改,我们需要在js中修改。而用了模板引擎以后,我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。在线速度测试。

art-template特性

  1. 拥有接近 JavaScript 渲染极限的的性能
  2. 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
  3. 支持 Express、Koa、Webpack
  4. 支持模板继承与子模板
  5. 浏览器版本仅 6KB 大小

我们就讲一下讲简洁语法的渲染方式,template(filename, content)根据模板名渲染模板。前提是你已经对artTemplate有所了解,

今天我们就讲一下数组渲染的方法

数组渲染有数组对象和纯数组两种形式,我们先说数组对象,如后端返回我们接口,收到的就是一个数组。比如:

const res = [
{"name":"小明", "age":16, "marry":"单身"},
{"name":"小花","age":15, "marry":"有男朋友"},
{"name":"小胖","age":15, "marry":"有女朋友"},
{"name":"小丽","age":15, "marry":"单身"}
];

用artTemplate有个好处就是除了你的数据需要重组,其他的完全可以拿来直接用。如下

html

<div id="person"></div>

js

<script>
const res = [
{"name":"小明", "age":16, "marry":"单身"},
{"name":"小花","age":15, "marry":"有男朋友"},
{"name":"小胖","age":15, "marry":"有女朋友"},
{"name":"小丽","age":15, "marry":"单身"}
];
document.getElementById('person').innerHTML = template('personTemp', {data:res}); // 其实这里是把数组转为对象的形式传进的
</scrtip>

template

<script type="text/html" id="personTemp">
//写法一
{{each data}}
<li>{{$index}}索引 我叫{{$value.name}},今年{{$value.age}}岁,{{$value.marry}}</li>
{{/each}}
 
//写法二
{{each data item index}}
<li>{{index}}索引 我叫{{item.name}},今年{{item.age}}岁,{{item.marry}}</li>
{{/each}}
</script>

下面在看数组渲染,这是一个数组

const res = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];

html

<div id="interest"></div>

js

<script>
const res = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
document.getElementById('interest').innerHTML = template('interestTemp', {data:res}); // 其实这里是把数组转为对象的形式传进的
</scrtip>

template

<script type="text/html" id="interestTemp">
//写法一
{{each data}}
<li>{{$index}}索引 我喜欢{{$value.name}}</li>
{{/each}}
 
//写法二
{{each data item index}}
<li>{{index}}索引 我喜欢{{item}}</li>
{{/each}}
</script>

就说这么多吧,其实这种模板用着挺简单的很顺手。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
Node 自动化部署的方法
Oct 17 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 #Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
vue router 源码概览案例分析
Oct 09 #Javascript
Angular4 Select选择改变事件的方法
Oct 09 #Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 #Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 #Javascript
You might like
php jquery 多文件上传简单实例
2013/12/23 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python命令行参数用法实例分析
2019/06/25 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
大学生职业生涯规划书
2014/03/14 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
服务器nginx权限被拒绝解决案例
2022/09/23 Servers