`

prototype.js与jQuery对比

阅读更多
引用


引用
对于任意的一个HTML节点之后加入一个任意的标记

In Prototype:

new Insertion.After(’myId’, ‘Arbitrary HTML’);
In jQuery:

$(’#myId’).after(’Arbitrary HTML’);
看起来,jQuery的代码确实比prototype.js的代码更“人性化”一些。当然,从可读性来讲,两者的可读性都是非常出色的。这就是我需要学习的地方-良好的代码就是自注释的。

造成代码风格的这种差异,其实是两个framework的开发者不同的代码哲学造成的。对于prototype来说,非常类似Java的处理方式: 将一系列的功能封装到一个类之中,比如Math类。而对于jQuery来说,其哲学理念是将所有的HTML节点都视为一个Object,通过调用这个 Object上面不同的方法向这个Object发送不同的消息,来让Object自己实现不同的功能,产生不同的表现。

而这篇文章的作者认为jQuery哲学更优秀的地方就在于将一个html node与各种functionality有机的结合在一起,使代码更优雅,而实现这种结合的正式jQuery中的$()函数;请注意,这个$()与 prototype.js中的$()有着本质的区别,查看过两个framework的document之后就会发现,jQuery中的$()可以根据复杂 的传入参数来返回一个或者一组html node,而这些查询条件是如此的复杂,甚至连css selector与xpath都被纳入了被支持的范围;而prototype.js的$()就显得有些小儿科,它只能返回一个单独的html node。

正式这个$()的不同,prototype.js引入了$$()这样的css selector来 弥补起对html node query的不足,但是似乎效果甚微,因为jQuery的这种将object与functionality粘连的理念深植在framework之中,成为 了近乎语法的一部分,而prototype还是脱离不了将html node单独作为一种特别的”材料“来进行操作,从如下的代码就可以看出:

向一组元素加入一个css class(Prototype):

$$('.element').each(function(node) {Element.addClassName(node, 'className');}
向一组元素加入一个css class(jQuery):

$('.element').addClass('className');
从上面的例子就可以看出来,是代码的哲学左右的框架的使用规则,prototype只能笨拙的使用为array attch的一个.each方法来进行元素的迭代,从而完成为每个元素加入一个css class的工作,而jQuery处理的似乎就漂亮的多,也似乎更有人情味一些,这就叫做优雅。

当然,所谓的优雅,其实不一定就更被推崇,因为这属于技术上的一种极端。两者的performance我并没有比较过,但是估计差别不会很大,或者说这种用优雅换来的性能差别并没有达到需要考虑的数量级。

Wycats的声音还没落,EncyteMeida的另一篇Post就开始应战了,大声呼吁Wycats在misleading各位Developer,并且将Wycats数出来 的jQuery的优点都数落了一番,还像模像样的给出了例证:

谁说prototype.js没有这样的语法?

Element.addMethods({   insertionBefore: function(element, content) { new Insertion.Before(element, content); },   insertionAfter: function(element, content) { new Insertion.After(element, content); },   insertionTop:  function(element, content) { new Insertion.Top(element, content); },   insertionBottom: function(element, content) { new Insertion.Bottom(element, content); }  });  $("item-1").insertionBefore("<li>Sweet</li>");
谁说prototype.js没有auto looping?

$$('span').invoke("addClassName", 'omg');

甚至还数落了jQuery的.js文件短小精悍是使用字母表中的’a,b,c’等字母作为变量命名换来的等等……

真有意思,技术界整天都在展开宗教战争,就像当初Java Vs .Net一样,其实根本就不存在哪个更好哪个更强的说法,只是我们都在欣赏一次次技术大牛们的战争中慢慢成长起来,学会了更多的东西而已,希望技术界天天打仗!
分享到:
评论

相关推荐

    prototype.chm+jquery详解

    **Prototype与jQuery的对比** 1. **易用性**:jQuery以其简洁的语法和丰富的API赢得了开发者的心,而Prototype则相对较复杂。 2. **性能**:虽然两者在性能上都有优化,但jQuery在某些场景下表现更优。 3. **社区...

    prototype.js1.4版开发者手册

    - **与 jQuery 的对比**: Prototype.js 和 jQuery 都是流行的 JavaScript 库,它们在功能上有一定的重叠,但在设计哲学和使用方式上有所不同。例如,jQuery 更注重简洁性,而 Prototype.js 则更侧重于扩展 ...

    jquery与prototype框架的详细对比

    jQuery与Prototype框架详细对比分析: 1. DOM加载及ready方法: 在jQuery中,开发者可以利用$(document).ready(function(){});这一语法结构来确保在DOM完全加载后执行函数。这种机制对确保事件处理器正确绑定到DOM...

    jQueryAPI-100214.rar_prototype

    **三、jQuery与Prototype的对比** 1. **易用性**: jQuery以其简洁的API和链式调用,通常被认为比Prototype更容易上手。 2. **社区支持**: 相较于Prototype,jQuery拥有更大的社区和更多的插件,开发者可以找到更多...

    浅谈jQuery的应用.pdf

    jQuery像Ruby一样简洁快速灵活,与prototype(类似Java)形成对比。 2. jQuery特点:它是一个轻量级的脚本,最新版的JavaScript包只有大约20K大小;支持CSS1~CSS3和基本的XPath;是一个跨浏览器的框架,支持包括IE...

    JavaScript框架jQuery和ExtJS的对比研究.pdf

    "JavaScript框架jQuery和ExtJS的对比研究" 本文将对JavaScript框架jQuery和ExtJS进行对比研究,旨在帮助Web开发者选择合适的JavaScript框架。 JavaScript框架的重要性 随着Web 2.0时代的到来,Web应用程序越来越...

    jQuery框架prototype

    Prototype与jQuery的对比 虽然Prototype和jQuery都致力于简化JavaScript开发,但两者有其独特之处。Prototype更注重于语言层面的扩展,提供了许多核心的JavaScript增强;而jQuery则以选择器和链式操作闻名,对DOM...

    Jquery与Prototype混合用法对比

    在JavaScript的世界里,jQuery和Prototype都是非常流行的库,它们各自提供了丰富的功能来简化DOM操作和事件处理。然而,当这两种库在同一页面中同时使用时,会出现一个问题:它们都使用了"$"符号作为主要的选择器...

    JQuery in Action

    - jQuery与 Prototype、MooTools等其他JavaScript库的共存策略。 - jQuery与AngularJS、React等现代前端框架的配合使用。 4. **性能优化** - 减少DOM操作次数以提升性能。 - 使用事件代理提高事件处理效率。 -...

    浅谈JavaScript 库———jQuery, ExtJs 的对比研究

    ### 浅谈JavaScript库——jQuery与ExtJs的对比研究 #### 一、引言 随着Web 2.0和RIA(Rich Internet Applications)技术的普及,JavaScript作为一种前端开发的重要工具,逐渐占据了重要的地位。它不再仅仅是用于...

    15天学会jQuery

    3. jQuery与其他JavaScript库的对比:作者提到自己曾用过多种JavaScript库,包括Moo.fx、Scriptaculous、TW-SACK和Prototype,但最终对jQuery产生了浓厚的兴趣。通过对比,我们可以发现jQuery在编写简洁代码、快速...

    JQuery基础、选择器.docx

    **jQuery与其他JavaScript库的对比** 除了jQuery,还有YUI、Prototype、Mootools、Dojo 和 ExtJS等流行的JavaScript库。这些库各有特点,如: - **YUI**:由雅虎开发,提供丰富的交互组件和强大的功能。 - **...

    jquery入门培训文档

    - **与其他JavaScript库的对比**:与Prototype、YUI、Dojo和mooTools等库相比,jQuery不冲突于全局命名空间,学习曲线较平缓。 2. **jQuery开始前的准备** - **jQuery下载**:最新版本为1.4.2,可在官方网站下载...

    Jquery入门与提高.ppt

    在2008年,jQuery由John Resig发布,成为继Prototype之后的另一个杰出的JavaScript框架。它以Ruby的简洁风格与Java的复杂性形成了鲜明对比,使得JavaScript编程变得更加直观和高效。 **jQuery的核心特点** 1. **轻...

    jquery入门基础知识

    文档中给出的两个示例对比了使用传统 JavaScript 和 jQuery 来创建并设置 div 元素的不同之处: 1. **传统 JavaScript 方法**:通过 `document.createElement` 创建元素,并使用 `.style` 属性设置样式。这种方式...

    jQuery即学即用双色版(适合初学者)

    除了jQuery之外,还有其他一些知名的JavaScript库,如Prototype.js、MooTools等,但jQuery因其易用性和强大的功能,在前端开发领域占据了主导地位。 #### 1.4 jQuery应用示例 下面是一个简单的jQuery应用示例,...

Global site tag (gtag.js) - Google Analytics