如何在许多页面上正确地动态包含 jQuery 和 jQueryUI

Question

我正在构建一个可以包含在许多不同网站上的小部件。这个小部件将需要使用 jQuery。我的客户将通过一个标签安装我的小部件，该标签将包含在他们的 </body> 标签之前（就像 Google Analytics 的工作原理一样）

对于如何处理每个人的网站环境不同的问题，我有点茫然。

目前我的解决方案是在我的 JS 代码中动态加载 jQuery 和 jQueryUI，它们将包含在 </body> 标记之前。但是，如果他们已经在他们的网站上加载了 jQuery，这会导致问题。

我搜索了一个解决方案来检测他们是否已经通过以下方式包含了 jQuery：

if (typeof jQuery == 'undefined') { 
  // include jQuery 
}
if (typeof jQuery.ui == 'undefined')
{
  // include jQueryUI
}

但是，当他们已经加载了 jQuery 时，这会导致问题......如果他们的网站上已经包含 jQuery，我的 JS 小部件无法访问已经从客户网站加载的 jQuery 库，因为我收到一条错误消息，提示它无法识别“$”。

我确定这个问题之前已经解决了，但我似乎找不到答案。

更新

为了澄清一点......我上面包含的代码是好的，它不会引起问题。以下是用例：

用例 1

1. 用户的网站上没有 jQuery
2. 我的 JS 脚本动态加载 jQuery 并等待脚本 完成加载
3. 一切都好

用例 2

1. 用户在他们的网站上确实有 jQuery，但没有 jQueryUI
2. 我的 JS 脚本只动态加载 jQueryUI 并等待 完成加载的脚本
3. 我的 JS 文件尝试调用 $.ajax 并失败 :(

用例 3

1. 用户在他们的网站上确实有 jQuery，并且确实有 jQueryUI
2. 我的 JS 脚本不需要加载任何东西，所以它不会
3. 我的 JS 文件尝试调用 $.ajax 并失败 :(

所以问题是……

为什么我的 JS 文件在加载 jQuery 本身时只能访问 $.ajax（和其他 jQuery 函数）？

Answer 1

尝试改用这个：

if(typeof(jQuery) === undefined){
    //load jquery
}
else{
    //jquery already there

    if(typeof(jQuery.ui) === undefined){
        //load jquery ui
    }
}

更新

Answer 2

好的，事实证明代码和我所拥有的一切都运行良好......只是我安装小部件的一些网站必须使用 $“命名空间”来处理 jQuery 以外的其他东西。

所以我必须检查我的客户端 JS 文件并将所有出现的“$”替换为“jQuery”。

示例

已更改：$.ajax({});
至：jQuery.ajax({});

已更改：$("#textbox").change(function () {});
至：jQuery("#textbox").change(function () {});