[TOC]
# 使用方法
## 前言
看此篇文章前，你需要先熟悉官方文檔下的API文章。
在此篇文章，我不可能能完全地講述完 art-template 的所有用法，我只是講述 art-template 幾個API 的用法，因為我在此處吃過點虧。
## 需求
渲染下面這個大標題
```html
<h1>哈哈哈</h1>
```
## 使用方式
此節較為復雜（其實也不復雜，但不了解 webpack、loader、前端工程化、art-template API 的同學可能會比較暈）。
因此我們以項目類型，作為使用方式的選型出發點。
- 未工程化的前端項目
> 直接使用 art-template 的 API 完成對以上大標題的渲染；
- 已工程化的前端項目
- 使用 art-template-loader
- 使用 raw-loader
## API
art-template 中，有關渲染的 API 有以下幾個：
* template
* compile
* render
具體使用方法和入參，請移步到官方文檔的API文章。
## 未工程化的前端項目
在未工程化的前端項目中，我建議使用 template，因為瀏覽器環境下，無法加載外部文件，art-template 允許 template 這個 API 的第一個入參（filename）為存放模板的元素ID。
當然，compile 和 render 這兩個 API 也可以使用，只是需要你自己拼HTML字符串。
舉個正確示范的栗子：
> 使用 template
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/html">
<h1>{{ content }}</h1>
</script>
<script src="https://unpkg.com/art-template/lib/template-web.js"></script>
<script>
let renderResult = template("template", {
content: "哈哈哈"
});
document.getElementById("container").innerHTML = renderResult;
</script>
</body>
</html>
```
> 使用 compile
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="container"></div>
<script src="https://unpkg.com/art-template/lib/template-web.js"></script>
<script>
let renderResult = template.compile("<h1>{{ content }}</h1>");
document.getElementById("container").innerHTML = renderResult({
content: "哈哈哈"
});
</script>
</body>
</html>
```
> 使用 render
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="container"></div>
<script src="https://unpkg.com/art-template/lib/template-web.js"></script>
<script>
let renderResult = template.render("<h1>{{ content }}</h1>", {
content: "哈哈哈"
});
document.getElementById("container").innerHTML = renderResult;
</script>
</body>
</html>
```
## 已工程化的前端項目
### 使用 art-template-loader
思路：
在 webpack 配置 art-template-loader 后，npm run start / npm run build 時 webpack 會使用該 loader 對 import / require 的文件進行解析（其實就是讀取文件內容，轉為字符串，使用 compile 對字符串進行編譯），在JS文件中就可以直接傳參渲染了，無需自己手動使用 compile API 進行編譯。
栗子：
> webpack.conf.base.js
```javascript
...
module.exports = {
entry:{
...
},
output:{
...
},
plugins:[
...
]
module: {
rules: [
...
{
test: /\.art$/,
use: "art-template-loader"
}
]
}
};
```
> index.js
```javascript
import templateForIndex from "./index.art";
document.getElementById("container").innerHTML = templateForIndex({
content: "哈哈哈"
});
```
> index.art
```html
<h1>{{ content }}</h1>
```
### 使用 raw-loader
思路：
在 webpack 配置 raw-template-loader 后，npm run start / npm run build 時 webpack 會使用該 loader 對 import / require 的文件進行解析（其實就是讀取文件內容，轉為字符串），在 JS 文件中可以拿到該字符串。
栗子：
> webpack.conf.base.js
```javascript
...
module.exports = {
entry:{
...
},
output:{
...
},
plugins:[
...
]
module: {
rules: [
...
{
test: /\.art$/,
use: "raw-loader"
}
]
}
};
```
> index.js
```javascript
import templateForIndex from "./index.art";
import template from "art-template/lib/template-web.js";
// 以下兩種方式，二選一即可。
// 使用 render
document.getElementById("container").innerHTML = template.render(templateForIndex, {
content: "哈哈哈"
});
// 使用 compile
let renderFunction = template.compile(templateForIndex);
document.getElementById("container").innerHTML = renderFunction({
content: "哈哈哈"
})
```
> index.art
```html
<h1>{{ content }}</h1>
```
### 常規使用
此外，即使是工程化，我們也可以使用 art-template 的 API 進行常規使用（ template 這個 API 除外），如：
> index.js
```javascript
import template from "art-template/lib/template-web.js"
let templateForIndex = "<h1>{{ content }}</h1>"
// 以下兩種方式，二選一即可。
// 使用 render
document.getElementById("container").innerHTML = template.render(templateForIndex, {
content: "哈哈哈"
});
// 使用 compile
let renderFunction = template.compile(templateForIndex);
document.getElementById("container").innerHTML = renderFunction({
content: "哈哈哈"
})
```
