博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Mootools中的Class应用

Posted on 2007-11-14 12:43  迷梦江南  阅读(1070)  评论(0编辑  收藏  举报

我没有用过别的javascript框架,mootools是我接触的第一个javascript框架。所以我说不出和别的javascript框架比有哪些长处。我在这里只是把我对mootoolsclass的了解写出来,给同样的使用者提供个参考。

下面我创建个Class:

            var person=new Class({

                initialize:function(name,sex,age,address){

                    this.name=name;

                    this.sex=sex;

                    this.age=age;

                    this.address=address;

                },

                display:function(){

var info='姓名:'+this.name+'"n性别:'+this.sex+'"n年龄:'+this.age+'"n住址:'+this.address;

                    alert(info);

                }

            });

这个类有四个数据成员和一个显示方法,可以像下面一样初始化对象和调用方法:

            var ywg1=new person ('ywg','男','25','浙江宁波');

            ywg1.display();

Class有两个属性:extendimplementextend表是继承,implement表示类的扩展。

下面看一个继承的例子:

            var ywg=person.extend({

                initialize:function(name,sex,age,address,BeFondOf){

                    this.parent(name,sex,age,address);

                    this.BeFondOf=BeFondOf;

                },

                display:function(){

                    var info='姓名:'+this.name+'"n性别:'+this.sex+'"n年龄:'+this.age+'"n住址:'+this.address+'"n爱好:'+this.BeFondOf;

                    alert(info);

                }

            });

我创建了一个类ywg,使他继承person类,在ywg里面添加了一个数据成员BeFondOf,还有个display方法。按照上面创建对象和调用方法的形式我们可以写出下面的代码:

            var ywg2=new ywg('ywg','男','25','浙江宁波','看书,编程,上网,游戏');

            ywg2.display();

子类和父类里都有display方法,ywg2调用的是子类的display方法。

看完了extend,再来看implementimplment会修改类本身,看下面的例子:

            var car=new Class({

                initialize:function(name){

                    this.name=name;

                }

            });

           

            car.implement({

                setColor:function(color){

                    this.color=color;

                },

                display:function(){

                    alert('名称:'+this.name+'"n颜色:'+this.color);

                }

            });

我创建了一个名字叫car的类,里面有一个数据成员name,我通过car.implment增加另外一个数据成员color。通过:

            var bm=new car('bm');

            bm.setColor('Red');

            bm.display();

我们可以看见:

当car和car.implment里面都有display方法的时候会调用car.implment里的display方法。