Jquery与Prototype混合用法比较,prototype与jquery下Ajax落成的歧异

先列举一下Ajax在Jquery和prototype中的实现。
Jquery:

但问题来了,由于jQuery以及prototype都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。

复制代码 代码如下:

不过很快,有很多人给出了解决方案,如比较流行的方案是这样的:

<script language=”javascript”>
$(function(){
var box = {};
var remoteUrl = ‘index.php’;
box.interval = 5*60*1000;//5分钟
box.showBoxInfo = function() {
jQuery.get(remoteUrl, function(data){
var msg_box = $(‘#msg_box’);
msg_box.innerHTML = data;
}
});
}
box.run = function(){
this.showBoxInfo();
setInterval(this.showBoxInfo,this.interval);
};
box.run();
})
</script>

复制代码 代码如下:

prototype:

<script src=”;
<script type=”text/javascript”>
JQ = $; //rename $ function

复制代码 代码如下:

</script>
<script src=”prototype.js”></script>

<script language=”javascript”>
var box = {};
box.interval = 5*60*1000;//5分钟
box.showBoxInfo = function(){
var pars = “”;
var remoteUrl = ‘index.php’;
var myAjax = new Ajax.Request(
remoteUrl,
{
method: ‘get’,
parameters: pars,
onComplete: box.showResponse
});
};
box.showResponse = function(data){
var msg_box = $(“msg_box”) ;
msg_box.innerHTML = data.responseText;
};
box.run = function(){
this.showBoxInfo();
setInterval(this.showBoxInfo,this.interval);
};
box.run();
</script>

<script src=”;
<script type=”text/javascript”>
JQ = $; //rename $ function
</script>

实际在引入setInterval函数后prototype却不能刷新,这是为什么呢?
原来是prototype对于相同的URL有缓存机制,应此不能刷新页面,特别是在用户使用F5或点击“刷新”后,会出现Ajax响应区空白的bug,这样就必须让prototype不刷新。
对于prototype中的URL添加随机数
原:var remoteUrl = ‘index.php’;
修改后:var remoteUrl = ‘index.php?rand=’+Math.random();
使用GET方式产生一个与页面显示无关的参数即可。

<script src=”prototype.js”></script>

Jquery: 复制代码 代码如下: script language=”javascript” $(function(){
var box = {}; var remoteUrl = ‘index.php’; bo…

这样一来,你可以使用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的源码里面看到的。

您可能感兴趣的文章:

  • 找到了一篇jQuery与Prototype并存的冲突的解决方法
  • 解析prototype,JQuery中跳出each循环的方法
  • jquery与prototype框架的详细对比
  • jQuery.fn和jQuery.prototype区别介绍
  • 解析jQuery与其它js(Prototype)库兼容共存
  • jQuery.prototype.init选择器构造函数源码思路分析
  • JQuery,Extjs,YUI,Prototype,Dojo
    等JS框架的区别和应用场景简述
  • prototype与jquery下Ajax实现的差别
  • jQuery
    prototype冲突的2种解决方法(附demo示例下载)

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注