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 chosen动态设置值实例介绍
Aug 08 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
微信小程序实现多选功能
Nov 04 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
Python入门篇之数字
2014/10/20 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
浅谈Python的文件类型
2016/05/30 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
如何清空Session
2015/02/23 面试题
商场活动策划方案
2014/01/24 职场文书
商业活动邀请函
2014/02/04 职场文书
典型事迹材料范文
2014/12/29 职场文书
试用期辞职信范文
2015/03/02 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python