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

Question

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

下面是我想到的几种方法:

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

2，我可以将它们全部放入我的主 html 文件中的脚本标记中。这会工作得相当好，特别是对于 head.js(以启用脚本标签的并行加载)，但仍然 - 我认为每个脚本标签都是对服务器的单独调用，对吗？这并没有完全改善这种情况。

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

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

Answer 1

我为 jQuery 模板的规范/重写规范模板调用和按需加载所采用的方法是对其进行流水线处理。

参见(早期)draft spec 的第 9 节，并查看 conformance suite tests在底部的自定义按需模板加载示例(测试用例“Main calls and Loaded just in time!”是相关的)。

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

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