前端模板引擎artTemplate---高性能JavaScript模板引擎

时间：2022-08-24 08:50:00

关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析，本文只探讨如何使用。初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串，此为hardcode，而且拼接的过程很头疼，什么单引号双引号，符号嵌入多了就头晕眼花容易出错，如果会调试的话可以看到渲染模板的效率也很低下。本文将介绍一种新的利用模板引擎来渲染数据的方法。

（1）artTemplate基础使用方法

一：简洁语法版

<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
<script type="text/javascript" src="js/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
 <h1>{{title}}</h1>
 <ul>
{{each list value i}}
 <li>索引{{i+1}}：{{value}}</li>
{{/each}}
 </ul>
{{/if}}
</script>
<script>
var data = {
 title: '基本例子',
 isAdmin:true,
 list:['文艺','博客','摄影']
 };
var html = template('test',data);
 document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

二：原生语法版

原生语法就是定义模板的js格式不一样，有点像jsp的语法，不过我个人建议使用简洁版，以为没有这么多的符号，方便哈。

<script id="test" type="text/html">
    <%if(isAdmin){%>  
        <% for(var i=0; i<list.length; i++){%>  
            <div><%=i%>:<%=list[i]%></div>  
        <%}%>  
    <%}else{%>  
        <div>没有结果！</div>  
    <%}%> 
</script>

（2）artTemplate模板定义方式

一：javascript定义html模板

这种方法如上<script id="test" type="text/html"> 这里的type必须为”text/html”, 必须定义id。

二：用变量的形式存储模板

<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
<script type="text/javascript" src="js/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var source = '<ul>'
 + '{{each list value i}}'
 + '<li>索引 {{i + 1}} ：{{value}}</li>'
 + '{{/each}}'
 + '</ul>';
 var render = template.compile(source);
 var html = render({
 list: ['摄影', '电影', '民谣', '旅行', '吉他']
 });
 document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

这里又出现了讨厌的字符串拼接，所以我又不喜欢了，还是建议用第一种方式。

（3）ajax结合artTemplate模板

假设可以通过/test.php 获取json数据，数据如下：

{
result:[
 {
 id:1,
 name: 'zhangsan'
},
{
id:2,
 name: 'lisi'
},
    ],
error_code:"200"
}

需要数据绑定到html页面:

<div id="content"><div>

javascript定义模板：

<script id="search" type="text/html">
 <ul>
{{each result value i}}
 <li>name{{i+1}}：{{value.name}}</li>
{{/each}}
 </ul>
</script>

ajax请求数据的方式为：

$.ajax({
    type: 'post',
    url:'/test.php',
    success: function(res){
var result = res.result;
var $html = template("search",result);
        $("#content").html($html);
    }
});

以下为基础语法：

变量

标准语法{{set temp = data.sub.content}}
原生语法<% var temp = data.sub.content; %>

自定义过滤器filter

注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};

标准语法：

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

原生语法：

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

子模板

标准语法：

{{include './header.art'}}
{{include './header.art' data}}

原生语法：

<% include('./header.art') %>
<% include('./header.art', data) %>

模板继承

标准语法：

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

原生语法：

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

<!--layout.art-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
{{block 'head'}}
<link rel="stylesheet" href="main.css">
{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

渲染 index.art 后，将自动应用布局骨架。

其他文档详见：art-template官方文档
标签：

相关文章