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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
深入理解node.js http模块
Jan 24 Javascript
vue 注册组件的使用详解
May 05 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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制作静态网站的模板框架(四)
2006/10/09 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php中socket通信机制实例详解
2015/01/03 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python计算两个地址之间的距离方法
2018/06/09 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
浅谈python标准库--functools.partial
2019/03/13 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
大学生毕业求职的自我评价
2013/09/29 职场文书
中学生班主任评语
2014/01/30 职场文书
小区推广策划方案
2014/06/06 职场文书
空气环保标语
2014/06/12 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL