ART-TEMPLATE
高性能 JavaScript 模板引擎
介绍
art-template
是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。在线速度测试
特性
- 拥有接近 JavaScript 渲染极限的的性能
- 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
- 支持 Express、Koa、Webpack
- 支持模板继承与子模板
- 浏览器版本仅 6KB 大小
安装
NPM
npm install art-template --save
在浏览器中实时编译
下载:template-web.js(gzip: 6kb)
安装了模板后可以直接在模块文件夹中引用 lib/template-web.js 文件
兼容
IE8+(IE8 需要补丁才能运行。示例)
差异
因为浏览器不支持文件系统,所以
template(filename, data)
不支持传入文件路径,它内部使用document.getElementById(filename).innerHTML
来获取模板,例如:<script src="lib/template-web.js"></script> <!--此处不能使用<script id="tpl-user" type="text/script">,否则浏览器会将其当做脚本进行解析--> <script id="tpl-user" type="text/html"> // { {}} 语法被称之为mustache语法 { { if user}} <h2>{ { user.name}}</h2> { { /if}} </script>
在浏览器中预编译
使用 Webpack 的 Loader: art-template-loader。
Node模块引擎使用
模板引起最早就是诞生于服务器领域,后来才发展到了前端。
在需要使用的文件模块中加载
art-template
只需要使用 require 方法加载就可以了:
require('art-template')
var template = require('art-template')
var fs = require('fs')
// 默认读取到的 data 是二进制数据
// 而模板引擎的 render 方法需要接收的是字符串
// 所以我们在这里需要把 data 二进制数据转为 字符串 才可以给模板引擎使用
// 读取文件
fs.readFile('./tpl.html', function(err, data){
if(!err){
// 根据模板名渲染模板。
var result = template.render(data.toString(), {
name: 'Jachie',
age: 23,
province: '四川',
hobbies:[
'敲代码',
'写页面',
'看博客'
],
title: '我的标题'
})
}
else
return console.log('文件读取出错')
console.log(result)
}