1. 常见模板引擎的性能对比
适用于 koa 的模板引擎选择非常多,比如 jade、ejs、nunjucks、art-template 等。
art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。
art-template 支持 ejs 的语法,也可以用自己的类似 angular 数据绑定的语法。
2. Koa中使用art-template
// 1. 安装
npm install --save art-template
npm install --save koa-art-template
var Koa = require('koa'),
router = require('koa-router')(),
render = require('koa-art-template'), // 2. 引用
path = require('path');
var app = new Koa();
// 3. 配置 koa-art-template模板引擎
render(app, {
root: path.join(__dirname, 'views'), // 视图的位置
extname: '.html', // 后缀名 如:index.html
debug: process.env.NODE_ENV !== 'production' //是否开启调试模式
});
router.get('/', async (ctx) => {
let app = {
name: '张三11',
h: '<h2>这是一个h211</h2>',
num: 20,
data: ['11111111', '2222222222', '33333333333']
};
await ctx.render('index', { // 4. 传参 渲染koa-art-template模板 index.html
list: app
});
})
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
app.listen(3000);
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/basic.css" />
</head>
<body>
<!-- art-template 基本语法 -->
<h2 class="title">这是一个koa-art-template</h2>
<h2>绑定数据</h2>
{{list.name}}
<hr />
<h2>绑定html数据</h2>
{{@list.h}}
<hr />
<h2>条件</h2>
{{if num>20}} <sapn>大于20</sapn> {{else}} <sapn>小于20</sapn>{{/if}}
<hr />
<h2>循环数据</h2>
<ul>
{{each list.data}}
<li>{{$index}}---{{$value}}</li>
{{/each}}
</ul>
<hr />
{{include 'public/footer.html'}}
</body>
</html>