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 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js查错流程归纳
May 04 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
微信小程序入门之指南针
Oct 22 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
jQuery select控制插件
2009/08/17 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
Vue实现简单分页器
2018/12/29 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
初学python数组的处理代码
2011/01/04 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
keras slice layer 层实现方式
2020/06/11 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
会议邀请函范文
2014/01/09 职场文书
优秀班主任申报材料
2014/12/16 职场文书
教师个人培训总结
2015/02/11 职场文书
初中军训感想
2015/08/07 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Android中View.post和Handler.post的关系
2022/06/05 Java/Android