arttemplate.js

最新推荐文章于 2025-05-05 10:43:10 发布
最新推荐文章于 2025-05-05 10:43:10 发布
阅读量3.3k 收藏
点赞数
分类专栏： js，模板引擎 文章标签： artTemplate js模板引擎
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangqin18710923356/article/details/78259915
版权 

模板引擎有好多种可在github的官网上查找


此处的arttemplate 是js模板引擎的一种，js库的不同，有的里面没helper,有的有，


在用谷歌浏览器f12定位调试时，global里可以去找有没有，没有就得换js库






 https:https://aui.github.io/art-template/zh-cn/docs/  文档地址  或            http://www.sjmoban.com/index.php/doc/index/4（此出比较简单全是案例）


 



   art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染



（加工成最后效果的）速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和大多浏览器







特性


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

    
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。
    

    

    

    



 
 

  
  


 
 


 
 

  
  简单案例 1：渲染变量
 
 


 
 

  
  
  
  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lianxi1</title>
</head>
<!--arttemplate的主文件  -->
<script type="text/javascript" src="js/template-web.js"></script>
<script type="text/javascript" src="../../../_js2/jquery.min.js"></script>
<body>
        <!--1:给一个存方渲染后（存放解析后的html代码）html的一个盒子  -->
	<div id="content"></div>
        <!--2:建立一个模板  -->
	<script type="text/html" id="template">
           <%=msg%>
        </script>
        <!--3给到模板数据  声明一个json数据-->
	<script>
            var data = {
			msg : "Hello World"   
	    };
	    /* 此函数是一个桥梁用来把模板和数据进行一个渲染返回一个字符串 /
	    var html = template("template", data);
	    /*  document.getElementById("content").innerHTML=html;//放到存放字符串的容器中 */
	    /*或者而此代码是jquery写法，必须引入jquery.js*/
	   $("#content").html(html);
	</script>
</body>
</html>

  
  简单案例
 2：渲染列表
  
  


  
  
 
 


 
 

  
  
  
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lianxi2</title>
</head>
<body>
<script type="text/javascript" src="js/template-web.js"></script>
<script type="text/javascript" src="../../../_js2/jquery.min.js"></script>
<!-- 存放解析渲染模板后的盒子 -->
<div id="content"></div>
<!-- 模板 -->

<script type="text/html" id="template">

//原始语法foreach
    <%for(i in list){%>
                 标题是： <%=list[i].title%><br/>
    <%}%>
//标准语法
    {{each list as value i}}
                标题是： {{i + 1}} : {{value}}<br/>
    {{/each}}

//原始语法for循环
    <% for(var i = 0; i < list.length; i++){ %>
      <%= list[i].title %>
    <% } %>

</script>

<!-- json数据 -->
<script type="text/javascript">
   var data={
		list:[
			{title:"aa"},
			{title:"bb"},
			{title:"cc"},
			{title:"dd"},
			{title:"ee"},
			{title:"ff"},
			{title:"gg"},
		]   
		   
   }

   /* 函数 渲染template 是id*/
  var html = template("template", data);
   $("#content").html(html);
</script>

</body>
</html>

  
  简单案例
 3：辅助函数<对数据做一些操作>
  
  


 
 


 
 

  
  
  
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lianxi3b</title>
<script type="text/javascript" src="js/artTemplate.js"></script>
<script type="text/javascript" src="../../../_js2/jquery.min.js"></script>
</head>
<body>
	<!--，之前一直输出变量，有时候，我们需要根据变量值，输出特定的字符串内容，这时候，辅助函数的作用就出来了。  -->
	<!-- 存放解析后模板的地方 -->
	<div id="content"></div>

	<!--建立模板  -->
	<!--  <%=函数名(参数列表)%>//这样调用即可-->
	<script type="text/html" id="template">
           <%=aa (msg) %>
    </script>
	<!--数据  -->

	<script type="text/javascript">
		var data = {
			"msg" : "abcdefghijk"
		};
		 /*template.helper("函数名",function(参数列表){});//定义一个辅助函数 */

		 template.helper("aa", function(uu) {
			//用空格截取每个字符，在反转后用空格连一起
			return uu.split('').reverse().join('');

		}); 
		var html = template("template", data);
		document.getElementById("content").innerHTML = html;
	</script>

