### 3、實例
```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>Document</title>
<script src="./lib/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<div>
<!-- 輸出表達式 -->
<p>{{name}}</p>
<!-- 不轉義輸出 -->
<p>{{#value}}</p>
<!-- 條件表達式 -->
{{if bool}}
<p>{{bool}}</p>
{{/if}}
{{if num < 1 }}
<p>'num < 1'</p> {{else}} <p>error!</p>
{{/if}}
<!-- 遍歷表達式 數組 -->
<p>遍歷表達式 數組</p>
{{each list as value index}}
<li>{{index}}: {{value}}</li>
{{/each}}
<!-- $簡寫 $ 特指當前函數中的變量 -->
<p>$簡寫</p>
{{each list}}
<li>{{$index}}: {{$value}}</li>
{{/each}}
<!-- 遍歷表達式 對象 -->
<p>遍歷表達式 對象</p>
{{each objList as value index}}
<li>{{index}}: {{value}}</li>
{{/each}}
<!-- $簡寫 -->
<p>$簡寫</p>
{{each objList}}
<li>{{$index}}: {{$value}}</li>
{{/each}}
<!-- 模板包含子模板,表達式 -->
{{include 'news_list'}}
<!-- 輔助方法 -->
</div>
</script>
<script id="news_list" type="text/html">
<p>模板包含子模板,表達式</p>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value + 1}}</li>
{{/each}}
</ul>
</script>
<script>
const data = {
name: 'zhangsan',
value: '<h1>lisi</h1>',
num: 0,
bool: true,
list: [1, 2, 3, 4, 5],
objList: {
name: 'zhangsan',
age: '18',
addr: '廣東'
}
}
let temp = template('test', data)
document.getElementById('content').innerHTML = temp
</script>
</body>
</html>
```

```html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>不轉義HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不轉義:{{#value}}</p>
<p>默認轉義: {{value}}</p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
```

```html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>
```

```html
```

- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一個 JS 特效:鼠標提示框
- 網頁換膚和 if 判斷
- 函數傳參
- 循環 while 和 for
- 導航欄選項卡
- JS 簡易日歷
- JavaScript 基礎
- JavaScript 組成
- 變量類型
- 變量類型轉換
- 變量的作用域和閉包
- 命名規范
- 運算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函數返回值
- 函數傳參與行間樣式
- 數組基礎操作
- 定時器的使用
- 定時器的作用
- 數碼時鐘
- Date 對象其它方法
- 延時提示框
- 無縫滾動
- DOM基礎應用
- DOM 基礎
- DOM 節點
- 操作元素屬性
- DOM 元素靈活查找
- DOM 操作應用
- 創建、插入和刪除元素
- 文檔碎片
- DOM操作應用高級
- 表格標簽
- 表格應用
- 表單應用
- JS 運動基礎
- 運動基礎
- 運動框架及應用
- 緩沖運動
- 運動的停止條件
- JS 運動應用
- 多物體運動框架
- 任意值運動框架
- 仿 Flash 圖片展示
- JS 運動中級
- 鏈式運動框架
- 完美運動框架
- 運動框架總結
- 運動框架應用
- JS事件基礎
- Event 對象和事件
- 鼠標事件
- 鍵盤事件
- JS 事件中級
- 默認事件
- 拖拽
- JS 事件高級應用
- 事件綁定
- 高級拖拽
- 自定義滾動條
- Ajax 基礎
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中級
- 編寫 Ajax
- Ajax 數據
- JS 面對對象基礎
- 面對對象是什么
- JS 中的面對對象
- 第一個面對對象的程序
- 工廠方式
- 原型:Prototype
- 面對對象編程方式
- JS 面對對象實例
- 面對對象的選項卡
- JS 面對對象高級
- Json 方式的面向對象
- 拖拽和繼承
- 使用繼承
- 系統對象
- BOM 應用
- BOM 基礎
- 尺寸及坐標
- 常用方法和事件
- COOKIE 基礎與應用
- 什么是 cookie
- 使用 cookie
- JS 中的正則表達式
- 正則表達式基礎
- 字符串與正則配合
- 字符串
- 量詞
- 常用正則例子
- JS Template 模板引擎
- 特性
- 語法
- 實例
- 表達式和運算符分類
- 主要表達式
- 左表達式
- 自增和自減
- 一元運算符
- 算術運算符
- 關系運算符
- 相等運算符
- 位移運算符
- 二進制位運算符
- 二元邏輯運算符
- 條件(三元)運算符
- 賦值運算符