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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
vue写一个组件
Apr 09 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
Webpack3+React16代码分割的实现
Mar 03 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
Smarty模板语法详解
2019/07/20 PHP
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python获取邮件地址的方法
2015/07/10 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
摄影专业毕业生求职信
2014/03/13 职场文书
品质主管岗位职责
2014/03/16 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
支行行长岗位职责
2015/02/15 职场文书
nginx配置之并发频次限制
2022/04/18 Servers
Python自动化实战之接口请求的实现
2022/05/30 Python