jQuery：noConflict

Question

我無法解決這個問題。 我的上帝讓我的大腦受傷了，所以我轉向你，互聯網上的好人。

我一直在盯着jQuery $.noConflict()函數的文檔而沒有運氣。

我的問題是我正在開發的網站已經包含了jQuery 1.1.3.1，但我想在一些地方做一些非常棒的時髦用戶界面工作，所以我想使用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，但第三方問卷彈出窗口在同一頁面上使用舊版本。 我最終設法解決了這個問題。 我引用了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。 我不知道是否可以加載第二個jQuery實例，如果已經加載了一個實例並且該實例沒有調用noConflict。

@SLaks和@galambalazs：有時您正在編寫少量內容，這些內容將顯示在更大的頁面中，例如門戶網站。 門戶網站已經使用了（n過時的）jQuery版本，但是你需要一個更新的版本。 此外，您無法控制較大的門戶網站頁面，只是您正在編寫的內容將在其中顯示。

這個場景准確地描述了我常做的實際工作。

Answer 5

我同意其他帖子建議嘗試全面升級到1.4.2 ......那就是說，你顯然有充分的理由試圖嘗試做什么。 據我所知，沒有簡單的方法來處理你的情況（因為我也嘗試過類似的東西）。

“noConflict”只是釋放全局“$”變量，以便其他庫/腳本可以安全地使用它。 鑒於您正在嘗試使用兩個版本的jQuery“noConflict”在這里並不真正有用...為兩個版本的jQuery調用它並不會改變這兩個版本仍然需要引用全局“jQuery”對象的事實（其中只能有一個......）。

問題（正如您已經清楚地知道的）是加載第二個jQuery版本將“破壞”原始jQuery對象（以及插件對其進行的所有“自定義”）。

我能想到的唯一可靠（盡管效率極低）的解決方案是：

• 加載現有的（舊的）jQuery版本和插件（假設你無法避免這種情況）
• 加載新的jQuery版本
• 重新加載和現有插件以及您要使用的任何新插件
• 廣泛測試

Answer 6

遲到了....但可能會幫助某人 - 把它扔到一起。

/**
*********************************************************************************************************
*           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 7

一個可靠的建議：不要用兩個jQuery版本來強調你和訪問者的帶寬 。 將整個代碼庫更改為最新版本。 它有更少的錯誤 ，更多的支持和改進的行為。

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.
});