Mootools调研(6)

2014-01-27

3.5 组件的组织结构

MooTools框架主要有mootools-core以及mootools-more这两大部分组成。mootools-core是MooTools框架的核心模块，mootools-more是针对mootools-core的功能扩展部分，可根据需求动态引入。
无论是mootools-core还是mootools-more都可针对具体需求，选择需要的模块，根据模块以来关系组装出最小的js包使得尽量小的框架代码实现所需功能。

如下图所示，是详细的MooTools框架体系结构：

3.6 其他

正因为mootools是基于OO的思想，所以，在mootools自身提供的功能中，充分使用了OO的理念–继承和实现.
mootools中提供一组基础功能类：Chain,Events,Options,Group，然后我们可以通过implement他们来在我们的类中实现它们所提供的功能。mootools自己提供的Ajax, XHR和Fx.Base类就实现了这些基础功能类。

类：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!"

####类：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"

类：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"

类：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"

一般情况下，Chain,Events和Options都不会单独使用，都会被别的类implement，来为这些类提供功能增强。