前端模板引擎art-template

最新推荐文章于 2024-04-15 09:42:31 发布

MarxPe

最新推荐文章于 2024-04-15 09:42:31 发布

阅读量410

点赞数

分类专栏：笔记前端

本文链接：https://blog.csdn.net/u012897606/article/details/105946614

版权

笔记同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
git源码地址：https://github.com/aui/artTemplate

特性

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

template模板，可以方便、简化我们的前端页面加载。通过动态渲染的方式，为我们的前端界面带来更多简单实际的界面效果和处理方案。

用法示例：

<!-- 1.引入js -->
<script src="../template-web.js"></script> 
<body> 
 <h1>HTML</h1> 
 <div id="content">待模板填充内容(定义id，等待模板翻译后的HTML填充)</div> 
 
 <!--2.写模板-->
 <!-- 定义js模板 开始>>>>>>> -->
 <script id="test_template" type="text/html"> 
 	<span>不转义：{{#value}}</span> 
 	<span>默认转义： {{value}}</span> 
 </script> 
 <!-- 定义js模板 结束<<<<<<< -->
  
 <script> 
	 //3.定义模板数据
	 var templateData= { 
	  value: '<p style="color:red">template</p>' 
	 }; 
	 //4.模板翻译
	 var html = template('test_template', templateData); 
	 //5.写入界面
	 $("#content").append(html);
 </script> 
</body>

示例解析：

引入模板的js：template-web.js。
编写模板：
使用<script id="templateId" type="text/html"> </script>包裹模板内容；
注意type ="text/html"，这样浏览器就会以html方式对模板进行解析；
内容与一般html写法一致；
具体要带入的动态参数，使用{{valeName}}方式引用，具体语法下面介绍。
定义模板数据，与<script></script>上的模板引用参数一致。
模板翻译为具体html代码：
调用js的template([templateId], [data])方法，将数据写入，将模板解析为html代码；
其中：[templateId]是模板的id，如示例中，为：test_template
[data]为模板引用的动态参数，为自定义内容，如示例中的：templateData
将4生成的html写入到界面上的具体位置。

以上为一般的模板用法。而实际模板的内容，各式各样，需要我们配合模板的语法，来进行各种定制。

js模板基本语法：

定义模板参数：

var data = {
		name:'tom', 
		age:'37',
		children:[
			{name:'jams', age:'8'}, 
			{name:'lili', age:'6'}
		]
	};

取值：

{{name}}

判断：

{{if age == 37}}
	{{name}}
{{else if age == 38}}
	{{age}}
{{/if}}

列表循环：

{{each children as c index}}
	内置索引：{{index}}
	属性值：{{c.name}}
	属性值：{{c.age}}
{{/each}}

自定义方法：
使用template.helper(name,function)注册方法
在模板中，与其他参数一样，用{{}}调用
示例：

//模板内调用
{{getAge(age)}}

//自定义函数
template.helper("getAge",function(age){
    console.log(age);
});

注意：
需要注意的是，根据界面的渲染顺序，界面元素渲染完成后，才会执行js内容。
所以即使模板是在界面初始化的时候进行加载，也需要在界面元素加载完成后，才会调用到js读取、渲染上。
所以如果模板内调用了一些非原生的前端控件，则需要在模板加载完成后（即在模板写入界面后），主动调用这些控件自己的渲染方式来对他们自己进行渲染。否则模板是不会自动渲染这些控件的。

MarxPe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端模板引擎art-template

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。git源码地址： https://github.com/aui/artTemplatetemplate模板，可以方便、简化我们的前端页面加载。通过动态渲染的方式，为我们的前端界面带来更多简单实际的界面效...
复制链接

扫一扫