ajax - 将 js/css 与 ajaxed html 部分包含在内的正确方法是什么？

Question

我正在构建我的第一个 ajax-heavy 应用程序，但不确定此类事情的正确方法。

例如，如果我在 html 部分（表单）中进行 ajax，则使用：

$('#content').load('form.html');

我应该如何包含 javascript 和 css？

当然，我可以将它们包含在原始文档中，但如果从未加载过表单，这似乎很浪费。<script>我可以用and元素内联它们（在 form.html 中）<style>，但这似乎是错误的方法。

score 2 · Accepted Answer

您可以使用单独的 JS 文件并$.getScript()在.load回调中加载它。

内联 CSS 应该可以正常工作，但由于您冒着弄乱主页的风险，您应该将其作为主页的一部分加载，而不是使用 AJAX。

不过，如果是我，我不会害怕在你的主页中多留几行目标明确的 JS和CSS 代码——在开始时将其与其他 JS 和 CSS 一起加载会更有效，在相同的文件，而不是启动另一个网络连接并等待它下载。

score 2 · Accepted Answer

$.getScript() 将发出一个额外的 http 请求来加载要在 form.html 中使用的 js 文件。

因此，例如，如果您通过 ajax 加载 20 个表单，则必须发出 20+20 个 http 请求（20 个用于加载 js 文件，20 个用于加载表单的 html）

一种可能的优化方法是：

在开始时加载所有 css（缩小）。

如果单个 js 文件在缩小后仍然很大，

根据在不同文件中使用的概率来安排js功能（（文件数量越少越好）。

缩小这些文件并在开始时加载概率最高的文件。

然后在检查文件是否已经加载后使用 $.getScript() 加载文件。

2 回答 2