Perfect solution for JQuery library conflicts

Preface

How to solve the JQuery and other library conflicts in an interview? Although I have seen it before, I didn’t remember it.

My idea is if I let me design, then I use a default value $, no parameters, then use $, and finally mount in

WINDOW. $ , The number of parameters uses the incoming name, such as incoming JQ, then I am mount in Window.jq .

VAR myControl = “jq”; (function (name) {var $ = name || “$”; // Name There is a value of Name, Does not exist or NULL, $ value is a string “$” console.log ($); window [$] = function () {Alert (“123”);}} (myControl) WINDOW [MyControl] ()
   In fact, this is certainly not jQuery to resolve conflicts. Then look at how jQuery solves conflicts. 
jQuery multiple versions or other JS library conflicts are mainly commonly used.

1, the same page jQuery multiple version conflict solution

VAR JQ164 = jQuery.noconflict (TRUE);

 VAR JQ142 = jQuery.noconflict (true);   (Function ($) {// at this time jQUERY-1.6.4 $ ('#');}) (jq164);   JQ142 (Function ($) {// This time $ is jQuery-1.4.2 $ ('#'); });     2, the jQuery library is imported after other libraries      jQuery noconflict ()  method releases the control of the identifier so that other scripts can be used.   1, can use jQuery   in other libraries and jQuery libraries, can be called at any time after completion of the entire library and jQuery library, 
jQuery.noconflict () Function to hand over the control of the variable $ to another JavaSript library. Then you can use the
jQuery ()

function in the program as a manufacturing plant of the jQuery object.

Test — Prototype

TEST — jQuery

jQuery.noconflict (); // // Transfer the control of the variable $ to Prototype.js, the full name can be not called. jQuery (function () {// uses jQuery jquery (“p”). click (function () {Alert (jQuery (this) .Text ());});}); // Can’t write again to $ At this time, $ represents the $ symbol defined in prototype.js. $ (“pp”). style.display = ‘none’; // Using prototype

2. Customize a shortcut
  Noconflict ()  can return to jQuery, you can deposit it into a custom name, such as JQ, $ J variables for later use.   This ensures that jQuery will not conflict with other libraries and use custom shortcuts.  

VAR $ j = jQuery.noconflict (); // Customize a shortcomings $ j (Function () {// Using jQuery $ J ("p"). Click (function () {Alert ($ j (this) .Text ();});}); $ ("pp"). style.display = 'none'; // Using protoype

3, still use $
if it is not conflict, if you want to use $ 简 in the jQuery code block, you don’t want to change this shortcut. Ways, the $ symbol can be passed to the Ready method as a variable. This allows you to use the $ symbol within the function, and in the function, you still have to use “jQuery”.

jQuery.noconflict (); // Transfer the variable $ to prototype.jsjquery (Document) .ready ($) {$ (“p”). Click (function () {// Continue to use the $ method Alert ($ (this) .Text ());});}); // or JQuery (Function ($) {// jQuery $ ( “p”). click (function () {// continue to use a method $LERT ($ (this) .Text ());});});

Or use the IEF statement block, this should be the most ideal way, Comprehensive compatibility can be achieved by changing the least code.

When we write a jQuery plugin yourself, this should be used, because we don’t know how to introduce a variety of JS libraries during the specific work, and the writing of this statement can shield conflicts .

jQuery.noconflict (); // Transferring the variable $ to prototype.js (Function “{// Defines anonymous functions and Set the shape to $ $ (Function () {// The anonymous function is jQuery $ (“p”). Click () {// Continue to use $ Method Alert ($ (this) .Text () );});});} (jQuery); // Perform anonymous function and deliver informal parametery $ (“pp”). style.display = ‘none’; // Using prototype
    3, jQuery library imported before other libraries  
jQuery library imported before other libraries, and the home ownership will be rear All JavaScript libraries. Then you can use “jQuery” directly to do some JQuery work.
At the same time,

$ ()

method can be used as a shortcut to other libraries. There is no need to call

jQuery.noconflict ()

function.
     
Test-protoy (will be hidden)

Test-jQuery (click event)

jQuery (function () {// directly use jQuery, no need to call ” jQuery.noconflict () function. jQuery (“p”). click (bunction () .Text ();});}); $ (“pp”). style.display = ‘none’; // Using prototype

 Second, principle     
1, 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) {ix {ix (Window. $ === jQuery) {WINDOW. $ = _ $ } if (deep && window.jquery === jQuery) {window.jquery = _jQuery;} return jquery;}});

When jquery is loaded, Get the _jquery variable by prior declaration WINDOW.JQUERY

, through _ $ getting to the current
Window. $ .
  Mount Noconflict is mounted below jQuery by  jQuery.extend () . So we are calling when calling  jQuery.noconflict () .   Two judgments were made when calling  Noconflict () 

,

The first IF, handled the control of the $.

The second IF, when noconflict () , the control of jQuery is handed out.
Last
Noconflict () Returns the jQuery object, which parameter is received, which parameter will have JQuery control.

2, verification

// conflict var $ = 123; // Suppose $ 123 in other libraries $ (Function () {console.log ($); // error Uncaught Typeerror: $ is not a function};


solve conflicts

// Solve conflict VAR jQ = $ .noconflict (); var $ = 123; jq (function () {Alert ($); // 123});
   Release $ Control Example 
VAR $ = 123; // WINDOW. $ Is 123, stored in private_ $ On.

AAA VAR jQ = $ .noconflict (); // When Window. $ === jQuery, put _ $ assigned WinDow. $. JQ (Function () {Alert ($); // 123});

Releases the JQuery Control Example Parameter DEEP : Deep is used to abandon the jQuery external interface.

As described below,

Noconflict () does not write the parameters, pops up jQuery as constructor.

VAR $ = 123; var jQuery = 456;

AAA

VAR jq = $ .noconflict (); jq (function () {alert (jQuery); // constructor});


 If you write a parameter true, 456 will pop up.   
VAR $ = 123; var jQuery = 456;

AAA
 VAR jq = $ .noconflict (true); // When writing True or parameters, Deep is true window.jquery === jQuery is true, so enters if the IF condition. Assign 456 to Window.jquery JQ (Function () {Alert (jQUERY); // 456});   
Summary

The above is all of this article, I hope that the content of this article will bring a certain help to everyone’s learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment