在大型 javascript 项目中包含/组织 HTML
我有一个相当大的网络应用程序，每个页面上都有几个迷你小程序。这些小程序几乎总是相同的 jquery 应用程序。我正在寻找有关如何在我的较大项目中组织/包含这些 jquery 应用程序的较小部分的建议。
例如，每个应用程序都有几个独立的选项卡。如果可能的话，我想将每个选项卡存储为单独的 .html 文件，因为这使开发更容易。
我的要求是： 1) 页面加载时，所有 html“选项卡”都会加载到客户端。我想通过动态请求标签 html 来避免任何延迟。
2）如果可能的话，我想尽量减少发送的原始数据。例如，如果该页面上有 10 个小程序，最好将每个选项卡发送 1 次，而不是发送每个选项卡 10 次。
问题： 1) 我有哪些“包含”HTML 文件/javascript 代码的选项 2）在这种情况下有什么建议可以让我的开发保持简单吗？当然，在处理大页面时，肯定有一种比仅仅编辑一个庞大的 html 文件更好的方法。
I've a got a fairly large web app, with several mini applets on each page. These applets are almost always identical jquery apps. I am looking for advice on how I should organize/include smaller parts of these jquery apps within my larger project.
For example, each app has several independent tabs. If possible, I would like to store each of the tabs as a seperate .html file because this makes development easier.
My requirements are:
1) All of the html 'tabs' are loaded on the clients end when the page loads. I would like to avoid any delays by dynamically requesting the tab html.
2) If possible, I would like to minimize the raw data sent. For example, it would be preferable to send each tab 1 time, instead of sending each tab 10 times if there are ten applets on that page.
Questions:
1) What are my options for 'including' the HTML files / javascript code
2) Any tips for keeping my development simple in this situation? Surely there has to be a better way than just editing one massive html file when working with large pages.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
PURE javascript 模板引擎对我很有用： http:// /wiki.github.com/pure/pure/pure-version-2-release-notes
它使用 DOM 的分支作为其模板 - 您可以使用页面的现有部分，或请求模板 HTML在需要时（或之前）超过 XHR。
PURE 将 JSON 数据应用于模板以呈现结果 - 您可以让它自动执行此操作（通过将 HTML 中的类映射到 JSON 中的属性），或者使用一组规则（也存储为 JSON）进行精细控制。
它的渲染速度非常快，并且相对容易设置。
因此 - 在您的示例中，您将拥有：
The PURE javascript templating engine has been useful to me: http://wiki.github.com/pure/pure/pure-version-2-release-notes
It uses branches of the DOM as its templates - you can either use an existing part of the page, or request the template HTML over XHR when it's needed (or before).
PURE applies JSON data to the template to render the result - you can have it do this automatically (by mapping classes in the HTML to properties in the JSON), or get fine control using a set of rules, also stored as JSON.
It's VERY fast to render, and relatively easy to set up.
So - in your example you'd have:
让我完全理解您所要求的内容有点困难，但必须指出的一点是您可以使用客户端缓存，如果您在服务器上正确设置它，您可以告诉客户端加载同一文件多次，但客户端只会下载一份副本并重复使用该副本。 （查询字符串也必须相同，但哈希字符串可能不同）
浏览器和用户不会遇到大 HTML 文件的问题（至少不会出现小于 1MB 的问题），使用缓存可能是解决问题的方法。具有最少的带宽开销。但是，如果您更喜欢使用较小的文件，您可以设置一个 php 脚本来连接您的开发文件，只需将其写入磁盘而不是直接提供服务，然后提供结果文件。
It's a bit hard to get my head around exactly what you are asking for, but a point that certainly has to be made is that you can use clientside caching, if you set it up right on your server you can tell the client to load the same file many times, but the client will only download one copy and reuse that copy. (Query string must also be the same, but hash string may differ)
Browsers and user will not have a problem with a big HTML file (at least not as long as we are talking <1MB), with caching it's probably the method that has the least bandwidth overhead. But if you prefer to work with smaller files you could set up a php script to concatenate your development files, just make it write to disk rather than serve directly, and serve the resulting file.
您可以使用服务器端包括...
使用 JavaScript 加载内容不是一个好主意，因为有些人将无法访问它。
如果您想让页面在脚本之前加载，只需将 s 元素放在 .
当然，将脚本放在远程文件中，以便浏览器使用缓存。
@eBusiness：如果他使用 Ajax，我认为浏览器不会使用缓存......
只有 IE 通过 XHR 从他的缓存中获取页面。
You can use server-sides includes...
Loading content with JavaScript isn't a good idea because some people won't be able to access it.
And if you want to make you page load before your scripts, just put the s elements just before the .
And of course, put your scripts in distant files so that browsers use cache.
@eBusiness : If he uses Ajax, I don't think browsers will use the cache...
Only IE gets the page from his cache with XHR.