JavaScript面向对象编程(转载) -

yingxiongwudi

浏览: 58731 次
性别:
来自: 郑州

最近访客更多访客>>

jinjian1985go

alanshaka

dingdingmao11

nweida

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript面向对象编程(转载)

博客分类：

javascript对象编程

编程 JavaScript prototype Opera 框架

JavaScript面向对象编程[一] 构造函数

暂时放弃js框架吧
开始写javascript的时候都是自己写，后来发现了prototype.js框架，发现很好用，就一直用的，他的对象创建方法被修改了，但很好用，再后来又转用jquery框架，受此框架影响，也不用自己创建类了，渐渐的竟然忘记了如何自己定义类了，猛的给一个一般方法，竟然看着别扭，混淆了很多东西，忘记了很多东西。今天回头整理下。
一下方法参考prototype.js

程序代码

    //类的定义

    //方法一：类的一般定义方法
    function player1(_name)
    {
        this.name = _name;
        this.say = function() {alert(this.name);};
    }

    var p1 = new player1('llinzzi1');
    p1.say();


    //方法二：prototype定义方法
    var player2 = function() {}
    player2.prototype = {
        name:'',
        say:function(){
            alert(this.name);
        }
    }

    var p2 = new player2();
    p2.name = 'llinzzi2';
    p2.say();


    //方法三：上面的方法结构美观，便捷，但构建函数不能带参数，修改方法
    var player3 = function() {
        this.init.apply(this, arguments);
    }
    player3.prototype = {
        init:function(_name){
            this.name = _name;
        },
        say:function(){
            alert(this.name);
        }
    }

    var p3 = new player3('llinzzi3');
    p3.say();

    //类的继承

    //方法一
    var player4 = function(){
        this.init.apply(this, arguments);
    }
    player4.prototype = new player3;
    player4.prototype.shout = function(){
        alert(this.name.toUpperCase());
    }

    var p4 = new player4('llinzzi4');
    p4.shout();


    //方法二上面的方法不能采用{}的方法，修改方法
    Object.extend = function(destination, source) {
      for (var property in source)
        destination[property] = source[property];
      return destination;
    };

    var player5 = function(){
        this.init.apply(this, arguments);
    }
    Object.extend(Object.extend(player5.prototype,player3.prototype),{
        shout:function(){
            alert(this.name.toUpperCase());
        }

    });

    var p5 = new player5('llinzzi5');
    p5.shout();




    //再从prototype.js抄一端浏览器判断代码

    Browser = {
        IE:     !!(window.attachEvent && !window.opera),
        Opera: !!window.opera,
        WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
        Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
        MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
    }

    alert(Browser.MobileSafari);

/////////////////////////////////////////////////
JavaScript面向对象编程[二] 事件处理

如果采用上篇文章的方法构建的类，如果要处理事件按通常的写法会造成回调函数作用域丢失。

程序代码

        var foo = function(){ this.init.apply(this,arguments);};

        foo.prototype = {
            init:function(_name){
                 this.name = _name;
                 this.addEvent('click',document,this.say);
            },
            say:function(_ev){
                alert(this.name);
                this.stop();
            },
            stop:function(){
                 this.removeEvent('click',document,this.say);
          },
            addEvent:function(_event,_element,_fn){
                if (_element.addEventListener) {
                    _element.addEventListener(_event, _fn, false);
                } else if (_element.attachEvent) {
                    _element.attachEvent("on" +_event,_fn);
                }
            },
            removeEvent:function(_event,_element,_fn){
                if (_element.removeEventListener) {
                    _element.removeEventListener(_event, _fn, false);
                } else if (_element.detachEvent) {
                    _element.detachEvent("on" +_event, _fn);
                }
            }
        }

        var a = new foo('llinzzi');

以上代码可以观察到this.say的alert方法已经调用，但内部的this.name已经不存在了，因为找不到this了。并且如果要像say里面传值似乎也比较麻烦。

解决this丢失和传值问题的代码，并解决传this后不能注销事件的问题。

