Jquery與Prototype混合用法對比

更新時間：2008年09月17日 00:22:03 作者：

jQuery和prototype都是現(xiàn)在比較流行的Javascript開發(fā)框架，兩者都擁有數(shù)量相當?shù)姆劢z，當然不排除同時喜歡使用兩種框架的。

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

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

復制代碼代碼如下:

<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里的$函數(shù)名，而prototype的$函數(shù)照常使用，像這樣：

復制代碼代碼如下:

<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的粉絲估計也會這樣想。那么，是不是有另一種解決方案，讓兩種框架能和諧共處呢？現(xiàn)在流行和諧嘛！

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

復制代碼代碼如下:

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

經(jīng)測試，jQuery與Prototpye工作均正常。唯一以往常不一樣的是，我們要在以前寫的Jquery外面加多一個外套：

復制代碼代碼如下:

(function($){ 
//這里寫Jquery代碼 
})(jQuery); 
(function($){ 
//這里寫Jquery代碼 })(jQuery); 

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

不足之處：

還是不能解決Jquery插件的問題，這個問題是傳統(tǒng)方法也無法解決的，只能夠手動去修改插件腳本里面對$的調用，而根本的解決辦法是以后的插件都用剛才那種另類的方式去寫，才能保證其可用性。而Jquery UI現(xiàn)在好像是這樣做了，我從Demo的源碼里面看到的。

您可能感興趣的文章:

Prototype Number對象學習
這個對象提供一些操作數(shù)值類型的工具函數(shù)
2009-07-07
javascript prototype 原型鏈
prototype源自法語，軟件界的標準翻譯為“原型”，代表事物的初始形態(tài)，也含有模型和樣板的意義。
2009-03-03
prototype Element學習筆記(篇二)
這一篇主要是要總論Element的所有函數(shù)。
2008-10-10
Prototype 學習工具函數(shù)學習($A方法)
Prototype 學習工具函數(shù)學習($A使用方法)
2009-07-07
Prototype使用指南之a(chǎn)rray.js
Prototype使用指南之a(chǎn)rray.js...
2007-01-01
Prototype源碼淺析 Number部分
Prototype在原生對象的基礎上擴展，分別是Object，F(xiàn)unction，String，Number，Array，Date，前面分析了Object，F(xiàn)unction，String，還剩下Number，Array，Date
2012-01-01
Prototype String對象學習
這個對象里面的方法就是提供了一些字符串操作的工具方法，比較重要的gsub方法，下面做了詳細的注釋，簡單的方法就不說了，一看就明白了。
2009-07-07
Prototype Selector對象學習
這個對象在幫助文檔上并沒有，但是這個對象確是整個DOM操作的核心類，工具函數(shù)$$，其實就是調用這個類的方法
2009-07-07
prototype1.4中文手冊
prototype1.4中文手冊...
2006-09-09
Prototype ObjectRange對象學習
ObjectRange對象基本就是實現(xiàn)了連續(xù)的數(shù)字或者字符串，其中只包含一個方法，include，判斷某個數(shù)字或者字符串是否在ObjectRange里。并且ObjectRange對象還混入了Enumerable的方法，所以可以直接在ObjectRange對象上調用Enumerable對象里面的方法。
2009-07-07