JavaScript 模板

Question

我试图说服一位同事在项目的前端使用 Mustache/Hogan，我提出了以下建议:

有一个 templates.js 文件，大致如下所示:

var tpl_alert = '<div class="alert">{{msg}}</div>';
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>';
...

然后，我们将包含 templates.js 并在 Mustache/Hogan.js 渲染中使用相应的 tpl。

我的提议被拒绝了，因为我们正在将 html 模板硬编码到 js 变量中。这真的那么糟糕吗？还有哪些其他替代方案？

Answer 1

为了回答您的问题，将您的模板放在静态 JavaScript 文件中的 javascript 变量中会使维护您的模板变得困难。每当您想进行简单更改时，您都需要担心字符串转义。 1 个语法错误将使您的应用崩溃。

但是，将所有模板放在一个 JavaScript 文件中是加载模板的最快方式。

您的备选方案是:

1. 将模板存储在单独的文件中并生成静态 template.js 文件作为预构建步骤。
2. 通过 AJAX 将您的 html 模板文件异步加载到 javascript 变量中。
3. 使用类似 Require.js 的库这将根据需要将您的模板异步加载到变量中。