在没有冲突的小部件中透明地加载和使用 jQuery

Question

前提：我需要制作一个透明可重用的小部件，它使用 jQuery 并且可以在任何页面上工作（即使页面加载并使用它自己的 jQuery 版本）；小部件将通过托管页面上的单个 <script="widget.js"> 标签加载。

我知道 noConflict() 建议的解决方案，例如 https://stackoverflow.com/a/528251/1710180

我有两个担心：

1. 由于小部件本身是通过 JS 标签加载的，因此它将插入到文档中以加载 jQuery 库的任何 <script src="jquery.js"> 标签都将异步加载（AFAIK 即使使用 document.write()）；因此，两步 noConflict() 分辨率充其量是不可靠的。
2. 小部件还需要加载各种 jQuery 插件；一旦 jQuery 可以在不与 jQuery_widget 全局冲突的情况下解决，我怎么能让这些插件绑定到 jQuery_widget 而不是 jQuery ？

我能想到的最佳解决方案是使用 ES6 处理器编译和打包整个混乱；这至少可以解决我在全局命名空间中的 jQuery 名称冲突；但是，我将使用的一些插件不是 ES6 就绪的，所以第 2 点）仍然不会被这个解决方案解决，因为它们不会使用 ES6 导入。

想到的另一个肮脏的解决方案是将所有内容加载到 iframe 中并使用iframe.contentWindow.$ 来操作主机窗口；我不知道jQuery的跨框架有多可靠，我从来没有尝试过这样的东西。

Answer 1

您至少有两个选择：

1. 执行您所描述的操作，这将涉及您的小部件将script 标记输出到目标页面，触发浏览器无法预测的每个资源（jQuery、插件、您的代码）的 HTTP 请求，因此无法预取。这对性能不利。

2. 打包代码。

让我们按顺序来。

做你描述的事情

...小部件将通过托管页面上的单个 <script="widget.js"> 标签加载。

这部分对这项工作至关重要。如果有人使用defer 或async，它将不起作用。由于加载时间的影响，我建议您的小部件的用户将该脚本标记放在他们文档的最后，就在关闭 </body> 标记之前。

使用document.write，让您的widget.js 按此顺序输出您的脚本：

1. 您的 jQuery 副本。这将暂时接管 $ 和 jQuery 全局标识符。
2. 您需要的所有 jQuery 插件。这些将通过 jQuery 全局（如果它们编写正确）向 jQuery 注册。
3. 包含您的主要代码的脚本，以（在范围函数内）开头：

   (function() {
       const $ = jQuery.noConflict(true);
       // ...the main body of your code here...
   })();
   

   ...这会将$ 和jQuery 全局变量返回到它们在步骤#1 之前的状态，并在该范围函数中为您提供$ local 以在您的代码中使用。

打包代码

但是，您可能可以避免这种情况。捆绑器早在 ES2015 之前就已经存在，但即使你找不到，你也可以自己做：实际上只是按照上面给出的顺序连接你的各种脚本，在它们之间加上一个 ;，形成一个单一的 widget.js 文件并通过任何体面的缩小器运行它。由于上述原因，这将使页面上任何预加载的 jQuery 不受影响，同时只需要一个 HTTP 请求。它还允许您的用户使用async 或defer，因为您的脚本不必使用document.write.