提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript模板引擎前端高性能 ---
2023-09-11 14:19:17 时间

关于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官方文档

相关文章