初学浅析Mootools—oo编程

Javascript曾是“世界上最被误解的语言”， 因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。随着web程序的不断发展，Javascript先后出现不少优秀的框架。如：Prototype、jQuery、Mootools、Dojo、Ext等（Ext面向于界面UI，个人认为不能算作javasript框架）。

Java的程序员，对oo是再熟悉不过了。但是在Javascript对此支持比较弱，或者说大家在使用时，只是想着怎么实现功能，很少关注这方面。Jquery是一个很优秀的框架，其选择器真是方便，写法精简。比较复杂的功能，用Javascript代码去实现也许需要N多行才能实现，但用Jquery几行就OK。曾让我感叹，原来有了Jquery写Javascript是如此easy。也许是因为写java很久了，总是想着Jquery要是OO了那是多么的完美。但Jquery对oo支持还是不够，代码看上去也不像Java。在这里向大家介绍一个很OO的Javascript框架—Mootools。

MooTools是一个简洁、模块化、跨浏览器、面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。

Mootools选择器、Ajax、drag等工具方法在这边就不详术了。下面主要讲一下我们Mootools怎么OO的。从Hello World！开始吧。

<script type="text/javascript" language= "JavaScript">

//创建一个HelloWorld类，其内有方法sayHello

var HelloWorld = new Class({

sayHello:function(){

alert("Hello world!");

}

});

//new一个HelloWorld

var helloWorld = new HelloWorld();

//调用方法sayHello

helloWorld.sayHello();

</script>

运行结果：

怎么样，看起来很像java吧。HellWorld在new时是不带参数的，下面介绍带参数的，仍然以HelloWorld为例。

<script type="text/javascript" language= "JavaScript">

//创建一个HelloWorld类，其内有方法sayHello

var HelloWorld = new Class({

//初始化函数，类似java的构造函数。在new时是带参数的。

initialize:function(userName){

this.userName = userName;

},

userName:null,

sayHello:function(){

alert(this.userName+" say:\"Hello world!\"");

}

});

//实例一个helloWorld

var helloWorld = new HelloWorld("Jack");

//调用方法sayHello

helloWorld.sayHello();

</script>

运行结果：

看到这里，是不是觉得这代码很亲切、很优美。是的，javascript也能写OO，也能像java那样写的优美。不像以前写Javascript那样凌乱、没有章法。（也许长时间写java代码，觉得java代码更合理、更优美）

如果只是优美，功能不具备那就是金玉其外，败絮其中。下面介绍一下“私有”方法的定义。

<script type="text/javascript" language= "JavaScript">

//创建一个HelloWorld类，其内有方法sayHello

var HelloWorld = new Class({

//初始化函数，类似java的构造函数。在new时是带参数的。

initialize:function(userName){

this.userName = userName;

},

userName:null,

sayHello:function(){

//这里通过调用内部方法getUserName来获取userName

alert(this.getUserName()+" say:\"Hello world!\"");

},

getUserName:(function(){

return this.userName;

}).protect()

});

//实例一个helloWorld

var helloWorld = new HelloWorld("Jack");

//调用方法sayHello

helloWorld.sayHello();

alert(typeof(helloWorld.getUserName));

alert(helloWorld.getUserName());

</script>

运行结果：

看到这些可知道，getUserName是一个方法，但是在执行alert(helloWorld.getUserName());却报错“The method “getUserName” cannot be called.”。

protect可以声明方法为类内部方法，只能在内部调用。

继承这个OO的基本特征我们看看mootools是怎么实现的。看起来很神秘哦^_^。

<script type="text/javascript" language= "JavaScript">

var Animal = new Class({

name:null,

age:null,

//初始化方法，类似java的构造函数

initialize:function(name,age){

this.name = name;

this.age = age;

},

getName:function(){

return this.name;

},

getAge:function(){

return this.age;

}

})

var Cat = new Class({

//实现继承

Implements:Animal,

//cat自己的方法。

fish:null,

initialize:function(name,age,fish){

this.name = name;

this.age = age;

this.fish = fish;

},

getFish:function(){

return this.fish;

}

})

var cat = new Cat("aa",20,"2 fish");

alert("cat{name:"+cat.getName()+",age:"+cat.getAge()+",fish:"+cat.getFish()+"}");

</script>

运行结果：

再看另外一种继承：

<script type="text/javascript" language= "JavaScript">

var Animal = new Class({

name:null,

age:null,

//初始化方法，类似java的构造函数

initialize:function(name,age){

this.name = name;

this.age = age;

},

getName:function(){

return this.name;

},

getAge:function(){

return this.age;

}

})

var Cat = new Class({

Extends:Animal,

fish:null,

initialize:function(name,age,fish){

//调用Animal的初始化函数，类似java中super()

this.parent(name,age);

this.fish = fish;

},

getFish:function(){

return this.fish;

}

})

var cat = new Cat("aa",20,"2 fish");

alert("cat{name:"+cat.getName()+",age:"+cat.getAge()+",fish:"+cat.getFish()+"}");

</script>

Implements 和Extends这边都好像实现了继承功能，两者除了this.parent这个之外是否还有其他差别呢。我们再看下面的例子：

<script type="text/javascript" language= "JavaScript">

var Animal = new Class({

name:null,

age:null,

//初始化方法，类似java的构造函数

initialize:function(name,age){

this.name = name;

this.age = age;

},

getName:function(){

return this.name;

},

getAge:function(){

return this.age;

}

});

var Swarm = new Class({

canSwarm:function(){

return true;

}

});

var Cat = new Class({

Implements:[Animal,Swarm],

fish:null,

initialize:function(name,age,fish){

//调用Animal的初始化函数，类似java中super()

this.name=name;

this.age=age;

this.fish = fish;

},

getFish:function(){

return this.fish;

},

getAge:function(){

return 100;

}

})

var cat = new Cat("aa",20,"2 fish");

alert("cat{name:"+cat.getName()+",age:"+cat.getAge()+",fish:"+cat.getFish()+",swarm:"+cat.canSwarm()+"}");

</script>

大家可以看到Implements可以包含多个，而Extends 只支持一个。

Extends

1、(class) 将被新类继承的父类

新建的类将包含父类中的所有方法,并且每个方法都有一个parent属性,通过它可以调用父方法。

Implements

1、(object) 如果传入的是一个对象, 则该对象的属性将被复制至新类中

2、(class) 如果传入的是一个Class,则该Class的属性将将被复制至新类中

3、(array) 如果传入的是一个数组(数组元素是对象或Class),则数组中的对象或Class的属性将将被复制至新类中。

Implements和Extends十分相似, 但Implements的同名属性会被子类覆盖(不像Extends可以通过parent仍可调用). 对需要在新类中实现一组默认属性(来自其他类)的情况下非常有用。

现在相信大家对mootools的oo思想大概了解了吧，javascript本身的一些特性不能完全像Java那样完善和优美。但是这已经相当进步了。代码看上去更简洁、美观。另外，mootools

引入了一个 Garbage 类, 来对页面元素进行一个统一的管理和回收(主要是回收)。可以更好的减少js(或浏览器)造成的内存泄露等问题。