mootools【七】- mootools的構造應用的基礎設施Common.js
說明: 正因為mootools是基於OO的思想，所以，在mootools自身提供的功能中，充分使用了OO的理念--繼承和實現.mootools中提供一組 基礎功能類：Chain,Events,Options,Group，然後我們可以通過擴充套件它們來在我們的類中實現它們所提供的功能。mootools自己提供的Ajax, XHR和Fx.Base類就實現了這些基礎功能類。
注: 一般情況下，Chain,Events和Options都不會單獨使用，都會被別的類擴充套件(implement)，來為這些類提供功能增強
1. 類：Chain
作用：這裡Chain類把function組織成一個鏈式結構。
方法：
chain： 新增一個函式到鏈中
callChain：執行鏈中第一個函式，然後刪除(原來鏈中第二個函式將變為新
的鏈首)
clearChain：清除鏈中所有函式
例子：
var c = new Chain().chain(function(){
alert('Func A!');
}).chain(function(){
alert('Func B!');
}).chain(function(){
alert('Func C!');
});
c.callChain(); //"Func A!"
c.callChain(); //"Func B!"
c.callChain(); //"Func C!"
2. 類：Events
作用：通俗的來講，它其實像是一個事件管理器(各人覺得大多數情況下應該是
自定義事件)。別的類可以實現它來進行自己的事件管理。
方法：
addEvent：向管理器中新增指定事件的監聽器
fireEvent：觸發執行指定事件下的所有監聽器方法
removeEvent：從管理器中刪除指定事件的監聽器
例子：
var evts = new Events();
var fa = function(e){
alert('aaaaaaa');
};
var fb = function(e){
alert('bbbbbbb');
};
evts.addEvent('onMyEvent', fa).addEvent('myEvent', fb);
evts.fireEvent('onMyEvent'); //先alert出"aaaaaaa",然後alert出"bbbbbbb"
evts.removeEvent('onMyEvent',fa);
evts.fireEvent('onMyEvent'); //alert 出"bbbbbbb"
3. 類：Options
作用：為實現該類的類提供一個可選引數管理器
方法：
setOptions - 設定類的this.options,該方法的第一個引數是要給出的預設參
數列表，第二個引數是可提供使用者輸入的引數列表。如果實現同時實現
Options類和Events類，則引數列表中有以on開頭(/^on[A-Z]/)的引數
名，則自動會把這些引數加入到Events提供的事件管理器中。
例子：
var MyClass = new Class({
initialize: function(options){
this.setOptions({
width: '100px',
height: '200px',
onMyEvent: Class.empty
},options);
}
});
MyClass.implement(new Options()); //自定義類實現Options
MyClass.implement(new Events()); //自定義類實現Events
//例項化MyClass
var c = new MyClass({
deep: '100px',
onMyEvent: function(){alert('option[deep]>:' + this.options['deep']);}
});
c.fireEvent('onMyEvent'); //alert出"option[deep]:100px"
4. 類：Group
作用：把元素分組，然後可以為這些組進行新增事件監聽器，這些“組監聽器”的
觸發時機是這樣的：當組裡面的所有元素都觸發過指定的事件後，"組監
聽器"就開始執行。比如有3個按鈕A,B,C組成一個Group,然後為這個
Group新增一個click事件的監聽器方法，則，當你分別去按這3個按鈕，
不分次序，不分按的次數（比如A按了1次，B按了2次,然後再按C）,
當按最後一個按鈕時候(比如已經按過了A和B，現在按下C)，那個“組
監聽器”就被執行了。
例子：
<a href="#" id="link1" >AAA</a>
<a href="#" id="link2" >BBB</a>
<a href="#" id="link3" >CCC</a>
$('link1').addEvent('click',function(){alert('AAA');});
$('link2').addEvent('click',function(){alert('BBB');});
$('link3').addEvent('click',function(){alert('CCC');});
var g = new Group($('link1'),$('link2'),$('link3'));
g.addEvent('click', function(){
alert('group event');
});
//當你按照類似如下規律點選連結：
先點選link1：alert出"AAA"
再點選link2：alert出"BBB"
最後點選link3：先alert出"group event"，再alert出"CCC"