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

2019-11-20 21:04:22

字體：大中小

來源：轉載

供稿：網友

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，既能避免$沖突對該組件的影響，又無需要求使用公共組件的人修改自己的代碼。

上一篇：JS的get和set使用示例

下一篇：JS 刪除字符串最后一個字符的實現代碼