模板技術
模板技術的誕生是爲了將顯示與數據分離，模板技術多種多樣，但其本質是將模板文件和數據通過模板引擎生成最終的文件內容。
模板技術原理
模板技術並不是什麼神祕技術，乾的是拼接字符串的體力活。模板引擎就是利用正則表達式識別模板標識，並利用數據替換其中的標識符。
模板技術包含兩個方面：
- 定義模板標識符
- 解析模板標識符
代碼舉例：
//字符串替換的思想
function tmpl(str, obj) { // 解析模板標識
if (typeof str === 'string') {
return str.replace(/<%=\s*([^%>]+)\s*%>/g, function() {
let key = arguments[1];
return obj[key];
});
}
}
let str = "Hello, <%= name%>"; // 模板內容
let obj = {name: "樹先生"}; // 模板數據
console.log(tmp(str, obj))
常用模板技術
模板技術：Pug、Mustache、EJS、Handlebars，國內的有 baiduTemplate（百度）、artTemplate（騰訊）、juicer（淘寶）。
EJS 使用
使用之前需安裝包：
npm install ejs
1）常用標籤
<%= 輸出數據到模板（輸出是轉義 HTML 標籤）
<%- 輸出非轉義的數據到模板
<% 用於流程控制，無輸出
%> 一般結束標籤
2）用法
const ejs = require('ejs');
ejs.render(str, data, options); // => 輸出繪製後的 HTML字符串
ejs.renderFile(filename, data, options, function(err, str){ // str => 輸出繪製後的 HTML字符串
});
- cache 緩存編譯後的函數，需要提供 filename
- filename 被 cache 參數用做鍵值，同時也用於 include 語句
- context 函數執行時的上下文環境
- compileDebug 當爲 false 時不編譯調試語句
- client 返回獨立的編譯後的函數
- delimiter 放在角括號中的字符，用於標記標籤的開與閉
- debug 將生成的函數體輸出
- _with 是否使用 with() {} 結構。如果爲 false，所有局部數據將存儲在 locals 對象上。
- localsName 如果不使用 with ，localsName 將作爲存儲局部變量的對象的名稱。默認名稱是 locals
- rmWhitespace 刪除所有可安全刪除的空白字符，包括開始與結尾處的空格。對於所有標籤來說，它提供了一個更安全版本的 -%> (在一行的中間並不會剔除標籤後面的換行符)
- escape 爲 <%= 結構設置對應的轉義（escape）函數。它被用於輸出結果以及在生成的客戶端函數中通過 .toString() 輸出。(默認轉義 XML)
3）輸出
// 模板文件 out.ejs
<h2><%= user.name %></h2>
<h2><%- user.name %></h2>
const ejs = require('ejs');
ejs.renderFile(__dirname + '/out.ejs', {user : {name : '<span>lony</span>'}}, (err, str) => {
// str => 輸出繪製後的 HTML 字符串
console.log(str);
});
4）條件
// 模板文件 if.ejs
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
const ejs = require('ejs');
ejs.renderFile(__dirname + '/if.ejs', {user : {name : 'lony'}}, (err, str) => {
console.log(str);
});
5）循環
// 模板文件 loop.ejs
<% users.forEach((user) => { %>
<%= user.id %> <%= user.name %>
<% }) %>
const ejs = require('ejs');
ejs.renderFile(__dirname + '/loop.ejs', {users : [{id : 1, name: 'xx'}, {id : 2, name: 'yy'}]}, (err, str) => {
console.log(str);
});
使用模板技術響應 HTML
// books.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>書籍</title>
</head>
<body>
<ul>
<% books.forEach((book) => { %>
<li><%= book %></li>
<% }) %>
</ul>
</body>
</html>
const http = require('http');
const ejs = require('ejs');
// 使用模板技術響應 HTML 格式的數據
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type' : 'text/html'});
let data = {books: ['西遊記', '三國演義', '水滸傳', '紅樓夢']};
ejs.renderFile(__dirname + '/books.ejs', data, (err, str) => {
console.log(str);
res.end(str);
});
}).listen(8888);