art-template（一）：模板引擎的基本使用

art-template 简介

官方宣称：简约、超快的模板引擎，远超ejs、Jade、swig…
具体是不是这样，没有比较验证过，姑且就这么认为吧

特性

• 拥有接近 JavaScript 渲染极限的的性能
• 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
• 支持 Express、Koa、Webpack
• 支持模板继承与子模板
• 浏览器版本仅 6KB 大小

安装

npm install art-template --save

# 如果在express中使用，还需要安装express-art-template
npm install express-art-template --save

语法

art-template有两种语法：标准语法和原始语法。

• 标准语法可以让模板易读写，支持基本模板语法以及基本JavaScript表达式
• 原始语法拥有强大的逻辑表达能力，支持任意 JavaScript 语句，这和 EJS 一样

下面只介绍标准语法：

输出

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

<!--原文输出，不会对 HTML 内容进行转义处理，可能存在安全风险-->
{{@ value }}

条件

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

循环

{{each target}}
    {{$index}} {{$value}}
{{/each}}

变量

{{set temp = data.sub.content}}

在浏览器端使用

啥也不说了，看实例代码吧

<!--引包-->
<script src="lib/template-web.js"></script>

<!--定义模板样式-->
<script id="tpl-user" type="text/template">
{{if user}}
	<h2>{{user.name}}</h2>
{{/if}}
{{each hobbies}}
	{{$value}}
{{/each}}
</script>

<!--定义模板数据-->
<script>
    var ret = template('tpl',{
        name : 'jack',
        age : 18,
        province:'beijing',
        hobbies: [
            '23',
            '234'
        ] 
    })
</script>

<!--渲染模板-->
<script>
	//通过getElementById获取元素，然后通过innerHTML来赋值
	document.getElementById('content').innerHTML = ret
</script>

在NodeJS中使用

var fs = require('fs')
var tpl = require('art-template')

//tpl.render('模板字符串',替换对象)
var ret = tpl.render('hello {{ name }}',{
     name : 'jack'
 })
 console.log(ret)
 fs.readFile('./tpl.html',function(err,data){
     if(err){
         return console.log('failure')
     }
     var ret = tpl.render(data.toString(),{
         name : 'jack',
         ...
     })
 })