程序代码

        var foo = function(){ this.init.apply(this,arguments);};

        foo.prototype = {
            init:function(_name){
                 this.name = _name;
                 this.addEvent('click',document,this.say,this,'hello world!');
            },
            say:function(_ev,_word){
                alert(this.name +':' +_word);
                this.stop();
            },
            stop:function(){
                 this.removeEvent('click',document,this.say);
          },
            addEvent:function(_event,_element,_fn,_scope,_args){
                var args = this._toArray(arguments),
                    ev = args.shift(),
                    element = args.shift(),
                    fn = args.shift(),
                    scope = args.length>0?args.shift():window;
                element['e'+ev+fn] = function(_ev){
                    _ev == _ev || window.event;
                    args.unshift(_ev);
                    fn.apply(scope,args);
                };
                if (element.addEventListener) {
                    element.addEventListener(ev, element['e'+ev+fn], false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" +ev, element['e'+ev+fn]);
                }
            },
            removeEvent:function(_event,_element,_fn){
                if (_element.removeEventListener) {
                    _element.removeEventListener(_event, _element['e'+_event+_fn], false);
                } else if (_element.detachEvent) {
                    _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
                }
                try {
                    delete _element['e'+_event+_fn];
                }catch(_ex){
                    _element['e'+_event+_fn] = null;
                }
            },
            _toArray:function(iterable){
                if (!iterable) return [];
                if (iterable.toArray) return iterable.toArray();
                var length = iterable.length || 0, results = new Array(length);
                while (length--) results[length] = iterable[length];
                return results;
            }
        }

        var a = new foo('llinzzi');

下一次会分享一下在用面向对象编程过程中的一些心得，有关设计模式的一些整理。
/////////////////////////////////////////////////
JavaScript面向对象编程[三] 自定义事件

上一篇给foo类增加了
addEvent和removeEvent方便事件的注册与注销

这次总结下自定义事件的几种方法

程序代码

    <script type="text/javascript">
        
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

增加了个onSay的事件，在类定义的时候只定义成空函数，然后在需要的时候调用，定义具体的方法是在类实例化后，给实例中的onSay

缺点是只能定义一次的onSay的回调，如果多次定义后面的会把前面的覆盖掉，修改一下。

程序代码

    var foo = function(){ this.init.apply(this,arguments);};

    foo.prototype = {
        init:function(_name){
            this.name = _name;
            this.addEvent('click',document,this.say,this,'hello world!');
        },
        say:function(_ev,_word){
            alert(this.name +':' +_word);
            this.stop();
            this._onSay(_word);
        },
        stop:function(){
            this.removeEvent('click',document,this.say);
        },
        addEvent:function(_event,_element,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0);
            ev = args.shift(),
            element = args.shift(),
            fn = args.shift(),
            scope = args.length>0?args.shift():window;
            element['e'+ev+fn] = function(_ev){
                _ev == _ev || window.event;
                args.unshift(_ev);
                fn.apply(scope,args);
            };
            if (element.addEventListener) {
                element.addEventListener(ev, element['e'+ev+fn], false);
            } else if (element.attachEvent) {
                element.attachEvent("on" +ev, element['e'+ev+fn]);
            }
        },
        removeEvent:function(_event,_element,_fn){
            if (_element.removeEventListener) {
                _element.removeEventListener(_event, _element['e'+_event+_fn], false);
            } else if (_element.detachEvent) {
                _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
            }
            try {
                delete _element['e'+_event+_fn];
            }catch(_ex){
                _element['e'+_event+_fn] = null;
            }
        },
        _onSay:function(){
            if(!this._onSayArray) return;
            for(var i=0; i<this._onSayArray.length; i++){
                this._onSayArray[i].apply(this,arguments);
            }
        },
        addOnSay:function(_fn){
            if(!this._onSayArray) this._onSayArray = new Array();
            this._onSayArray.push(_fn);
        }
    }

var a = new foo('llinzzi');
a.addOnSay(function(_word){
    alert('事件1:'+this.name +'刚说了'+ _word);
});
a.addOnSay(function(_word){
    alert('事件2:'+this.name +'刚说了'+ _word);
});

HTML代码
<html>
<head>
<title>自定义事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="keywords" content="" >
<meta name="description" content="" >
</head>
<body>

<script type="text/javascript">

</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

实例通过addOnSay方法来增加事件响应，可以增加多个。

缺点，代码繁琐，如果要增加addOnSayAfter addOnSayBefore 就要增加很多代码。

再修改一下

