1. 程式人生 > >jQuery避免$符和其他JS衝突的方法對比

jQuery避免$符和其他JS衝突的方法對比

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函式中,那沒問題。但我們一般都會在ready函式之外寫一些子函式,然後ready函式再去呼叫這些函式。這個方案對這些函式是無效的,因此這套方案有侷限性。


方案3(推薦,特別是開發js外掛時):

給js內容包上一個函式

jQuery(function($){
//你的js程式碼放在這裡(例如第二個方案提到的ready函式和子函式)
//如果是js檔案,其實就是在檔案頭部和尾部各加一行程式碼
}
或者
(function($) {
//你的js程式碼
})(jQuery);
這個方法,沒有上面兩個方案的缺點,只會影響到被包在jQuery(function($){}中的程式碼。
不會影響到其他js程式碼,這一點很重要。試想一下,假如你寫了一個js公共元件,該元件需要用到jquery,為了提高魯棒性,需考慮$符號衝突問題。如果使用方案1,那麼別人在使用時,還得遵守你的約定,把自己js程式碼中的$改成$,而如果使用方案3,既能避免$衝突對該元件的影響,又無需要求使用公共元件的人修改自己的程式碼。


如需轉載,請註明部落格來源地址(http://blog.csdn.net/lizeyang)