JQuery的學習:解決jQuery與其他庫衝突的方法

通常,當在同一個頁面上使用jQuery和其他庫時,全局名稱$的定義是最大的爭論和衝突的焦點。衆所周知,jQuery使用$作爲jQuery名稱的別名,並將其用於jQuery公開的每一個功能,但是其他庫,最著名的就是Prototype,也使用$名稱。


1. jQuery提供了$.noConflict()實用函數用來放棄對$標識符的佔用,以便其他庫使用它。

   該函數的語法如下:

  $.noConflict(jqueryToo)

   說明:將標識符$的控制權歸還給其他庫,允許在頁面上混合使用jQuery與其他庫。一旦執行了該函數,必須使用jQuery標識符而不是$標識符來調用jQuery的功能,

     你也可以放棄jQuery標識符(可選)

   應該在包含了jQuery之後,但尚未包含衝突庫之前調用這個方法。

 


    儘管使用的是jQuery標識符,但因爲$是jQuery的別名,所以在應用$.noConflict()之後所有jQuery的功能依然可用。我們可以定義更短的,但沒有衝突的jQuery別名,例如:

 var  $j = jQuery ;

 

 

 

   2. 另一個常見的習慣用法是創建一個作用域環境,在該環境中$標識符指向jQuery對象,在擴展jQuery的時候這是個常用技巧,特別是對於插件作者來說,他們不可能對於頁面開發者是否已經調用$.noConflict()作出任何假設,當然也不能自行調用此函數以免破壞頁面開發者的意願,

這個習慣用法如下:

(function($) { }) (jQuery);

(function($) { })

這部分聲明瞭一個函數並用圓括號括起來,由此生成一個表達式,這個表達式的結果是對一個匿名函數的引用,這個函數期望傳入單個參數並將其命名爲$,在函數主體中,可以通過$標識符來引用任何傳遞給這個函數的東西。因爲參數聲明優先於全局作用域中任何類似的命名標識符,所以任何在函數外定義的$值在函數內都會被傳入的參數所代替。

 

 

(jQuery)

 


 在匿名函數上執行函數調用,將jQuery對象作爲參數傳遞

 


在函數外部不管$標識符是否已經在Prototype或其他庫中定義,在函數體內它總是指向jQuery對象。

當使用這個技巧時,外部聲明的$在函數體內是不可用的。


3. 第二種的用法的一個變體也經常用於聲明就緒處理函數,從而形成了第三種語法,

  jQuery( function($){

  })

當編寫可重用的組件並且這些組件可能會用於已經使用了$.noConflict()的頁面時,最好對$的定義採取這種預防措施。



    在使用jQuery開發的時候,可能還會使用到其他的JS庫,比如Prototype,但多庫共存時可能會發生衝突;若是發生衝突後,可以通過以下幾種方案進行解決:

 一、 jQuery庫在其他庫之前導入,直接使用jQuery(callback)方法如:

HTML代碼:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先導入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--後導入其他庫 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
	<p id="pp">test---prototype</p>
	<p>test---jQuery</p>

	<script type="text/javascript">
		jQuery(function() { //直接使用 jQuery ,沒有必要調用"jQuery.noConflict()"函數。  
			jQuery("p").click(function() {
				alert(jQuery(this).text());
			});
		});

		$("pp").style.display = 'none'; //使用prototype
	</script>
</body>
</html>

二、 jQuery庫在其他庫之後導入,使用jQuery.noConflict()方法將變量$的控制權讓渡給其他庫,有以下幾種方式:

JS代碼:

<script type="text/javascript">
	jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js  
	jQuery(function() { //使用jQuery  
		jQuery("p").click(function() {
			alert(jQuery(this).text());
		});
	});

	$("pp").style.display = 'none'; //使用prototype
</script>

//代碼二
<script type="text/javascript">
	var $j = jQuery.noConflict(); //自定義一個比較短快捷方式  
	$j(function() { //使用jQuery  
		$j("p").click(function() {
			alert($j(this).text());
		});
	});

	$("pp").style.display = 'none'; //使用prototype
</script>

//代碼三
<script type="text/javascript">
	jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js  
	jQuery(function($) { //使用jQuery  
		$("p").click(function() { //繼續使用 $ 方法  
			alert($(this).text());
		});
	});

	$("pp").style.display = 'none'; //使用prototype
</script>

//代碼四
<script type="text/javascript">
	jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js  
	(function($) { //定義匿名函數並設置形參爲$  
		$(function() { //匿名函數內部的$均爲jQuery  
			$("p").click(function() { //繼續使用 $ 方法  
				alert($(this).text());
			});
		});
	})(jQuery); //執行匿名函數且傳遞實參jQuery  

	$("pp").style.display = 'none'; //使用prototype
</script>

通過以上幾方法就可以很好的去解決多庫共存會發生衝突的問題了.









發佈了45 篇原創文章 · 獲贊 1 · 訪問量 16萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章