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 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
几种tab切换详解
Feb 03 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
php命令行模式代码实例详解
2021/02/26 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
python difflib模块示例讲解
2017/09/13 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
详细分析Python collections工具库
2020/07/16 Python
python中time、datetime模块的使用
2020/12/14 Python
大学毕业自我鉴定范文
2014/02/03 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
项目合作意向书范本
2014/04/01 职场文书
工商管理本科生求职信
2014/07/13 职场文书
商务经理岗位职责
2014/08/03 职场文书
廉政承诺书
2015/01/19 职场文书
邀请函的格式
2015/01/30 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang