详解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 相关文章推荐
JavaScript中setInterval的用法总结
Nov 20 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
js核心基础之闭包的应用实例分析
May 11 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中的时间处理
2006/10/09 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php类中private属性继承问题分析
2012/11/01 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
Stop SQL Server
2007/06/21 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
python中tab键是什么意思
2020/06/18 Python
python从PDF中提取数据的示例
2020/10/30 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
物理系毕业生自荐信
2013/11/01 职场文书
房产授权委托书范本
2014/09/22 职场文书
为自己工作观后感
2015/06/11 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Nginx内网单机反向代理的实现
2021/11/07 Servers
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js