首頁 >web前端 >js教程 >jQuery避免$符和其他JS函式庫衝突的方法比較_jquery

jQuery避免$符和其他JS函式庫衝突的方法比較_jquery

WBOY
WBOY原創
2016-05-16 16:59:09968瀏覽

jQuery中需要用到$符號,如果其他js函式庫(例如大名鼎鼎的prototype)也定義了$符號,那麼就會造成衝突,會影響到js程式碼的正常執行。 jqeury提供了一些方案來避免這個問題,讓我們來看看這幾個方案有什麼區別

方案1:
引入noConflict(),將$替換為其他符號

複製程式碼 程式碼如下:

var $j = jQuery.noConflict();
$j(document ).ready(function(){
$j("#btn1").click(function(){
alert("Text: " $j("#test").text());
});
});

缺點:引入了這段程式碼後,不僅是當前的js文件,該html引用的所有js中,如果有用到jquery中的$,都得用$j來代替之前的$

方案2:
ready函數是jquery的入口函數,可以
將$(document).ready(function(){
替換成
jQuery( document ).ready(function( $){}
缺點:只對ready嵌套內的程式碼有效,對巢狀外的程式碼是無效的。如果你所有的邏輯,都在寫ready函數中,那沒問題。 。


程式碼如下:

jQuery(function($){ //你的js程式碼放在這裡(例如第二個方案提到的ready函數與子函數) //如果是js文件,其實就是在文件頭部和尾部各加一行程式碼}



複製程式碼

程式碼如下:

(function($) { //你的js程式碼})(jQuery ); 這個方法,沒有上面兩個方案的缺點,只會影響到被包在jQuery(function($){}中的程式碼。不會影響到其他js程式碼,這一點很重要。如果使用方案1,那麼別人在使用時,還得遵守你的約定,把自己js代碼中的$改成$,而如果使用方案3,既能避免$衝突對該組件的影響,又無需要求使用公共組件的人修改自己的程式碼。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn