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游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
JS实现音量控制拖动
Jan 15 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获得数组交集与差集的方法
2015/06/10 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python机器学习之神经网络(二)
2017/12/20 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python实现Linux监控的方法
2019/05/16 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
Python PyQt5整理介绍
2020/04/01 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
电影红河谷观后感
2015/06/11 职场文书
换届选举主持词
2015/07/03 职场文书
员工安全责任协议书
2016/03/22 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL