1. 程式人生 > >解決jQuery和其他庫的衝突方法

解決jQuery和其他庫的衝突方法

在jQuery庫中,幾乎所有的外掛都被限制在它的名稱空間裡。通常,全域性物件都被很好地儲存在jQuery的名稱空間裡,所以當把jQuery庫和其他js庫(Prototype,MooTools或YUI)一起使用時,不會引起衝突。

注意:預設情況下jQuery用“$”作為自身的快捷方式。

當我們使用的其他JavaScript庫也是以"$"作為快捷方式時,這個時候如何解決jQuery和其他庫的衝突呢?

1、jQuery庫在其他庫之後匯入

(1)使用"jQuery"全名代替"$"

在其他庫和jQuery庫都被載入完畢後,可以在任何時候呼叫jQuery.noConflict()函式將變數$的控制權移交給其他JavaScript庫。

示例:

//...省略其他程式碼
<p id="pp">Text-prototype(將被隱藏)</p>
<p>Text-jQuery(將被繫結單擊事件)</p>
<!-- 引入prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script>
    jQuery.noConflict();                 //將變數$的控制權讓渡給prototype.js
    jQuery(function(){                   //使用jQuery
        jQuery("p").click(function(){
            alert( jQuery(this).text() );
        })
})
$("pp").style.display = 'none';          //使用prototype隱藏元素
</script>
然後就可以在程式裡將jQuery()函式作為jQuery物件的製造工廠。
(2)自定義快捷方式

可以自定義備用名稱,例如jq,$j等等。示例:

var $j = jQuery.noConflict();        //自定義一個快捷方式
$j(function(){                       //使用jQuery,利用自定義快捷方式——$j
    $j("p").click(function(){
        alert( $j(this).text() );
    })
})
$("pp").style.display = 'none';      //使用prototype.js隱藏元素
(3)使用$而不與其他庫衝突

如果不想給jQuery自定義這些備用名稱,還想使用$而不管其他庫的$()方法,同時又不想與其他庫衝突,可以使用以下兩種解決方法。

其一:

jQuery.noConflict();                 //將變數$的控制權讓渡給prototype.js
jQuery(function($){                  //使用jQuery設定頁面載入時執行的函式
    $("p").click(function(){         //在函式內部繼續使用 $()方法
        alert( $(this).text() );
    })
})
$("pp").style.display = 'none';      //使用prototype

    其二:

jQuery.noConflict();                      //將變數$的控制權讓渡給prototype.js
(function($){                             //定義匿名函式並設定形參為$
    $(function(){                         //匿名函式內部的$均為jQuery
        $("p").click(function(){          //繼續使用 $ 方法
            alert( $(this).text() );
        });
    });
})(jQuery);                               //執行匿名函式且傳遞實參jQuery
$("pp").style.display = 'none';           //使用prototype

這是一種最理想的方式,可以通過改變最少的程式碼來實現全面的相容性。

2、jQuery庫在其他庫之前匯入

如果jQuery庫在其他庫之前匯入,那麼$()的控制權預設歸屬於後面匯入的JavaScript庫。可以直接使用“jQuery”來做一些工作。同時,可以使用$()方法作為其他庫的快捷方式。這裡無需呼叫jQuery.noConflict()函式。示例:

<!-- 先匯入jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 後匯入prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>

<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>

<script>
jQuery(function(){                     //直接使用 jQuery ,無需呼叫"jQuery.noConflict()"函式
    jQuery("p").click(function(){      
        alert( jQuery(this).text() );
    });
});
$("pp").style.display = 'none';        //使用prototype
</script>