js模板引擎-art-template常用总结

短命女 2022-04-11 02:12 319阅读 0赞

## art-template ##

javascript 模板引擎，官网：[https://github.com/aui/art-template][https_github.com_aui_art-template]

分为原生语法和简洁语法，本文主要是讲简洁语法

*  基础数据渲染
 *  输出HTML
 *  流程控制
 *  遍历
 *  调用自定义函数方法
 *  子模板引入

### 基础数据渲染 ###

一、引入art-template.js文件

<script src="template-debug.js"></script>

二、编写HTML模板

<script id="test" type="text/html">
        <h1>{
       {title}}</h1></script>

三、向模板插入数据，并输出到页面

var data = {
        title:"hello world"
    };
    var html = template("test",data);
    document.getElementById('content').innerHTML = html;

### 输出HTML ###

<script id="test" type="text/html">
        <h1>{
       {title}}</h1></script>

//注意：\{ \{title\}\}这是对内容编码输出，应该写成\{ \{\#title\}\}这是对内容不编码输出

<script id="test" type="text/html">
        <h1>{
       {#title}}</h1></script>
    
    var data = {
        title:"<p>hello world</p>"
    };
    var html = template("test",data);
    document.getElementById('content').innerHTML = html;

### 流程控制语句（if else） ###

\{ \{if value\}\}  
...  
\{ \{else if value\}\}  
...  
\{ \{else\}\}  
...  
\{ \{/if\}\}  
art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

<script id="test" type="text/html">
        <div>
            {
       {if bok==22}}
            <h1>线上</h1>
            {
       {else if bok==33}}
            <h2>隐藏</h2>
            {
       {else}}
            <h3>走这里</h3>
            {
       {/if}}
        </div></script><script>
        var data = {
            "bok":22
        };
        var html = template('test',data);
        document.getElementById("app").innerHTML = html;
    </script>

嵌套的写法

<script id="test" type="text/html">
        <div>
            {
       {if bok}}
                {
       {if list.length>=0}}
                    {
       {each list}}
                        <p>{
       {$index}}:{
       {$value}}</p>
                    {
       {/each}}
                {
       {else}}
                    <p>没有数据</p>
                {
       {/if}}
            {
       {/if}}
        </div></script><script>
        var data = {
            "bok":true,
            list:["a","b","c"]
        };
        var html = template('test',data);
        document.getElementById("app").innerHTML = html;
    </script>

### 循环遍历语句 ###

\{ \{each name\}\}  
索引：\{ \{$index\}\}  
值：\{ \{$value\}\}  
\{ \{/each\}\}

<script id="test" type="text/html"><div>
        <ul>
            {
       {if c==100}}
                <ul>
                    {
       {each person}}
                        <li>
                            编号：{
       {$index+1}}--姓名：{
       {$value.name}}--年龄：{
       {$value.age}}
                        </li>
                    {
       {/each}}
                </ul>
            {
       {/if}}
        </ul></div></script>
    
    <script>
        var data = {
            c:100,
            person:[
                {name:"jack",age:18},
                {name:"tom",age:19},
                {name:"jerry",age:20},
                {name:"kid",age:21},
                {name:"jade",age:22}
            ]
        };
        var html = template("test",data);
        document.getElementById("content").innerHTML = html;
    </script>

### 调用自定义方法 ###

通过template.helper(name,fnCallBack)注册方法  
可以直接在\{ \{\}\}中调用

<script id="test" type="text/html"><div>
        {
       {if c==100}}
            <ul>
                {
       {each person}}
                    <li>姓名：{
       {$value.name}}--性别：{
       {show($value.sex)}}</li>
                {
       {/each}}
            </ul>
    
        {
       {/if}}</div></script><script>
        var data = {
            c:100,
            person:[
                {name:"jack",age:18,sex:1},
                {name:"tom",age:19,sex:0},
                {name:"jerry",age:20,sex:0},
                {name:"kid",age:21,sex:1},
                {name:"jade",age:22,sex:0}
            ]
        };
        //自定义函数
        template.helper("show",function(sex){
            console.log(sex);//同样可以打印日志到控制台
            if(sex==0){
                return "男"
            }else if(sex==1){
                return "女"
            }
        });
        var html = template("test",data);
        document.getElementById("app").innerHTML = html;
    </script>

### 调用子模板 ###

\{ \{include 'main'\}\} 引入子模板，数据默认为共享  
\{ \{include 'main' a\}\} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的

<body><div id="app"></div><script src="template-debug.js"></script><script id="main" type="text/html">
        <ul>
           {
       {each list}}
                <li>{
       {$value}}</li>
            {
       {/each}}
        </ul></script><script id="test" type="text/html">
        <div>
            <ul>
                {
       {each person}}
                    <li>{
       {$value.name}}</li>
                {
       {/each}}
            </ul>
            {
       {include 'main' a}}
        </div></script><script>
        var data = {
            person:[
                {name:"jack",age:18},
                {name:"tom",age:19},
                {name:"jerry",age:20},
                {name:"kid",age:21},
                {name:"jade",age:22}
            ],
            a:{
                list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
            }
        };
        var html = template("test",data);
        document.getElementById("app").innerHTML=html;
    </script></body>

如有笔误，请留言指出，共同进步！

[https_github.com_aui_art-template]: https://github.com/aui/art-template

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关 artTemplate性能卓越的 js 模板引擎

artTemplate-3.0 新一代 javascript 模板引擎目录 [特性][Link 1] [快速上手][Link 2] [模板语法

以你之姓@/ 2023年06月01日 03:24/ 0 赞/ 34 阅读

相关 Twig模板引擎常用基础用法总结

Twig是一种PHP模板引擎，最近，由于比较频繁的使用Twig模板，于是想总结一下一些常用的基本用法，希望能给对Twig还不熟悉的朋友带来帮助。首先贴一下Twig官方文档

朴灿烈づ我的快乐病毒、/ 2023年02月20日 02:41/ 0 赞/ 14 阅读

相关 artTemplate模板引擎

经常被用到，你还用过哪些模板引擎，个人认为：对于模板引擎，挑一个性能稍高的，使用简单的，容易调试的就可以，一个足以，没有必要使用那么多。作为前端人员，较推崇artTemplat

古城微笑少年丶/ 2022年09月27日 12:27/ 0 赞/ 288 阅读

相关 artTemplate JS模板引擎使用(移动端上拉加载)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>红包</title>

快来打我*/ 2022年06月18日 02:16/ 0 赞/ 270 阅读

相关 arttemplate模板

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; ch

绝地灬酷狼/ 2022年06月14日 07:37/ 0 赞/ 290 阅读

相关【artTemplate】artTemplate模板引擎入门（一）：简洁语法的使用

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端

系统管理员/ 2022年05月22日 04:27/ 0 赞/ 280 阅读

相关【artTemplate】artTemplate模板引擎入门（二）：原生语法

引入文件 <script src="./template-native.js"></script> 一.遍历数组 html <div id="b

男娘i/ 2022年05月19日 23:28/ 0 赞/ 378 阅读

相关 [总结] js 模板引擎

嗯，这也是一个学习笔记，材料均来自网络，有改动。。文章主要分为三部分，第一部分通过实现一个简易的ERB模板引擎来介绍其原理，参考[javascript模板引擎和实现原理]

Myth丶恋晨/ 2022年04月24日 05:54/ 0 赞/ 235 阅读

相关 js模板引擎-art-template常用总结

art-template javascript 模板引擎，官网：[https://github.com/aui/art-template][https_github

短命女/ 2022年04月11日 02:12/ 0 赞/ 320 阅读

相关模板引擎artTemplate 介绍

一.介绍 (1).介绍 art-template 是一个简约、超快的模板引擎。artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质

快来打我*/ 2021年09月14日 09:48/ 0 赞/ 632 阅读