繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Jquery与Prototype混合用法对比
- Javascript
- 解决FLASH需要点击激活的代码
- 取得一定长度的内容，处理中文
- 写了几个类，希望对大家有用。
- Javascript MD4
- Code：findPosX 和 findPosY
- 关于base64加密/解密
- Javascript SHA-1：Secure Hash Algorithm
- 关于arguments,callee,caller等的测试
- URI、URL和URN之间的区别与联系
- firefox中JS读取XML文件
- FCK调用方法..
- 在 IE 中调用 javascript 打开 Excel 表
- 网页设计常用的一些技巧
- 优化JavaScript脚本的性能的几个注意事项
- JS暴虐查找法
- 另类网页中添加运行效果
- 在window.setTimeout方法中传送对象
- js版本A*寻路算法
- 用js重建星际争霸
- 在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？
Javascript 中的 Jquery与Prototype混合用法对比
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 276 ::
收藏到网摘: n/a
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>
<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 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
应该很简单吧？效果是弹出一个窗品说“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的源码里面看到的。
评论 (0) All
