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写的实用看图工具实现代码
Jul 26 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python爬取哈尔滨天气信息
2018/07/14 Python
简单了解django orm中介模型
2019/07/30 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
python实现梯度下降法
2020/03/24 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python cookie反爬处理的实现
2020/11/01 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
MongoDB支持的索引类型
2022/04/11 MongoDB