But the problem is that since jQuery and prototype both use the dollar function "$" as a selector, the $ function is repeatedly defined when the two are used, resulting in one of the frameworks being unable to use.
But soon, many people gave solutions, such as the more popular solutions:
<script src="/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src=""></script>
<script src="/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src=""></script>
In this way, you can use JQ instead of the $ function name in jQuery, and the $ function of prototype is used as usual, like this:
<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 approach resolves the conflict between the two to a certain extent, as a loyal jQuery, I am extremely reluctant to rewrite $ to JQ or other alternative characters. On the contrary, Prototype fans will probably think the same way. So, is there another solution that allows the two frameworks to live in harmony? It’s a harmonious thing now!
Alternative solution: First look at a small piece of code and guess what effect will be?
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
It should be very simple, right? The effect is that a window pops up and says "helloworld". If you look at this Script carefully, there are two brackets in front and back. The first bracket is a function object, and the second bracket is a string. It can be understood in this way that a function is defined in the first bracket, and the parameters given in the second bracket are added together, which actually completes a function call!
Now let’s get some real:
<script type="text/javascript" src="jquery-1.2.">
</script>
<script type="text/javascript" src="prototype-1.6.0.">
</script>
<div ></div>
<div ></div>
<script type="text/javascript">
<!--
(function($){
$(document).ready(function(){
alert($("#test_jquery").html("this is jqeury"));
});
})(jQuery);
$("test_prototype").innerHTML="this is prototype";
//-->
</script>
<script type="text/javascript" src="jquery-1.2."> </script>
<script type="text/javascript" src="prototype-1.6.0."> </script>
<div ></div>
<div ></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 was different in the past was that we had to add an extra coat to the Jquery we wrote before:
(function($){
// Write Jquery code here
})(jQuery);
(function($){
//Write Jquery code here })(jQuery);
This coat cleverly utilizes the effective range of function 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 + prototype.
Disadvantages:
It still cannot solve the problem of Jquery plug-in. This problem cannot be solved by traditional methods. You can only manually modify the calls to $ in the plug-in script. The fundamental solution is that future plug-ins will be written in the alternative way just now to ensure their usability. And Jquery UI seems to do this now, I saw it from the source code of Demo.
But soon, many people gave solutions, such as the more popular solutions:
Copy the codeThe code is as follows:
<script src="/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src=""></script>
<script src="/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src=""></script>
In this way, you can use JQ instead of the $ function name in jQuery, and the $ function of prototype is used as usual, like this:
Copy the 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 approach resolves the conflict between the two to a certain extent, as a loyal jQuery, I am extremely reluctant to rewrite $ to JQ or other alternative characters. On the contrary, Prototype fans will probably think the same way. So, is there another solution that allows the two frameworks to live in harmony? It’s a harmonious thing now!
Alternative solution: First look at a small piece of code and guess what effect will be?
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
It should be very simple, right? The effect is that a window pops up and says "helloworld". If you look at this Script carefully, there are two brackets in front and back. The first bracket is a function object, and the second bracket is a string. It can be understood in this way that a function is defined in the first bracket, and the parameters given in the second bracket are added together, which actually completes a function call!
Now let’s get some real:
Copy the codeThe code is as follows:
<script type="text/javascript" src="jquery-1.2.">
</script>
<script type="text/javascript" src="prototype-1.6.0.">
</script>
<div ></div>
<div ></div>
<script type="text/javascript">
<!--
(function($){
$(document).ready(function(){
alert($("#test_jquery").html("this is jqeury"));
});
})(jQuery);
$("test_prototype").innerHTML="this is prototype";
//-->
</script>
<script type="text/javascript" src="jquery-1.2."> </script>
<script type="text/javascript" src="prototype-1.6.0."> </script>
<div ></div>
<div ></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 was different in the past was that we had to add an extra coat to the Jquery we wrote before:
Copy the codeThe code is as follows:
(function($){
// Write Jquery code here
})(jQuery);
(function($){
//Write Jquery code here })(jQuery);
This coat cleverly utilizes the effective range of function 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 + prototype.
Disadvantages:
It still cannot solve the problem of Jquery plug-in. This problem cannot be solved by traditional methods. You can only manually modify the calls to $ in the plug-in script. The fundamental solution is that future plug-ins will be written in the alternative way just now to ensure their usability. And Jquery UI seems to do this now, I saw it from the source code of Demo.