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

时间:2011-05-07 11:47:24

标签: javascript template-engine partials

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

以下是我想到的一些方法:

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

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

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

连连呢?我已经看过现有的模板引擎,但我无法确定它们是如何做到的。代码非常复杂

1 个答案:

答案 0 :(得分:1)

我为jQuery模板的spec / rewrite指定模板调用和按需加载的方法是管道它。

请参阅(早期)draft spec的第9部分,并查看底部的conformance suite tests,了解自定义按需模板加载的示例(Testcase“Main calls and Loaded just the time!”是相关的)。

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

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