所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。 在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组 件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意， 你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规 范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或 者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出 些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多 共存的技术组成，就像现在。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• XmlHttpRequest的串行异步
• RIA特别专题和Flash开发平台工具下载资源发布
• Ajax跨域访问解决方案
• 24 个漂亮的个性化 HTML 表单技术
• 10个绝妙的HTML5，CSS和Javascript示例
• 10个基于 JavaScript 的 WYSIWYG 编辑器
• 10个关于Ajax的IT人需要知道的事情
• 10个Google 推动的 AJAX 库 API

Feed enhanced by Better Feed from Ozh

1. jQuery: The Write Less, Do More, JavaScript Library

jQuery 是一个很新的 JavaScript 库，它的口号是“几行代码，能干大事”（Write Less, Do More），它是拥有最多插件和扩展的 JavaScript 库，以下是 jQuery 现状：

• 当前版本： 1.3.2
• 文件尺寸：压缩后最小19KB，未压缩为120K。
• 作者： John Resig
• 拥有19种语言的教程: 教程总计183种。
• 著名用户： 超过1000个
• 插件: 3493
• 易学
• 对设计师来说非常易学，使用 CSS 语法
• 拥有大量有趣的扩展
• 拥有非常出色的社区，可能是最大的
• 被数以百万的站点使用，包括诸如 Google, Dell, CBS, NBC, DIGG, Bank of America, Wordpress, Drupal, Mozilla 等著名站点。

2. MooTools – a compact javascript framework

MooTools 是一个使用 MIT 许可的开源项目，意味着你可以在任一场合使用或对它就行修改。

• 当前版本: 1.2.3
• 未压缩尺寸: 95 KB (客户端) ，22 KB (服务器端)
• 作者: Valerio Proietti
• 著名用户: w3c, cnet, bing, …
• 官方站上的插件数目: 4
• 拥有更好的面向对象结构
• 它的动画效果更平滑
• 语法及对象句柄更富逻辑

3. Prototype: Easy Ajax and DOM manipulation for dynamic web applications

被一些大型媒体公司和组织使用，Protorype 是一个很独特的 JavaScript 库，逐渐成为 Web 引用开发者的代码基础，随着最新的 1.6.1 版本的推出，Protorype 在性能，用户自定义事件以及同现代浏览器兼容方面越来越完善。

• 最新版本: 1.6.1
• 未压缩尺寸: 136 KB (大约5000行代码)
• 作者: Sam Stephenson
• 著名用户: NASA, CNN, NBC, …
• 插件数目: 150+
• 更适用于大型 Web 程序

4. Dojo Toolkit: great experiences for everyone

Dojo 的内核小巧，快，精深，可用来创建反应灵敏的 Web 程序，拥有很出色的 UI 工具，在可访问性，本地化方面也做得很好。

• 最新版本: 1.4 Beta
• 未压缩尺寸: 26 KB (约5000行代码)
• 开发组织: Dojo Foundation
• 著名用户: AOL, IBM, Sun, …
• 支持客户端数据存储
• 支持服务器端数据存储
• 异步通讯

5. script.aculo.us: easy-to-use, cross-browser user interface JavaScript libraries

script.aculo.us 是一个开源 JavaScript 库，适用于创建视觉效果和 UI 行为，最新版本拥有一些新功能，如创建加载进程，Windows Media 和 Real Media 播放器检查等。

• 最新版本: 1.8.3 (8 October, 2009)
• 未压缩尺寸: 197 KB (包含 Prototype 和 测试页)
• 作者: Thomas Fuchs
• 著名用户: Gucci, Feedburner, Ruby on Rails, …
• Documentation wiki & Usage （文档）
• script.aculo.us 是对 Prototype 的扩展，增加了视觉效果，UI 控制等功能。

6. ExtJS: Cross-Browser Rich Internet Application Framework

ExtJS 是一个很出色的跨浏览器 JavaScript 框架，可以用来创建富 Web 应用，支持所有现代浏览器。拥有大量插件和扩展。

• 最新版本: 3.0 (6th July, 2009)
• 压缩后尺寸: 197 KB (包含 Prototype 和测试页)
• 作者: Jack Slocum
• 著名用户: Gucci, Feedburner, Ruby on Rails, …
• Download | Samples & Demos | API Documentation
• 拥有很出色的部件和技术支持

7. UIZE: supporting widgets, AJAX, DOM, templates, and more

UIZE 的一些现状：

- 一个开源 JavaScript 框架
- 很容易更换 CSS 皮肤
- 大量内置饰件
- 令人目眩的效果和强大的功能

• 压缩后的尺寸: 4.47 MB
• 作者: Chris van Rensburg

8. YUI Library: is proven, scalable, fast, and robust

YUI 是本列表中规模最宏大的 JavaScript 库，它拥有数不清的强大功能，插件以及扩展，当然要掌握它也需要很长时间。

• 最新版本: 3 (September 2009)
• 整个开发包尺寸: 5.7 MB (包括源代码，调试文件，示例等)
• 开发公司: Yahoo! Developer Network
• 著名用户: LinkedIn, Wikia, NewsVine, …

9. Archetype

Archetype 现状：

• 最新版本: 0.10.0 (September 2009)
• 尺寸: 2.14 MB
• 作者: Temsa & Swiip
• 用户: GifTeer, Meteo France, …

10. qooxdoo: the new era of web development

qooxdoo 是什么？是一个面向对象 JavaScript 库，包含跨平台开发工具链，顶级 GUI 工具以及高级客户端服务器通讯层，它是一个基于 LGPL/EPL 许可的开源项目：

• 最新版本: 0.8 (September 2009)
• 尺寸: 24 MB
• 核心开发者: 1&1 Internet AG
• Download | Samples & Demos | Documentation
• 完整的 GUI 工具包
• 支持对象间的拖放操作

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 并发下载javascript
• 常用JS验证函数总结

