使用JavaScript闭包，以工厂模式实现定时器对象

原始对象写法

　　一般工作中写Javascript代码，主要写全局函数，并组织函数之间的调用，确实比较低级，

于是想利用面向对象的思想应用到JS编码中。

　　在火狐浏览器开发者网站上，看到一个实例利用对象技术实现的定时器例子，网址如下，

https://developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout#Example

也贴出代码，如下，其实现是利用对象技术，在对象定义了三个函数（开始、取消和时间到的触发函数），

定时器句柄 timeoutID 作为定向的属性存储。

优点，自然比直接使用setTimeout函数更加集成，对功能做了封装，方便维护和管理。

缺点，只能支持一个计时器实例，且封装的过程，没有做到信息隐藏（对象中的句柄和三个函数都可以被调用）。

<html>

<head>

     <style>

     </style>

</head>

<body>

     <script type='text/javascript'>

        var alarm = {

          remind: function(aMessage) { alert(aMessage); delete this.timeoutID;

          },

          setup: function() {

            this.cancel();

            var self = this;

            this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");

          },

          cancel: function() {

            if(typeof this.timeoutID == "number") {

              window.clearTimeout(this.timeoutID);

              delete this.timeoutID;

            }

          }

        };

        window.onclick = function() { alarm.setup() };

     </script>

</body>

</html>

闭包方法

下面应用工厂模式和闭包技术，解决上例中的缺点，支持多实例计时器应用并明确开放定时器开放的接口。

如下代码中，

1、createTimer 为工厂函数，入参为计时结束触发的函数，和options可选参数（目前只有timeout，默认为1秒）；

2、每次调用createTimer生成一个定时器对象，即createTimer中 return出来的对象，

此对象定义的属性和函数，即为定时器开放接口，包括 start 和 stop。

3、定时器句柄 timerHandle 作为内部变量，不直接开放，通过getTimerID函数访问，同时start赋值，被stop清空。

4、函数 fnAlarm ，也是作为内部变量，不开放，此为计时结束触发函数，createTimer第一参数（fnAlarmIn）的重载赋值，

此函数调用后会清空定时器句柄。

　　开放接口 start stop 和 getTimerID，被return到createTimer之外，

同时它们对createTimer内部变量的timerHandle 和 fnAlarm的依赖，构成了闭包。

闭包我理解是构造出来的一个封闭的运行环境，即被return出去的这些函数，依赖的运行环境仍然跟这些函数绑定，没有切换到全局环境中去，这些函数可以继续对被return之前的环境变量进行读写。

-- 概念中心是构造一个运行环境，此环境包括全局变量和函数入参和函数局部变量。

闭包的定义：参考下面文档，其中牵扯到定义环境和引用环境，当不一样，才构成这个：

http://www.ibm.com/developerworks/cn/linux/l-cn-closure/index.html

　　显然闭包的技术天然含义满足设计模式中的工厂模式。

<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);

    }});

    function createTimer(fnAlarmIn, options)

    {

        /* external settable */

        var timeout = 1000;

        var fnAlarm = function(){

            $("#timer_msg").printMsg(timerHandle.toString()

                + "-please add custom fnAlarm")

        };

        /* inner maintain variable */

        var timerHandle;

        /* set external variable */

        if ( fnAlarmIn )

        {

            fnAlarm = fnAlarmIn;

        }

        if ( options && options.timeout )

        {

            timeout = options.timeout;

        }

        return {

            start: function(){

                timerHandle = setTimeout(function(){

                    fnAlarm();

                    delete this.timerHandle;

                },timeout);

                $("#timer_msg").printMsg(timerHandle.toString() + "-timer started");

            },

            stop: function(){

                clearTimeout(timerHandle)

                delete this.timerHandle;

                $("#timer_msg").printMsg(timerHandle.toString() + "-timer stoped");

            },

            getTimerID: function(){

                return timerHandle;

            }

        };

    }

    var timer1 = createTimer();

    timer1.start();

    timer1.stop();

    var timer2 = createTimer(function(){

        $("#timer_msg").printMsg("timer custom alarm");

    }, {timeout:2000});

    timer2.start();

    var timer3 = createTimer(function(){

        $("#timer_msg").printMsg(timer3.getTimerID()+"-timer custom alarm");

    }, {timeout:3000});

    timer3.start();

    </script>

    </body>

</html>

改进

　　上例中，定时器内部的函数中的打印都带有定时器句柄前缀，目的是对于多实例情况下跟踪各个实例的运行状态；

定时器内部是这样，但是定时器触发函数中的打印是没有句柄的，如timer2中触发函数的打印；

如果需要句柄来区分，就像timer3中，利用getTimerID接口来获取，然后打印。

　　此获取句柄方法可行，但是每次都要使用 timer3.getTimerID() 来调用，显然不满足面向对象的思想，

因为此函数是在timer3创建之后的响应函数，理应使用 this.getTimerID() 来获取。

　　下面就来解决这个问题，首先参考获取网站上关于 setTimeout 计时结束触发函数中 this的解决办法，见下网址

https://developer.mozilla.org/zh-CN/docs/DOM/window.setTimeout

　　其基本思路为，重载setTimeout，在新的函数中，保存当前调用setTimeout的对象，

然后在真实的setTimeout的计时结束触发函数中，使用this来引用此对象，此时就构成了闭包。

　　引入setTimeout重载代码，并将setTimeout.call到定时器对象上，并通过fnAlarm.call，将对象传递到用户自定义的函数中。

<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 createTimer(fnAlarmIn, options)

    {

        /* external settable */

        var timeout = 1000;

        var fnAlarm = function(){

            $("#timer_msg").printMsg(timerHandle.toString()

                + "-please add custom fnAlarm")

        };

        /* inner maintain variable */

        var timerHandle;

        var timerObj;

        /* set external variable */

        if ( fnAlarmIn )

        {

            fnAlarm = fnAlarmIn;

        }

        if ( options && options.timeout )

        {

            timeout = options.timeout;

        }

        return {

            start: function(){

                timerHandle = setTimeout.call(this, function(){

                    $("#timer_msg").printMsg(this.getTimerID() + "-->timer id");

                    fnAlarm.call(this);

                    delete this.timerHandle;

                },timeout);

                $("#timer_msg").printMsg(timerHandle.toString() + "-timer started");

            },

            stop: function(){

                clearTimeout(timerHandle)

                delete this.timerHandle;

                $("#timer_msg").printMsg(timerHandle.toString() + "-timer stoped");

            },

            getTimerID: function(){

                return timerHandle;

            }

        };

    }

    var timer1 = createTimer();

    timer1.start();

    timer1.stop();

    var timer2 = createTimer(function(){

        $("#timer_msg").printMsg("timer custom alarm");

    }, {timeout:2000});

    timer2.start();

    var timer3 = createTimer(function(){

        $("#timer_msg").printMsg(timer3.getTimerID()+"-timer custom alarm");

    }, {timeout:3000});

    timer3.start();

    var timer4 = createTimer(function(){

        $("#timer_msg").printMsg(this.getTimerID()+"-timer custom alarm");

    }, {timeout:4000});

    timer4.start();

    </script>

    </body>

</html>

除了上面的触发函数的对象绑定功能，

setTimeout执行函数带扩展参数，解决IE6、7不支持扩展参数的缺陷，也是用闭包功能，见：

https://developer.mozilla.org/zh-CN/docs/DOM/window.setTimeout