Comparison between Jquery and Prototype

But the problem arises. Because jQuery and prototype both use the dollar sign function "$" as the selector, $ functions are repeatedly defined when both are used, as a result, one of the frameworks cannot be used.

But soon, many people have provided solutions, such as the popular ones:

Copy codeThe Code is as follows:
<Script src = "http://jquery.com/src/latest/"> </script>
<Script type = "text/javascript">
JQ = $; // rename $ function

</Script>
<Script src = "prototype. js"> </script>

<Script src = "http://jquery.com/src/latest/"> </script>
<Script type = "text/javascript">
JQ = $; // rename $ function
</Script>

<Script src = "prototype. js"> </script>

In this way, you can use JQ to replace the $ function name in jQuery, while the $ function of prototype is used as usual, like this:
Copy codeThe 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 ";
});
</Script>
<Script type = "text/javascript">
JQ (document). ready (function (){
JQ ("# test_jquery" ).html ("this is jquery ");
$ ("Test_prototype"). innerHTML = "this is prototype ";
});
</Script>

Although this method solves the conflict to some extent, I am reluctant to rewrite $ as JQ or other replacement characters as jQuery's loyalty. On the contrary, fans of Prototype may think like this. So is there another solution that allows the two frameworks to coexist harmoniously? Harmony is now popular!

Alternative solution: Let's take a look at a short piece of code and guess what it will do?


[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Should it be simple? The result is a pop-up window saying "helloworld ". Take a closer look at this Script, which consists of two parentheses. The first is a function object, and the second is a string. It can be understood that the first parenthesis defines a function, and the parameters in the second bracket are combined to complete the callback function call!
Now let's look at the following:

Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery-1.2.6.js">
</Script>
<Script type = "text/javascript" src = "prototype-1.6.0.2.js">
</Script>
<Div id = "test_jquery"> </div>
<Div id = "test_prototype"> </div>
<Script type = "text/javascript">
<! --
(Function ($ ){
$ (Document). ready (function (){
Alert ($ ("# test_jquery" example .html ("this is jqeury "));
});
}) (JQuery );
$ ("Test_prototype"). innerHTML = "this is prototype ";
// -->
</Script>

<Script type = "text/javascript" src = "jquery-1.2.6.js"> </script>
<Script type = "text/javascript" src = "prototype-1.6.0.2.js"> </script>
<Div id = "test_jquery"> </div>
<Div id = "test_prototype"> </div>
<Script type = "text/javascript">
<! --
(Function ($) {$ (document ). ready (function () {alert ($ ("# test_jquery" ).html ("this is jqeury") ;}) (jQuery); $ ("test_prototype "). innerHTML = "this is prototype"; // --> </script>

After testing, jQuery and Prototpye work normally. The only thing that is often different in the past is that we need to add a coat to the Jquery that we previously wrote:
Copy codeThe Code is as follows:
(Function ($ ){
// Write Jquery code here
}) (JQuery );
(Function ($ ){
// Write Jquery code here}) (jQuery );

This jacket cleverly utilizes the effective range of the function's local variables to ensure that you can write Jquery code in the original way with peace of mind. This solution is more suitable for upgrading existing Jquery code to Jquery + prototypt.

Disadvantages:

Still cannot solve the Jquery plug-in problem. This problem cannot be solved by the traditional method. You can only manually modify the plug-in script to face $ calls, the fundamental solution is that later plug-ins are written in an alternative way to ensure their availability. Jquery UI seems to have done so now, as I can see from the source code of the Demo.