通过 ajax 加载 JavaScript 的好方法

Posted 2023-05-09

【中文标题】通过 ajax 加载 JavaScript 的好方法

【英文标题】：Good practice method for loading JavaScript via ajax

【发布时间】：2011-03-16 17:46:29

【问题描述】：

免责声明：我对 AJAX 还很陌生！

我环顾四周，不确定使用 ajax 加载 javascript 的方法。

我正在使用 ajax 请求页面，每个页面都需要自己的 6-10 个短方法。这些页面总共可能有 5-6 个，因此大约总共有 35 个以上的方法。

我希望在加载每个需要它的页面时访问必要的 javascript。

我见过几种方法，但我不确定哪一种最适合我的需要：

在头部包含一个空的脚本元素，并通过操作src 属性。 DOM。

通过创建一个新的脚本元素。 DOM 并将其附加到 document.body（这听起来与 #1 相同）。

jQuery（我已经在使用）有一个 ajax getScript() 方法。 我还没有读到任何关于它的内容，但我可以在 ajax 响应中包含一个脚本元素吗？

由于我是 ajax 和 Web 开发的新手，我很好奇每种方法的起伏以及我错过的任何方法。

一些担忧是： - 每次发出 ajax 请求时会使用缓存副本还是下载脚本。请注意，脚本将是静态的。 - 浏览器兼容性。我使用 Chrome，但这个应用程序将在 IE >= 7 以及 Firefox 的版本中使用。

【问题讨论】：

为什么不只有一个外部文件？如果这些是非常短的方法，单个文件将被压缩和缓存，客户端可以忽略不计，并将您的维护简化为一个 <script> 标记...除非您变得更大，否则这绝对是一种更简单的方法去。

+1 根据尼克的建议。保持简单。

这将是简单的方法 :) 但这是一个学习过程，也是一个实际的过程，我想学习一种可扩展的方法。

【参考方案1】：

在 jQuery 环境中，我会使用 getscript()。你想知道缓存是对的——getscript 包括一个缓存破坏功能（主要设计用于击败激进的 IE 缓存，尽管在其他情况下当然有用）。您可以像这样执行非缓存破坏getscript 的等效操作：

$.ajax(
    cache: true,
    dataType: "script",
    url: "your_js_file.js",
    success: yourFunction
);

【讨论】：

@Julian 是正确的，在这种情况下应该是"script"，并且它不会激活缓存功能，因为cache 不是未定义的。

是的，复制/粘贴错误。已移除。文档声明它将“智能”选择，大概基于 mime 类型......

我们经常同意，尼克：P

@Ken：最好把脚本 dataType 放在服务器不能正确处理 mimetype 的情况下。

@Julian，同意，最安全的选择。 @Nick，是的，但不幸的是，我们在我的胖指法上经常达成一致......

【参考方案2】：

由于这里的所有其他答案都只是说“使用 jquery”而没有任何进一步的信息/解释/理由，因此实际上可能值得看看您提到的其他选项。

选项#1

可能有点复杂，因为它需要您等到一个脚本下载并运行后再获取下一个（因为您只有一个脚本元素）。

选项#2

更好，因为您可以在第一个脚本元素完成下载之前将第二个脚本元素附加到 DOM，而不会影响下载/执行。

选项#3

在我之前的每个人都推荐，如果您在 jQuery 环境中并且已经为其他用途加载（相当重的）jQuery 库 - 单独加载它显然是多余的。还值得注意的是$.getScript() 和$.ajax() 都使用eval() 来执行脚本。 eval() 在这种情况下并不“邪恶”，因为它是受信任的来源，但根据我的经验，调试 eval()-ed 代码有时会稍微困难一些。

选项#4

不可能。

选项#5

Nick Craver 在第一个 OP 评论中推荐的就是我要使用的 tbh - 如果脚本是静态的，如您所说，缓存将比多个 HTTP 请求更有效。如果您特别关心带宽，还可以考虑使用 cache.manifest 进行主动缓存：http://www.html5rocks.com/tutorials/appcache/beginner/

【参考方案3】：

使用getScript。它本质上和第二种方法做的事情一样，但是你不必担心如何在各种浏览器（主要是 IE）中监听负载。

就 DOM 而言，AJAX 响应只是文本。除非您以某种方式将其插入 DOM，否则它没有任何效果。

【讨论】：

我会推荐反对这个，$.getScript() 故意不缓存，你可以看这里：github.com/jquery/jquery/blob/master/src/ajax.js#L265

我同意尼克的观点，使用脚本数据类型采用 $.ajax 方式。

@Nick @Julian - 好点，我不知道 jQuery 在 URL 中潜入时间戳 :)。我只说ajaxSetup 始终具有永久缓存，或者更好的overwrite 原生getScript 方法可以选择性地允许缓存，并且仍然向后兼容。如果 jQuery 错过了它，那么我们不会。这不就是 JavaScript 的全部意义所在吗？ :P