Jquery與Prototype混合用法對比

但問題來了，由於jQuery以及prototype都使用了美元符函數“$”作為選取器，在兩者混合使用的時候$函數被重複定義了，結果導致其中一個架構不能使用。

不過很快，有很多人給出瞭解決方案，如比較流行的方案是這樣的：

複製代碼 代碼如下:<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>

這樣一來，你可以使用JQ來代替jQuery裡的$函數名，而prototype的$函數照常使用，像這樣： 複製代碼 代碼如下:<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>

儘管這種辦法在一定程度上解決了兩者的衝突，但作為jQuery的死忠，我是萬分不情願改寫$為JQ或其他替代的字元。反之Prototype的粉絲估計也會這樣想。那麼，是不是有另一種解決方案，讓兩種架構能和諧共處呢？現在流行和諧嘛！

另類解法：先看一小段代碼，猜一下會有什麼效果？

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

應該很簡單吧？效果是彈出一個窗品說“helloworld”。仔細看這一段Script，前後有兩個括弧組成，第一個括弧裡面是一個function對象，第二個括弧是一個字串。可以這樣理解，第一個括弧裡面定義了一個函數，第二個括弧裡面給出的參數，兩個加在一起實際上是完成了一次函數調用！
那現在來點真實的：

複製代碼 代碼如下:<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>

<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>

經測試，jQuery與Prototpye工作均正常。唯一以往常不一樣的是，我們要在以前寫的Jquery外面加多一個外套： 複製代碼 代碼如下:(function($){
//這裡寫Jquery代碼
})(jQuery);
(function($){
//這裡寫Jquery代碼 })(jQuery);

這個外套巧妙地利用函數局部變數的有效範圍保證你可以安心地按原來的方式寫Jquery代碼，這個方案更合適現有Jquery的代碼升級至Jquery + prototypt。

不足之處：

還是不能解決Jquery外掛程式的問題，這個問題是傳統方法也無法解決的，只能夠手動去修改外掛程式指令碼裡面對$的調用，而根本的解決辦法是以後的外掛程式都用剛才那種另類的方式去寫，才能保證其可用性。而Jquery UI現在好像是這樣做了，我從Demo的源碼裡面看到的。