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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
Js的Array数组对象详解
Feb 22 Javascript
Javascript动画效果(1)
Oct 11 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
Vue数据双向绑定原理实例解析
May 15 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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python数据可视化实现多种图例代码详解
2020/07/14 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
经理管理专业自荐信范文
2013/12/31 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
小学教研工作制度
2014/01/15 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
小学学校评估方案
2014/06/08 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
九年级英语教学反思
2016/02/15 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS
全网非常详细的pytest配置文件
2022/07/15 Python