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', ... }) })