Feed enhanced by Better Feed from Ozh

声明

我是个MooTools的开发人员。我也专注於MooTools这个framework。我的部落格是有关MooTools。我写过MooTools的线上文件以及一本有关MooTools的书。很明显的我的立场是有一点偏颇的。我也必须说明我并不常用jQuery。如果你是个jQuery的开发员，同时看到我文章裡任何谬误之处，请联络我并不吝给予指教错误之处。我的目的是让文章正确且有所助益而非去推销特定的framework。

目的

透过我的说明，让大家明白这两个frameworks之间的差异进而能帮助大家做出一个选择。我首先要说的是，两个frameworks都是很好的选择，你并不会选到一个糟糕的framework。两者各有其强项与弱项，但是都是很棒的。除此之外还有很多也很优秀的frameworks值得考虑，如Dojo,Prototype, YUI, Ext 等等的。这些选择基本上也取决於自己的习惯跟需要完成甚麼样的东西而定。这篇文章的重点在於MooTools跟jQuery之间的比较，因為我看到越来越 多的人在这两者之间犹豫不决著。最后我要声明的是，我并不是想要说服谁谁谁从某个framework转换到另一个，这两个frameworks其实有很多 有趣的地方值得我们学习。你可以从这个公告看到我写这篇文章的由来。

内容

• 标题说明一切
• 学习曲线与社群
• JavaScript过人之处
  • 不只是DOM
  • JavaScript的继承
  • 自我参照
• MooTools把JavaScirpt变得更有趣
• jQuery把DOM变得更有趣
• 你行的我比你更行
• MooTools让你想怎样就怎样
• 连续技(Chaining)的设计模式
• jQuery程式的重复利用
• MooTools程式的重复利用
  • MooTools与继承
  • 延伸与实作(Extending and Implementing)
• 抉择
• 讨论

统计

资料来源: jquery.com, mootools.net, 与 wikipedia.com.

标题说明一切

如果你去jQuery的网站看，它最上面的标语就写著：

jQuery是个简洁快速的JavaScript函式库，能透过简化HTML的操作、事件的处理、动画效果以及Ajax互动来加速网页开发。jQuery是一个可以改变你写JavaScript方式的函式库。

…然后如果你到了MooTools的网站，你也可以找到这段话：

MooTools是个精简、模组化同时也物件导向的JavaScript框架，设计给中等与进阶的JavaScript开发员使用。透过其优美、详细而条理分明的API，可以让您写出强大、富有弹性且跨瀏览器的程式。

我想这就说明了全部了。如果你问我(因為你正在读这篇文章，所以我假设你会问囉)：重点不在於哪个比较好，哪个比较差，而是在於这两者的特性之间，该如何取捨衡量？这两个框架(frameworks)试图要做的事情并不相同，在功能上它们或有重叠但目标并非一致。

jQuery的那段叙述讲的是关於HTML、事件、动画、Ajax与网页开发，MooTools那段说的是有关物件导向、强大且弹性的程式架构。jQuery要改变你写JavaScript的方式，而MooTools则是為了中高阶JavaScript开发员而设计。

这其中值得思考的是关於框架与工具包(framework vs. toolkit)的概念差异。MooTools是一个用JavaScript原本应有的方式来写JavaScript的框架(framework)。其立意是实作一个跟JavaScript非常相似的API并且针对各个部分加以强化，而不只是针对DOM而已。jQuery则比较像是包好了很多很方便的函式在一个工具包裡(toolkit)，这个自成一个体系的工具包让DOM的操作变得更简单易用。而DOM刚好就是大多数的人写JavaScript时花最多时间的地方，所以在大多数的情况下，jQuery就是你最好的选择。

大部分你用MooTools所写的程式还是跟JavaScript很像，如果你对JavaScript这个程式并不是很感兴趣，那麼学 MooTools对你来说就会是很讨厌的事情。如果你对JavaScript有兴趣，也想知道它哪裡有趣、强大而多样，那麼我个人认為MooTools是 个较好的选择。

学习曲线与社群

首先，jQuery是非常非常容易学会的。它的撰写风格如同口语般几乎不像个程式语言。如果你要的就是快速搞定又不用刻意学习JavaScript 的话，jQuery可能对你而言是较好的选择，MooTools并不具备这些好处。我必须承认如果你是个JavaScript新手，MooTools会有 点难上手。加上有很多现成的资源或教学可以帮助你学会jQuery，至少比MooTools多。

如果你比较看看jQUery(jQuery的讨论版)跟MooTools的社群(irc, mailing list)，你马上就会发现：一) jQuery的社群资源与数量远大於MooTools(我认為是因為之前说的那个原因易学以及…)。二) 她们比较积极推广。如果你用使用的人数、Google搜寻的次数以及卖出的书量来衡量jQuery与MooTools，你会看到jQuery是遥遥领先的。

為了要完整说明為何你可以考虑用MooTools的原因，我必须先说一下这两个frameworks在做什麼事情。最终你会选择哪个framework还是取决於你想要达成什麼目的以及你想用什麼方式写程式(甚至关乎你是否喜欢程式，或至少喜欢JavaScript)。

JavaScript过人之处

抉择的过程裡，你得先问自己想要用JavaScript来做什麼。我们可以先想想纯JavaScript的情况，不使用任何的framework；就是传统的JavaScript程式。JavaScript提供一些原生的物件像是 Strings, Numbers, Functions, Arrays, Dates, Regular Expressions, 等等，同时也提供了一个继承的模型 – 一个有点难懂的模型叫做原型继承(prototypal inheritance， 我稍后会作说明)。这些基本架构跟继承概念就是足以支撑著各种程式语言的基本要素，而且这些要素跟瀏览器、网页、CSS或HTML都没有任何关联。所以其 实JavaScript是可以用来写出各种程式的，不管是井字游戏、西洋棋、相片编辑程式或是个网站伺服器。只是刚好百分之九十九的JavaScript 都在瀏览器上执行，所以我们通常就把它当作是瀏览器专用的程式了。