</body>
</html>

  
  简单案例
 4：<对数据做一些操作>
 
 


 
 

  
  
  
  
<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8">
<title>lianxi4</title>
<script type="text/javascript" src="js/artTemplate.js"></script>
<script type="text/javascript" src="../../../_js2/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
var str='<%= msg%>';
var data={
		"msg":"abcdefghijk"
}
<!--  使用template.compile(模板代码);//将模板代码编译成渲染函数-->
<!-- 第二步，使用上述返回的渲染函数，例如为 render,再调用 render(数据);进行渲染，返回需要的html字符串。-->
var render=template.compile(str)
var html=render(data);
document.getElementById("content").innerHTML = html;
</script>
</body>
</html>

  
  


  
  


  
  


 
 


 
 

  
  


 
 


 
 

  
  


 
 


 
 

  
  


 
 



                

        

    

  



    



                



	

		

			

				
					
artTemplate模板js文件

				
			

			

				

					02-12
				

			

		

		

			
				
前端开发时，我们经常会遇到动态拼接表单多div模块，但往往由于拼接太多以及业务需求变更导致运维难以维护。而该artTemplate.js文件使得页面模板化开发，从而使得追加的表单或div可以单独存在，并灵活的追加在页面中，突出的优点就是便于维护及操作。

			
		

	



                

            
              



	

		

			

				
					
art-template入门（一）之介绍

				
			

			

				

					茅坤宝骏氹的博客
				

				

					08-18
					
					1631
					
				

			

		

		

			
				
转载自  art-template介绍

介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。在线速度测试。

特性

拥有接近 JavaScript 渲染极限的的性能
	调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webp...

			
		

	



              


  
              

                


	

		

			

				
					
template.js模板引擎的实战应用

					
最新发布

				
			

			

				

					weixin_33506815的博客
				

				

					05-05
					
					757
					
				

			

		

		

			
				
在现代的Web开发过程中，模板引擎已经成为一个不可或缺的部分。它们不仅是数据与视觉表现之间的桥梁，还极大地提升了开发效率和应用的可维护性。模板引擎是一种工具，它允许开发者使用特定的模板语言来分离数据与HTML的显示。通过这种方式，模板引擎负责将数据动态地填充到模板中，生成最终的HTML页面。template.js支持过滤器的使用，过滤器可以修改变量的值，使其适应特定的显示需求。例如，我们可以通过一个名为uppercase的过滤器将文本转换为大写：在这里，uppercase。

			
		

	





	

		

			

				
					
art_template.js

				
			

			

				

					09-06
				

			

		

		

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

			
		

	



		

			
		



	

		

			

				
					
art-template.js

				
			

			

				

					09-27
				

			

		

		

			
				
版本：4.13.1  编译的  artTemplate.js ，使用简洁语法，引入template-web.js即可。更多帮助文档可以自己百度，很简洁的一款

			
		

	





	

		

			

				
					
artTemplate.js

				
			

			

				

					℡メ㏑╭ァ小凯
				

				

					04-10
					
					398
					
				

			

		

		

			
				
https://blog.csdn.net/xutongbao/article/details/79075664

<!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="UTF-8">    
  <title&gt...

			
		

	





	

		

			

				
					
artTemplate.js，前端模板js引用，jquery静态模板

				
			

			

				

					11-03
				

			

		

		

			
				
标题"artTemplate.js，前端模板js引用，jquery静态模板"中，提到了`artTemplate.js`，这是一个专用于前端开发的模板引擎，它与jQuery结合使用，实现了静态模板的功能。这意味着`artTemplate.js`可以帮助开发者快速...

			
		

	





	

		

			

				
					
javascript模板引擎artTemplate.zip

				
			

			

				

					07-18
				

			

		

		

			
				
artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎...

			
		

	





	

		

			

				
					
arttemplate.js 简洁版（6k）官网的已经找不到了

				
			

			

				

					09-27
				

			

		

		

			
				
arttemplate.js 简介版 官网已近找不到的。适合{{template}}语法

			
		

	





	

		

			

				
					
artTemplate.js：提升前端开发效率的静态模板引擎

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"artTemplate.js是一种轻量级的前端模板引擎JavaScript库，专门用于提高Web前端开发的效率。模板引擎是用于分离显示和逻辑的工具，它将数据和模板结合在一起，从而生成HTML结构。artTemplate模板引擎以...

			
		

	





	

		

			

				
					
artTemplate的两个js文件(原生+简洁)

				
			

			

				

					08-16
				

			

		

		

			
				
artTemplate的两个js文件，包括原生语法和简洁语法

			
		

	





	

		

			

				
					
artTemplate模板 js替换使用

				
			

			

				

					06-30
				

			

		

		

			
				
artTemplate模板 js替换使用
### 编写模板

使用一个``type="text/html"``的``script``标签存放模板：
	
	<script id="test" type="text/html">
	<h1>{{title}}</h1>
	<ul>
	    {{each list as value i}}
	        <li>索引 {{i + 1}} ：{{value}}</li>
	    {{/each}}
	</ul>
	</script>

### 渲染模板
	
	var data = {
		title: '标签',
		list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
	};
	var html = template('test', data);
	document.getElementById('content').innerHTML = html;

			
		

	





	

		

			

				
					
art-template(下载这个)

				
			

			

				

					03-14
				

			

		

		

			
				
以asp.net作为后台，VS打开项目即可使用。

			
		

	





	

		

			

				
					
art-template Demo

				
			

			

				

					03-12
				

			

		

		

			
				
完整的一套关于art-template的Demo，采用前后台分离的方式，后台提供数据接口，前台渲染数据的方式，采用Ajax从后台获取数据进行渲染，前台使用jQuery+art-template，后台使用ASP.NET模拟后台数据接口，打开即可用

			
		

	





	

		

			

				
					
artTemplate

				
			

			

				

					06-03
				

			

		

		

			
				
artTemplate

			
		

	





	

		

			

				
					
js模板引擎之art-template

				
			

			

				

					抬头就是阳光☼的博客
				

				

					07-06
					
					519
					
				

			

		

		

			
				
1.模板引擎介绍



 1.1 为什么要使用模板引擎

  我们通过ajax获取到数据后，需要把数据渲染到页面中，在使用模板引擎前，我们的做法是大量的拼接字符串。  拼接字符串的缺点：1.代码可阅读性非常差；2.非常容易出错；3.不利于后期代码维护。    模板引擎的作用：用于渲染数据，代替拼接字符串的方式。

 1.2 artTemplate

  常见的模板引擎有BaiduTemplate、...

			
		

	





	

		

			

				
					
js模板引擎art-template用法

				
			

			

				

					你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
				

				

					02-19
					
					439
					
				

			

		

		

			
				
art-template

javascript 模板引擎，官网：https://github.com/aui/art-template

分为原生语法和简洁语法，本文主要是讲简洁语法

基础数据渲染
	输出HTML
	流程控制
	遍历
	调用自定义函数方法
	子模板引入
基础数据渲染

一、引入art-template.js文件


&lt;script src=''&gt;&lt;/scrip...

			
		

	





	

		

			

				
					
art-template.js 下载以及使用

				
			

			

				

					脑瓜疼儿的博客
				

				

					03-27
					
					9671
					
				

			

		

		

			
				
个人习惯使用原生语法
官网： https://aui.github.io/art-template/
github：https://github.com/aui/art-template
中文文档： art-template  https://aui.github.io/art-template/zh-cn/docs/index.html
可以在文档 或者 github上下载 现在命名为 temp...

			
		

	





	

		

			

				
					
artTemplate.js插件

				
			

			

				

					刚刚好
				

				

					06-30
					
					3146
					
				

			

		

		

			
				
artTemplat

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值