jquery - 在大型 javascript 项目中包含/组织 HTML

Question

我有一个相当大的网络应用程序，每个页面上都有几个小程序。这些小程序几乎总是相同的 jquery 应用程序。我正在寻求有关如何在我的大型项目中组织/包含这些 jquery 应用程序的较小部分的建议。

例如，每个应用程序都有几个独立的选项卡。如果可能，我想将每个选项卡存储为一个单独的 .html 文件，因为这使开发更容易。

我的要求是: 1)当页面加载时，所有的 html“选项卡”都加载到客户端。我想通过动态请求标签 html 来避免任何延迟。

2) 如果可能，我想尽量减少发送的原始数据。例如，如果该页面上有 10 个小程序，则最好将每个选项卡发送 1 次，而不是将每个选项卡发送 10 次。

问题: 1)“包含”HTML 文件/javascript 代码的选项是什么 2)在这种情况下保持我的开发简单的任何提示？在处理大页面时，肯定有比只编辑一个巨大的 html 文件更好的方法。

Answer 1

PURE javascript 模板引擎对我很有用:http://wiki.github.com/pure/pure/pure-version-2-release-notes

它使用 DOM 的分支作为模板 - 您可以使用页面的现有部分，或者在需要时(或之前)通过 XHR 请求模板 HTML。

PURE 将 JSON 数据应用于模板以呈现结果 - 您可以让它自动执行此操作(通过将 HTML 中的类映射到 JSON 中的属性)，或者使用一组规则进行精细控制，也存储为 JSON .

渲染速度非常快，而且相对容易设置。

所以 - 在您的示例中，您将拥有:

• “选项卡”的一组 HTML - 将其包含在页面中或使用 XHR 请求它。
• 通过 XHR 以 JSON 对象的形式检索每个选项卡的内容——比发送 HTML+内容数据少得多
• 将带有选项卡模板的 JSON 呈现到页面上您想要的任何位置。