[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: "哈哈哈"
})
```
