client-templates 是一个前端 JavaScript 库，能够通过简单的模板语法编写 HTML 模板，这样你就可以在客户端（浏览器）上快速构建动态页面，同时也不依赖于任何服务端技术。在这篇文章中，我们将介绍如何使用 client-templates。
安装
你可以通过 npm 包管理器来安装 client-templates 。在你的项目根目录下，打开终端（Terminal 或 Bash），输入以下命令：
npm install client-templates --save
--save 参数可将 client-templates 安装至你的项目依赖中。
基础用法
client-templates 将模板语法挂载到了 DOM ，这使得在使用时非常方便。你只需要在你的 HTML 文件中引入 client-templates 库并定义模板，然后使用 JavaScript 来调用模板即可。
引入 client-templates
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ------------ ------- ------------------------------------------------------------------------------------------ ------- ------ ---- -------- --- ------- -------
你可以通过以下方式引入 client-templates:
<script src="node_modules/client-templates/dist/client-templates.min.js"></script>
或者你也可以使用 CDN 引入 client-templates 库。
定义模板
接下来，在你的 HTML 中定义一个模板：
<!-- 此处省略其他部分 -->
<div id="userTemplate">
<h2>{name}</h2>
<p>{email}</p>
</div>
<!-- 此处省略其他部分 -->{name} 与 {email} 是模板的变量，这里我们将在 JavaScript 代码中填充它们。
使用模板
现在，我们可以通过 JavaScript 引用模板并填充数据。
var userTemplate = ct("#userTemplate");
var data = { name: "马克", email: "mark@example.com" };
var html = userTemplate.render(data);上述代码定义了一个 userTemplate 变量，该变量将引用 HTML 模板。接着定义了一个 data 变量，它包含了供模板替换的数据。最后我们通过调用 userTemplate.render() 方法获取模板编译结果，并可以使用 html 变量来渲染页面。
我们可以使用上述代码渲染出类似如下的结果：
<h2>马克</h2> <p>mark@example.com</p>
模板语法
client-templates 的模板语法非常简单，下面是一些常用的语法：
变量替换
使用花括号包裹起来的名称，如 {name}。
<div>{name}</div>条件语句
使用 {{if}} 和 {{endif}} 标签实现条件判断。
{{if user.role === 'admin'}}
<p>管理员</p>
{{endif}}循环语句
使用 {{for ...}} 和 {{endfor}} 标签实现循环。
{{for users}}
<li>{name}</li>
{{endfor}}高级用法
在上述介绍的基础用法之外，client-templates 还提供了很多高级用法，如条件逻辑、包含其他模板、设置默认值、自定义标签等。这些功能可以让你更轻松地构建动态页面。下面简单介绍其中的一些功能。
包含其他模板
使用 {{include}} 标签可轻松地将其他模板包含到当前模板中。假设你定义了如下模板：
-- -------------------- ---- ------- ---- ------------------ --------------- -------------- --------- -------------------- ------ ---- --------------------- ---------------- ------
以上模板定义了一个 userTemplate 模板和一个 addressTemplate 模板。模板包含一个 {name} 和 {email} 变量，并使用 include 标签嵌入了 addressTemplate 模板。这意味着你可以在 JavaScript 中调用 userTemplate.render() 方法即可将这两个模板一起渲染出来。
设置默认值
有时候数据可能是不完整的。在这种情况下，你可以使用 {{ifNull ...}} 标签为缺失的变量设置默认值。
<p>{name|ifNull-'Unknown'}</p>在上面的代码中，如果 name 变量为 null 或 undefined，则使用 "Unknown" 作为默认值。
自定义标签
client-templates 提供了一种自定义标签的方法。你可以使用 registerTag() 函数注册自定义标签，并使用 {{...}} 形式来调用它们。
例如，下面的代码定义了一个 upper 标签，它将筛选器中的文本转换为大写字母：
ct.registerTag('upper', function (filter, text) {
return text.toUpperCase();
});这意味着，你可以在模板中使用以下代码：
<p>{{upper name}}</p>这将输出一个大写的姓名。
结语
client-templates 是一个强大的前端模板库，它提供了很多功能，能够大大提高我们的前端开发效率。本文仅介绍了一些基础和高级用法，更多函数和配置选项请参考其 文档 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77968