Comparison of mixed usage of Jquery and Prototype

Comparison of mixed usage of Jquery and Prototype_prototype

WBOY

Release： 2016-05-16 19:00:58

Original

1181 people have browsed it

But here comes the problem. Since both jQuery and prototype use the dollar sign function "$" as a selector, the $ function is redefined when the two are mixed, resulting in one of the frameworks being unusable.

But soon, many people came up with solutions. For example, the more popular solution is this:

Copy code The code is as follows:

 
< script type="text/javascript"> 
JQ = $; //rename $ function

In this way, you can use JQ to replace the $function name in jQuery, and the $function of prototype can be used as usual, like this:

Copy code The code is as follows:

 
< ;script type="text/javascript"> 
JQ(document).ready(function(){ 
JQ("#test_jquery").html("this is jquery"); 
$( "test_prototype").innerHTML="this is prototype"; 
}); 
 

Although this method solves the conflict between the two to a certain extent , but as a jQuery diehard, I am extremely reluctant to rewrite $ as JQ or other alternative characters. On the contrary, Prototype fans may think so too. So, is there another solution that allows the two frameworks to coexist harmoniously? Harmony is popular now!

Alternative solution: First look at a small piece of code and guess what the effect will be?

[Ctrl A Select All Note:

If you need to introduce external Js, you need to refresh it to execute
]

It should be very simple, right? The effect is to pop up a window saying "helloworld". Look carefully at this Script. There are two brackets before and after. The first bracket is a function object, and the second bracket is a string. It can be understood that a function is defined in the first bracket, and the parameters given in the second bracket are added together to actually complete a function call!
Now let’s get real:

Copy the code

The code is as follows:

< ;/div>

After testing, jQuery and Prototpye work normally. The only thing that is different from the past is that we need to add an extra coat to the Jquery we wrote before: Copy the code

The code is as follows:

(function($){ 
//Write Jquery code here
})(jQuery); 
(function($){ 
//Write Jquery code here}) (jQuery); 

This jacket cleverly uses the effective scope of function local variables to ensure that you can safely write Jquery code in the original way. This solution is more suitable for upgrading existing Jquery code to Jquery prototypt. .

Disadvantages:

Still cannot solve the problem of Jquery plug-in. This problem cannot be solved by traditional methods. You can only manually modify the call to $ in the plug-in script, and the fundamental The solution is to write future plug-ins in the alternative way just now to ensure their usability. Jquery UI seems to do this now, I saw it from the source code of the Demo.

Related labels：

jquery

source：php.cn

Previous article：Imitation 3721 home page module drag and move effect js code [dragable layer moving layer]_page background Next article：JavaScript Gradient Effect Page Image Control Page 1/2_Page Background

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn