有人最近要求我们写一个关于MooTools 1.2的30天的教程，这似乎也是个很不错的主意，于是我们决定现在就开始。在这些教程中，我们假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。

MooTools 1.2 JavaScript库介绍

MooTools 1.2是个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。在某种程度上，你可以认为MooTools是CSS的扩展。例如，CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间（点击事件、鼠标悬停事件、键盘事件……），MooTools让这一切变得非常容易。

另外，MooTools还有各种各样的非常好的扩展，可以让你不只是改变一个元素的属性，还可以让你有”morph“（变形）或者”tween“（补间动画）属性，让你有能力去创建动画效果，就像你在我的导航菜单上看到的一样（Fdream注：原作者的，我的首页也有）。

这只是一个例子，MooTools可以让你做更多的事情。在接下来的30天里，我们将深入MooTools库，探索从数组（Array）和函数（Function）到Fx.Slide，以及其他捆绑插件的每一个东西。

引用MooTools 1.2

首先，下载并引用MooTools 1.2核心库。

• 下载MooTools 1.2核心库
• 把MooTools 1.2核心库上传到你的服务器或者工作区
• 在你的HTML文档头部head标记之内链接MooTools 1.2核心库

写了个在页面中点击小图查看大图的功能，应用到了我的blog上，效果可以点一下我前一篇日志中的图。本来在Firefox和IE下都跑得挺好的，可惜我也比较喜欢用Chrome，于是用Chrome看了一下，结果却发现很奇怪的现象：先是两个不同对象的动画效果会混乱，好不容易调好了结果却发现大图的尺寸也乱了……

先是动画效果的问题，两个不同的Element，均使用MooTools封装后的Element对象的morph方法，代码如下：

代码中并没有想要改变this._overlayer宽和高，结果却是this._imagelayer出不来了，this._overlayer的宽和高却变成了图片的宽和高，想想应该是把morph对象弄混了。于是试试给this._imagelayer新new了一个Fx.Morph对象...

看这篇之前，请先看上一篇：[翻译]jQuery和MooTools的真正区别（上）

Extensibility - Because I Like To Tweak Things

可扩展性——因为我喜欢调整一些东西

This brings me to the last big benefit that coding this way provides, assuming that you are writing your code in a way that lets you take advantage of it: extensibility. MooTools has a class based hierarchy (inspired by Dean Edwards excellent work), but don’t let the name fool you. It’s called a class but it’s really just an object factory that makes taking advantage of the prototypal inheritance model in JavaScript easier.

这是这种编码方式给我代理的最后一个大好处，假设你现在写代码的方式能够利用它的可扩展性。MooTools有一种基于类的层次结构（灵感来源于Dean Edwards的杰出工作），不要被这个名字给欺骗了。尽管它叫做类，实际上就只是一个object工厂，只不过让JavaScript里面的原型继承模型变得更容易跟简单而已。

You don’t need MooTools to do this of course. JavaScript will let you do it yourself. But because this is the way MooTools works from the ground up, it makes it hard to avoid writing your own code this way. Writing your own classes is really easy, and extending a class - even if you didn’t write it - is easy, too.

你当然不需要MooTools来做这些。JavaScript可以让你自己来实现...

自己一直在用MooTools框架，偶然看见这篇文章，作者是MooTools Team的成员之一，讲解了jQuery和MooTools的一点点区别，主要是我觉得他写JavaScript代码和他的思维方式很值得学习。另外，对JavaScript的编程思想和对框架的选择都有很多很好的建议，对于犹豫在各种框架上的人有很好的指导作用，另外对于想深入对框架进行研究或者想自己开发框架的人也有很好的建议。文章虽然很长，但是我觉得不错，然后就翻译了。水平有限，文笔粗陋，其中有少数地方自己都觉得翻译得有些牵强，欢迎批评指正。

由于文章太长，我这里就分了上下两篇，下文在这里：[翻译]jQuery和MooTools的真正区别（下）

原文：jQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework Different From Another

标题：

jQuery, MooTools, which is the most popular and well represented framework and What Really Makes One Framework Different From Another

jQuery和MooTools，哪一个框架更受欢迎有更好的表现以及它们之间的真正区别是什么

I've been experimenting with several javascript libraries as well… the problem is finding the right mix of features… Ext.js is very extensive, but very large and complex: steep learning curve.

我一直在尝试一些不同的JavaScript库，试图找到一些合适的特性组合：Ext.js非常好扩展，但是太大太复杂，学习难度很大...

在Mootools 1.2正式版中，有一个很小很诡异的bug，一般碰不上这么bt的事情。在页面里面有iframe，并且会涉及到跨域的问题时，若在页面执行过程中改变代理脚本，在改变代理脚本的前后会出现JavaScript线程假死的情况——所有的JavaScript事件都会失去响应，而此时若还原默认的脚本设置，则又可恢复正常。后来发现问题出在Event对象中，有这么几行：

经测试，发现在这里居然取不到win.document——拒绝访问（Permission Denied）！打印了一下win的属性，发现已经是被mootools打包后的window对象了，但不知为何里面的所有属性都是拒绝访问。直接很裸地试着直接取“document”，居然成功了！修改此段代码如下：

偶然发现，在IE 7下，打开本地页面时，居然会出现onload事件发生在ondomready的前面！而在FF下，ondomready一直发生在onload事件以前，诡异的IE，不得不再写两行代码来判断js是不是已经执行过初始化方法了……

最近几天和另外一个同事在写Mootools 1.2beta2的注释文档，总算基本完成了，show一下在vs 2008下的intellisense：

创建一个新的实例：

相关参数：

第二个参数...