How jQuery protects jQuery and $ rewriting

Question

These variables are located immediately after defining a local copy of jQuery in jQuery .

// Map over jQuery in case of overwrite _jQuery = window.jQuery // Map over the $ in case of overwrite _$ = window.$ 

You can read the comments and find out why ... but

• How do these lines of code do?

• Would they add something like that, protect my personal namespace, or be deeper in the source?

• What is an example of the bad that can happen if it was not in the source code?

Answer 1

How jQuery protects jQuery and $ rewriting

This is not (but see below). If you load jQuery and then load something else that writes something else to these characters, they will no longer be associated with jQuery. Example:

HTML:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script> 

JavaScript:

 window.onload = function() { // Outputs false, because Prototype has overwritten it display("Does $ === jQuery? " + ($ === jQuery)); // Outputs true, because Prototype has overwritten it display("Does $('foo').id === 'foo'? " + ($('foo').id === 'foo')); function display(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); } };​ 

Live copy

But it looks like they keep them. How?

Answer closures . It has a local link inside its scope function, which is not tied to a global link ( window property), so internally it doesn’t care if you replace these characters. Of course, you care if you overwrite both $ and jQuery , because if you have no way to call jQuery. :-) But if you only overwrite $ , this is not a problem, just use jQuery or if you don't like typing this ( and let him look at him, this is inconvenient), do the following:

 (function($) { // Your usual jQuery code here using `$`, // this code runs immediately )(jQuery); 

... which obscures the $ character locally inside an anonymous function (which is defined and called at the same time). jQuery makes this especially easy if you use the ready event:

 jQuery(function($) { // Your usual jQuery code here using `$`, // this code runs when the DOM is ready (see // the `jQuery.ready` function). }); 

Answer 2

If you look at the jquery.js file, you will find that they start by saving the previous definition (line 31-32 v1.4.4):

 // Map over the $ in case of overwrite _$ = window.$, 

Then, if you call noConflict , it just sets the value back (line 397-398)

 noConflict: function( deep ) { window.$ = _$; 

You can add something similar to your own project to protect the namespace. The concept is not just for javascript.

If these lines were not included, then you cannot run jQuery and Prototype on the same page as using the $ operator - nothing bad can happen, it's just that your code will not work and may cause errors.

Answer 3

If you had to include another library, for example, a prototype that uses $ , then jQuery should have a link of both $ and window.jQuery to support the jQuery.noConflict() function, etc.

http://api.jquery.com/jQuery.noConflict/

$ used because it is convenient, but it comes at a price that it can be used by more than one library.

Does it help?

Answer 4

Javascript has no means to provide the protection you are looking for.

JQuery does not "protect" these variables. It just copies the $ and jquery links into two other variables. The code you read is equivalent to:

 var obj1 = {}; /* create an empty object and reference it as obj1 */ var obj2 = obj1; /* made a second reference to that same object */ 

This code does not protect obj1 . It is true that your code will later change the value of obj1 :

 obj1 = 'foo'; /* now obj1 references a string */ 

obj1 does not "magically retain its meaning"; after this line is just a line. But the object is still available in obj2 .

Answer 5

The purpose of these lines is to restore the original $ and jQuery variables if jQuery itself overrides them. It does nothing to protect other code from overriding jQuery.

If you want to protect your namespace, you can make setInterval, which checks if the global variable is still instanceof your object (only if your object is protected inside the closure, otherwise it can also be changed). But this is not a good practice, since the idea of ​​javascript is to be expandable and customizable. Put the control in the hands of the developer, do not try to "lock" your objects.