详解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继承的实现
Oct 24 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
VUE实现强制渲染,强制更新
Oct 29 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python实现rsa加密实例详解
2017/07/19 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Python 从attribute到property详解
2020/03/05 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Python气泡提示与标签的实现
2020/04/01 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
大学理论知识学习自我鉴定
2014/04/28 职场文书
管理标语大全
2014/06/24 职场文书
导游词之镇江焦山
2019/11/21 职场文书
详解Python requests模块
2021/06/21 Python
Go语言应该什么情况使用指针
2021/07/25 Golang
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers