jQuery 插件開發——countdown（倒計時）

　　故事背景：按照慣例，先寫下故事背景，其實也是再次匯報下最近開發情況的。做電商的都知道，這是個活動季啊，雙十一、雙十二、元旦。。。。各種啊。。其實說這么多就是想表達最近比較忙。呵呵^_^，正好今天抽點空來我最愛的網站寫點自己喜歡的和大家分享下。

　　還是之前按之前所說，插件源於開發需求。正好最近項目中需要用到計時器和預加載圖片功能，本人心血來潮，決定整個插件封裝一下，即滿足了項目的需要，也滿足自己的愛好啊，算是一舉兩得吧^^。其實寫插件的時候要考慮到很多，因為公共的東西，如果出錯，那后果會影響很大。畢竟不是一個地方用。所以，開發插件的時候一定要考慮全面。經過N次自測和他測，然后再使用。也就是我之前所說的，好的插件源於測試。經不起測試的插件，那就是個大坑啊。相信不少程序猿同仁被坑過啊。說多了都是淚啊。。。。所以現在的我是能不用第三方的堅決不用，就算麻煩也要自己去寫。。。

　　額。。好像又扯多了，這里就是程序猿網上的家啊，到了家里就是能說，一不小心就說多了。。。好了，開始本次插件系列開發的正題吧。

　　故事經過：本次開發的插件是countdown（倒計時），這個是個小插件，可能都是大家看不起眼的插件。呵呵，也許吧。功能的確簡單。但是可擴展性可是很強的啊，例如，如果一個頁面上有多個這樣的倒計時，（例如淘寶頁面的商品倒計時）難不成要寫多次？當然不是這樣。大部分的倒計時都是用window.setInterval實現的。使用window.setInterval就會涉及到關閉計時器的動作。這個動作也是很多人常常會漏掉的，希望大家養成良好習慣，及時關閉計時器。否則會給頁面帶來很大開銷。更何況如果一個頁面有很多個這樣的計時器，例如淘寶的限時促銷活動。一個頁面可能有幾十個倒計時器，如果在結束時候不關閉，那么這樣的影響就很大了。所以，猿們，我們得養成好習慣啊。得像獅學習啊。^_^

　　其實當一個頁面有未知個數的倒計時的時候，那么我們就要專門去控制關閉了，而不是那么簡單的clearInterval("...");了。所以，一個看似簡單的倒計時，只要你肯挖掘里面的需求，其實也不是那么簡單。當然嘍，也不是很復雜了。

　　先說下本倒計時的功能吧。1、支持同一個頁面多個倒計時；2、倒計時結束后，能自動釋放計時器；

　　看過我之前寫的插件開發系列的都知道我寫插件的規范，或者說是習慣吧。老樣子，開發插件分三步走：

　　第一步：定義插件和參數　　var countdown= function () {this.defaultParams = {};};

　　第二步：定義插件屬性、方法　　  countdown.prototype = {constructor: countdown,init:function (params){}};

　　第三步：對外分裝　　$.countdown= new countdown();

　　這里在啰嗦兩句，為啥老是這樣寫呢，首先，做任何事情都要按“步驟”來，這里不是說要按部就班啥的，是一種自己看好的習慣，也算是我個人理解的一個規范吧。第二，這樣寫思路很清晰，目的也很明確，剩下的只需要你去填充就行了。當然了，每個插件的內部實現都是不一樣的，難易不一，這個只能算個框架，或是說思路吧。

　　這篇博文寫了很久，主要是忙了一段時間忘記了，今天又拿出來，補上吧。算是給自己一點安慰吧，一般我不喜歡拖着一件事情的，尤其是自己喜歡的事情。^_^

　　好了，該是貼代碼的時刻了，哈哈　　

/*
 *  instructions ：countdown  
 *  date : 2014-10-26
 *  author : 張文書
 *  Last Modified 2014-10-17
 *  By 張文書
 */ 
$(function () { 
    ///說明:
    ///     倒計時
    var countdown = function () {
        this.defaults = {
            endDateTime: "",//結束時間  格式"yyyy-MM-dd HH:mm:ss"
            currentDateTime: "",//服務器當前時間 格式"yyyy-MM-dd HH:mm:ss"

            remainDaysId: "",//剩余天 ID
            remainHoursId: "",//剩余小時 ID
            remainMinutesId: "",//剩余分鍾 ID
            remainSecondsId: "", //剩余秒鍾 ID
            countDownName: "",  //倒計時器名稱
            difference: 0    //時間間隔（無需賦值，只做接收）
        };
        this.options = {}; 
    }; 
    countdown.prototype = { 
        constructor: countdown, 
        init: function (params) {
            this.options = $.coverObject(this.defaults, params);
            this._initCountdown(); 
        }, 
        _initCountdown: function () { 
            this.options.difference = this.getDifference();
            var options = this.options;
            this.options.countDownName = window.setInterval(function () {
                countdown.prototype.getCountdownTime(options);
            }, 1000); 
        }, 
        //說明：
        //      返回結束時間和當前服務器時間的差值
        getDifference: function () { 
            var endDateTime = this.convertStrToDate(this.options.endDateTime);//設置結束時間
            var endTime = endDateTime.getTime();//定義參數可返回距 1970 年 1 月 1 日之間的毫秒數   
            var nowTime = this.convertStrToDate(this.options.currentDateTime);//當前時間
            var difference = endTime - nowTime.getTime();//差值
            return difference;
        },
        //說明：
        //      獲得並顯示倒計時時間
        getCountdownTime: function (options) { 
            options.difference = options.difference - 1000; 
            var nMS = options.difference;
            var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));//獲得天數
            var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//獲得小時
            var nM = Math.floor(nMS / (1000 * 60)) % 60;//獲得分鍾
            var nS = Math.floor(nMS / 1000) % 60;//獲得秒鍾
            if (nMS < 0) {
                clearInterval(options.countDownName);//停止
            } else {
                $("#" + options.remainDaysId).text(nD < 10 ? "0" + nD : nD);//顯示天數  
                $("#" + options.remainHoursId).text(nH < 10 ? "0" + nH : nH);//顯示小時  
                $("#" + options.remainMinutesId).text(nM < 10 ? "0" + nM : nM);//顯示分鍾  
                $("#" + options.remainSecondsId).text(nS < 10 ? "0" + nS : nS);//顯示秒鍾  
            }
        },
        //說明：
        //      將字符串轉成時間類型
        convertStrToDate: function (strDate) {
            var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
            return date;
        }
    };
    $.countdown = new countdown();
});

　　代碼很簡單，而且都有我開發的時候寫的注釋（我個人有寫注釋的習慣，當然這些注釋不光是寫個我自己看的。我認為，寫好注釋也是一種團隊意識的表現。記住：你寫的代碼最終不僅僅是為了給自己看。為啥我就不解釋了，都懂^_^），代碼我就不一一解釋了，注意傳遞的參數，要傳很多標簽id。當然如果你有興趣，可以將其封裝在插件里，通過jquery輸出到頁面，這個也很簡單。這里只是提供個意見。

　　因為本來就是一個簡單的功能，所以也就沒有樣式表了。如果有不清楚的園友，請隨時聯系我。當然，如果您有更好的意見，還請不吝賜教啊，如果有想共同探討插件開發（或者其他）的同仁，隨時聯系我，QQ:296319075 ，注明園友就好，同時也希望大家也能提出寶貴意見。秉承共同探討、共同進步！如有轉載，請注明出處，謝謝！^_^