繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Jquery与Prototype混合用法对比
- Javascript
- 论坛里点击别人帖子下面的回复，回复标题变成“回复 24# 的帖子”
- JavaScript 撑出页面文字换行
- JavaScript 高级语法介绍
- Javascript 表格操作实现代码
- javascript 获取鼠标的绝对位置 event
- Input 特殊事件onpopertychange和oninput
- javascript 一段左右两边随屏滚动的代码
- JS 分号引起的一段调试问题
- 根据服务器时间作为起始，显示时钟的小程序
- js 匿名调用实现代码
- javascript 缓冲效果 实现代码
- javascript htmlencode函数(ff兼容版) 主要是编辑器中反转html代码
- javascript 获取radio的value的函数 [已测]
- Javascript 代码也可以变得优美的实现方法
- 使弱类型的语言JavaScript变强势
- js 单引号 传递方法
- 利用WebBrowser彻底解决Web打印问题（包括后台打印）
- web 页面分页打印的实现
- 可以拖动的div 实现代码
- WordPress 照片lightbox效果的运用几点
Javascript 中的 Jquery与Prototype混合用法对比
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 327 ::
收藏到网摘: 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
