art-template简使用

art-template 是一个简约、超快的模板引擎。

官网

art-template官网

安装

浏览器端使用：下载art-template

使用

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

输出

例子

<div id="content1">div>
<script id="template1" type="text/html">
    
{{title}}</h1>
script>

<script type="text/javascript">
    var data1 = { // 准备模板中涉及的数据
        title: '标签'      
    };
    var html = template('template1', data1); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content1').innerHTML = html; // 将渲染结果写入div
script>

标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

原始语法请参考官网文档

原文输出

<div id="content2">div>
 <script id="template2" type="text/html">
    
{{content}}</p>//hello world!span>
    <p>{{#content}}</p>//hello world!(颜色为红色)
    
{{@ content}}</p>//hello world!(颜色为红色)

script>

<script type="text/javascript">
    var data2 = { // 准备模板中涉及的数据
        content: 'hello world!'
    };
    var html = template('template2', data2); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content2').innerHTML = html; // 将渲染结果写入div
script>

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

条件输出

<div id="content3">div>
<script id="template3" type="text/html">
    {{if admin}}
    
admin</p>
    {{else if code > 0}}
    
master</p>
    {{else}}
    
error!p>
    {{/if}}

script>

<script type="text/javascript">
    var data3 = { // 准备模板中涉及的数据
        admin: false
    };

    var html = template('template3', data3); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content3').innerHTML = html; // 将渲染结果写入div
script>

遍历输出

<div id="content5">div>
<script id="template5" type="text/html">
   
{{each list}} {{$index}} {{$value}} {{/each}}</p>

script>

<script type="text/javascript">
   var data5 = { // 准备模板中涉及的数据
       list:['文艺范','不文艺范','嘻哈'] 
   };

   var html = template('template5', data5); // 调用template()方法将模板与数据结合进行渲染
   document.getElementById('content5').innerHTML = html; // 将渲染结果写入div
script>

$value 与 $index 可以自定义：{{each target val key}}。

引入子模板

<div id="content3">div>
<div id="content4">div>
<script id="template3" type="text/html">
   {{if admin}}
    
admin</p>
    {{else if code > 0}}
    
master</p>
    {{else}}
    
error!p>
    {{/if}}

script>

<script type="text/javascript">
    var data3 = { // 准备模板中涉及的数据
        admin: false
    };

    var html = template('template3', data3); // 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content3').innerHTML = html; // 将渲染结果写入div
script>

<script id="template4" type="text/html">
     
{{content}}</p>
     {{include 'template3'}}

 script>
 
 <script type="text/javascript">
     var data4 = { // 准备模板中涉及的数据
         content: '引入子模板',
         admin: false
     };

     var html = template('template4', data4); // 调用template()方法将模板与数据结合进行渲染
     document.getElementById('content4').innerHTML = html; // 将渲染结果写入div
 script>

{{include './header.art'}} 子模板共享当前数据
{{include './header.art' data}} 子模板指定新数据

官网还有一些别的方法，但是我觉得实际项目开发中这些是够了的。