mootools【一】- 起步篇

以前一直在用prototype.js，最近发现了mootools,据说也相当不错，它是个纯OO的javascript 框架，所以拿来学习学习，把学习经过记录下来。

 粗略看了下，mootools很貌似prototype,所以用过prototype框架的人应该很容易上手的。

 mootools提供的功能高度模块化，可以根据实际需要来裁剪。

它的核心库是Moo.js和Utility.js，Moo.js里包含了实现OO的基础类,Utility.js提供了最常用的工具函数的封装。

---------------------------Moo.js-------------------------------------

prototype.js里提供了如下形式来创建我们的对象:  

 

var  Cat  =  Class.create();
Person.prototype = {

    initialize: function(name){

       this.name = name;

    }

};

var cat = new Cat ('kitty');
alert(cat.name);

 

对应,mootools使用如下形式:

var  Cat   =   new  Class({
    initialize:  function (name){
         this .name  =  name;
    }
});
    
var  cat  =   new  Cat ( 'kitty' );
alert(cat.name);

恩，两者看起来很像，不过，好像mootools这种方式更加符合OO的习惯(不过也要看各人喜欢的啦)。

Class进行继承,mootools是这样做的:

 

var Animal  =   new  Class( ... {
   initialize: function(name)...{
     this.name = name;
   }
} );

var Cat  =  Animal.extend( ... {
   initialize: function(name,age)...{
     this.parent(name); //调用Animal的initialize方法
     this.age = age;
   }
} );

是的，相当好用。

Class.implement方法从功能上来理解是对已经定义好的类进行扩展,用法如下:

var Person  =   new  Class( ... {
    initialize: function(name)...{
        this.name = name;
    }
} );

Person.implement( ... {
  initialize: function(name,age)...{
        this.name = name;
        this.age = age;
    },
    
myAction: function()...{
        alert(this.name+'--'+this.age);
    }
} );

var p  =   new  Person( ' zarknight ' , 24 );
p.myAction();

这和java中的实现接口好像不是一个概念...

 mootools对Object扩展了一个extend方法,它有两个参数，作用是复制第二个参数对象的所有属性到第一参数对象中去，同名属性将覆盖为第二个参数中的相应属性：

var firstOb  =   ... {
    'name': 'John',
    'lastName': 'Doe'
} ;
var secondOb  =   ... {
    'age': '20',
    'sex': 'male',
    'lastName': 'Dorian'
} ;
Object.extend(firstOb, secondOb);

// firstOb将变成:
... {
    'name': 'John',
    'lastName': 'Dorian',
    'age': '20',
    'sex': 'male'
} ;

---------------------------Moo.js-------------------------------------

$type

作用：基本上是对typeof的扩展,返回输入参数的类型

例子：

var x  =  $type( " abcdefg " );

返回值：

'element' - DOM
 'textnode' - DOM 文本节点
 'whitespace' - DOM 空白节点
 'array' - 数组
 'object' - 对象
 'string' - 字符串
 'number' - 数字
 'boolean' - 布尔型
 'function' - 函数
 false - 如果是未定义或则不是以上列出的类型

$chk

作用：如果输入参数是数值（包括0）或是对象(不为null或undefined),则返回true,否则返回false

var x  =  $chk( " abcde " );   // true
var y  =  $chk( 0 );              // true
var z  =  $( null );                 // false

 

$pick

作用：如果第一个参数对象存在，则返回这个对象；否则返回第二个参数对象

var x  =  $pick( " openfdc " , " zarknight " );   // openfdc
var y  =  $pick( null , " zarknight " );              // zarknight

    var z = $pick(1, 2);                                 //1

 

$random

作用：产生一个介于(包括)指定的最大范围值和最小范围值之间的随机整数

var x  =  $random( 1 , 100 );    // 产生一个1~100之间的随机整数

 

$clear

作用：其实就是clearTimeout和clearInterval都调用一遍

var timer1  =  setInterval( " abc() " , 1000 );
timer1  =  $clear(timer1);

var timer2  =  aFunc.delay( 1000 );   // delay是mootools对Function的扩展,具体用法看mootools文档或我的后文...
timer2  =  $clear(timer2);

另外，mootools往window对象里摆了这么些属性,用来作为检测浏览器类型的工具：

window.ie

window.ie6

window.ie7

window.khtml

window.gecko