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 解析多维的Json数据格式
Nov 02 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
图书管理程序(一)
2006/10/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
基于Jquery的简单&简陋Tabs插件代码
2010/02/09 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
浅谈js中的bind
2019/03/18 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
用js编写留言板
2020/03/17 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
小学师德标兵先进事迹材料
2014/05/25 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
特此通知格式
2015/04/27 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js