Jquery与Prototype混合用法对比

但问题来了,由于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的粉丝估计也会这样想。那么,是不是有另一种解决方案,让两种框架能和谐共处呢?现在流行和谐嘛!

另类解法:先看一小段代码,猜一下会有什么效果?

function(name){
alert('hello '+ name);
})("world");

(function(name){
alert('hello '+ name);
})("world");

[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的源码里面看到的。

(0)

相关推荐

  • JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框

  • jquery与prototype框架的详细对比

    以前做界面是用jquery的,现在因为要用许多ajax效果,改用了rails自带的prototype 因为jquery用多了,换个框架也大同小异,不过细节上有很多不同... 1.dom加载方面: jquery有dom ready方法,推迟js函数的绑定知道dom树完成(如果没有这个功能,一些element的事件函数之类的绑定可能会出错): $(document).ready(function(){}); 但是prototype是没有的...得自己找非官方的扩展,不方便,这个基本的功能,这么重要的

  • jQuery.fn和jQuery.prototype区别介绍

    近期在读jQuery的源码. 发现这里有个东西很难理解. 这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: 复制代码 代码如下: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { retur

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • 解析prototype,JQuery中跳出each循环的方法

    复制代码 代码如下: function chk(){        var flag=true;        var msg='';        var tips={'username':'姓名','tel':'电话','company':'公司名称','loupan_name':'楼盘名','sdate':'团购时间','content_1':'团购内容'};        $$('.required').each(function(el){            if($F(el).bl

  • 解析jQuery与其它js(Prototype)库兼容共存

    一.在运行这个函数后,可以恢复使用别名 $ ,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用.jQuery Code: 复制代码 代码如下: jQuery.noConflict();(function($) {  $(function() {    // 使用 $ 作为 jQuery 别名的代码  });})(jQuery);// 基于其他库用 $ 作为别名的代码 二.在运行这个函数后,可以创建一个新的 jQuery 别名来替换原来的 jQuery 别名 $ 来使用.jQuer

  • 找到了一篇jQuery与Prototype并存的冲突的解决方法

    以前好像在哪里看到过说jQuery与prototype存在冲突,但一直没在意.今天把自己用jquery框架写好的消息提示框特效放到公司原来的系统发现所有的消息提示效果都罢工了! 汗了半天还是没有发现原因,突然想到jquery与prototype的冲突问题,这才发现公司原来的系统很多页面都调用了prototype框架.知道了原因就想办法解决吧,总不至于让我脱离jquery重新写一遍吧,去网上狂搜了一番终于找到了一些解决办法,这就是: 1.将jquery.js放到prototype.js后面(这个是

  • jQuery prototype冲突的2种解决方法(附demo示例下载)

    本文实例分析了jQuery prototype冲突的2种解决方法.分享给大家供大家参考,具体如下: jquery和prototype怎么会冲突,归根到底就是因为他们二个都用到了$,同时用,混淆了.这个问题解决过不下5次,每次解决都要查一下.淡疼,嘿嘿. 方法一.在jquery的核心库文件中加代码. 1.一般是jquery.js,或者jquery.min.js,有的带版本号的.知道是哪个文件就行. })( window ); jQuery.noConflict(); //最后面,加上这一行. 2.

  • prototype与jquery下Ajax实现的差别

    先列举一下Ajax在Jquery和prototype中的实现. Jquery: 复制代码 代码如下: <script language="javascript"> $(function(){ var box = {}; var remoteUrl = 'index.php'; box.interval = 5*60*1000;//5分钟 box.showBoxInfo = function() { jQuery.get(remoteUrl, function(data){

  • Jquery与Prototype混合用法对比

    但问题来了,由于jQuery以及prototype都使用了美元符函数"$"作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用. 不过很快,有很多人给出了解决方案,如比较流行的方案是这样的: 复制代码 代码如下: <script src="http://jquery.com/src/latest/"></script> <script type="text/javascript">

  • jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如: 复制代码 代码如下: $("div").animate( {width:"1000px"}) 以上代码能够将div从原有的宽度调整到1000px.也可以一次性

  • jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

    本文实例讲述了jQuery.extend 与 jQuery.fn.extend的用法及区别.分享给大家供大家参考,具体如下: jQuery是一个JavaScript类,如$("#input1") 生成一个 jQuery类的实例. jQuery为开发插件提拱了两个方法:jQuery.fn.extend()和jQuery.extend(). 1.jQuery.extend() (1)扩展 jQuery 类本身,为jQuery类添加类方法(静态方法) jQuery.extend({ add:

  • jQuery中prevAll()方法用法实例

    本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码 代码如下: $("selector").prevAll(expr) 参数列表: 参数 描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta cha

  • jQuery的text()方法用法分析

    本文实例讲述了jQuery的text()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或者设置匹配元素的文本内容. 如需了解更多相关内容可参阅参考手册text()方法. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. text()方的使用: 用法一: 此方法不带参数时候,功能是取得所有匹配元素的文本内容,并且结果是由所有匹配元素包含的文本内容组合起来的文本.

  • jQuery的one()方法用法实例

    本文实例讲述了jQuery的one()方法用法.分享给大家供大家参考.具体分析如下: 为匹配元素的特定事件绑定一个一次性的事件处理方法. 在语法上one()方法和bind()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构: 复制代码 代码如下: $(selector).one(event,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

  • jQuery中get方法用法分析

    本文实例讲述了jQuery中get方法用法.分享给大家供大家参考,具体如下: 参数:url,[data],[callback],[type] url 待载入页面的URL地址. data 待发送 Key/value 参数. callback 载入成功时回调函数. type 返回内容格式,xml, html, script, json, text, _default. 案例1 表单代码: <form id="form1" action="#"> <p&

  • jQuery中:enabled选择器用法实例

    本文实例讲述了jQuery中:enabled选择器用法.分享给大家供大家参考.具体分析如下: 此选择器可以选取所有可用的元素. 语法结构: 复制代码 代码如下: $(":enabled") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("input:enabled").css("background-color","red") 以上代码能够将可用的input元素的背景颜色

随机推荐