在这篇文章中我们将对 JavaScript 模板进行概述。我们将首先讨论 JavaScript 模板是什么，何时使用它们，如何使用它们，在深入更多细节前，看看一些流行的模板引擎。我们将关注 Mustache， Handlebars 和 jQuery Template。
什么是JavaScript模板
JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法，但通常是非常简单的，特别是如果我们以前已经在其他地方使用过模板系统(如 PHP 中的 Twig )。一个要注意的有趣的点是，替换标记通常是由双花括号({ {……} })表示，这也是 Mustache 和 Handlebars 名字的来源（提示：从侧面看它们的相似之处）。
什么时候使用JavaScript模板？
一旦我们发现自己在 JavaScript 字符串内包含 HTML，就应该开始考虑 JavaScript 模板可能给我们带来的好处。当建立一个可维护的代码库，关注点分离是至关重要的，所以任何可以帮助我们实现这一目标的手段都应该探索。在前端 web 开发，将 HTML 从 JavaScript 分离显得很重要（这是双向的，我们也不应该在 HTML 中内联 JavaScript）。
一些可以受益于 JavaScript 模板的常见场景是实时 web 应用程序（例如一个事件评论的直播应用），或国际化（i18n），它们通常要求使用相同的格式显示不同的内容。
如何使用 JavaScript 模板？
我们将通过特别的库案例详细介绍它，但本质上这和包含我们选择的库一样简单，即获取模板和使用一些数据渲染它。
大多数库支持内联和外部模板。内联模板在只有很少模板时非常适合，或者当每个加载的页面都需要使用模板，但是通常我们的模板应该是外部模板。外部模板带来很多好处，主要是模板永远不会被下载到客户端，除非它们被页面所需。
mustache.js
Mustache 是一个多语言，逻辑简单的模板系统。mustache.js 只是其中一个实现。一旦我们习惯了（非常简单的）语法，就可以在各种各样的编程语言中使用它。
关键点
- 文件9kb大小（很小）
- 简单
- 无依赖
- 无逻辑
- 非预编译模板
- 编程语言无关
