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'
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值