详解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 下拉列表 二级联动插件分享
Mar 29 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python3生成随机数实例
2014/10/20 Python
python字符串的方法与操作大全
2018/01/30 Python
Php多进程实现代码
2018/05/07 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
详解Python字典的操作
2019/03/04 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
广告学毕业生求职信
2014/01/30 职场文书
文科生自我鉴定
2014/02/15 职场文书
食品安全处置方案
2014/06/14 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
工程索赔意向书
2014/08/30 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书