art-template 模板引擎

来源：互联网发布：二战陆军实力排名知乎编辑：程序博客网时间：2024/05/20 10:12

今天我总结一下art-template 模板引擎这个框架，比较简单

一、文档，以及GitHub

文档: https://aui.github.io/art-template/docs/index.html

GitHub: https://github.com/aui/art-template

二、art-template 的书写方式：

1.原始语法

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>demo</title>    <script src="js/artTemplate.js"></script></head><body><!--包裹元素--><div id="content"></div><script id="test" type="text/html">    <%if(admin){%>        <% for(var i=0; i<list.length; i++){%>           <div><%=i%>:<%=list[i]%></div>        <%}%>    <%}else{%>           <div>没有结果！</div>    <%}%>    <!--赋值方法-->    <p><%=person.eatting()%></p>    <h2><% a=person.age %></h2>    <% for(var i=0;i<a.length;i++){ %>      <p><%=a[i] %></p>    <%}%>    <!--$imports 代表console-->    <% $imports.log('hello world') %></script><script type="text/javascript" src="js/art-template.js"></script><script type="text/javascript">  var data = {    admin: true,    list : ["第一个元素","第二个元素"],    person:{     name:"Jhon",      age:[23,24,54,36,56,23,64],      eatting:function(){        console.log("我吃了一个大西瓜");      }    }  };  template.defaults.imports.log = console.log; // 此处展示imports的作用  var html = template('test',data);// test 为模板ID， data数据  //  console.log(html)  document.getElementById("content").innerHTML = html;</script></body></html>

阅读全文

0 0