初學淺析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(或浏覽器)造成的記憶體洩露等問題。