JQuery的$命名衝突詳細解析_jquery

在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同於JQuery('#msg')的寫法。然而，當我們引入多個js庫後，在另一個js庫中也定義了$符號的話，那麼我們在使用$符號時就發生了衝突。以下以引入兩個函式庫檔案jquery.js和prototype.js為例來進行說明。

第一種情況：jquery.js在prototype.js之後進行引入,如：

在這種情況下,我們在自己的js程式碼中如下寫的話：

$('#msg').hide();

$永遠代表的是jquery中定義的$符號，也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在後面再介紹。

第二種情況：jquery.js在prototype.js之前進行引入,如：

在這種情況下,我們在自己的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中的$,我們還是可以使用上面介紹的語句區塊的方法，如：

複製程式碼 程式碼如下:

This method of using statement blocks is very useful. When we write our own jquery plug-in, we should use this method of writing, because we don’t know how to sequentially introduce various js libraries during the specific work process, and this kind of statement The block writing method can shield conflicts.

(function($){})(jQuery)

1 First of all, (function(){})() is written to create an anonymous method and execute it immediately (function(){}). This is the parentheses after the anonymous method, which calls this method immediately. ).
Doing this can create a scope to ensure that internal variables do not conflict with external variables, such as $jQuery and other variables defined within jquery.

2 (function($){})(jQuery) The main function of this writing method is to ensure that jquery does not conflict with other class libraries or variables. First, it is necessary to ensure that the variable name of jQuery does not conflict with the outside world (jquery internal $ and jQuery are the same thing. The reason why they have two names is that they are afraid that $ will conflict with other variable names (the probability of jQuery conflicting with other variables is very small) and pass in an anonymous object. The anonymous object names the parameter $ (actually the same as jquery The internals are the same) Then you can freely write your plug-in in (function($){})(jQuery) without having to consider whether there is a conflict with external variables