首页  »  javascript

另类的Jquery与Prototype混用法

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

使用ThickBox注意事项

编程 jeff  |  2008-03-18 74 javascriptjquery

原来打算用ThickBox做一个弹出窗口来修改些资料,并在新窗口进行Ajax操作。

在没用ThickBox前,先调试完该页面,工作正常,IE,FF下都运行无误。正式使用上Thick Box。突然发现在FF下面不工作了,连简单的Alert都出不来。而用IE就是正常的。

我猜想是ThickBox默认使用了Ajax的方式加载链接的内容再显示出来的,而FF在加载过程中并没有对新页面中的Javascript进行解释,IE则是有的。既然如此,使用Iframe的方式应该能行。ThickBox的确可以在链接的参数里指定“TB_iframe”是否为True,否则就使用Ajax来加载,不保证新页面的JS能被解释。

使用FF又使用Thickbox的同学需要注意这一点了。

PS:FF=FireFox

Ext2.0 + cjson 快乐起舞

虽然说我买了很多CSS的书扔在家里,也翻过来看过。可你知道程序员没几个静得下来专门搞CSS,我是这批人中的其中之一。我希望的事就是有个很好的美工可以帮我做一些好的样式,我拿来就用。

平时做Web应用,好多的页面,每一个请求的处理器最终还对应回一个页面,这是大部分Web Framework的做法,Asp,php并不这样。有些是通过配置,动态语言则直接写在代码里,因为代码本身就相当于配置。最后页面越来越多,突然想,不用写页面多好啊,客户需要什么数据就提供什么数据好了。

现在好了,一次过实现你两个愿望,使用Extt来做前端,省去你百分之八十的UI工夫,用Ajax来交互,把该死的页面啊模板啊扔一边去。

好长一段时间没有关注Ext(前身为YUI-Ext)。如今已经是出了2.0版,除了完美的UI之外,还和JqueryPrototype等框架进行了整合。Ext2.0简直可以用惊艳来形容。超乎想象的UI控件效果让人目瞪口呆,而且使用起来也极其方便,让你感觉写界面就像在写配置文件一样。现在Java的FX也类似这样的。有Ext,我不用担心自己是个CSS菜鸟,Ext做出来的UI恐怕还不是一般美工做得了的捏。。卡卡。。

Ext有自己在客户端的数据存储结构(Store之类的),UI的组件封装得很完善,如客户端校验、表格组件、分页组件、树、布局、表单与工具栏等,开箱即用。需要与服务器交换数据的时候通常通过新建Ext的存储并设置远程代理(Url)及配置一些参数就可以。交互数据的格式有Json和XML。Json是首推的。而使用Ext来做界面,一个很大的习惯上的改变就是:很少用Html来做展现,除非布局,你一般都是在写Javascript,就像写C/S的代码一样。

我最近在为本站后台作完善工作。决定了使用Ext来做前端,使用Json来交换数据。关于Python的Json转换库,在网上找到功能相对好的是Cjson,由C语言编写,编译成Python的模块进行使用的。Cjson使用起来也很方便,一Encode一Decode,速度飞快并且提供错误捕捉。最爽的地方在于,Python的数据格式与Json的格式太相似了,用Python来构造Json的原型,太Cool了。

使用Ext做Ajax前端的好处还在于,透明的切换服务器的实现。前端只关心传过来的数据,其他一概不关心。

WYMeditor

WYMeditor。又一个RichText editor,我怎么说又呢?猛地看上去我以为又一个HtmlArea或者FCKeditor或者Tinymce。看到Demo和features才知道,这东西蛮有个性的。打算在本站使用一下的。Features:

  • 完全兼容XHTML strict + CSS
  • 没有Font,你不能对字体颜色、大小,字体对进调整,WYMeditor是基于CSS的
  • 被设计用来易于与你的应用相结合
  • 不需安装,100%的Javascript代码,无插件,无扩展
  • 很简单的Javascript代码,很易懂
  • 继续保持简单
  • 我们致力于测试友好的代码,保证新功能的稳定性及有效性
  • 图像、连接、表格支持
  • 通过CSS支持皮肤
  • 免费并且开源,完全适合你的需要

N小时后。

测评结果:

一、很固执,wymeditor.js一定要位于一个名叫wymeditor的文件夹下面,不然一律罢工,报错XmlHelper找不到,这个问题很怪异也很变态,花了我好多时间才找到原因。

二、提交时不更新TextArea的内容,要手动写程序或者在Submit的Button指定Class为wymupdate,我试过第二种方法,由于我的Button还需要使用Onclick方法,没戏。这样很变态。

三、指定CSS的时候,要按规则对CSS进行注释,偶笨,不得法,注释的CSS搞得整个Editor出错不能用。

总的来说,指导思想很好(What You See Is What You Mean),只是目前处于Beta阶段。我还是先使用最熟悉的FCK吧。等待Wymeditor的成熟!

Meta

关于本博客...

关于黑莓手机、apple、twitter、互联网、web2.0以及生活的碎言碎语。请在twitter上 follow我,欢迎同好者talk to me bbmyth AT gmail.com。博客Hosting在 webfaction。

赞助商链接

我看我听我读

最新评论

标签

python 空间 开发 计划 年假 工作 诗歌 音乐 西片 恐怖 惊变 django mysql rss 文艺片 太阳 彩色 电影 apache 部署 factcgi lighttpd javascript editor MYMeditor sql 日志 java hibernate orm 数据库 英伦 摇滚 原创 中间件 朋友 erlang 并发 函数式编程 旅游 云南 丽江 发呆 学习 编程 技术 lucene 全文搜索 中文分词 乐队 模板 分页 成功 google pagerank 中文 更新 个性化 秋天 互联网 web ext json ajax 事业 职业 读书 开源 香港 澳门 忧郁 冬天 compass dvd 广州 地下 暴力 美学 声音玩具 独立 备份 数据 琐事 博客 生活 体验 卖唱 接口 设计模式 图表 wiki moin 遇窃 air ria 需求 设计 信息 健康 感悟 人生 真诚 life jquery 杭州 灾害 2008 中国 灾难 哀悼日 jmesa grails flex flash 捐赠 scrum 软件过程 快速开发 plone cms nuexo zope 左小诅咒 demo prototpye AMF actionscript 汉诺塔 算法 递归 结婚 感情 opensource 网络 beautifulSoup 管理 大理 香格里拉 休假 鼻炎 许巍 感性 2009 随想 cpug 聚会 出差 北京 api 创业 商城 blackberry 手机 TD 交流 处事 为人 房子 经济 手机仿真 在线服务 嵌入式 海鲜 p2p easymule apple 技巧 thing gtd task gfw vpn 穿墙 代理 软件管理 翻译 mac 英语 caffeine 休眠 搬家 主机 prism firefox mozilla 免费 php codeigniter url blogspot mindmap mindnode htmlparse easyurl 产品 黑莓 rim 试手机 豆瓣 twitter 微博 杂记 时空 亲人 dabr webfaction host 快速查看 safari appale 桌面 snow 升级 leopard finder 权限 glims python主机 合租 ruby主机 快捷键 itunes 时间管理 原型 画图 招聘 hosting 写作 软件 家庭 广州技术沙龙 postgres 云计算 fuckgfw 内容审检 谷歌 chrome linux odbc database freetds R 统计 书签 浏览器 bookmark tinymce 文件管理 分享 忙碌 旅行 马来西亚 图维导图 freemind 工具 pinax develope shell dropbox barcamp

日志分类

友情链接

博客归档

PowerBy