MooTools教程(告诉你为什么学Mootools)

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。建议大家可以用它来代替prototypejs。

我为什么选择mootools,抛弃了prototype. (mootools 与 prototype 核心代码分析)

===========================================
前言
===========================================

最近喜欢上了mootools(相见恨晚啊),在公开表示了对他的偏爱.
很多朋友都问我为什么要移情别恋,其实理由还是蛮多的.

今天在这里打算列举出一部分.让更多的朋友能够了解一下mootools,也希望有更多的朋友喜欢上他.

文章的标题注定了我会更多的讲述 mootools比prototype好的地方,
希望大家不要被我的误导,以为mootools处处都比prototype好.
mootools还是有一些不足的.

本次对比针对 mootools 1.11版 和 prototype 1.51版,
只比较了一些核心代码,其他的工具方法,辅助函数不再本文讨论之内.

开始前,再次重申一遍:我曾经很爱prototype,而且我将永远都会用"伟大"来形容它.

好 下面对比正式开始 (
mootools以下简称moo.
本文所引用的代码, 只是起到说明作用,不保证他们都可以被正确的执行.
同时为了使本文简洁一些,引入的 一些 moo和prototype的代码也只是片段或是伪代码.
)

===========================================
一. 类机制
===========================================

js里的类实际上就是function.
如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

Java代码

var PersonClass=function(name,gender){this.name=name;this.gender=gender;alert("My name is "+this.name);}var myGirlFriend=new PersonClass('Vickey','female');

执行 后, 会创建一个PersonClass类的实例myGirlFriend, 并执行function内的语句.
那些语句可以理解为是类的构造函数.

Prototype
现在来看看在prototype的帮助下如何去定义这个类:

Java代码

var PersonClass = Class.create();PersonClass.prototype.initialize=function(name,gender){this.name=name;this.gender=gender;alert("My name is "+this.name);};var myGirlFriend=new PersonClass('Vickey','female');//如果想给类增加属性和方法时使用 PersonClass.prototype.XXX=...;//或者是使用 prototype提供的 Object.extend(PersonClass.prototype, {...} );

(关于Object.extend稍后在对比继承机制时再细说.)

再来看看prototype是实现类机制的核心代码.

Java代码

var Class = {  create: function() {return function() {  this.initialize.apply(this, arguments);}  }}

通过看代码不难看出,prototype的Class实际上只是帮助我们抽象出了"类的构造函数".
而当我们在prototype的这种机制下进行类的定义时,实际上带来的好处是非常有限的.
prototype的Class只是从结构对我们的类进行了重新规划. 而这样的规划意义并不是很大.
而且prototype带有强制性,即, initialize 是必须要定义的.
实际上这里存在一个缺陷, Class应该提供一个默认的initialize(一个空函数就好),
或者是在create返回的function里进行必要的判断.
(prototype1.6的类机制变化比较大,但是还没仔细研究过,所以不敢轻易评论).

Mootools

现在来看看在 moo的帮助下如何去定义一个类:

Java代码

var PersonClass = new Class( {initialize: function(name,gender){this.name=name;this.gender=gender;alert("My name is "+this.name);}});var myGirlFriend=new PersonClass('Vickey','female');

其中类的 initialize 不是必须的.
如果你想给 PersonClass 增加属性和方法,你可以在new Class的参数里直接以 json方式定义.
也可以使用 如下方式

Java代码

PersonClass.implement ({ age:0 ,getName : function() {return this.name;}} , {...}, ..... );

implement支持多个{}.关于implement稍后在对比继承机制时再细说.