mootools学习笔记（一）Class篇

MooTools是一款Javascript框架，但相对于jQuery来说，没有这么流行，尤其在国内，但MooTools自有其开发优势，本文并不是单纯的对MooTools和jQuery两种框架进行比较，只是结合MooTools的文档和自己的理解，和大家分享一下MooTools这款优秀的框架，如有谬误之处，还请高人多多指点。

首先奉上MooTools的官网：http://mootools.net/

可以在Download里下载最新的MooTools代码，最新的版本是1.4.5，第二个版本是未经压缩的通用版本，157kb 可能稍微有点大，用来练手还是可以的

代码下载后，记得在html的head里引用一下，引用的位置跟据.js的文件目录决定，比如放置在根目录下：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" src="mootools-core-1.4.5-full-nocompat"></script>

下面具体应用一下——

1）构造和实例化类

var Cat  = new Class({
    initialize: function(name){            //  initialize（初始化）:function(属性名)   
        this.name = name;                  //  该Class的name 是 实例化时的 name
    }
});

var cat = new Cat ('kitty');               // 实例化对象cat，其name属性为’kitty’  
alert(cat.name);

var Cat  = new Class({
    initialize: function(name,age){        //  2个或2个以上的属性用‘,’隔开
        this.name = name;
this.age=age;’                               
}
});
var cat = new Cat ('kitty',’3’);              
alert(cat.name+’;’+cat.age);

 

2）、扩展类

类已经创建好，需要对类属性进行扩展，使用implement 方法，如上例已构造Cat类
var Cat  = new Class({
    initialize: function(name){             
    this.name = name;                 
    }
});

需对该类追加age属性，则使用implement
Cat.implement({                         // 用implement 方法扩展类 
    initialize: function(name,age){        
        this.name = name;
        this.age=age;’                               
}
});

 

3）、类的继承

Extends:用于继承类
var Animal = new Class({
    initialize: function(age){
    this.age = age;
    }
});
var Cat = new Class({
    Extends: Animal,                  // Cat 类继承 Animal 父类
    initialize: function(name, age){   
        this.parent(age);             // 继承父类 Animal 的属性 age
        this.name = name;
    }
});
var myCat = new Cat('Micia', 20);
alert(myCat.name);                   // alerts 'Micia'.
alert(myCat.age);                    // alerts 20.

4）、类的实现

似Java里的接口，父类没有方法体，通过子类定义方法来实现父类的方法
var Animal = new Class({             //   创建父类 Animal，拥有属性age
    initialize: function(age){
        this.age = age;
    }
});
var Cat = new Class({                //  创建子类 Cat 
    Implements: Animal,              //   然后用 Implements实现父类 Animal的 setName方法
    setName: function(name){
        this.name = name
    }
});
var myAnimal = new Cat(20);
myAnimal.setName('Micia');           // 实例化子类Cat，使用setName的方法
alert(myAnimal.name);

 

5）、用 implement 实现类的方法

类似于4）类的实现，但更方便
var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});
Animal.implement({                   // 直接用implement实现Animal的 setName方法
    setName: function(name){
        this.name = name;
    }
});
var myAnimal = new Animal(20);
myAnimal.setName('Micia');
alert(myAnimal.name);                // alerts 'Micia'