jquery - 如何在多个页面上正确动态地包含 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
    }
}

已更新