模版引擎
概述
- art-template 是一个简约、超快的模板引擎
- 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器
使用
基本使用
引入模版引擎
<script src="https://unpkg.com/[email protected]/lib/template-web.js"></script>
设置模版
<script id="template-students" type="text/html">
<h1>{
{
classname}}-学生信息</h1>
<ul>
{
{
each students}}
<li>
{
{
$value.name}} {
{
$value.age}} {
{
$value.sex}} {
{
$value.score}}分
{
{
if $value.score > 80}}
优秀
{
{
else if $value.score >60 }}
及格
{
{
else}}
不及格
{
{
/if}}
</li>
{
{
/each}}
</ul>
</script>
使用
const content = document.querySelector("div");
const students = [
{
name: "Tom",
age: 18,
sex: "男",
score: 50
},
{
name: "Jake",
age: 28,
sex: "女",
score: 60
},
{
name: "Jim",
age: 38,
sex: "女",
score: 90
}
];
content.innerHTML = template("template-students", {
"classname": "班级A",
"students": students
});
使用子模版
<script id="template-students" type="text/html">
{
{
include "header"}}
<h1>{
{
classname}}-学生信息</h1>
<ul>
{
{
each students}}
<li>
{
{
$value.name}} {
{
$value.age}} {
{
$value.sex}} {
{
$value.score}}分
{
{
if $value.score > 80}}
优秀
{
{
else if $value.score >60 }}
及格
{
{
else}}
不及格
{
{
/if}}
</li>
{
{
/each}}
</ul>
{
{
include "footer"}}
</script>
<script id="header" type="text/html">
<div>公共头布局 {
{
page}}</div>
</script>
<script id="footer" type="text/html">
<div>公共尾布局 {
{
page}}</div>
</script>
子模版传参
<script id="template-students" type="text/html">
<% include("header",{
page:"hello"}) %>
<h1>{
{
classname}}-学生信息</h1>
<ul>
{
{
each students}}
<li>
{
{
$value.name}} {
{
$value.age}} {
{
$value.sex}} {
{
$value.score}}分
{
{
if $value.score > 80}}
优秀
{
{
else if $value.score >60 }}
及格
{
{
else}}
不及格
{
{
/if}}
</li>
{
{
/each}}
</ul>
<% include("footer",{
"page":"world"}) %>
</script>
<script id="header" type="text/html">
<div>公共头布局 {
{
page}}</div>
</script>
<script id="footer" type="text/html">
<div>公共尾布局 {
{
page}}</div>
</script>
