jquery与prototype框架的详细对比


Posted in Javascript onNovember 21, 2013

以前做界面是用jquery的,现在因为要用许多ajax效果,改用了rails自带的prototype

因为jquery用多了,换个框架也大同小异,不过细节上有很多不同。。。

1.dom加载方面:

jquery有dom ready方法,推迟js函数的绑定知道dom树完成(如果没有这个功能,一些element的事件函数之类的绑定可能会出错):

$(document).ready(function(){});

但是prototype是没有的。。。得自己找非官方的扩展,不方便,这个基本的功能,这么重要的功能,不知道为啥迟迟不加到核心库

2.path查找,dom定位方面

jquery的dom查找和css定位一致,用过就感觉非常方便,这是他的一大亮点和优点

$('.func #select_all').click(function()
$(this).parent('div').parent('div').find('li .checkbox input:checkbox')

prototype只有查找单个dom对象方便--$(id)

比较麻烦的是把单个和数组分开了,如果找一个路径下的许多对象

得$$('div .right_contact'),这种风格仍然是定位某一类型的对象

而不是用路径查找,这方面不如jquery方便和概念一致

3.函数,事件绑定
举个例子,把class为right_contact的div绑定click高亮事件,prototype写法是:

$$('div .right_contact').each(function(item){ 
item.observe('click', function(event){ 
new Effect.Highlight(item,{ duration: 2.0,startcolor: '#ffff99',endcolor: '#fffffff',restorecolor: '#fffffff' }); 
}); 
});

如果是jquery,简洁很多:

$('.right_contact').click(function(){   
$(this).toggleClass('hilight');
})

我用过很多框架,印象最深刻的是一个叫hge game engine的框架,封装了大量的底层细节和实现方法,然后他说:you could create everything from a simple puzzle to advanced multilayered platformer or strategy without even thinking of any non game logic code

优秀的框架应该是让人集中注意到业务逻辑上而不是技术特性,设计模式上这方面,jquery比prototype优秀,最典型的例子就是如果要鼠标点击触发函数,prototype搞个大而全的observe方法,然后去注册click事件
而jquery就有item.click函数。。。observe是能包容万象,不过jquery这种为最常用的事件特地创建专有函数的做法,更能让人集中注意力到业务逻辑上。。。

Javascript 相关文章推荐
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 #Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 #Javascript
探讨javascript是不是面向对象的语言
Nov 21 #Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 #Javascript
Javascript对象属性方法汇总
Nov 21 #Javascript
获得Javascript对象属性个数的示例代码
Nov 21 #Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 #Javascript
You might like
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP常用的三种设计模式
2017/02/17 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
Python的词法分析与语法分析
2013/05/18 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python删除某个字符
2018/03/19 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
优秀的2014年两会精神解读
2014/03/17 职场文书
党委班子剖析材料
2014/08/21 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers