1.什么是 art-template?
- art-template 是一個簡約、超快的模板引擎。
- 它采用作用域預聲明的技術來優(yōu)化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，并且同時支持 NodeJS 和瀏覽器。
- 模板最開始是誕生于服務器領域 ，后來發(fā)展到瀏覽器。
2.用途
模板引擎可以讓（網(wǎng)站）程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離，業(yè)務代碼與邏輯代碼的分離，這就大大提升了開發(fā)效率，良好的設計也使得代碼重用變得更加容易。
3.優(yōu)點
- 性能接近JavaScript渲染限制
- 調(diào)試友好。語法錯誤或運行時錯誤將準確定位在哪一行模板上。支持在模板文件> - 中設置斷點（Webpack Loader）
- 支持Express，Koa，Webpack
- 支持模板繼承和子模板
- 瀏覽器版本只有6KB
- 同時支持 NodeJS 和瀏覽器
4.art-template 與其他模板引擎的運行速度對比
使用簡單的模板語法，同時支持與EJS模板兼容的原始JavaScript語句
5.瀏覽器如何使用
說明：瀏覽器中 模板引擎不關心字符串內(nèi)容及格式
只認識{{ }}，即需要識別出來填充數(shù)據(jù)的地方
使用方法:
1.安裝：npm install art-template
2.<script>引入安裝的js包node_modules/art-template/lib/template-web.js
3.<script> 標簽里寫自己的模板type ='text/x-handlebars-template'而不是text/javascript因為對應的解析方式不同
4.給模板里寫值template(' script模板名(id)'，{對象})
語法:
例如:
數(shù)據(jù)：{{ data}}{{data.name}}
判斷：{{if data}} {{data.name}} {{/if}}
一維遍歷：{{each data}} {{$value}} {{/each}}
二維遍歷：
{{each data as value}} //第一次遍歷
{{each value.more as item }} //第二次遍歷data.more
{{item}}
{{/each}}
{{/each}}
具體如下例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
//導入包
<script src="./node_modules/art-template/lib/template-web.js"></script>
//模板js
<script type="text/x-handlebars-template" id="tp1">
hello {{name}}
i am {{age}} years old
i come from {{province}}
i like {{each hobbies}} {{$value}} {{/each}}
</script>
//通過id判斷是哪個模板，然后寫入數(shù)據(jù) 數(shù)據(jù)形式對應
<script>
let res = template('tp1',{
name:'Jack',
age:20,
province:'陜西省',
hobbies:["eat","sleep","play"]
});
console.log(res);
</script>
</body>
</html>
直接運行index.html結果：
6.NodeJs如何使用
說明：需要搭建服務器，讀取整個頁面數(shù)據(jù)，自動識別頁面中的模板數(shù)據(jù)
通過響應回去的數(shù)據(jù)，將頁面動態(tài)補充完整。
使用方法：
1.安裝npm install art-template
2.引入模塊const template = require('art-template')
3.使用：template.render('模板',{對象})方法
4.html文件語法同上
語法如下：
let result = template.render('hello {{name}}',{
name:'jack'
});
console.log(result);
實例如下：
注意：
- 默認頁面讀取到的數(shù)據(jù)是 二進制，render 方法接收的是 字符串
需要把讀取到的 data二進制數(shù)據(jù)轉換成字符串 所以需要toString()方法- 將文件中的數(shù)據(jù) files 填入 頁面數(shù)據(jù) data 中
文件數(shù)據(jù)需要是 json 格式，頁面則需要是 字符串 格式
1.服務器代碼
const http = require('http');
const template = require('art-template');
const fs = require('fs');
const path = require('path');
http.createServer(function (req,res) {
//讀取頁面文件
fs.readFile(path.join(__dirname,"test.html"),function (err,data) {
if(err)
throw err;
// 讀取數(shù)據(jù)文件
fs.readFile(path.join(__dirname,"data.json"),function (err,files) {
if(err)
throw err;
let rest = template.render(data.toString(), {
title: "個人信息",
data: JSON.parse(files)
});
console.log(JSON.parse(files));
res.end(rest);
})
})
}).listen(8080,function () {
console.log("http://localhost:8080");
});
2.test.html文件內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
// data 后面 value 代表每一項 ，index 為下標
{{each data as value index}}
<p>hello , i am {{value.name}}</p>
<p>i am {{value.age}} years old</p>
<p>i come from {{value.province}}</p>
<!--遍歷二維數(shù)組-->
<p>i like
{{each value.hobbies as i }} {{i}} ,{{/each}}
</p>
<br>
{{/each}}
</body>
</html>
3.數(shù)據(jù)data.json文件
[
{"name":"Jack",
"age":20,
"province":"河南省'",
"hobbies":["eat","music","play"]
},
{"name":"Rose",
"age":18,
"province":"北京市'",
"hobbies":["eat","sleep","watch TV"]
},
{"name":"Little fairy",
"age":16,
"province":"陜西省'",
"hobbies":["eat","sleep","read book"]
}]
訪問http://localhost:8080運行結果
總結:
- 學起來并不是很難，就是遇到些小問題，需要去研究一下，怎么解決。
- 光看是沒有用的，需要動手去做，才知道哪里不對，哪里該怎么寫，哪里容易出問題。
- 加油，實踐出真知呀。