绝大部分的JS都应用在瀏览器跟DOM，但其实JavaScript是个非常健全且多样的程式语言，如果能够理解这点的话，会有助於你了解MooTools跟jQuery之间的差异。

不只是DOM

如果你认為JavaScript做的事情就是”指定页面中的某个东西，然后对它做一些动作”，那jQuery可能就是最好的选择了。jQuery提 供了一个非常好的架构让你用几乎不像是程式语言的方式去描述页面中的行為。你还是可以用JavaScript的其他功能来写出你想要的程式，但是如果你的 重点在DOM – 动态改变CSS、动画效果、透过AJAX来取得内容等等，你需要写的大部分程式都可以用Jquery完成，其餘未包括的部份就会是原本 JavaScript的写作方式。此外jQuery也提供一些非DOM相关的程式，例如绕阵列迴圈(iterating)的方法 – $.each(array, fn) – 或是用$.trim(str) 除掉字串前后空白的函式。这些公用程式并没有很多，不过那也没差，因為大部分情况下，如果你只是从DOM裡面指定了几样东西，绕了迴圈，变更了某些细节(插入HTML、改变样式或是定义一个滑鼠点击的事件等等)，其实并不需要那麼多公用程式。

不过如果你用比较广泛的角度来看的话，jQuery并没有把心思放在DOM以外的事物上。这也是它如此易学的原因之一，但同时也限制了从其他方面来帮助你撰写JavaScript。它除了扮演著一个完整的DOM程式语言之外，便再无二心，没有在继承物件概念或是提供基本型别的公用程式上多下功夫，因為它本来就没这个必要。如果你想在字串、时间、正规表示式、阵列或函式之间周旋的话，可以。只不过那并非jQuery的使命，JavaScriprt一直都在那，随时要用都可以的。jQuery让你能够轻鬆驾驭DOM，但其他的东西就不是它的范畴了。

这点跟MooTools有很大的不同。MooTools把范畴放大到整个JavaScript语言，而不单单只是针对DOM而已(据我所 知，MooTools也提供跟jQuery相同的功能，但是用很不一样的方法写的)。如果jQuery让你能对DOM為所欲為，MooTools则是让你 能够对整个JavaScript為所欲為，这也是它学习难度较高的原因之一。

JavaScript的继承

JavaScript裡面有些很棒的东西。首先，它是个函数程式语言。这代表著function被视為高阶物件，像其他物件 – 如字串或数字般可以被互相传递。当你用这种方式来写程式，很多模式跟方法可以藉由这个设计理念获得最好的结果。两者之间的差异：

for (var i = 0; i < myArray.length; i++) { /* do stuff */ }

以及

myArray.forEach(function(item, index) { /* do stuff */ });

JavaScript有一种 继承模型，在程式语言的世界裡，不能说独特但也算是相当罕见。JavaScript是用 原型继承的 方式来做，而非类别(class)在延伸次类别的继承方式，这表示物件是直接继承另一个物件的原型。当你参照一个物件的property，程式会先从物件 本身寻找是否有此property，如果没有的话，就去找该物件的父亲。这就是一个阵列可以有method的原理。当你写了：

[1,2,3].forEach(function(item) { alert(item) }); //this alerts 1 then 2 then 3

“forEach“这个方法并不存在於你所定义的阵列([1,2,3])裡面，它存在於所有阵列的原型中。当你参照forEach这个方法时，JavaScript会在你定义的阵列中去找，如果没有的找到的话就去阵列的原型去找。这表示说，并非所有阵列都在记忆体中有forEach这个方法，它只要在阵列的原型裡放一次就可以了。这种方式非常有效率也非常非常强大。(补充：MooTools裡面forEach的对应method是each)

自我参照

JavaScript有一个特别的字眼：”this”。我很难在这边简单的定义甚麼叫this，但是一般来说this就是指目前method的所有 者。this允许物件可以在其所属方法运行时参照到物件自己本身，也正是this存在的目的。当你產生很多子物件然后又有很多父物件的实体 (instances)时，这就变得很重要了，否则还能甚麼其他方式来参照自己？当一个方法(method)原本属於父物件而非子物件，this这个关键 字就能让实体们都能参照到它们自身。(这裡有this更完整的解释，还有Mozilla的)

this可以让那些继承而来的子物件参照到它们自身，但是有时候也可能需要用this参照到其它的东西，你就要指定一个不同的this到方法(method)裡，这就叫做榜定(binding)。阵列的each方法的第二个参数可以让你指定一个物件做榜定(binding)。可以参考一下这个范例传了一个不一样的 “this”：

var ninja = {
    weapons: ['katana', 'throwing stars', 'exploding palm technique'],
    log: function(message) {
        console.log(message);
    },
    logInventory: function() {
        this.weapons.each(function(weapon) {
			//we want "this" to point to ninja...
            this.log('this ninja can kill with its ' + weapon);
        }, this); //so we pass "this" (which is ninja) to Array.each
    }
};
ninja.logInventory();
//this ninja can kill with its katana
//this ninja can kill with its throwing stars
//this ninja can kill with its exploding palm technique

上面的范例裡面，我们把ninja榜定(就是在logInventory裡面的this)在传给阵列的那个方法(method)，所以在each裡面我们可以参照到ninja的log的属性。如果我们没这麼做的话，this得到的参照就会是window了。

这些只是几个范例，用来说明JavaScript提供了强大多样的继承、自我参照、榜定跟原型特性。不幸的是，原本的JavaScript并没有把 这些强大的特点凸显出来，这也是MooTools之所以发展的起头。MooTools把这几种类型的模式变得简单也更和善。最终你会写出更為抽象的程式， 长远来看这会是好事情 – 也会是很棒的程式。去理解这些模式的价值以及如何正确地使用它们是很需要花费心力的，但是从好的方面来看，你所写的程式会具备高度的重复使用性也会非常容 易维护。这些好处我等等会稍做说明。

MooTools把JavaScirpt变得更有趣

因為MooTools专注在增加JavaScriptAPI的稳定性与连贯性，所以在”改变你写JavaScript的方式”这件事情上就没有太多 著墨，整体来看它却是降低了JavaScript使用上的不便。MooTools是JavaScript语言的扩充，也试著把JavaScript导向原 本应走的路上。整个架构的核心有重要的一部份是在加强Function、Stirng、Array、Number、Element跟其他的原型物件。另一 个重点是它提供了一个函数叫类别(Class)。

现在，对人们来说，Class看起来像是要重建一个像Java或是C++那种正统的继承式模型，其实并不是那麼一回事。这个Classn 所做的是帮我们更简单地存取JavaScript的原型继承模型并且更加凸显它的优势。我要说明的是这概念并不是MooTools才有的(其他的一些 frameworks也有提供类似的功能)。但是jQueryy并没有这些的设计概念，jQuery没有所谓继承的系统也没有任何加强原生物件 (Function、String等)的架构。这并非jQuery的缺陷，因為作者其实可以轻而易举的增加这些东西进来；而是他们是以不同的目标来设计这 个工具包(toolkit)套件。MooTools的目的是让JavaScript变的有趣，而jQuery是要把DOM变得有趣，所以它的设计者设定了 这样的范畴来达到目的。

jQuery把DOM变得更有趣

这也是為什麼jQuery比较有亲和力，它并没有要求你把JavaScript从裡到外都搞懂，它不会把你丢到底层去跟原型继承架构、榜定、”this”和原生原型(native prototypes)打交道。当你开始从官网接触jQuery，你可以看到它的第一个范例：

window.onload = function() {
    alert("welcome");
}

and here’s the third:

$(document).ready(function() {
    $("a").click(function(event) {
        alert("Thanks for visiting!");
    });
});

如果你读过MooTools的书或是教学(我写的那两个)，裡面开头的章节就很不同。如果要学习怎麼使用MooTools的话，你必须从一些基本的概念开始看起，例如Class，虽然你也可以略过直接开始学有关特效或是DOM的部分。而且我也必须承认：如果你是写程式的新手或你想要快速架站，而非得要先了解JavaScript的一些细节，可能对你来说jQuery会比较友善的多。

反之，如果你想要好好学习JavaScript这个语言，MooTools是一个很好的管道。MooTools实做了很多JavaScript以后会有的功能(很多在Native的方法正是JavaScript 1.8或更新版本会有的)。如果你是老手了，特别是熟悉物件导向以及函数式程式语言(functional programming)的人，MooTools有很多令人振奋且惊艷的设计模式(design patterns)。

你行的我比你更行

如果你看一下jQuery所提供的功能，你会发现通常MooTools也有提供相同的功能。或如果你看一下MooTools的功能，你会发现 jQuery通常没办法达到相同的目的，因為jQuery专注的是DOM相关功能，MooTools提供的功能则涵盖的层面比jQuery还广些。不过 jQuery也不会阻碍你去实做那些MooTools才能达到的功能。举例来说，jQuery并没有提供继承的架构，但是没关係，如果你想要的话还是可以 结合MooTools 的Class来达到(或自己写一个)。甚至也有人写了一个继承的jQuery外掛(我没有用过不过我想它应该也能提供相同的功能)。

如果我们回头看一下上面jQuery的那个范例：

$(document).ready(function() {
    $("a").click(function(event) {
        alert("Thanks for visiting!");
    });
});

如果我们要转成MooTools的语法，就会变成：

window.addEvent('domready', function() {
    $$('a').addEvent('click', function(event) {
        alert('Thanks for visiting!');
    });
});

非常相似吧？

或是这个比较复杂的jQuery范例：

$(document).ready(function() {
    $("#orderedlist li:last").hover(function() {
        $(this).addClass("green");
    },
    function() {
        $(this).removeClass("green");
    });
});

and in MooTools:

window.addEvent('domready',function() {
    $$('#orderedlist li:last-child').addEvents({
        mouseenter: function() {
            this.addClass('green');
        },
        mouseleave: function() {
            this.removeClass('green');
        }
    });
});

也是非常类似。我想说明的是，MooTools的版本语法更為清楚，不过也因此较為累赘。MooTools的程式阅读很清楚可以知道我们增加了两个events，一个是滑鼠移入物件时的，一个是滑鼠离开物件的。而jQuery则较為简洁，它的hover方法一次接收两个functions，第一个是滑鼠移入物件时用，第二个是滑鼠离开物件时用。我个人比较偏好MooTools程式的可阅读性，不过那是主观的看法。

我有时候会觉得jQuery的语法过於艰涩隐晦，一个方法(method)裡可接收两个function这回事我光是用看的的话，并非那麼容易理 解。由於我对MooTools很熟悉，这说法多少有点不公平，因為读MooTools的程式对我来说很简单。不过MooTools方法与类别的命名方式很 有名符其实的味道，这点我很欣赏。MooTools几乎都是用动词来命名，留下一丝丝疑惑是对”甚麼”做动作。当然在撰写每一种程式语言时，你都需要去看 文件来查语法，我意思不是说MooTools就不用，我只是觉得MooTools的API的命名逻辑比较连贯一致。

MooTools让你想怎样就怎样

可是如果你比较喜欢jQuery式的语法怎麼办？MooTools也是有这种能力把程式变得更合你胃口，如果我们想在MooTools裡面实作jQuery的hover，我们只要加上这段：

Element.implement({
    hover : function(enter,leave){
       return this.addEvents({ mouseenter : enter, mouseleave : leave });
    }
});

//然后你就可以用跟jQuery相同的语法：
$$('#orderlist li:last').hover(function(){
   this.addClass('green');
},
function(){
   this.removeClass('green');
});

实际上确实有MooTools的plug-ins在帮你完成这些动作：jQuery syntax for MooTools。 MooTools著重在延伸能力上，这意味著你可以做任何你想做的事情，这是jQuery没办法办到的。MooTools可以模仿jQuery，但是 jQuery没办法模仿MooTools，如果你想要用类别或是延伸的原生原型物件等等MooTools的功能，你就得自己手动去写额外的程式。

连续技(Chaining)的设计模式

我们来试试别的东西看看，这边有一些jQuery的范例(从jQuery教学裡面擷取的)：

$(document).ready(function() {
    $('#faq').find('dd').hide().end().find('dt').click(function() {
        $(this).next().slideToggle();
    });
});

我个人并不是很推崇这个范例的语法，光是看上面那段程式码我很难立刻了解在干嘛。最明显的部分是那个.end在做甚麼以及后面连接的.find是啥，跟.end又 有甚麼关联。jQuery文件可以找到关於.end很清楚的解说(重设目前选择的物件(selector)，也就是#faq)，不过我是觉得满怪的。当我 在用jQuery的时候，我自己常常不太能确定一个方法(method)会回传甚麼东西给我。不过很明显的，这并没有困扰到大家，因為jQuery有著一 大票的爱用者，所以我也把这个归类為个人偏好之一。

我们来看看上面那段程式码如果在MooTools裡面会怎麼写：

window.addEvent('domready', function() {
    var faq = $('faq');
    faq.getElements('dd').hide();
    faq.getElements('dt').addEvent('click', function() {
        this.getNext().slide('toggle');
    });
});

当然，MooTools还是比较累赘些，但是意思就更明确。同时也可以看到，jQuery用.end来回传#faq这个物件，而MooTools的设计模式是把#faq放到一个变数裡。当然MooTools也可以写出jQuery那样的连续技(Chaining)：

item.getElements('input[type=checkbox]')
	.filter(function(box) {
		return box.checked != checked;
	})
	.set('checked', checked)
	.getParent()[(checked) ? 'addClass' : 'removeClass']('checked')
	.fireEvent((checked) ? 'check' : 'uncheck');

不过说真的，像这样把一堆程式码跟判断塞到一个domready宣告裡，不管是用哪一种framework都不是个很好的做法。如果把这些逻辑都封装成可以重复利用的片段会好很多。

jQuery程式的重复利用

当你在执行一个网站专案时，可重复利用的程式码是很诱人的。只需要写一点点程式就可以选取所需的DOM，然后隐藏掉某些、变更几个属性以及增加几个 滑鼠的event就搞定一切。这种开发方式会非常的有效率、非常的快。不过把你的程式码都写在domready裡面的问题在於：最后你会在不同地方写了一 堆在做同样事情的程式码。如果我们用上面那个FAQ的范例来看，我们其实可以轻易地套用相同的程式码套在不同的页面中类似的结构。难道我们每次遇到这种结 构时都要重复做一次相同的事情吗？

有个很简单的方法就可以把它变成可重复利用，我们只要把这段程式码包装起来然后给个参数让它接收。在jQuery裡面可能会长这样：

function faq(container, terms, definitions) {
    $(container).find(terms).hide().end().find(definitions).click(function() {
        $(this).next().slideToggle();
    });
};
$(document).ready(function() {
    faq('#faq', 'dd', 'dt');
});

这样一来程式会好很多，有两个很重要的原因：

1. 如果哪天我们得要变更这个FAQ清单的运作方式(例如我们要加上点击次数追踪，以便在记录档中计算或是我们可能改成要透过AJAX来取得清单资料)，我们只需要修改faq这个方法，在所有套用过的页面都可以一次更新完毕。又或者是jQuery有个新的大改版，我们只需要把faq方法更新就好，不需要去每个页面逐一修改。我称之為把程式的资源最佳化，透过这样的作法，我的应用程式中的其他一般程式码尽可能地越少越好，我就能很轻鬆的除错、更新整个framework、增加新功能或是修改原有的功能。
2. 第二个理由是程式码会变少。随著相同的方法(method)被一再套用，我都不需做重复的工作，这在任何的程式语言裡面都是非常有价值的。而且我的网站访客也可以节省下载那些程式的时间。

jQuery其实有在针对可重复使用的”wigdets”上做了一些调整。他们鼓励人们使用jQuery plug-ins，而不是用上面那个范例(其实满粗糙的)的方式。然后会长成像这个样子：

jQuery.fn.faq = function(options) {
    var settings = jQuery.extend({
        terms: 'dt',
        definitions: 'dd'
    }, options);
	//"this" is the current context; in this case, the elements we want to turn into faq layouts
    $(this).find(settings.terms).hide().end().find(settings.definitions).click(function() {
        $(this).next().slideToggle();
    });
    return this;
};

接下来你就可以这样用：

$('#faq').faq();

从上面那个范例来看，写一个faq 的plug-in跟写成一个普通的function没有很大的差别。是的，普通的function没有放在一个全域的命名空间(global namespace)，不过我们也可以创一个nampespace，然后把function放进去。像plug-in那样依附在jQuery中，我们就可 以把其他的jQuery方法用连锁动作串再一起。另外一个好处是，function裡面呼叫this就会得到目前的元素(current context)。用plug-in的作法，就会让function看起来像是jQuery的一部份，但是除此之外plug-in基本上就是一个单一的 function加上能存取到目前的jQuery元素(context)、操作那些元素然后再把那些元素传给连锁动作中的下一个method。它并不复 杂，所以每个人都能轻鬆的写出jQuery plug-ins，它们就是functions而已。

另外注意的是，jQuery也可以写一些较為复杂，包含methods跟状态的plug-ins。jQuery UI有支援这种模式，不过写法跟基本plug-in(像faq那个范例)不同，取而代之的是你会在jQuery上附加一个具有methods跟 properties的物件(如$.ui.tabs)。它有个快捷方式让你直接使用(如$(selector).tabs())，所以你还是可以使用连锁动作，就像faq那个plug-in一样。只不过它并不是回传该物件本身($.ui.tabs)，而是回传jQuery 目前的元素(context)，所以当你要存取tab的methods时，你必须再次呼叫一次selector。你必须再执行一次selector然后再呼叫function的名称：$(selector).tabs(‘add’, url, label, index); ，而不是直接呼叫类似像myTabInstance.add(url, label, index) 的东西。这意味著你执行了两次选择器(除非你用个变数来参照)，你也没有可以指向add这个method的参照让你做像是绑定(bind)或是延迟 (delay)的动作。这篇文章焦点在於MooTools跟jQuery的核心程式，而虽然jQuery UI有提供这些功能，但是jQuery本身并没有。

MooTools程式的重复利用

在MooTools裡面当你要定义一个模式(pattern)时，你会用Class或是实作一个方法到原生的物件上(如String)。

MooTools介於一个独有语法与扩充JavaScript原本的设计模式之间，它走的是一个较為中庸的道路，而非给你一个跟 JavaScript完全迥异的程式语言。它的其中一个方式是去扩充程式本身跟DOM原生物件的prototype，如果你想要有个去掉字串空白的功 能，MooTools鼓励你在String物件上增加一个method(MooTools已经有提供String.trim，你不需要自己再写一个)。

String.implement({
    trim: function() {
        return this.replace(/^\s+|\s+$/g, '');
    }
});

这意味著你可以直接在字串上使用： ” no more spaces on the end! “.trim()，然后你就会得到 “no more spaces on the end!” 的结果。有些人可能会说，去实作原型(native prototype)并不妥当，这也是為什麼MooTools跟Prototype.js没办法同时并存，任何两个会动到原生原型的frameworks都是没办法并存的。如果我定义了，而在另一个函式库裡面也有相同的东西，那最后定义的会覆盖原先的。某种程度来说，这也跟window的全域命名空间的问题类似，这就是JavaScript的特性。这也是JavaScript 1.8增加新功能的方式，它们都是透过prototypes。

MooTools的开发者包好了一个完整的framework让你可以很轻易的扩充你想要的功能，其出发点是让你把这个framework放到网页 裡面去使用，而不是让你放其他的framework，要求访客在一个页面下载两个不同的framework其实是有点不礼貌的。一次套用两个 framework唯一可能的理由是，两个frameworks的plug-ins你都想要用。MooTools作者(包含我自己)的想法是，如果你想要 的某个plug-in是你所选的那个framework裡面没有的，那可能比较合理的作法是花时间去做出来，而非要求使用者去多下载一个 framework的档案。

一旦你学会了JavaScript的运作原理跟扩充原生物件的强大功能，一个全新层级的程式写作方式就此开展。你可以写plug-ins来改变 Elements、Dates或是Functions。某些人可能会说，这种添加方式是一种对原生物件的污染，我必须主张这种方式就是 JavaScript原本的意图。它是程式语言设计的特色，透过添加methods到原生物件上，你的程式码会变得更简洁，更有区隔性。jQuery也有 这麼做，不过只限於强化jQuery自己本身的物件。

虽然你可以轻鬆地在jQuery物件上连续呼叫methods，但是在其它一般物件上，你就不能用同样的方式。举例来说，如果你要一行一行地重复trim掉字串，在jQuery你可能得这麼做：

$.each( $.trim( $('span.something').html() ).split("\n"), function(i, line){alert(line);});

但是由於MooTools修改过prototypes，所以你可以：

$('span.something').get('html').trim().split("\n").each(function(line){alert(line);});

这个范例很清楚地示范了修改prototypes有多麼强大。连锁动作并不是只能在DOM，连锁可是个很有用的东西，MooTools让你可以在任何物件上做连锁动作，包括一次对多个元素(elements)执行一个method。

这裡的重点是MooTools的精随在於它主张你可以写出任何你想要的东西。如果有个功能是裡面没有的，你可以扩充它并增加你自己要的。它的工作并 不提供大家任何可能该有的功能，它是提供一个工具让你可以為所欲為。它有很大一部分在做的事情是把扩充原生prototypes这件事情变得更简单，善用 原型式继承的优点。你也可以用传统的JavaScript来写出这些东西，但是MooTools把它变得更简易和善。

MooTools 与继承<

儘管它名字叫MooTools，它的Class功能并不是真的类别也不是创造一个类别。它的设计模式也许会让你想起传统的程式语言，但Class的确是都是跟物件与原型继承相关的。(很不幸地，用”class”这个字眼是用来描述这些东西最方便的方式，所以在这篇文章中，当我提到”class”的时候，就是指那些会回传物件的函数，而这些物件就是我要用来”实体化”且继承自某个原型。)

要建立一个class，你可以把一个物件传进这个类别构建式，像这样:

var Human = new Class({
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
    isAlive: true,
    energy: 1,
    eat: function() {
        this.energy = this.energy + 1; //same as this.energy++
    }
});

你把一个物件丢给Class(在上面，我们把一个有”isAlive”跟”eat”成员的物件传进去)，这个物件就会变成任何类别实体(instance of class)的原型。要建立一个实体，你只要：

var bob = new Human("bob", 20); //bob's name is "bob" and he's 20 years old.

现在我们得到一个Human. bob实体，裡面有我们在建立我们自己的Human类别时所定义的属性。但是重点是bob的那些属性是透过继承而来的，当我们参照到bob.eat时，bob并非真的具有这个属性。JavaScript先看bob，发现他没有eat这个方法，所以就从继承鍊找到它，也就是从我们之前建立的Human类别裡面，energy这属性也是同样的道理。一开始这看起来有些潜在的坏处；我们并不希望每次bob吃(eat)的时候，每一个被建立的human都会得到一次energy。有一点需要知道的是，当一开始给enegey值的时候，bob会拥有自己的值，我们也不再从原型(prototype)中去寻找值了。所以第一次bob吃(eat)的时候，他会得到自己的energy值(enery=2)。

bob.eat(); //bob.energy == 2

bob的name跟age都是独有的；在initialize初始化的时候就分配给bob了。

这整个模式看起来可能对你来说有点怪，但是其价值在於我们可以為某种特定模式(pattern)定义功能，然后每次需要使用时便初始化这个东西。每 个实体(instance)都有自己的状态。所以如果我们建立另一个实体，那麼两个实体个字都会是独立的，且继承自同一个基本的模式(pattern)。

var Alice = new Human();
//alice.energy == 1
//bob.energy == 2

当我们要把这种方式扩大时，事情会变得更有趣。

MooTools与继承

我们再回顾一下jQuery的faq外掛。如果我们要在这个外掛加入更多的功能会如何？如果我们要透过ajax从伺服器端取得问题所相对应的答案内容时该怎做？想像一下如果faq是另一位作者写的，而我们要在不改变外掛程式码的前提下增加新功能(不想把程式变成有分支的)。

我们唯一的选择就是把整份faq程式码复製(记得，它只是个单一函式)，实际上也就是分支。或者是我们可以呼叫这个外掛然后再多增加一些程式码。如果可以选择的话，后者看起来较能省去一些麻烦，程式码看起来会像这样：

jQuery.fn.ajaxFaq = function(options) {
    var settings = jQuery.extend({
		//some ajax specific options like the url to request terms from
        url: '/getfaq.php'
        definitions: 'dd'
    }, options);
	//"this" is the current context; in this case, the elements we want to turn into faq layouts
    $(this).find(settings.definitions).click(function() {
        $(this).load(.....); //the logic to load the content from the term
    });
    this.faq(); //call our original faq plug-in
});

