mootools(七) - Common.js
时间：2007-08-18 来源：linxh
本文转自： http://blog.csdn.net/zarknight/archive/2007/04/13/1563794.aspx
Common.js: mootools的构造应用的基础设施
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!"
正因为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"
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',
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"
initialize: function(options){
this.setOptions({
width: '100px',
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"
<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，来为这些类提供功能增强。
相关阅读 更多 +
