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运行耗时操作的延时显示方法
Nov 19 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
Javascript之Math对象详解
Jun 07 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JavaScript DOM基础
2015/04/13 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python图片验证码生成代码
2016/07/02 Python
我就是这样学习Python中的列表
2019/06/02 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
家长对孩子评语
2014/01/30 职场文书
2014年化验员工作总结
2014/11/18 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
活动宣传稿范文
2015/07/23 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL