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

好的，因为事实证明代码和我所拥有的一切工作正常......只是我安装我的小部件的一些网站必须使用$“namespace”用于jQuery之外的其他东西。

所以我必须通过我的客户端JS文件并用'jQuery'替换所有出现的'$'。

<强>实施例

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

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