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评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
Angular的MVC和作用域
Dec 26 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 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-fpm配置详解
2014/02/12 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
python正则表达式之作业计算器
2016/03/18 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python实现飞机大战项目
2020/03/11 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
补充协议书范本
2014/04/23 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
社区母亲节活动总结
2015/02/10 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技