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)
})
输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的标题</title>
</head>
<body>
<p>大家好,我叫:Jachie</p>
<p>我今年 23 岁了</p>
<h1>我来自 四川</h1>
<p>我喜欢: 敲代码 写页面 看博客 </p>
<script>
var foo = '我的标题'
</script>
</body>
</html>
使用模块渲染
文件默认读取到的 data 是二进制数据
而模板引擎的 render 方法需要接收的是字符串
所以我们在这里需要把 data 二进制数据转为 字符串 才可以给模板引擎使用
var http = require('http') var template = require('art-template') var fs = require('fs') var server = http.createServer() // 默认读取到的 data 是二进制数据 // 而模板引擎的 render 方法需要接收的是字符串 // 所以我们在这里需要把 data 二进制数据转为 字符串 才可以给模板引擎使用 // 监听 server.on('request',function(req, res){ // 读文件 fs.readFile('./template-apache.html', function(err, data){ if(!err){ // 读目录 fs.readdir('./', function(err, files){ if(!err){ // 渲染模块 var htmlStr = template.render(data.toString(), { title: '这是文件标题', files: files }) // 返回渲染的模块 res.end(htmlStr) } else return res.end('目录读取错误...') }) } else return res.end('文件读取错误...') }) }) server.listen(3000, function(){ console.log('server running...') })
html
<html dir="ltr" lang="zh" i18n-processed=""> <head> <meta charset="utf-8"> <meta name="google" value="notranslate"> <script src="./node_modules/art-template/lib/template-web.js"></script> <style> h1 { border-bottom: 1px solid #c0c0c0; margin-bottom: 10px; padding-bottom: 10px; white-space: nowrap; } table { border-collapse: collapse; } th { cursor: pointer; } td.detailsColumn { -webkit-padding-start: 2em; text-align: end; white-space: nowrap; } a.icon { -webkit-padding-start: 1.5em; text-decoration: none; } a.icon:hover { text-decoration: underline; } a.file { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat; } a.dir { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat; } a.up { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat; } html[dir=rtl] a { background-position-x: right; } #parentDirLinkBox { margin-bottom: 10px; padding-bottom: 10px; } #listingParsingErrorBox { border: 1px solid black; background: #fae691; padding: 10px; display: none; } </style> <title id="title">{{ title }}</title> </head> <body> <h1 id="header">D:\Movie\www\ 的索引</h1> <div id="parentDirLinkBox" style="display:none"> <a id="parentDirLink" class="icon up"> <span id="parentDirText">[上级目录]</span> </a> </div> <table> <thead> <tr class="header" id="theader"> <th onclick="javascript:sortTable(0);">名称</th> <th class="detailsColumn" onclick="javascript:sortTable(1);"> 大小 </th> <th class="detailsColumn" onclick="javascript:sortTable(2);"> 修改日期 </th> </tr> </thead> <tbody id="tbody"> {{each files}} <tr> <td data-value="apple/"><a class="icon dir" href="/D:/Movie/www/apple/">{{$value}}/</a></td> <td class="detailsColumn" data-value="0"></td> <td class="detailsColumn" data-value="1509589967">2017/11/2 上午10:32:47</td> </tr> {{/each}} </tbody> </table> </body> </html>
即可动态渲染出我当前目录下的文件列表
客户端渲染
服务端渲染
区别
服务端渲染
- 说白了就是在服务端使用模板引擎
- 模板引擎最早诞生于服务端,后来才发展到了前端
服务端渲染和客户端渲染的区别
- 客户端渲染不利于 SEO 搜索引擎优化
- 服务端渲染是可以被爬虫抓取到的,客户端异步渲染是很难被爬虫抓取到的
- 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的
- 而是两者结合来做的
- 例如京东的商品列表就采用的是服务端渲染,目的了为了 SEO 搜索引擎优化
- 而它的商品评论列表为了用户体验,而且也不需要 SEO 优化,所以采用是客户端渲染
验证一下
搜索此段文字,发现在源代码中可以搜索到的,这种说明是从服务端渲染得到的
而可以发现,点击商品评价的时候,页面没有刷新,显示是异步加载的,而搜索其内容也并没有在源代码中得到