如何有效地实现客户端javascript模板部分？答案

【问题标题】：How to efficiently implement clientside javascript templating partials?如何有效地实现客户端javascript模板部分？
【发布时间】：2011-05-07 11:47:24
【问题描述】：

我想建立自己的，但我不确定最好的方法。部分是一个模板，它只是另一个更大模板的一部分，可以随意插入到多个其他模板中。模板本身是相当基本的，只是字符串提取和连接，但客户端部分让我有点难过。

以下是我想到的几种方法：

1, 我可以编写一个 javascript 帮助函数，通过 ajax 将部分加载到我想的某种形式的本地存储中，并且所有需要该特定部分的后续模板将首先查看本地存储。我认为这种方法不是很安全，因为本地存储并不总是得到保证。如果我不能将它们保存到本地存储中，partials 会导致过多的 ajax 调用。

2，我可以将它们全部放入我的主 html 文件中的脚本标签中。这会很好地工作，尤其是使用 head.js（以启用脚本标签的并行加载），但仍然 - 我认为每个脚本标签都是对服务器的单独调用，对吗？这并不能完全改善这种情况。

3，我可以将所有模板放入单个脚本标签（我猜是 html）并通过某种分隔符手动过滤...例如：“#template1(blabla template1 string) #template2(blablabla template2 string) 和将这些字符串放入全局变量中。这只会导致对服务器的一次调用，其余的都在客户端完成。

建议？我查看了现有的模板引擎，但我无法确定它们是如何做到的。代码很复杂

【问题讨论】：

你想要类似 mustache.js 的东西吗？
您也可以从 underscore.js 中的基本模板引擎开始并改进它。
iCanHaz.js 使用<script type="text/javascript id="template1"> TEMPLATE CONTENT </script> 干净地存储其模板...您可以将它们全部放在 1 个 html 文件中？
@Nerian：是的，像小胡子之类的东西，我无法弄清楚他们是这样做的。
@dwarfy：我更愿意使用 doT 模板，但它没有部分支持。所以我想我应该自己做。

标签： javascript template-engine partials

【解决方案1】：

我为规范/重写 jQuery 模板指定模板调用和按需加载的方法是将其流水线化。

请参阅（早期）draft spec 的第 9 节，并查看底部的 conformance suite tests 以获取自定义按需模板加载的示例（测试用例“主要调用并及时加载！”是相关的） )。

基本要点是插件加载器（用 JS 编写）在解析和编译之间挂钩以检查解析树。插件传递获取对象映射模板名称以解析树。如果他们看到任何部分模板选择器（使用您的说法），他们可以尝试使用 AJAX 调用或 Node.js 上的文件 I/O 加载任何未解析的模板，并将部分添加到输入对象以使编译器编译刚刚与公共模板一起加载的部分。

效率方面，请参阅benchmarks。我正在将代码迁移到 github：https://github.com/mikesamuel/jquery-jquery-tmpl-proposal，以防您想合作。

【讨论】：