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 優化，所以採用是客戶端渲染
驗證一下
搜索此段文字，發現在源代碼中可以搜索到的，這種說明是從服務端渲染得到的
而可以發現，點擊商品評價的時候，頁面沒有刷新，顯示是異步加載的，而搜索其內容也並沒有在源代碼中得到