程序代码

    var foo = function(){ this.init.apply(this,arguments);};

    foo.prototype = {
        init:function(_name){
            this.name = _name;
            this.addEvent('click',document,this.say,this,'hello world!');
        },
        say:function(_ev,_word){
            this.fireEvent('saybefore',_word);
            alert(this.name +':' +_word);
            this.stop();
            this.fireEvent('sayafter',_word);
        },
        stop:function(){
            this.removeEvent('click',document,this.say);
        },
        addEvent:function(_event,_element,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0);
            ev = args.shift(),
            element = args.shift(),
            fn = args.shift(),
            scope = args.length>0?args.shift():window;
            element['e'+ev+fn] = function(_ev){
                _ev == _ev || window.event;
                args.unshift(_ev);
                fn.apply(scope,args);
            };
            if (element.addEventListener) {
                element.addEventListener(ev, element['e'+ev+fn], false);
            } else if (element.attachEvent) {
                element.attachEvent("on" +ev, element['e'+ev+fn]);
            }
        },
        removeEvent:function(_event,_element,_fn){
            if (_element.removeEventListener) {
                _element.removeEventListener(_event, _element['e'+_event+_fn], false);
            } else if (_element.detachEvent) {
                _element.detachEvent("on" +_event, _element['e'+_event+_fn]);
            }
            try {
                delete _element['e'+_event+_fn];
            }catch(_ex){
                _element['e'+_event+_fn] = null;
            }
        },
        fireEvent:function(){
            var args = Array.prototype.slice.call(arguments, 0);
            var _event = args.shift();
            if(!this.cusEvents) return;
            if(!this.cusEvents[_event]) return;
            for(var i=0; i<this.cusEvents[_event].length; i++){
                this.cusEvents[_event][i].apply(this,args);
            }
        },
        catchEvent:function(_event,_fn){
            if(!this.cusEvents) this.cusEvents = {}
            if(!this.cusEvents[_event]) this.cusEvents[_event] = new Array();
            this.cusEvents[_event].push(_fn);
        }
    }

var a = new foo('llinzzi');

a.catchEvent('saybefore',function(_word){
    alert('事件1:'+this.name +'想说'+ _word);
});

a.catchEvent('sayafter',function(_word){
    alert('事件2:'+this.name +'刚说了'+ _word);
});

HTML代码
<html>
<head>
<title>自定义事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="keywords" content="" >
<meta name="description" content="" >
</head>
<body>

<script type="text/javascript">

</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

最后如果将catchEvent fireEvent addEvent removeEvent 单独放在一个类.EventHeloper
将addEvent和catchEvent整合
EventHeloper.addEvent(element/object,dom event/custom event,callback) 这样还是很方便的。

程序代码

    EventHelper = {
        Events:{Dom:{},Custom:{}},
        addEvent:function(_object,_event,_fn,_scope,_args){
            var args = Array.prototype.slice.call(arguments, 0),
                obj = args.shift(),
                ev = args.shift(),
                fn = args.shift(),
                scope = args.length>0?args.shift():window;
            var eType = obj.nodeType?'Dom':'Custom';
            var fun;
            if(eType=='Dom'){
                sfn = function(_ev){
                    _ev == _ev || window.event;
                    args.unshift(_ev);
                    fn.apply(scope,args);
                }
                if (obj.addEventListener) {
                    obj.addEventListener(ev,sfn, false);
                } else if (obj.attachEvent) {
                    obj.attachEvent("on" +ev,sfn);
                }
            }else {
                sfn = function(){
                    var __sargs = Array.prototype.slice.call(arguments, 0);
                    var _sargs = __sargs.concat(args);
                    fn.apply(scope,_sargs);
                }
            }
            fun = { fn:fn,sfn:sfn };
            this.Events[eType][obj] = this.Events[eType][obj] || {};
            this.Events[eType][obj][ev] = this.Events[eType][obj][ev] || new Array();
            this.Events[eType][obj][ev].push(fun);
        },
        removeEvent:function(_object,_event,_fn){
            var obj = _object,
                ev = _event,
                fn = _fn;
            var eType = obj.nodeType?'Dom':'Custom';
            if(!this.Events[eType][obj]) return;

            var fun;
            for( var i=0; i<this.Events[eType][obj][ev].length;i++){
                if(fn == this.Events[eType][obj][ev][i].fn){
                    fun = this.Events[eType][obj][ev][i].sfn;
                    this.Events[eType][obj][ev].splice(i,1);
                    break;
                }
            }
            if(eType=='Dom'){
                if (obj.removeEventListener) {
                    obj.removeEventListener(ev, fun, false);
                } else if (obj.detachEvent) {
                    obj.detachEvent("on" + ev, fun);
                }
            }

        },
        fireEvent:function(_object,_event){
            var args = Array.prototype.slice.call(arguments, 0),
                obj = args.shift(),
                ev = args.shift();
            var eType = 'Custom';
            if((!this.Events[eType][obj]) || (!this.Events[eType][obj][ev])) return;
            for(var i=0; i<this.Events[eType][obj][ev].length; i++){
                this.Events[eType][obj][ev][i].sfn.apply(window,args);
            }
        }
    }

修改一下演示的例子

HTML代码
<html>
<head>
<title>自定义事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="keywords" content="" >
<meta name="description" content="" >
</head>
<body>

<script type="text/javascript">

</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上面例子的 EventHelper.addEvent方法可以增加自定义事件或者原生的事件
EventHelper.addEvent(document,'click',function(){alert('hello');}); // 原生事件
EventHelper.addEvent(foo,'say',function(){alert('hello');}); // 自定义时间

对应的EventHelper.removeEvent也可以移除自定义事件。

分享到：