artTemplate前端模板引擎笔记

前言

最近jquery用的比较多，在遍历操作dom的时候，深感拼接字符串的痛苦，所有找了一个前端的模板引擎来动态编译模板。

artTemplate

地址：https://aui.github.io/art-template/
github：https://github.com/aui/art-template
关于性能：

image.png

模板

art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。
标准语法

{{if user}}
{{user.name}}
{{/if}}

原始语法

<% if (user) { %>
<%= user.name %>
<% } %>

原始语法兼容 EJS、Underscore、LoDash 模板。

渲染模板

var template = require('art-template');
var html = template(__dirname + '/tpl-user.art', {
user: {
name: 'aui'
}
});

核心方法

// 基于模板名渲染模板
template(filename, data);

// 将模板源代码编译成函数
template.compile(source, options);

// 将模板源代码编译成函数并立刻执行
template.render(source, data, options);

上面是官方的介绍，下面一个自己做的简单例子：

demo

外部模板文件 alert_template.html

   

       
提示
       
{{content}}
       确认
       

   

外部模板文件对应的css alert_template.css

    /*模拟弹窗*/
    
    * {
        padding: 0;
        margin: 0;
    }
    a:link{
        text-decoration: none;
    }
    
    .please-login-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 11;
    }
    
    .please-login-mask .login-div {
        height: 120px;
        width: 240px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -60px;
        margin-left: -120px;
        background-color: white;
        border-radius: 10px;
        text-align: center;
    }
    
    .please-login-mask .header {
        height: 45px;
        font-size: 20px;
        line-height: 45px;
        color: #000000;
    }
    
    .please-login-mask .content {
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        color: #000000;
    }
    
    .please-login-mask .queren {
        display: block;
        height: 45px;
        width: 100%;
        line-height: 45px;
        font-weight: 700;
        color: dodgerblue;
        border-top: 1px solid #C0C0C0;
    }

demo的github地址：https://github.com/xiedajian/artTemplateDemo/blob/master/template.html