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 笔记二 Array和Date对象方法
May 22 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 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实现通过ftp上传文件
2015/06/19 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
对比分析json及XML
2014/11/28 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
internal修饰符起什么作用
2013/12/16 面试题
办理护照介绍信
2014/01/16 职场文书
大学学风建设方案
2014/05/04 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
新课培训心得体会
2014/09/03 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2015教师年度考核评语
2015/03/25 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
学生会自荐信
2019/05/16 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