`
zarknight
  • 浏览: 148264 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

mootools【七】- mootools的构造应用的基础设施Common.js

阅读更多

正因为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),那个“组监听器”就被执行了。

 
 
$('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,来为这些类提供功能增强。

 

 

分享到:
评论

相关推荐

    mootools-1.2.2-core-nc.js

    mootools-1.2.2-core-nc

    mootools-1.2.1-core-nc.js

    开源js框架,非常不错,没什么很多介绍的,如果你是做web开发的,千万不要错过

    mootools.js插件 1.4.5 core下载.zip

    比prototypejs更丰富、更强大的mootools.js插件 1.4.5 core下载。mootools.js可以生成较为复杂的、动态的网页交互效果,和jquery一样强大。。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    MooTools是一款强大的JavaScript库,它提供了一套优雅的面向对象的编程接口和实用的工具集,便于开发者创建高效、可维护的Web应用程序。MooTools 1.4中文PDF手册与MooTools-Core-1.5.1.js是学习和使用MooTools的核心...

    Python库 | django-mootools-behavior-0.1.tar.gz

    这个库将MooTools JavaScript库与Django后端紧密结合,为开发者提供了一种更方便的方式来实现动态的、用户友好的Web应用。 **Django框架** Django是一个用Python编写的开源Web框架,遵循模型-视图-控制器(MVC)...

    mootools-core-1.4.5-full-compat.js

    mootools-core-1.4.5-full-compat.js

    mootools-1.2 源码分析

    01-native.js 02-utils.js 03-hash.js 04-array.js 05-browser.js 06-window.js 07-document.js 08-function.js 09-number.js 10-string.js 11-event.js 12-class.js 13-class.extras.js mootools1.2中文文档(html...

    mootools1.2 core

    MooTools是一个强大的JavaScript库,它的1.2版本核心(Core)是整个框架的基础部分,提供了许多基础功能和工具,使得开发者能够更加高效地编写和组织JavaScript代码。这个压缩包包含两个核心文件:`mootools-1.2.4-...

    mootools-release-1.11

    MooTools 是一个轻量级且模块化的JavaScript库,它为Web开发提供了丰富的功能和工具。"mootools-release-1.11"是MooTools的一个特定版本,发布于2010年,旨在提供稳定性和兼容性的更新。这个版本在当时是一个重要的...

    mootools.js

    <script type="text/javascript" language="javascript" src="mootools.js"> <div id="myDiv1" >abc <script type="text/javascript"> var a = new Element('button'); a.value = 'test'; alert(a) alert(a.value)...

    mootools-core-1.4.5

    mootools,Javascript只能提示工具所必须的js文件

    Ajax-mootools-doc教程--手册.rar

    通过学习"Ajax-mootools-doc教程--手册.rar"中的内容,开发者不仅可以掌握Ajax的基础知识,还能深入理解MooTools库的使用,提高JavaScript开发效率,尤其在创建动态、响应式的Web应用程序方面。这份资料对初学者和有...

    mootools-12-cheat-sheet-pf.pdf

    ### Mootools核心知识点解析:mootools-12-cheat-sheet-pf...综上所述,Mootools通过其强大的类系统、增强的原生对象方法以及丰富的DOM操作API,为Web开发者提供了全面而灵活的工具集,极大地简化了Web应用的开发流程。

    mootools-core-1.5.1

    Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的功能要比Prototype.js多,整体设计也比Prototype.js要相对完善,功能更强大,比如增加了动画特效、拖放操作等等。总之,Mootools...

    前端项目-mootools-more.zip

    **前端项目-mootools-more.zip** 是一个包含MooTools扩展库的压缩包,主要针对的是使用MooTools JavaScript框架进行前端开发的项目。MooTools是一个轻量级且高度模块化的JavaScript库,旨在提高开发效率,提供面向...

    mootools源代码说明

    MooTools是一个简洁,模块化,面向对象的JavaScript框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的 JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念,语法也和其极其类似。但它提供的...

    mootools 1.3 core 核心js库

    MooTools是一个强大的JavaScript框架,它的1.3版本是其发展中的一个重要里程碑。这个核心库提供了许多基础功能,使得Web开发者能够构建复杂、高性能的Web应用程序。MooTools 1.3 Core着重于效率、兼容性和模块化设计...

    MooTools-1.2-Beginner

    MooTools的开发者强烈支持将面向对象编程(OOP)原则应用于JavaScript这种结构化的编程语言中。由于JavaScript中的所有事物都是对象,因此MooTools提供了一种更干净、更简单、更优雅的方式来操纵这些对象。此外,...

    mootools-中文教程

    #### 七、mootools的构造应用的基础设施Common.js Common.js 是 Mootools 的核心文件之一,包含了基础的工具函数和类,是构建其他高级功能的基础。 #### 八、Css查询支持之Dom.js Dom.js 提供了对 CSS 选择器的支持...

Global site tag (gtag.js) - Google Analytics