Home > Article > Web Front-end > What to do about jQuery library conflicts
What to do about jQuery library conflicts
- 小云云Original
- 2018-01-11 14:08:401391browse
When developing with jQuery, you may also use other JS libraries, such as Prototype, but conflicts may occur when multiple libraries coexist. This article mainly introduces you to the perfect solution to jQuery library conflicts. What you need Friends can refer to it, let’s take a look below.
My idea is that if I are asked to design, then I will use a default value of $, and if no parameters are passed, then use $, and finally mount it on window.$, and pass in the parameters. Name, such as jq, then I will mount it on window.jq.
var myControl="jq";
(function(name){
var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
console.log($);
window[$]=function(){
alert("123");
}
})(myControl)
window[myControl]();
In fact, this is definitely not jquery’s way to resolve conflicts. Then take a look at how jQuery resolves conflicts.
Multiple versions of jQuery or conflicts with other js libraries are mainly conflicts with the commonly used $ symbol.
1. Conflict resolution
1. Conflict resolution of multiple versions of jQuery on the same page
<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>
<script>
(function($){
//此时的$是jQuery-1.6.4
$('#');
})(jq164);
</script>
<script>
jq142(function($){
//此时的$是jQuery-1.4.2
$('#');
});
</script>
</body>
2. Import the jQuery library after other libraries
jQuery noConflict() method releases control of the $ identifier so that other scripts can use it.
1. You can use jQuery by replacing its abbreviation with its full name.
After other libraries and the jQuery library are loaded, you can call the jQuery.noConflict() function at any time to Control of the variable $ is transferred to other JavaScript libraries. Then you can use the jQuery() function as a manufacturing factory for jQuery objects in your program.
<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。
$("pp").style.display = 'none'; //使用prototype
</script>
2. Customize a shortcut
noConflict() can return a reference to jQuery, which can be stored in a custom name, such as jq, $J variables, for later use use.
This ensures that jQuery will not conflict with other libraries, while using a customized shortcut.
<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>
3. If there is no conflict, still use $
If you want to use the $ abbreviation in the jQuery code block and are unwilling to change this shortcut, you can pass the $ symbol as a variable to ready method. In this way, you can use the $ symbol inside the function, but outside the function, you still have to use "jQuery".
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
//或者如下
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
</script>
Or use IEF statement blocks, which should be the most ideal way, because full compatibility can be achieved by changing the least code.
When we write our own jquery plug-ins, we should all use this way of writing, because we don’t know how to sequentially introduce various js libraries during the specific work process, but this way of writing statement blocks can shield conflicts. .
<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>
3. The jQuery library is imported before other libraries.
The jQuery library is imported before other libraries. The ownership of $ belongs to the following JavaScript library by default. Then you can use "jQuery" directly to do some jQuery work.
At the same time, you can use the $() method as a shortcut to other libraries. There is no need to call the jQuery.noConflict() function here.
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<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>
2. Principle
1. Source code
Source code: Take a look at how to do it in the source code
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
}
});
In jQuery When loading, the current window.jQuery is obtained through the _jQuery variable declared in advance, and the current window.$ is obtained through _$.
Mount noConflict to jQuery through jQuery.extend(). So we always adjust jQuery.noConflict() like this when calling.
Made two judgments when calling noConflict(),
The first if, hands over the control of $.
The second if, hands over control of jQuery when noConflict() passes parameters.
Finally noConflict() returns the jQuery object, which parameter is used to receive it, and which parameter will have jQuery control.
2. Verification
//冲突
var $ = 123; //假设其他库中$为123
$(
function () {
console.log($); //报错Uncaught TypeError: $ is not a function
}
);
Resolve conflicts
//解决冲突
var jq = $.noConflict();
var $ = 123;
jq(function () {
alert($); //123
});
Release $control example
<script>
var $ = 123; // window.$是123，存储在私有的_$上。
</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<p>aaa</p>
<script>
var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
jq(function () {
alert($); //123
});
</script>
Release jQuery control example
The role of parameter deep: deep is used to abandon jQuery’s external interface.
As shown below, noConflict() does not write parameters and pops up jQuery as the constructor.
<script>
var $ = 123;
var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
var jq = $.noConflict();
jq(function () {
alert(jQuery); //构造函数
});
</script>
If you write a parameter true, 456 will pop up.
<script>
var $ = 123;
var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
var jq = $.noConflict(true); //写了true或者参数的时候，deep为真window.jQuery===jQuery为真，所以进入if条件。把456赋值给window.jQuery
jq(function () {
alert(jQuery); //456
});
</script>
Related recommendations:
Use jquery.noConflict() to solve the problem of conflicts between jquery library and other libraries
How to write a js /jQuery library (summary of experience)
Solution to the conflict between jQuery library and other JS libraries_jquery
The above is the detailed content of What to do about jQuery library conflicts. For more information, please follow other related articles on the PHP Chinese website!