这作法有些缺点。第一个，我们的faq会多执行一次有时会花很久时间的CSS选择器；我们没办法把已经得到的选择结果传给第二次需要用到的场合。第二，我们没办法把ajax的程式码插入在faq外掛程式逻辑的中间(例如要改写显示faq的规则)。原本的外掛呼叫了可以用特效展开内容的slideToggle。这将会產生问题，因為在ajax得到完整资料之前，这个效果可能会出错，这边除了复製一整份faq程式之外没有甚麼解决方法。

现在我们再来看看MooTool的Human类别，它包含了isAlive跟energy两个属性以及一个eat方法。如果我们要建立一个新版本的Human且添加一些额外的属性要怎做呢？用MooTools的话，我们可以延伸(extend)这个类别：

var Ninja = new Class({
    Extends: Human,
    initialize: function(name, age, side) {
        this.side = side;
        this.parent(name, age);
    },
    energy: 100,
    attack: function(target) {
        this.energy = this.energy - 5;
        target.isAlive = false;
    }
});

你可以看到我们增加了许多功能到子类别裡面。这个子类别所有的属性都Ninjas是独有。Ninjas初始时得到energy值為100、side属性以及可以击杀其他但是会消耗的energy的attac方法。

var bob = new Human('Bob', 25);
var blackNinja = new Ninja('Nin Tendo', 'unknown', 'evil');
//blackNinja.isAlive = true
//blackNinja.name = 'Nin Tendo'
blackNinja.attack(bob);
//bob never had a chance

