最近想写点关于Mootools的东西，但找不到好的切入点，还是把这篇以前翻译的文章先贴上来罢。
原教程比较长，译了一个多小时~文中一些用语参考了java的中英文对照。
本文可自由转载，但请转载时注明文章出处。
原文请参考http://dev.mootools.net/wiki/gettingStarted
类（class）
创建
创建类可以不用写这么长了，在prototype.js中的
var Animal = Class.create(); var Animal = Class.create(); Animal.prototype = { initialize: function(){ ... } };
在Mootools中可以写成
var Animal = new Class({ initialize: function(){ ... } });
这样就可以与prototype框架的脚本保持兼容。
如果你不想初始化一个类的实例，把noinit作为第一个参数传递进去，就像：
var Animal = new Class({ initialize: function(){ alert('initializing!'); } }); var Koala = new Animal('noinit');
这样做我们就看不到alert了，即使你传入了任何参数进初始化方法中，“noinit”也会覆盖它们。
继承（Extend）
继承类也更简单了，在prototype是这样继承一个类的：
var Mammal = Class.create(); Object.extend(Object.extend(Mammal.prototype, Animal.prototype), { initialize: function(){ ... } });
现在我们可以忘掉上面的继承方法了，Mootools中只要这样写：
var Mammal = Animal.extend({ initialize: function(){ ... } });
那么新的类又如何？是的，所有的新属性都会创建一份副本在新类中，但假设我们重载一个属性，那我们还需要之前的类吗？
现在我们可以这样写：
var Animal = new Class({ initialize: function(message){ alert(message); } }); var Mammal = Animal.extend({ initialize: function(message){ this.parent(message); } });
通过调用 new Mammal(’hello’) 我们可以看到alert
提示: 父类在调用方法的时候总是用相同的名字
var Cat = Mammal.extend({ initialize: function(message){ this.parent(message); } });
这样做在调用 new Cat(’mwao!’) 的时候一样会弹出alert，穿过Mammal而到达Animal。
实现
现在我们改变一个类的行为而无须改变库本身
Animal.implement({ initialize: function(message){ document.write(message); } });
现在，新的Mammal将会输出hello到文档而不是显示alert，“实现方法”将会复制你的在类本身的对象。
本地类
你可以通过调用他们的hand-set扩展方法来扩展本地对象。
String.extend({ alert: function(){ alert(this); } });
“this”这个关键字指的是当前的字符串
'hello'.alert();
…会用一个包含你的重要消息的提示窗口向你打招呼。
你也可以这样调用，来模拟一个本地对象
new Native(Element);
如果你的对象或类必须可继承而无须分配它到另一个变量，则这种方法将会很有用。
元素
基本
通过使用mootools，你可以使用$()函数来快速地用指定的属性来扩展你的元素。
举个例：
$('myElement').addClass('className');
提示：我们可以用元素的ID值来调用$()
再提示一下：你要修改元素只用需要调用
$()
一次就行了，如
var el = $('myElement'); el.addClass('posting'); el.removeClass('posting');
当然，这样做也不会出现什么问题：
$('myElement').addClass('posting'); $('myElement').removeClass('posting');
连接（Chaining）
$('myElement').addClass('posting').setStyle('position', 'absolute');
在很多情况下，这样会减少冗长的代码，使你的代码更简洁。
很多内建函数都是可连接的，你也可以很容易完成这工作。我们继续看下去，
仅仅是扩展，举个例，带有一个或多个方法的元素类：
Element.extend({ makeRed: function(){ this.style.color = 'red'; }, makeBlue: function(){ this.style.color = 'blue'; } });
“this”关键字指的是当前元素。
用&()函数调用你的已存在的元素的方法：
$('myElement').makeRed(); //这样元素会变红色，但你想连接一个彩虹色 $('myElement').makeRed().makeBlue(); //但这样做不会成功，我们没有使我们的方法可连接
为了连接你的方法，只用加入return this;在你的方法的末尾：
Element.extend({ makeRed: function(){ this.style.color = 'red'; return this; }, makeBlue: function(){ this.style.color = 'blue'; return this; } });
你的方法的return所返回到下一个连接的也许是字符串、数组或是元素的引用。
在本例中，我们返回了一个元素的引用，这就是return this所做到的，这对大部分的方法都行得通。
但我们有时也会返回其他一些有用的东西：
Element.extend({ makeRed: function(){ this.style.color = 'red'; return "Oh no, I've been shot!"; }, makePurple: function(){ this.style.color = 'purple'; return "Stop choking me!"; } }); // The Element methods return strings, so we'll extend the String object String.extend({ alert: function(){ alert(this); return this; } }); $('element').makeRed().alert(); $('element').makePurple().alert();
效果
Element.effects()
Mootools让我们能更快速地创建效果，只要这样来扩展我们的元素：
Element.extend({ effect: function(property, options){ return new Fx.Style(this, property, options); } });
现在我们可以这样来创建效果：
var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
然后这样调用
myEffect.start(10, 100);
提示：这段代码产生一个新的Fx.Style。
下面的例子简单地给元素设置了一个margin，再在其上添加另一个元素，并用效果动态地显示出来。
$('myelement').setStyle('margin', '10px').injectBefore($('myOtherElement')).effect('opacity').start(0,1);
Fx.Style
effects作为库的一部分保留所有的函数特性，利用函数扩展模型和新类的实现同，现在我们在设计中有了两件宝贝：**Fx.Style** 和 **Fx.Styles**
通过 **Fx.Style** 你可以操作元素的任何css属性：
var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500}); marginChange.start(10, 100);
你可以用marginTop（一种camelcase）换掉margin-top（css风格）
译者注：camelcase骆峰式命名法，简单来说就是单词的首字母大写的字符串
Fx.Styles
Fx.Styles允许你一次显示多个属性的动态变化效果。开始时你并不需要指定变化的属性。当你改用start方法时你才把属性用对象的形式传递进去。对象的格式如
{’property’: [from, to], ‘otherproperty’: [from, to], ‘anotherproperty’: [to]}
给个例子：
var myEffects = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear}); myEffects.start({'height': [10, 100], 'width': [900, 300]});
这个语法看上去有点怪，但很实用。
现在你可以通过新的类行为在任何新的方法实现多风格切换效果：
Fx.Styles.implement({ move: function(topTo, leftTo){ this.custom({ 'top': [this.el.getStyle('top', true), topTo], 'left': [this.el.getStyle('left', true),leftTo] }); } });
我们的新方法的使用方法：
myEffects.move(100, 200);
我们的元素就能从当前的位置移动至两个参数所决定的新的位置~~
翻译完成了~很久没有译东西~~这篇文章可以让大家大概了解一下Mootools的功能，这东西确实是很强大，希望大家能用他来打造新的作品。Http://www.hicrokee.com
