mootools【一】- 起步篇

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

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

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

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

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

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

 

js 代码

 

1. var Cat = Class.create();  
2. Person.prototype = {  
3.     initialize: function(name){  
4.        this.name = name;  
5.     }  
6. };  
7. var cat = new Cat ('kitty');  
8. alert(cat.name);  

 

对应,mootools使用如下形式:

js 代码

 

1. var Cat  = new Class({  
2.     initialize: function(name){  
3.         this.name = name;  
4.     }  
5. });  
6.       
7. var cat = new Cat ('kitty');  
8. alert(cat.name);  

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

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

 

js 代码

 

1. var Animal = new Class({  
2.    initialize: function(name){  
3.      this.name = name;  
4.    }  
5. });  
6.   
7. var Cat = Animal.extend({  
8.    initialize: function(name,age){  
9.      this.parent(name); //调用Animal的initialize方法  
10.      this.age = age;  
11.    }  
12. });  

是的，相当好用。

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

java 代码

 

1. var Person = new Class({  
2.     initialize: function(name){  
3.         this.name = name;  
4.     }  
5. });  
6.   
7. Person.implement({  
8.   initialize: function(name,age){  
9.         this.name = name;  
10.         this.age = age;  
11.     },  
12.       
13. myAction: function(){  
14.         alert(this.name+'--'+this.age);  
15.     }  
16. });  
17.   
18. var p = new Person('zarknight',24);  
19. p.myAction();  

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

js 代码

 

1. var firstOb = {  
2.     'name': 'John',  
3.     'lastName': 'Doe'  
4. };  
5. var secondOb = {  
6.     'age': '20',  
7.     'sex': 'male',  
8.     'lastName': 'Dorian'  
9. };  
10. Object.extend(firstOb, secondOb);  
11.   
12. //firstOb将变成:  
13. {  
14.     'name': 'John',  
15.     'lastName': 'Dorian',  
16.     'age': '20',  
17.     'sex': 'male'  
18. };  

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

$type

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

例子：

js 代码

 

1. var x = $type("abcdefg");  

返回值：

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

$chk

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

js 代码

 

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

 

$pick

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

js 代码

 

1. var x = $pick("openfdc","zarknight");  //openfdc  
2. var y = $pick(null,"zarknight");       //zarknight  
3. var z = $pick(1, 2);                   //1  

 

$random

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

js 代码

 

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

 

$clear

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

java 代码

 

1. var timer1 = setInterval("abc()",1000);  
2. timer1 = $clear(timer1);  
3.   
4. var timer2 = aFunc.delay(1000); 
   
5. //delay是mootools对Function的扩展,具体用法看mootools文档或我的后文...  
6. timer2 = $clear(timer2);  

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

window.ie
window.ie6
window.ie7
window.khtml
window.gecko