jquery与prototype框架的详细对比

以前做界面是用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这种为最常用的事件特地创建专有函数的做法，更能让人集中注意力到业务逻辑上。。。

赞 (0)

相关推荐

  • JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框

  • 滚动经典最新话题[prototype框架]下编写

    前天见到sin100看到的那个日本网站的滚动,挖掘后原来是使用Ajax读取xml后显示出来的. 就弄了这个滚动经典最新话题的供朋友参考参考. 范例使用了prototype.js的ajax轻便型框架. 因为远程调用了 prototype.js 这个文件,测试的朋友请耐心等候一下下. 经典不允许远程调用别的站点的js文件,所以还请多一部操作,复制到本地运行查看结果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//

  • prototype框架中美元符号$用法分析

    本文实例讲述了prototype框架中美元符号$用法.分享给大家供大家参考,具体如下: prototype是实现面向对象的一个重要工具,是javascript的一个不错的框架. 用jquery的人都知道,jquery中也有$美元符号,prototype中呢,也有$,他们有什么区别呢. 1.prototype中$()的用法 prototype写法 $("test") 或者 $$("#test"), 他相当于js中document.getElementById(&quo

  • Prototype框架详解

    这里所说的"Prototype"不是JavaScript编程中的原型("prototype"),而是由"Sam Stephenson"写的一个JavaScript类库.这个构思奇妙,而且兼容标准的类库,能帮助程序员轻松建立有高度互动的"web2.0"特性的富客户端页面. •很多人初次接触Prototype,都是从其"$"系列函数开始的,这些类似于桌面应用程序的快捷方式,是Prototype框架中使用频率最高

  • jquery与prototype框架的详细对比

    以前做界面是用jquery的,现在因为要用许多ajax效果,改用了rails自带的prototype 因为jquery用多了,换个框架也大同小异,不过细节上有很多不同... 1.dom加载方面: jquery有dom ready方法,推迟js函数的绑定知道dom树完成(如果没有这个功能,一些element的事件函数之类的绑定可能会出错): $(document).ready(function(){}); 但是prototype是没有的...得自己找非官方的扩展,不方便,这个基本的功能,这么重要的

  • laravel框架与其他框架的详细对比

    优点: 1.代码比较明白易懂,跟英语句子差不多,关键词就是函数,举个例子,获取数据库中某个表的所有数据: $article=new Article; $articles=$article->all(); //这样就得到了articles表所有记录的所有字段: $count = $article->where('class_id','=', 1)->count(); //是不是一看就明白了意思?查找分类id为1的记录,并计算出个数. 这样的例子太多,举例就举这两个. 2.文档非常丰富,社区

  • Jquery与Prototype混合用法对比

    但问题来了,由于jQuery以及prototype都使用了美元符函数"$"作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用. 不过很快,有很多人给出了解决方案,如比较流行的方案是这样的: 复制代码 代码如下: <script src="http://jquery.com/src/latest/"></script> <script type="text/javascript">

  • 找到了一篇jQuery与Prototype并存的冲突的解决方法

    以前好像在哪里看到过说jQuery与prototype存在冲突,但一直没在意.今天把自己用jquery框架写好的消息提示框特效放到公司原来的系统发现所有的消息提示效果都罢工了! 汗了半天还是没有发现原因,突然想到jquery与prototype的冲突问题,这才发现公司原来的系统很多页面都调用了prototype框架.知道了原因就想办法解决吧,总不至于让我脱离jquery重新写一遍吧,去网上狂搜了一番终于找到了一些解决办法,这就是: 1.将jquery.js放到prototype.js后面(这个是

  • jquery.form.js框架实现文件上传功能案例解析（springmvc）

    jquery.form.js框架实现文件上传功能案例解析（springmvc）

    上一篇 Bootstrap自定义文件上传下载样式(http://www.jb51.net/article/85156.htm)已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能.现在我结合自己的实际工作给大家分享一下. 使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jquery的ajax方法与jquery.form.js中的ajaxSu

  • QUnit jQuery的TDD框架

    QUnit jQuery的TDD框架

    在讨论jQuery TDD之前,我们先来了解下什么才是一个标准的TDD框架.作为标准的TDD框架,必须满足这么几个要求: 1. 即使测试脚本出错了也要能继续运行接下来的脚本 2. 能够不依赖被测试代码写测试用例,即使代码没有实现也可以先写测试用例 3. 能够显示详细的错误信息和位置 4. 能够统计通过和未通过的用例的数量 5. 有专门的可视化界面用于统计和跟踪测试用例 6. 易于上手,通过一些简单的指导就可以马上开始写测试代码. 以上这些要求QUnit都做到了, 这也是我推荐QUnit的原因.

  • springboot整合jquery和bootstrap框架过程图解

    这篇文章主要介绍了springboot整合jquery和bootstrap框架过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.4.1</version> </dependency>

  • php7和php5的详细对比

    PHP7 PHP7正式发布到现在已经一年半了,刚出道就号称比旧版本快了几倍,各种开源框架或系统运行在PHP7上速度效率提高了几倍,反正不管是媒体还是开发者都在煽风点火,不,应该是赞不绝口. 一般手机系统升级我是跑最后的,因为不愿意踩坑,毕竟iOS和Android这种系统都会出现bug,何况世界上被人黑的最多的语言. 今日时机已到,看看PHP7有没有传说的那么王炸. 安装两个PHP版本 http://php.net/ 已经有最新PHP7的最新版本,大家可自行下载. 为了测试PHP5和PHP7(PH

  • 详细对比Ember.js和Vue.js

    详细对比Ember.js和Vue.js

    目录 概述 为什么要选择框架? Vue.js Ember.js Ember.js Vue.js对比 总结 概述 JavaScript最初是为Web应用程序创建的.但是随着前端技术的发展,大多数开发人员更喜欢使用基于JavaScript的框架.它简化了你的代码以及使你能完成更多全栈工作,您几乎可以在任何框架中使用JavaScript. 使用什么类型的框架决定了创建应用程序的便捷程度.因此,您必须慎重选择.在已经足够复杂的前端环境里,其中两个框架脱颖而出.我们会在本文中对Ember.js和Vue.j

随机推荐