art-template整理

最新推荐文章于 2024-04-17 17:54:41 发布

码小龙

最新推荐文章于 2024-04-17 17:54:41 发布

阅读量1.2k

点赞数 2

分类专栏： art-template 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/yuan_xiao_long/article/details/116784940

版权

art-template是一个高性能的前端模板引擎，适用于NodeJS和浏览器。本文档详细介绍了其安装、使用步骤、模板语法，包括基本渲染、循环遍历、if条件判断以及模板继承等核心功能。

摘要由CSDN通过智能技术生成

官网介绍：art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。在线速度测试。
理解
在使用js进行前端开放的时候，除了DOM节点的操作以外还有通过json数据的操作。而操作最麻烦的就是使用json生成dom对象，通常要写很多的for循环，if判断之类的代码来支持data向view的转化，十使用模块引擎，可以很大程度上简化这个过程。
作用
使用模板引擎提供的模块语法，可以将数据和HTML拼接起来。

浏览器中编译

安装

1.复制内容保存在js文件中
2.

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

使用步骤

1.下载好的art-template模板引擎引入在 HTML 页面中
2.准备 art-template 模板，模块script标签 src 属性为 text/html 或者 text/template 和 id
3.使用模块引擎渲染数据
4.使用模板语法将数据和html进行拼接。
5.将拼接好的html字符串添加到页面中。

**例子： **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.存放在本地的js文件 -->
		<!-- <script src="template-web.js"></script> -->
		<!-- <script src="art-template.js"></script> -->
		<!-- 外链 -->
		<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
	</head>
	<body>
		<div id="box">	
		</div>
		<!-- 2.准备 art-template 模板，**模块script标签 src 属性为 text/html 或者  text/template  和 id** -->
		<!--  4.使用模板语法将数据和html进行拼接。 -->
		<script type="text/template" id="temp">
			{
    {
    name}}---{
    {
    age}}
		</script>
		</script>
		<!-- js代码 -->
		<script type="text/javascript">
			// 模拟json数据
			var data = 	{
    name:'zhangsan',age:18};
			// 3.使用模块引擎 template函数渲染数据。
			// 参数1：模板的 id 
			// 参数2：数据对象或者数组
			var temp = template('temp',data);
			// 5.将拼接好的html字符串添加到页面中。
			var box = document.getElementById('box');
			box.innerHTML = temp;
		</script>
	</body>
</html>

在这里插入图片描述

模板语法使用

按照上面的例子,主要以第 3 步传值的不同和模板语法来说明.

// 3.使用模块引擎 template函数渲染数据。
// 参数1：模板的 id 
// 参数2：数据对象或者数组
var temp = template('tem',object);

模块语法格式

标准语法: { { 语句 }}
元素语法: <% 语句 %>

<!DOCTYPE html>
<html>
	<head>

最低0.47元/天解锁文章

码小龙

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
art-template整理

官网介绍：art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。在线速度测试。理解在使用js进行前端开放的时候，除了DOM节点的操作以外还有通过json数据的操作。而操作最麻烦的就是使用json生成dom对象，通常要写很多的for循环，if判断之类的代码来支持data向view的转化，十使用模块引擎，可以很大程度上简化这个过程。作用使用模板引擎提供的模块语法，可以将数据
复制链接

扫一扫