什么是模板引擎
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎不属于特定技术领域,它是跨领域跨平台的概念。在Asp下有模板引擎,在PHP下也有模板引擎,在C#下也有,甚至JavaScript、WinForm开发都会用到模板引擎技术。
模板引擎的用途
模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率,良好的设计也使得代码重用变得更加容易。
我们司空见惯的模板安装卸载等概念,基本上都和模板引擎有着千丝万缕的联系。模板引擎不只是可以让你实现代码分离(业务逻辑代码和用户界面代码),也可以实现数据分离(动态数据与静态数据),还可以实现代码单元共享(代码重用),甚至是多语言、动态页面与静态页面自动均衡(SDE)等等与用户界面可能没有关系的功能。
简单地说,模板引擎的作用就是取得数据并加以处理,最后显示出数据。
art-template介绍
art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。
特性
1、拥有接近 JavaScript 渲染极限的的性能
2、调试友好:语法、运行时错误日志精确到模板所在行;支3、持在模板文件上打断点(Webpack Loader)
4、支持 Express、Koa、Webpack
5、支持模板继承与子模板
6、浏览器版本仅 6KB 大小
语法
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写;原始语法具有强大的逻辑处理能力。
标准语法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
原始语法
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
原始语法兼容 EJS、Underscore、LoDash 模板。
安装
前提是要联网:
npm install art-template --save
渲染模板
var template = require('art-template');
var html = template(__dirname + '/tpl.art', {
user: {
name: 'fzh'
}
});
tpl.art文件:
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
引用模板引擎渲染模板的3种核心方法
一、
基于模板名渲染模板
template(filename, data);
var template=require("art-template");
var html=template(__dirname+'/mytpl.art',{
user:{
name:'fzh'
}
})
console.log(html);//<h2>fzh</h2>
mytpl.art文件:
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
二、
将模板源代码编译成函数(相当于中间的一个桥梁)
template.compile(source, options);
//each 模板引擎提供的循环
//循环一个list数组(集合)
//每次记得引入art-template模板
var template=require("art-template");
//定义一个模板
let tpl='<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
//编译成一个函数,返回的render是一个函数
let render=template.compile(tpl); //编译解析
let ret =render({ //render是一个方法
//使用模板引擎中提供的方法 实现数据的填充
list:['apple','pear','uglz']
})
console.log(ret);//<ul><li>apple</li><li>pear</li><li>uglz</li></ul>
三、
将模板源代码编译成函数并立刻执行(与compile的区别:没有中间商)
template.render(source, data, options);
var template=require('art-template');
let tpl='<ul>{{each list as value}}<li>{{value}}</li>{{/each}}</ul>';
let ret =template.render(tpl,{
list:['banbana','orange','apple']
})
console.log(ret);//<ul><li>banbana</li><li>orange</li><li>apple</li></ul>
扩展
//as val相当于给$value 重新命名。注意: 命名之后就不能使用$value。 就必须使用别名。
var template=require('art-template');
let tpl='<ul>{{each list}}<li>{{$index}}--{{$value}}</li>{{/each}}</ul>';
let ret=template.render(tpl,{
list:['banbana','orange','apple']
})
console.log(ret);//<ul><li>0--banbana</li><li>1--orange</li><li>2--apple</li></ul>
小案例
渲染查询出来的成绩
var template=require('art-template');
let html=template(__dirname+'/score.art',{ //打文件名切记不要忘记/
chinese:'120',
math:'130',
english:'140',
summary:'250'
})
console.log(html);
score.art文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>语文:{{chinese}}</li>
<li>数学:{{math}}</li>
<li>英语:{{english}}</li>
<li>综合:{{summary}}</li>
</ul>
</div>
</body>
</html>