初学浅析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(或浏览器)造成的内存泄露等问题。