您还没有登录。现在登录注册

另类的Jquery与Prototype混用法

分类: 编程   |   jeff  发表于:2008-07-22 15:37:44  |   2条评论  |

jQueryprototype都是现在比较流行的Javascript开发框架,两者都拥有数量相当的粉丝,当然不排除同时喜欢使用两种框架的。但问题来了,由于jQuery以及prototype都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。

流行的解法:

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

js 代码
 
  1. <script src="http://jquery.com/src/latest/"></script>  
  2.  <script type="text/javascript">  
  3.     JQ = $;  //rename $ function  
  4.  </script>  
  5.  <script src="prototype.js"></script>  

这样一来,你可以使用JQ来代替jQuery里的$函数名,而prototype的$函数照常使用,像这样:

js 代码
 
  1. <script type="text/javascript">  
  2.   JQ(document).ready(function(){  
  3.    JQ("#test_jquery").html("this is jquery");  
  4.    $("test_prototype").innerHTML="this is prototype";  
  5.   });  
  6.  </script>  

尽管这种办法在一定程度上解决了两者的冲突,但作为jQuery的死忠,我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么,是不是有另一种解决方案,让两种框架能和谐共处呢?现在流行和谐嘛!

另类解法:

先看一小段代码,猜一下会有什么效果?

 

js 代码
 
  1. <script type="text/javascript">
  2. (function(name){  
  3.     alert('hello '+ name);  
  4. })("world");  
  5. </script> 

 

应该很简单吧?效果是弹出一个窗品说“hello world”。仔细看这一段Script,前后有两个括号组成,第一个括号里面是一个function对象,第二个括号是一个字符串。可以这样理解,第一个括号里面定义了一个函数,第二个括号里面给出的参数,两个加在一起实际上是完成了一次函数调用!

那现在来点真实的:

js 代码
 
  1. <script type="text/javascript" src="jquery-1.2.6.js">  
  2. </script>  
  3. <script type="text/javascript" src="prototype-1.6.0.2.js">  
  4. </script>  
  5. <div id="test_jquery"></div>
    <div id="test_prototype"></div>
  6. <script type="text/javascript">  
  7. <!--  
  8. (function($){  
  9.     $(document).ready(function(){  
  10.         alert($("#test_jquery").html("this is jqeury"));  
  11.     });  
  12. })(jQuery); 
  13. $("test_prototype").innerHTML="this is prototype"
  14. //-->  
  15. </script>  

经测试,jQuery与Prototpye工作均正常。唯一以往常不一样的是,我们要在以前写的Jquery外面加多一个外套:

java 代码
  1. (function($){    
  2.   //这里写Jquery代码
  3. })(jQuery);  
这个外套巧妙地利用函数局部变量的有效范围保证你可以安心地按原来的方式写Jquery代码,这个方案更合适现有Jquery的代码升级至Jquery + prototypt。

不足之处

还是不能解决Jquery插件的问题,这个问题是传统方法也无法解决的,只能够手动去修改插件脚本里面对$的调用,而根本的解决办法是以后的插件都用刚才那种另类的方式去写,才能保证其可用性。而Jquery UI现在好像是这样做了,我从Demo的源码里面看到的。

站内搜索

作者简介

jeff

OK Computer!

mail
qq

订阅我

我看我听我读

都有谁评论鸟

Tags

python 音乐 朋友 工作 django java 旅游 生活 丽江 云南 编程 google 2008 中国 年假 摇滚 javascript ajax grails 部署 apache air 学习 卖唱 lucene 技术 体验 发呆 flex 灾害 乐队 plone 灾难 哀悼日 开源 jmesa jquery flash ext web 健康 全文搜索 电影 sql 感情 orm 诗歌 数据库 计划 开发 原创 更新 空间 休假 life 许巍 杭州 鼻炎 moin 真诚 人生 感悟 感性 信息 设计 需求 ria 遇窃 香格里拉 大理 管理 算法 cms nuexo zope 左小诅咒 汉诺塔 AMF prototpye 快速开发 actionscript beautifulSoup 递归 网络 opensource 结婚 捐赠 scrum 软件过程 demo wiki 西片 英伦 中间件 erlang 并发 函数式编程 中文分词 模板 分页 成功 pagerank hibernate 日志 MYMeditor 恐怖 惊变 mysql rss 文艺片 太阳 彩色 factcgi lighttpd editor 中文 个性化 秋天 暴力 美学 声音玩具 独立 备份 数据 琐事 博客 接口 设计模式 地下 广州 dvd 互联网 json 事业 职业 读书 香港 澳门 忧郁 冬天 compass 图表

日志分类

友情连接

Power By