在大型 javascript 项目中包含/组织 HTML答案

【问题标题】：Including/Organzing HTML in large javascript project在大型 javascript 项目中包含/组织 HTML
【发布时间】：2011-02-04 04:38:22
【问题描述】：

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

例如，每个应用程序都有几个独立的选项卡。如果可能的话，我想将每个选项卡存储为单独的 .html 文件，因为这样可以更轻松地进行开发。

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

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

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

【问题讨论】：

您的 javascript 代码是依赖于页面变量，还是静态的？例如它可以从.js 文件运行，还是服务器需要填写动态内容？
它偶尔会依赖于页面变量，但是这些总是可以通过搜索 DOM 树找到的，没有任何问题。大多数 javascript 代码提供各种/可自定义的标签，这些标签将被发布到服务器。

【解决方案1】：

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

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

渲染速度非常快，设置起来也相对容易。

所以 - 在你的例子中你会有：

【讨论】：

【解决方案2】：

我很难完全理解您的要求，但必须指出的一点是您可以使用客户端缓存，如果您在服务器上正确设置它，您可以告诉客户端多次加载同一个文件，但客户端只会下载一个副本并重复使用该副本。（查询字符串也必须相同，但哈希字符串可能不同）

浏览器和用户不会对大 HTML 文件有任何问题（至少在我们谈论

【讨论】：

【解决方案3】：

您可以使用服务器端包含... 使用 JavaScript 加载内容不是一个好主意，因为有些人将无法访问它。

如果您想让页面在脚本之前加载，只需将 s 元素放在 . 当然，将您的脚本放在远程文件中，以便浏览器使用缓存。

@eBusiness : 如果他使用 Ajax，我认为浏览器不会使用缓存... 只有 IE 使用 XHR 从他的缓存中获取页面。

【讨论】：

他正在编写 JavaScript 应用程序，如果用户关闭了 JavaScript，那么无论他如何管理他的包含，他都无能为力。我完全不知道你为什么要对我说最后一段，但仅供参考，如果服务器告诉它这样做，浏览器会缓存任何内容，包括通过 ajax 调用加载的内容。