jQuery：无冲突

Question

我就是无法解决这个问题。天哪，这让我的大脑受伤了，所以我求助于你，互联网上的好人。

我一直盯着the documentation for the jQuery $.noConflict() function 运气不好。

我的问题是我正在开发的网站已经包含 jQuery 1.1.3.1，但我想在一些地方做一些很棒的和时髦的 UI 工作，所以出于显而易见的原因我想使用 1.4.2。

我一直在尝试并排运行这些，但似乎无法执行任何代码。我还需要使用 1.4.2 实现一些插件，所以我不确定将 jQuery 放到 $j 之类的东西上是否可行，因为显然插件会选择 $ 和 jQuery 作为 1.1.3.1 而不是比1.4.2.

有没有一种方法可以将我的代码包装在一个 noConflict() 块中，并包含我需要创建一个自包含的 1.4.2 代码块的插件？

任何帮助都会很棒，因为我可怜的头脑在 API 文档的广阔荒地中哭泣！

Answer 1

如果你在同一页面中有两个或三个 jQuery，只需为每个不同的 jQuery 放置一个不同的变量即可。

例子：

<script type="text/javascript">
    var $s = jQuery.noConflict();
    $s(document).ready(function() {
        $s('#news-container').vTicker({
            speed: 500,
            pause: 3000,
            animation: 'fade',
            mousePause: true,
            showItems: 2
        });
    });
</script>
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j('.sf-menu ul').superfish({
            delay: 1000,
            animation: {
                opacity: 'show',
                height: 'show'
            },
            speed: 'medium',
            autoArrows: false,
            dropShadows: 'medium'
        });
    });
</script>

Answer 2

您只需将整个网站升级到 1.4.2。
jQuery 通常不会有很多重大变化，所以应该不会那么难。

Answer 3

我最近遇到了一个类似的问题，我在一个页面上使用 jQuery v1.3.2，但第 3 方问卷弹出窗口在同一页面上使用的是旧版本。我最终设法解决了这个问题。我引用 jQuery 1.3.2 如下：

 <script type="text/javascript" src"/Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript"> 
        jq132 = jQuery.noConflict(true); 
 </script> 

然后我修改了所有 jQuery 代码以使用 jq132 而不是 $。然后，我对所有用于将“$(”替换为“jq132(”和“$.”替换为“jq132.”的插件进行了查找和替换。可能有更优雅的方法，但这对我有用。我远非 jQuery 专家，因此您可能需要处理其他 $ 语法（即不仅仅是“。”和“（”）。）。

Answer 4

您应该发布一个不起作用的示例。我敢打赌我们会立即清除它。

我不认为 noConflict 完全是一个“障碍”。您使用 noConflict 告诉 jQuery 您希望它从全局 JavaScript 命名空间中删除它声明的任何内容（因为您想再次加载 jQuery 并重用这些名称）。

在加载了 1 个以上 jQuery 实例的页面上，两个 实例都应该使用 noConflict。如果已经加载了一个实例并且该实例没有调用 noConflict，我不知道是否可以加载第二个 jQuery 实例。

@SLaks 和@galambalazs：有时您会编写少量内容，这些内容将显示在较大的页面中，例如门户网站。门户网站已经使用了一个（n 过时的）版本的 jQuery，但您需要一个更新的版本。此外，您无法控制更大的门户页面，而只是您正在编写的内容将显示在其中。

这个场景准确地描述了我经常做的实际工作。

Answer 5

我同意其他建议尝试全面升级到 1.4.2 的帖子...也就是说，您显然有充分的理由尝试您正在尝试做的事情。据我所知，处理您的情况并不容易（因为我也尝试过类似的方法）。

"noConflict" 只是释放全局变量 "$" 以便其他库/脚本可以安全地使用它。鉴于您尝试使用两个版本的 jQuery“noConflict”在这里并没有真正的帮助......为两个版本的 jQuery 调用它并不会改变两个版本仍然需要引用全局“jQuery”对象的事实（其中只能有一个……）。

问题（您显然已经知道）是加载第二个 jQuery 版本将“破坏”原始 jQuery 对象（以及插件对其进行的所有“自定义”）。

我能想到的唯一可靠（尽管效率极低）的解决方案是：

• 加载现有（旧）jQuery 版本和插件（假设你不能 避免这种情况）
• 加载新的 jQuery 版本
• 重新加载现有插件以及您要使用的任何新插件
• 广泛测试

Answer 6

一个可靠的建议：不要用两个 jQuery 版本给您和您的访问者带宽带来压力。将您的整个代码库更改为最新版本。它有更少的错误，更多的支持和改进的行为。

Answer 7

晚了....但可能会帮助某人 - 把它放在一起。

/**
*********************************************************************************************************
*           jQuery version check
*           $.noConflict() is not enough to ensure jQuery as well as $ 
*           has correct version (can cause troubles with jQuery plugins that use fn(){}(jQuery);
*
*           useage: restoreJquery('1.10.2',true) //for unminimized dev version
*                   restoreJquery('1.10.2')          //for minimized version
*                   restoreJquery('1.10.2',true,myFunction)          //for minimized version, that executes a function once jQuery is in the page
*
*
**/

function restoreJquery(wantedVersion,devVersion,callback) {
    if(!wantedVersion){
        wantedVersion= '1.10.2';
    }

    //is current jQuery version ===wanted version? (double check to avoid undefined errors)
    if($ && $.fn.jquery!==wantedVersion){                

        //if not invoke noConflict with true (true=gives up the jQuery name space aswell as $)
        var $jQuery = jQuery.noConflict(true); 
        //Line Assign the new object to new instantiated versions of jQuery
        var $=jQuery=$jQuery;                          
      }

    //if jQuery is still not the correct version inject it into page via plain vanilla js

    //if $ does not exist or the version is wrong inject it into the page
    if(!$ || $.fn.jquery!==wantedVersion){ 

        var head=document.getElementsByTagName('head')[0], //get Head
            jqPath=wantedVersion+'jquery.', // ex '1.10.2/jquery.
                    script=document.createElement('script'); //create empty scripttag

            if(devVersion){  //minimized or not?
                jqPath+='min.js';
            }else{
                jqPath+='js';
            }

        script.src='//http://ajax.googleapis.com/ajax/libs/jquery/'+jqPath; //create src path
        script.type='text/javascript'; //add type
        script.async=true; //set async to true
        //real browsers
        script.onload=callback;  //call callback on load

        //Internet explorer doesnt support onload on script (typical ie)
        script.onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        }


    head.appendChild(script);

    }else{
        //otherwise call the callback since noConflict solved our jQuery versioning issues
        callback();
    }

};

Answer 8

jQuery no-conflict 是 jQuery 团队为克服不同 JS 框架或库之间的冲突而提供的一个选项。当我们使用 noconflict 方法时，我们将 $ 替换为一个新变量并分配给 jQuery。

    <button>Test jQuery noConflict</button>
    <script>
        var newjq = $.noConflict();
        newjq(document).ready(function(){
           newjq("button").click(function(){
               newjq("p").text("Wahh..! Its working!");
            });
        });
    </script>

我们也可以像下面这样使用 $ 符号，它也不会产生任何冲突

$.noConflict();
jQuery(document).ready(function($) {
   // Code that uses jQuery's $ can follow here.
});