Home > Article > Web Front-end > Detailed analysis of JQuery's $naming conflict_jquery
Detailed analysis of JQuery's $naming conflict_jquery
- WBOYOriginal
- 2016-05-16 17:06:351183browse
In Jquery, $ is an alias of JQuery. All places where $ is used can also be replaced by JQuery. For example, $('#msg') is equivalent to JQuery('#msg'). However, when we introduce multiple js libraries and the $ symbol is also defined in another js library, then there will be a conflict when we use the $ symbol. The following is an example of introducing two library files jquery.js and prototype.js.
The first case: jquery.js is introduced after prototype.js, such as:
In this case, we write the following in our own js code:
$('#msg').hide();
$ always represents the $ symbol defined in jquery, which can also be written as JQuery('#msg').hide(); if you want to use the $ defined in prototype.js, we will introduce it later.
Second case: jquery.js is introduced before prototype.js, such as:
In this case, we write the following in our js code:
$('#msg').hide();
$ represents the $ symbol defined in prototype.js at this time. If we want to call the factory selection function in jquery.js, we can only use the full name JQuery('#msg').hide().
The following will first introduce how to correctly use the $ symbol defined in different js libraries in the first case of introducing js library file order.
1. Use JQuery.noConflict()
The function of this method is to let Jquery give up the ownership of $ and return the control of $ to prototype.js, because jquery.js is the backend Introduced, so the last one that has $ control is jquery. Its return value is JQuery. After calling this method in the code, we cannot use $ to call the jquery method. At this time, $ represents the $ defined in the prototype.js library. As follows:
JQuery.noConflict();
//You can no longer write $('#msg').hide() here. The $ at this time represents the $ symbol defined in prototype.js.
JQuey('#msg').hide();
From now on, $ represents the $ defined in prototype.js. The $ in jquery.js can no longer be used. You can only use the full name of $ in jquery.js, JQuery.
2. Customize the alias of JQuery
If you find it troublesome to only use the full name of JQuery after using the JQuery.noConflict() method in the first method, we also Aliases can be redefined for JQuery. As follows:
var $j=JQuery.noConflict();
$j('#msg').hide();//Here $j represents JQuery
From now on $ represents prototype.js $ defined in, $ in jquey.js can no longer be used, only $j can be used as an alias for JQuery in jquey.js.
3. Use statement blocks, still use the $ defined in jquery.js in the statement block, as follows:
JQuery.noConflict();
JQuery(document) .ready(function($){
$('#msg').hide();//At this time, the $ used in the entire ready event method is the $ defined in jquery.js.
});
Or use the following statement block:
(function($){
.....
$('#msg').hide();//What is used in this statement block at this time are all defined in jquery.js $.
})(JQuery)
If in the second case of introducing js library file order, how to use $ in jquery.js, we can still use the statement block method introduced above, such as:
このステートメント ブロックを使用する方法は、jquery プラグインを自分で作成する場合、特定の作業プロセス中にさまざまな js ライブラリを順番に導入する方法がわからないため、この方法を使用する必要があります。この種のステートメントは、ブロック書き込み方式により競合を防ぐことができます。
(function($){})(jQuery)
1 まず、(function(){})() は、匿名メソッドを作成し、すぐに実行するように記述されています (function(){}) を呼び出す匿名メソッドの後の括弧です。この方法をすぐに実行してください。）
これを行うと、内部変数が $jQuery や jquery 内で定義された他の変数などの外部変数と競合しないようにするスコープを作成できます。
2 (function($){})(jQuery) この書き方の主な機能は、jquery が他のクラス ライブラリや変数と競合しないようにすることです。まず、変数が次のとおりであることを確認する必要があります。 jQuery の名前は外部と競合しません (jQuery 内部の $ と jQuery は同じものです。名前が 2 つある理由は、$ が他の変数名と競合することを恐れているためです (jQuery が他の変数と競合する可能性)は非常に小さい) を指定し、匿名オブジェクトを渡します。匿名オブジェクトはパラメータ $ に名前を付けます (実際には jquery と同じです。内部構造は同じです)。その後、(function($){})(jQuery) でプラグインを自由に書くことができます。 ) 外部変数との競合があるかどうかを考慮する必要はありません
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills