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这样的库，它会根据需要将模板异步加载到变量中。

Answer 2

我这样做的首选方法是创建一个单独的模板文件，该文件可以在开发中动态加载并烘焙到纯js中进行生产。

具体来说，我使用eco模板（除非您熟悉咖啡脚本，否则我不会推荐它们）和Stitch for node.js。 Stitch支持与文件扩展名绑定的自定义引擎，因此当它在我的项目目录中找到eco文件时，它会将其编译为Javascript函数。我现在可以使用提供require功能的针脚使用eco文件的原始路径在我的应用程序的任何其他部分中包含该功能。因此，如果模板位于src/views/listItem.eco，我会运行var listItemView = require('views/listItem');来获取它并像这样使用

var html = listItemView({item: items[i]});
$someElement.html(html);

如果课程或任何其他类似的框架，你可以使用require.js而不是stitch。