arttemplate.js | 易学教程

模板引擎有好多种可在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 和大多浏览器

特性

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

来源：CSDN

作者：青草萋萋

链接：https://blog.csdn.net/zhangqin18710923356/article/details/78259915

标签

artTemplate

javascript