jquery resolves $ symbolic naming conflict _jquery

A few days ago, my friend asked me to help him solve a page of the jquery effect compatibility problem, think this is a very easy to ignore also very important point, especially in this record.

Friends gave the page to use three special effects, of which two effects can be displayed, the third has no effect. By looking at the referenced JS file, I found that the page not only introduced Jquery.js, but also introduced a file called Prototype.js. This prototype.js has not heard before, deliberately searched Baidu, originally it is also a JS class library, functions and jquery similar, but very powerful.

With a little bit of troubleshooting, I found that two of the effects that could be shown were referring to jquery, and the effect that wasn't shown was the prototype.js. A little analysis, finally found the key to the error: the $ in jquery and Prototype.js in the $ conflict, two class libraries are called by the $ symbol, but if you write this directly will not know who this $ belongs to, which class library to call the method to achieve the display of the effect.

Now that we have found the root of the problem, the problem is solved.

Method one: In jquery, there is a piece of code:

Expose jquery to the global object

window.jquery = window.$ = jquery;

In other words, we can use jquery instead of the $ symbol in Jquery.js to invoke, if you must declare:

JQuery = $;

So, the new problem comes up again. There are so many places in the page that use $, not only do I have to distinguish which $ is a jquery, but also replace these $ with the word jquery, and, more seriously, if you want to add new jquery effects to the page, I have to remind myself that when you call $, you use jquery instead , a little negligence, not only out of the desired effect, but also to modify the task of a large workload. It seems that this method is not workable.

Isn't there a way to make a clear distinction between the "right of ownership" of this $? Of course there is!

Method Two: Use jquery statement block to implement:

First, look at the format of the jquery statement block:

(function ($) { 
 ... 
 .. $ (' #msg '). Show ()//is used in this statement block for the $.} defined in Jquery.js 

(JQuery)

So, when we call the $ implementation effect display in jquery, just write this code in the statement block, and how to call the $ symbol. And the $ in Prototype.js is written in the statement block, the $ symbol is also how to call how to call, the two do not have any effect.

The above is the entire content of this article, I hope this method can also bring help to other people who have the same problem, and hope that we support the cloud-dwelling community a lot.