jQuery
和prototype
都
是现在比较流行的Javascript开发框架,两者都拥有数量相当的粉丝,当然不排除同时喜欢使用两种框架的。但问题来了,由于jQuery以及
prototype都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。
流行的解法:
不过很快,有很多人给出了解决方案,如比较流行的方案是这样
的:
<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>
尽管这种办法在一定程度上解决了两者的冲突,但作为jQuery的死忠,我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么,是不是有另一种解决方案,让两种框架能和谐共处呢?现在流行和谐嘛!
另类解法:
先看一小段代码,猜一下会有什么效果?
1. <script type="text/javascript">
2. (function(name){
3. alert('hello '+ name);
4. })("world");
5. </script>
应该很简单吧?效果是弹出一个窗品说“hello
world”。仔细看这一段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>
经测试,jQuery与Prototpye工作均正常。唯一以往常不一样的是,我们要在以前写的Jquery外面加多一个外套:
(function($){
//这里写Jquery代码
})(jQuery);
这个外套巧妙地利用函数局部变量的有效范围保证你可以安心地按原来的方式写Jquery代码,这个方案更合适现有Jquery的代码升级至Jquery + prototypt。
不足之处
:
还是不能解决Jquery插件的问题,这个问题是传统方法也无法解决的,只能够手动去修改插件脚本里面对$的调用,而根本的解决办法是以后的插件都用刚才那种另类的方式去写,才能保证其可用性。而Jquery UI现在好像是这样做了,我从Demo的源码
里面看到的。
另文见:http://www.fallever.com/blog/jeff/196/
分享到:
- 2008-07-22 15:45
- 浏览 2417
- 评论(1)
- 论坛回复 / 浏览 (1 / 3071)
- 查看更多
相关推荐
但问题来了,由于jQuery以及prototype都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。 不过很快,有很多人给出了解决方案,如比较流行的方案是这样的:...
Ajax(Ajax,jquery,prototype综合).rar
json,jQuery,prototype
最新Javascript开源框架,包含API帮助文档的学习网址。资源共享!
里面有现在web开发主流框架,jquery bootstrap prototype
包含经典电子书 CSS Jquery DHTML Prototype
javascript手册大全,其中有jquery,prototype手册的,非常全的JS手册!!!
以前好像在哪里看到过说jQuery与prototype存在冲突,但一直没在意。今天把自己用jquery框架写好的消息提示框特效放到公司原来的系统发现所有的消息提示效果都罢工了! 汗了半天还是没有发现原因,突然想到jquery与...
jquery+prototype 源码 资料 插件合集 很有参考价值
俩大JS框架,Jquery和Prototype
jQuery.fn和jQuery.prototype想必大家对它并不陌生吧,那么你们知道它们之间的区别吗?在本文有个不错的示例大家可以参考下
主要是对jquery与prototype框架进行了详细的对比介绍,需要的朋友可以过来参考下,希望对大家有所帮助
jQuery、Mootools、Prototype三大JavaScript框架中文手册
小议JavaScript库——Dojo、jQuery和PrototypeJS的比较.pdf
jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 ...
这是本人在学习jQuery框架Prototype的时候做的笔记,很详细
CSS2.0样式表中文手册.chm CSS3.0(飘零雾雨版).chm HTML4.01&XHTML; 1.0参考手册.chm ...jquery-1.7.2.js jquery-1.7.2.min.js jQuery1.7.1_API中文手册.pdf jQueryAPI_1.7.1_CN.chm prototype1.7.js
jquery的几种使用方法,可以更好的设计网页