MooTools教程

当前位置:首页>Mootools>MooTools教程>mootools框架教程(7) -Common篇:构造应用

mootools框架教程(7) -Common篇:构造应用

时间:2015-07-13 14:34来源:网络整理 作者:KKWL 点击:
导言:mootools框架教程(7) -Common篇:构造应用。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它

 

  • 导言:mootools框架教程(7) -Common篇:构造应用。MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

    说明: 正因为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());  //自定义类实现OptionsMyClass.implement(new Events());   //自定义类实现Events//实例化MyClassvar 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="#" >AAA</a><a href="#" >BBB</a><a href="#" >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"

------分隔线----------------------------