把程式码拆解开来看，其中有些有趣的地方值得思考。在Ninja类别裡面有个initialize方法，这个initialize方法会覆盖掉原本在Human裡面的，但是我们还是会透过this.parent叫用原本的initialize，把两个原本该有的两个参数传过去。更进一步地，我们可以控制新的程式码要出现在原来程式码的前面或是后面。我们可以给属性新的值(像是新的energy值)还可以定义新的功能，想想看这些是不是能在jQuery的faq外掛裡做到。我们可以载入我们自己的ajax然后用滑动效果来展开内容。

MooTools还有另一个模式叫做Mixin。不同於延伸一个类别到其子类别来定义父子关係，你也可以定义一个类别去混合其他类别进而感染(imbue)其他类别的属性。如这个范例：

var Warrior = new Class({
    energy: 100,
    kills: 0,
    attack: function(target) {
        target.isAlive = false;
        this.energy = this.energy - 5;
        this.kills++;
    }
});

这裡我们把Ninja不同於Human的特性拆散开来并且放在一个类别裡。这样我们就可以在Ninja以外的地方重复使用这些程式码。我们可以让Ninja染上战士(warrior)的特质：

var Ninja = new Class({
    Extends: Human,
    Implements: Warrior, //can be an array if you want to implement more than one
    initialize: function(name, age, side) {
        this.side = side;
        this.parent(name, age);
    }
});

Ninja 依然跟之前的功能完全一样，而Warrior变成我们可以重复利用的部分：

var Samurai = new Class({
  Extends: Human,
  Implements: Warrior,
  side: 'good'
});

现在我们拥有了武士(Samurai)跟忍者(Ninja)，不过我们只需要很少的程式码就可以定义出Samurai跟Ninja。两者相同的是它们都有战士的特质，不同的是武士永远只会是善良的一方，而忍者可以有摇摆的善恶立场。我们只需要花时间写出Human跟Warrior类别。当我们能在方法叫用时机以及它们彼此之间相互关係上拥有细微的控制，就能写出不重复的程式码而得到三种不同类别。每个我们所建立的实体都有自己的状态，而程式码本身也具有很好的可读性。

现在你对MooTools类别的运作方式有个概括的了解了，让我们看看把之前写的jQuery的faq写成MooTools类别，然后延伸出Ajax功能。

