故事背景:按照惯例,先写下故事背景,其实也是再次汇报下最近开发情况的。做电商的都知道,这是个活动季啊,双十一、双十二、元旦。。。。各种啊。。其实说这么多就是想表达最近比较忙。呵呵^_^,正好今天抽点空来我最爱的网站写点自己喜欢的和大家分享下。

  还是之前按之前所说,插件源于开发需求。正好最近项目中需要用到计时器和预加载图片功能,本人心血来潮,决定整个插件封装一下,即满足了项目的需要,也满足自己的爱好啊,算是一举两得吧^^。其实写插件的时候要考虑到很多,因为公共的东西,如果出错,那后果会影响很大。毕竟不是一个地方用。所以,开发插件的时候一定要考虑全面。经过N次自测和他测,然后再使用。也就是我之前所说的,好的插件源于测试。经不起测试的插件,那就是个大坑啊。相信不少程序猿同仁被坑过啊。说多了都是泪啊。。。。所以现在的我是能不用第三方的坚决不用,就算麻烦也要自己去写。。。

  额。。好像又扯多了,这里就是程序猿网上的家啊,到了家里就是能说,一不小心就说多了。。。好了,开始本次插件系列开发的正题吧。

  故事经过:本次开发的插件是countdown(倒计时),这个是个小插件,可能都是大家看不起眼的插件。呵呵,也许吧。功能的确简单。但是可扩展性可是很强的啊,例如,如果一个页面上有多个这样的倒计时,(例如淘宝页面的商品倒计时)难不成要写多次?当然不是这样。大部分的倒计时都是用window.setInterval实现的。使用window.setInterval就会涉及到关闭计时器的动作。这个动作也是很多人常常会漏掉的,希望大家养成良好习惯,及时关闭计时器。否则会给页面带来很大开销。更何况如果一个页面有很多个这样的计时器,例如淘宝的限时促销活动。一个页面可能有几十个倒计时器,如果在结束时候不关闭,那么这样的影响就很大了。所以,猿们,我们得养成好习惯啊。得像狮学习啊。^_^

  其实当一个页面有未知个数的倒计时的时候,那么我们就要专门去控制关闭了,而不是那么简单的clearInterval("...");了。所以,一个看似简单的倒计时,只要你肯挖掘里面的需求,其实也不是那么简单。当然喽,也不是很复杂了。

  先说下本倒计时的功能吧。1、支持同一个页面多个倒计时;2、倒计时结束后,能自动释放计时器;

  看过我之前写的插件开发系列的都知道我写插件的规范,或者说是习惯吧。老样子,开发插件分三步走:

  第一步:定义插件和参数  var countdown= function () {this.defaultParams = {};};

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

  第三步:对外分装  $.countdown= new countdown();

  这里在啰嗦两句,为啥老是这样写呢,首先,做任何事情都要按“步骤”来,这里不是说要按部就班啥的,是一种自己看好的习惯,也算是我个人理解的一个规范吧。第二,这样写思路很清晰,目的也很明确,剩下的只需要你去填充就行了。当然了,每个插件的内部实现都是不一样的,难易不一,这个只能算个框架,或是说思路吧。

  这篇博文写了很久,主要是忙了一段时间忘记了,今天又拿出来,补上吧。算是给自己一点安慰吧,一般我不喜欢拖着一件事情的,尤其是自己喜欢的事情。^_^

  好了,该是贴代码的时刻了,哈哈  

 1 /*
 2  *  instructions :countdown  
 3  *  date : 2014-10-26
 4  *  author : 张文书
 5  *  Last Modified 2014-10-17
 6  *  By 张文书
 7  */ 
10 $(function () { 
12     ///说明:
13     ///     倒计时
14     var countdown = function () {
15         this.defaults = {
16             endDateTime: "",//结束时间  格式"yyyy-MM-dd HH:mm:ss"
17             currentDateTime: "",//服务器当前时间 格式"yyyy-MM-dd HH:mm:ss"
18 
19             remainDaysId: "",//剩余天 ID
20             remainHoursId: "",//剩余小时 ID
21             remainMinutesId: "",//剩余分钟 ID
22             remainSecondsId: "", //剩余秒钟 ID
23             countDownName: "",  //倒计时器名称
24             difference: 0    //时间间隔(无需赋值,只做接收)
25         };
26         this.options = {}; 
28     }; 
30     countdown.prototype = { 
32         constructor: countdown, 
34         init: function (params) {
35             this.options = $.coverObject(this.defaults, params);
36             this._initCountdown(); 
38         }, 
40         _initCountdown: function () { 
42             this.options.difference = this.getDifference();
43             var options = this.options;
44             this.options.countDownName = window.setInterval(function () {
45                 countdown.prototype.getCountdownTime(options);
46             }, 1000); 
48         }, 
50         //说明:
51         //      返回结束时间和当前服务器时间的差值
52         getDifference: function () { 
54             var endDateTime = this.convertStrToDate(this.options.endDateTime);//设置结束时间
55             var endTime = endDateTime.getTime();//定义参数可返回距 1970 年 1 月 1 日之间的毫秒数   
57             var nowTime = this.convertStrToDate(this.options.currentDateTime);//当前时间
59             var difference = endTime - nowTime.getTime();//差值
60             return difference;
61         },
63         //说明:
64         //      获得并显示倒计时时间
65         getCountdownTime: function (options) { 
67             options.difference = options.difference - 1000; 
69             var nMS = options.difference;
70             var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));//获得天数
71             var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//获得小时
72             var nM = Math.floor(nMS / (1000 * 60)) % 60;//获得分钟
73             var nS = Math.floor(nMS / 1000) % 60;//获得秒钟
74             if (nMS < 0) {
75                 clearInterval(options.countDownName);//停止
76             } else {
77                 $("#" + options.remainDaysId).text(nD < 10 ? "0" + nD : nD);//显示天数  
78                 $("#" + options.remainHoursId).text(nH < 10 ? "0" + nH : nH);//显示小时  
79                 $("#" + options.remainMinutesId).text(nM < 10 ? "0" + nM : nM);//显示分钟  
80                 $("#" + options.remainSecondsId).text(nS < 10 ? "0" + nS : nS);//显示秒钟  
81             }
82         },
84         //说明:
85         //      将字符串转成时间类型
86         convertStrToDate: function (strDate) {
87             var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
88             return date;
89         }
90     };
92     $.countdown = new countdown();
94 });

  代码很简单,而且都有我开发的时候写的注释(我个人有写注释的习惯,当然这些注释不光是写个我自己看的。我认为,写好注释也是一种团队意识的表现。记住:你写的代码最终不仅仅是为了给自己看。为啥我就不解释了,都懂^_^),代码我就不一一解释了,注意传递的参数,要传很多标签id。当然如果你有兴趣,可以将其封装在插件里,通过jquery输出到页面,这个也很简单。这里只是提供个意见。

  因为本来就是一个简单的功能,所以也就没有样式表了。如果有不清楚的园友,请随时联系我。当然,如果您有更好的意见,还请不吝赐教啊,如果有想共同探讨插件开发(或者其他)的同仁,随时联系我,QQ:296319075 ,注明园友就好,同时也希望大家也能提出宝贵意见。秉承共同探讨、共同进步!如有转载,请注明出处,谢谢!^_^