|
不過很快,有很多人給出了解決方案,如比較流行的方案是這樣的:
復制代碼 代碼如下:
<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的源碼里面看到的。
JavaScript技術:Jquery與Prototype混合用法對比,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。