ArtTemplate懒人教程，快速上手关键步骤？

ArtTemplate 懒人教程：5分钟上手

懒人须知：ArtTemplate 是干嘛的？

想象一下这个场景：

你有一个 HTML 模板，里面有一些动态数据，比如用户名、文章标题等：

<div class="user-box">
  <h1>{{user.name}}</h1>
  <p>发表的文章：{{user.postCount}} 篇</p>
</div>

你的 JavaScript 里有这样一串数据：

var data = {
  user: {
    name: '张三',
    postCount: 10
  }
};

不用 ArtTemplate，你可能需要写一堆 innerHTML 或者 document.createElement 来手动把数据塞进 HTML 里,又慢又容易出错。

用 ArtTemplate，你只需要一行代码，就能自动把 data 填充到模板里，生成最终想要的 HTML。

一句话总结：ArtTemplate 是一个轻量、快速的 JavaScript 模板引擎，让你用写 HTML 的方式来动态生成页面内容，告别繁琐的 DOM 操作。

懒人第一步：引入模板

直接去 ArtTemplate 的官网 下载最新版的 template-web.js 文件。

在你的 HTML 页面里，像引入 jQuery 一样引入它：

<!-- 在 body 标签末尾引入 -->
<script src="path/to/template-web.js"></script>

搞定！不需要任何配置，就是这么简单。

懒人第二步：写模板

有两种方式写模板，懒人推荐 第一种，因为它能把 HTML 和 JavaScript 分开,更清晰。

推荐！使用 <script> 标签（推荐）

在 HTML 中，用一个 type="text/html" 的 <script> 标签来存放你的模板。id 必须有,等下要用它来找到这个模板。

<!-- 注意 type 是 text/html，而不是 text/javascript -->
<script id="user-tpl" type="text/html">
  <div class="user-box">
    <h1>{{user.name}}</h1>
    <p>发表的文章：{{user.postCount}} 篇</p>
  </div>
</script>

直接写在 JavaScript 字符串里（不推荐）

var source = '<div class="user-box"><h1>{{user.name}}</h1><p>发表的文章：{{user.postCount}} 篇</p></div>';

懒人第三步：渲染模板（核心步骤）

假设你已经有了模板（用方法一）和要填充的数据。

准备数据

var data = {
  user: {
    name: '张三',
    postCount: 10
  }
};

渲染！

使用 template() 函数，传入模板的 id 和数据对象，它会返回一个拼接好的 HTML 字符串。

// template('模板的id', 数据对象);
var html = template('user-tpl', data);
// 打印一下看看结果
console.log(html);

输出结果：

<div class="user-box">
  <h1>张三</h1>
  <p>发表的文章：10 篇</p>
</div>

放到页面上

拿到 html 字符串后，用 innerHTML 插入到页面中你想显示的位置。

<!-- HTML 中放一个容器 -->
<div id="result-container"></div>
<script>
  // ... 假设上面的 template 代码已经执行过了
  // 把渲染好的 HTML 放进容器里
  document.getElementById('result-container').innerHTML = html;
</script>

懒人速查：常用语法

记住这几个，99% 的场景都够用了。

懒人实战：渲染一个用户列表

假设我们有以下数据：

var userList = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 28 }
];

写模板（HTML 部分）

<script id="user-list-tpl" type="text/html">
  <ul>
    {{each userList}}
      <li>
        ID: {{$value.id}} - 姓名: {{$value.name}} - 年龄: {{$value.age}}
      </li>
    {{/each}}
  </ul>
</script>

• {{each ...}} 开始循环。
• $value 代表当前循环项（数组里的每个对象）。
• $index 代表当前索引（从 0 开始），如果需要可以写成 {{$index}}: {{$value.name}}。

渲染并显示（JavaScript 部分）

var html = template('user-list-tpl', { userList: userList });
document.getElementById('result-container').innerHTML = html;

最终效果：

页面会显示一个无序列表,里面列出了所有用户的信息。

终极懒人总结

1. 下载引入：下载 template-web.js，用 <script> 标签引入。
2. 写模板：用 <script id="my-tpl" type="text/html"> 写你的 HTML 模板，用 {{字段名}} 占位。
3. 准备数据：准备一个 JavaScript 对象或数组。
4. 调用渲染：var html = template('my-tpl', 你的数据);
5. 插入页面：document.getElementById('容器').innerHTML = html;

恭喜你，你已经掌握了 ArtTemplate 的 80% 的用法！剩下的 20%（比如自定义函数、子模板等）等用到了再查官方文档不迟，对于懒人来说,这些已经完全够用了。