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编程语言的编码规范
Oct 21 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 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计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
js 判断 enter 事件
2009/02/12 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
Vue组件化通讯的实例代码
2017/06/23 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
python提示No module named images的解决方法
2014/09/29 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python中bisect的使用方法
2019/12/31 Python
Python-opencv 双线性插值实例
2020/01/17 Python
大专生的学习自我评价
2013/12/04 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
保护环境倡议书范文
2014/05/13 职场文书
关于运动会的口号
2014/06/07 职场文书
房产分割协议书范文
2014/11/21 职场文书
汽车车尾标语大全
2015/08/11 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis