Stay Hungry,Stay Foolish!

以构造函数和原型法重新实现定时器封装

　　上篇文章实现了“使用工厂模式和闭包实现定时器封装”，

http://www.cnblogs.com/lightsong/p/3703045.html

本文记录以构造函数和原型法对其重新实现。

 

  构造函数

　　创建对象，包括定义 var obj = {}、 工厂创建、 和 构造函数。

工厂创建即在创建函数中， 定义对象， 并给对象赋属性和方法， 最后return出此对象。

构造函数，类似Java中类的构造函数， 函数中， 使用this.xxx 来定义属性和方法，此处的this表示实例化时候的对象，

实例化语句 var obj = new constructor(args)。

 

  构造函数改造出定时器

　　直接上代码，即在所有的属性和方法前添加this., 实现的功能与工厂一致：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
    <label>timer msg :</label> </br>
    <textarea id="timer_msg" style="width:500px; height:300px"></textarea>
    <script>
    $.fn.extend({printMsg : function(msg){
         var oldmsg = $(this).val();
         var newmsg = oldmsg + "\n" + msg;
         $(this).val(newmsg);
    }});
    
    var __nativeST__ = window.setTimeout;
    window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
      var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeST__(vCallback instanceof Function ? function () {
        vCallback.apply(oThis, aArgs);
      } : vCallback, nDelay);
    };
    
    function timer(fnAlarmIn, options)
    {
        /* external settable */
        this.timeout = 1000;
        this.fnAlarm = function(){
            $("#timer_msg").printMsg(this.timerHandle.toString() 
                + "-please add custom fnAlarm")
        };
        
        /* inner maintain variable */
        this.timerHandle;
        this.timerObj;
        
        /* set external variable */
        if ( fnAlarmIn )
        {
            this.fnAlarm = fnAlarmIn;
        }

        if ( options && options.timeout )
        {
            this.timeout = options.timeout;
        }
        
        this.start = function(){
            this.timerHandle = setTimeout.call(this, function(){
                $("#timer_msg").printMsg(this.getTimerID() + "-->timer triggered");
                this.fnAlarm.call(this);
                delete this.timerHandle;
            }, this.timeout);
            $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer started");
        };
        
        this.stop = function(){
            $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer stoped");
            clearTimeout(this.timerHandle)
            delete this.timerHandle;
        };
        
        this.getTimerID = function(){
            return this.timerHandle;
        };
    }

    var timer1 = new timer();
    timer1.start();
    timer1.stop();
    
    var timer2 = new timer(function(){
        $("#timer_msg").printMsg("timer custom alarm");
    }, {timeout:2000});
    timer2.start();
    
    var timer3 = new timer(function(){
        $("#timer_msg").printMsg(timer3.getTimerID()+"-timer custom alarm");
    }, {timeout:3000});
    timer3.start();
    
    var timer4 = new timer(function(){
        $("#timer_msg").printMsg(this.getTimerID()+"-timer custom alarm");
    }, {timeout:4000});
    timer4.start();
    </script>
    </body>
</html>

 

 

　　构造函数中定义对象的方法， 为每个对象独有， 实际上此方法应该属于每个对象共有。

一来浪费内存，二来不符合对象行为抽象的逻辑。此问题就需要原型方法解决。

 

   原型方法

　　原型 prototype，就是定义构造函数中，对象公共方法的手段， 

例如原型为 function constructor(){}; constructor.prototype.hello = function(){console.log("hello")}

则任何实例化的对象 var a = new constructor();  都可以调用 a.hello();

 

  原型方法优化构造函数实现的定时器

　　直接上代码，功能与构造函数一致：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
    <label>timer msg :</label> </br>
    <textarea id="timer_msg" style="width:500px; height:300px"></textarea>
    <script>
    $.fn.extend({printMsg : function(msg){
         var oldmsg = $(this).val();
         var newmsg = oldmsg + "\n" + msg;
         $(this).val(newmsg);
    }});
    
    var __nativeST__ = window.setTimeout;
    window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
      var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
      return __nativeST__(vCallback instanceof Function ? function () {
        vCallback.apply(oThis, aArgs);
      } : vCallback, nDelay);
    };
    
    function timer(fnAlarmIn, options)
    {
        /* external settable */
        this.timeout = 1000;
        this.fnAlarm = function(){
            $("#timer_msg").printMsg(this.timerHandle.toString() 
                + "-please add custom fnAlarm")
        };
        
        /* inner maintain variable */
        this.timerHandle;
        this.timerObj;
        
        /* set external variable */
        if ( fnAlarmIn )
        {
            this.fnAlarm = fnAlarmIn;
        }

        if ( options && options.timeout )
        {
            this.timeout = options.timeout;
        }
    }

    timer.prototype.start = function(){
        this.timerHandle = setTimeout.call(this, function(){
            $("#timer_msg").printMsg(this.getTimerID() + "-->timer triggered");
            this.fnAlarm.call(this);
            delete this.timerHandle;
        }, this.timeout);
        $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer started");
    };
    
    timer.prototype.stop = function(){
        $("#timer_msg").printMsg(this.timerHandle.toString() + "-timer stoped");
        clearTimeout(this.timerHandle)
        delete this.timerHandle;
    };
    
    timer.prototype.getTimerID = function(){
        return this.timerHandle;
    };
    
    var timer1 = new timer();
    timer1.start();
    timer1.stop();
    
    var timer2 = new timer(function(){
        $("#timer_msg").printMsg("timer custom alarm");
    }, {timeout:2000});
    timer2.start();
    
    var timer3 = new timer(function(){
        $("#timer_msg").printMsg(timer3.getTimerID()+"-timer custom alarm");
    }, {timeout:3000});
    timer3.start();
    
    var timer4 = new timer(function(){
        $("#timer_msg").printMsg(this.getTimerID()+"-timer custom alarm");
    }, {timeout:4000});
    timer4.start();
    </script>
    </body>
</html>

 

 

 

 

 

 

posted @ 2014-05-12 23:08  lightsong  阅读(572)  评论(0)  编辑  收藏  举报
Life Is Short, We Need Ship To Travel