的JavaScript模板

Question

我试图说服同伴同事到项目的前端使用胡子/ Hogan和我提出以下建议：

有一个templates.js文件，它可以大致模样这样的：

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

然后，我们将包括templates.js和小胡子/ Hogan.js渲染使用相应的第三方物流。

我的建议被拒绝了，因为我们将html模板硬编码为js变量。 这真的很糟吗？哪些是其他替代方案？

Answer 1

要回答你的问题，把你的模板放在一个静态的JavaScript文件中的JavaScript变量中，这使得难以维护你的模板。只要您想进行简单的更改，就需要担心字符串转义。 1语法错误会导致您的应用程序崩溃。

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

你的选择是：

1. 存储您的模板在单独的文件，并生成静态template.js文件作为预生成的一步。
2. 通过AJAX将你的html模板文件async加载到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而不是十字绣，或任何其他类似的框架。