DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JQuery的$命名沖突詳細解析
JQuery的$命名沖突詳細解析
編輯:JavaScript綜合知識     

 在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同於JQuery('#msg')的寫法。然而,當我們引入多個js庫後,在另外一個js庫中也定義了$符號的話,那麼我們在使用$符號時就發生了沖突

在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同於JQuery('#msg')的寫法。然而,當我們引入多個js庫後,在另外一個js庫中也定義了$符號的話,那麼我們在使用$符號時就發生了沖突。下面以引入兩個庫文件jquery.js和prototype.js為例來進行說明。    第一種情況:jquery.js在prototype.js之後進行引入,如: <script src="prototype.js" type="text/javascript"/>  <script src="jquery.js" type="text/javascript"/>    在這種情況下,我們在自己的js代碼中如下寫的話:   $('#msg').hide();    $永遠代表的是jquery中定義的$符號,也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在後面再介紹。     第二種情況:jquery.js在prototype.js之前進行引入,如:  <script src="jquery.js" type="text/javascript"/>  <script src="prototype.js" type="text/javascript"/>    在這種情況下,我們在自己的js代碼中如下寫的話:   $('#msg').hide();    $此時代表的prototype.js中定義的$符號,如果我們想要調用jquery.js中的工廠選擇函數功能的話,只能用全稱寫法JQuery('#msg').hide().   下面先介紹在第一種引入js庫文件順序的情況下,如何正確的使用不同的js庫中定義的$符號。   一.使用JQuery.noConflict()  該方法的作用就是讓Jquery放棄對$的所有權,將$的控制權交還給prototype.js,因為jquery.js是後引入的,所以最後擁有$控制權的是jquery。它的返回值是JQuery。當在代碼中調用了該 方法以後,我們就不可以使用$來調用jquery的方法了,此時$就代表在prototype.js庫中定義的$了。如下:   JQuery.noConflict();   //此處不可以再寫成$('#msg').hide(),此時的$代表prototype.js中定義的$符號。  JQuey('#msg').hide();    自此以後$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。     二.自定義JQuery的別名  如果覺得第一種方法中使用了JQuery.noConflict()方法以後,只能使用JQuery全稱比較麻煩的話,我們還可以為JQuery重定義別名。如下:   var $j=JQuery.noConflict();  $j('#msg').hide();//此處$j就代表JQuery  自此以後$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。     三.使用語句塊,在語句塊中仍然使用jquery.js中定義的$,如下: JQuery.noConflict();  JQuery(document).ready(function($){  $('#msg').hide();//此時在整個ready事件的方法中使用的$都是jquery.js中定義的$.  });    或者使用如下語句塊:   (function($){  .....  $('#msg').hide();//此時在這個語句塊中使用的都是jquery.js中定義的$.  })(JQuery)    如果在第二種引入js庫文件順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法,如:   代碼如下: <script src="jquery.js" type="text/javascript"/>  <script src="prototype.js" type="text/javascript"/>  <script type="text/javascript">    (function($){  .....  $('#msg').hide();//此時在這個語句塊中使用的都是jquery.js中定義的$.  })(JQuery)  </script>     這種使用語句塊的方法非常有用,在我們自己寫jquery插件時,應該都使用這種寫法,因為我們不知道具體工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽沖突。   (function($){})(jQuery)   1 首先(function(){})()這種寫法 是創建了一個匿名的方法並立即執行(function(){})這個是匿名方法後面的括號就是立即調用了這個方法)。 這樣做可以創建一個作用域以保證內部變量與外部變量不發生沖突,比如$ jQuery 等jquery內部定義的變量。   2 (function($){})(jQuery) 這個寫法主要的作用還是保證jquery不與其他類庫或變量有沖突 首先是要保證jQuery這個變量名與外部沒有沖突(jquery內部$與jQuery是同一個東西 有兩個名字的原因就是怕$與其他變量名有沖突二jQuery與其他變量沖突的幾率非常小)並傳入匿名對象,匿名對象給參數起名叫做$(其實和jquery內部是一樣的) 然後你就可以自由的在(function($){})(jQuery)裡寫你的插件而不需要考慮與外界變量是否存在沖突    
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved