What to do about jQuery library conflicts

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

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.

test---prototype
test---jQuery

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.

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".

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. .

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.

Test-prototype(将被隐藏)
Test-jQuery(将被绑定单击事件)

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

aaa

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.

aaa

If you write a parameter true, 456 will pop up.

aaa

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!