var FAQ = new Class({
	//Options is another class provided by MooTools
	Implements: Options,
	//these are the default options
	options: {
		terms: 'dt',
		definitions: 'dd'
	},
	initialize: function(container, options) {
		//we store a reference to our container
		this.container = $(container);
		//setOptions is a method provided by the Options mixin
		//it merges the options passed in with the defaults
		this.setOptions(options);
		//we store the terms and definitions
		this.terms = this.container.getElements(this.options.terms);
		this.definitions = this.container.getElements(this.options.definitions);
		//we call our attach method
		//by breaking this into its own method
		//it makes our class easier to extend
		this.attach();
	},
	attach: function(){
		//loop through the terms
		this.terms.each(function(term, index) {
			//add a click event to each one
			term.addEvent('click', function(){
				//that calls our toggle method for
				//the current index
				this.toggle(index);
			}, this);
		}, this);
	},
	toggle: function(index){
		//toggle open the definition for the given index
		this.definitions[index].slide('toggle');
	}
});

蛤？好多行程式。即使我们把註解拿掉还是有二十几行。我之前有说明过，我们可以用跟jQuery版本差不多的行数就写完这个外掛，那為什麼还要搞得这麼长？就是要把它做得更弹性化。要使用这个类别，只要呼叫他的构建式：

var myFAQ = new FAQ(myContainer);
//and now we can call methods on it if we want:
myFAQ.toggle(2); //toggle the 3rd element

我们可以存取这个实体的方法跟属性，但是ajax在哪？我们在jQuery版本遇到的问题是我们没办法延迟特效的展开时间来等待ajax取得资料完成，在MooTools版本我们没这困扰了：

FAQ.Ajax = new Class({
	//this class inherits the properties of FAQ
	Extends: FAQ,
	//it also gets a new option in addition to the other defaults
	//this one for url, that we're going to append the index of the
	//term to; in reality we might make this more robust, but for
	//this example it serves the purpose
	options: {
		url: null;
	},
	//we're going to cache the results, so if a section is opened
	//twice, we won't hit the server for the data
	indexesLoaded: [],
	toggle: function(index){
		//if we've already loaded the definition
		if (this.indexesLoaded[index]) {
			//just call the previous version of toggle
			this.parent(index);
		} else {
			//otherwise, request the data from the server
			new Request.HTML({
				update: this.definitions[index],
				url: this.options.url + index,
				//and when the data is loaded, expand the definition
				onComplete: function(){
					this.indexesLoaded[index] = true;
					this.definitions[index].slide('toggle');
				}.bind(this)
			}).send();
		}
	}
});

现在我们有另一个能够从远端取得资料的FAQ，整合成了一个可以在资料读取完之后才展开的新方式(之前在 jQuery版做不到的)。而且我们的程式只需要写多出来的那部分跟其他寥寥数行。这种扩充性允许你建立一整个系列的外掛，可包含了各种不同的变化。同时 也意味著你可以沿用别人写好的外掛，变更你所需要的部分(不用整份程式复製)。这也解释了為什麼每一种特定的设计模式裡面，你只能找到很少数的 MooTools外掛，大多数你所取得的外掛，若不能够解决你的需求，你都可以自行扩充你所需要的部分。

如同我之前说的，你当然可以用jQuery写出包含方法与属性的复杂widgets。大部分的你所写的这种程式如果是跟DOM无关的逻辑，那麼就会 是属於传统的JavaScript，但是jQuery没有提供一个能够把实体扩充為次类别的系统，也不能帮你用混搭的方式，来使你的程式更容易被重复使 用。最后，jQuery的外掛总是被指定到DOM元素中，如果你要写一个像是处理URL字串的类别，它并没有一个能记录这些状态的架构可用，除非你自己写 一个。

抉择

jQuery专注於表述性、快速简易开发以及DOM上面，而MooTools著重於扩充性、继承、可读性、重复使用与易维护性。如果把这两者放在一 把尺的两个极端，jQuery可视為一种好入门且快速得到结果的东西，不过(以我的经验)也会让程式变得难以再利用与维护(不过这真的看你怎麼做，这并不 是jQuery本身的问题)，而MooTools需要较长的学习时间，得要写较多的程式码才能得到你要的结果，但是之后更容易重复使用与维护。

更进一步地说，MooTools并没有涵括每一个你能想像可能需要的功能，当然jQuery也没有。两者都尽量给你简洁的程式码，让你去写你要的 plug-in或是扩充功能。其目的不是提供你所有你有可能需要的功能，而是给你一个工具让你能够做出你能想像的任何东西。这就是JavaScript强 大的地方所在，也是JavaScript framework强大之处，而这两个frameworks更是擅长於此。MooTools用一个更全面的角度让你拥有一个在DOM的范围中為所欲為的工 具，但代价是一个较為陡峭的学习曲线。MooTools的延展性与整体性的方法提供你一个涵盖jQuery功能的大集合，但是jQuery注重在一个灵活 的DOM API，同时又不会阻碍你应用JavaScript原生的继承模型，如果你想要的话，甚至也可以额外使用像是MooTools这样的类别系统。

这就是為什麼我说两者都是很棒的选者，我花很大的利器在凸显出两者之间在程式设计哲学上的不同以及它们各自的优缺点。我不知道自己是否有在对 MooTools的偏好这个事实上维持中立，但是我希望这些文章是有帮助的。非关於你选择使用哪个framework，而是你现在更了解这两个 framework了，但愿。如果你有充裕的时间，我强烈建议你分别用这两个framework实作一个网站，然后写下你自己对两者的见解，也许你的观点 会出现我所未及之处。

© 我想网 Akon 所有 , 2009. | 永久链接 | 2 条评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
• 八种布局方案改善你的设计
• JavaScript事件机制与jQuery.bind的补充说明
• JavaScript 事件机制 与 jQuery.Bind
• 40+ Web前端开发必备的备忘单[上]
• 15个JavaScript图片旋转幻灯片及画廊
• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 简单的JQuery聚光灯效果教程

Feed enhanced by Better Feed from Ozh