井井客

搜索

走进artTemplate模板引擎[demo汇总]

虽说是artTemplate模板引擎例子汇总,但其实只有两个页面,一个简洁语法一个原生语法实现,具体的使用官网上面说得比较清楚,就不在此赘述。

走进artTemplate模板引擎[demo汇总]

可以先阅读一下官方文档说明:https://github.com/aui/artTemplate

下面只是把官网的例子总结分简洁语法和原生语法汇总在一起。

artTemplate模板引擎简洁语法如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>artTemplate模板引擎简洁语法</title>
		<script type="text/javascript" src="js/template.js" ></script>
	</head>
	<body>
		<!-- 挂载位置 -->
		<div id="content"></div>
		<div id="tempate"></div>
		
		<!-- 主模板-->
		<script id="index" type="text/html">
		  {{if flag}}
			<h1>{{title}}</h1>
			<p>时间是:{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}</p>
			{{include 'ul'}}
			{{include 'ol'}}
		  {{/if}}
		</script>
		<!-- 模板ul -->
		<script id="ul" type="test/html">
			<ul>
				{{each list as value i}}
					<li>索引{{i}}:{{value}}</li>
				{{/each}}
			</ul>
		</script>
		<!-- 模板ol -->
		<script id="ol" type="test/html">
			<ol>
				<li>默认是转义的:{{html}}</li>
				<li>加#号不转义:{{#html}}</li>
			</ol>
		</script>
		
		<script>
			//template.helper开始
			template.helper('dateFormat',function(data,format){
				date = new Date(data);
				var map = {
			        "M": date.getMonth() + 1, //月份 
			        "d": date.getDate(), //日 
			        "h": date.getHours(), //小时 
			        "m": date.getMinutes(), //分 
			        "s": date.getSeconds(), //秒 
			        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
			        "S": date.getMilliseconds() //毫秒 
				}
				format = format.replace(/([yMdhmsqS])+/g , function(all,t){
					var v = map[t];
					if( v !== undefined){
						if(all.length > 1){
							v = '0'+v;
							v = v.substr(v.length-2);
						}
						return v;
					}else if( t === 'y'){
						return (date.getFullYear() + '').substr(4 - all.length);
					}
					return all;
				})
				return format;
			})
			//template.helper完成
			
			//数据
			var data = {
				title:'兴趣爱好',
				flag:true,
				list:['宅','动漫','游戏','羽毛球','游泳'],
				html:'我是<b>哈哈哈</b>',
				time:(new Date).toString()
			}
			//模板填充
			var html = template('index',data);
			document.getElementById('content').innerHTML = html;
			
			//js中存放模板
			var source = "<h2>{{title}}</h2>"
						+"<ul>"
						+"{{each lis}}"
						+"<li>{{$index+1}}、{{$value}}</li>"
						+"{{/each}}"
						+"</ul>";
			var render = template.compile(source);
			var setHtml = render({
				title:'想要做的事',
				lis:['摄影', '电影', '民谣', '旅行', '吉他']
			})
			document.getElementById('tempate').innerHTML = setHtml;
		</script>
	</body>
</html>

效果查看:http://jingjingke.com/web/artTemplate/simple.html

原生语法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>artTemplate模板引擎原生语法</title>
		<script type="text/javascript" src="js/template-native.js" ></script>
	</head>
	<body>
		<!-- 挂载位置 -->
		<div id="content"></div>
		<div id="tempate"></div>
		
		<!-- 主模板-->
		<script id="index" type="text/html">
		  <% if(flag){ %>
			<h1><%=title%></h1>
			<p>时间是:<%=dateFormat(time, 'yyyy年MM月dd日 hh:mm:ss')%></p>
			<%include('ul')%>
			<%include('ol')%>
		  <% } %>
		</script>
		<!-- 模板ul -->
		<script id="ul" type="test/html">
			<ul>
				<% for(i=0;i<list.length;i++){ %>
					<li>索引<%=i%>:<%=list[i]%></li>
				<% } %>
			</ul>
		</script>
		<!-- 模板ol -->
		<script id="ol" type="test/html">
			<ol>
				<li>默认是转义的:<%=html%></li>
				<li>加#号不转义:<%=#html%></li>
			</ol>
		</script>
		
		<script>
			//template.helper开始
			template.helper('dateFormat',function(data,format){
				date = new Date(data);
				var map = {
			        "M": date.getMonth() + 1, //月份 
			        "d": date.getDate(), //日 
			        "h": date.getHours(), //小时 
			        "m": date.getMinutes(), //分 
			        "s": date.getSeconds(), //秒 
			        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
			        "S": date.getMilliseconds() //毫秒 
				}
				format = format.replace(/([yMdhmsqS])+/g , function(all,t){
					var v = map[t];
					if( v !== undefined){
						if(all.length > 1){
							v = '0'+v;
							v = v.substr(v.length-2);
						}
						return v;
					}else if( t === 'y'){
						return (date.getFullYear() + '').substr(4 - all.length);
					}
					return all;
				})
				return format;
			})
			//template.helper完成
			
			//数据
			var data = {
				title:'兴趣爱好',
				flag:true,
				list:['宅','动漫','游戏','羽毛球','游泳'],
				html:'我是<b>哈哈哈</b>',
				time:(new Date).toString()
			}
			//模板填充
			var html = template('index',data);
			document.getElementById('content').innerHTML = html;
			
			//js中存放模板
			var source = "<h2><%=title%></h2>"
						+"<ul>"
						+"<% for(var i=0; i< lis.length; i++){ %>"
						+"<li><%=i+1%>、<%=lis[i]%></li>"
						+"<% } %>"
						+"</ul>";
			var render = template.compile(source);
			var setHtml = render({
				title:'想要做的事',
				lis:['摄影', '电影', '民谣', '旅行', '吉他']
			})
			document.getElementById('tempate').innerHTML = setHtml;
		</script>
	</body>
</html>

效果查看:http://jingjingke.com/web/artTemplate/native.html

整个相来应该说是比较简单的,入门也比较快,但是在做相对复杂的页面时,可能使用artTemplate则不是那么明智了。代码混杂在一起,也不利于后期维护。

另外在node环境的应用,这边没有贴出,可以直接在官网上面去阅读。官方文档还是说的比较详情的。

感觉在这里可以用一句话来说:“没有什么是一个demo解决不了的,不行就再来几个~”

文章TAG:js

作者:井井客原创来源:原创
本文标题:走进artTemplate模板引擎[demo汇总]
本文链接:/c/28263.html

上一篇:自制仿IOS日期选择滚动插件可日期可省市区联动
下一篇:React组件propTypes校验

文章分类

相关阅读

随便看看