初试jquery插件开发
之前一直只是在理论上学习jquery插件的开发。。。现在写了个倒计时的小插件尝试下,顺便重新温习下jquery插件的开发和写法:
倒计时效果:
首先是写取个常规的函数调用方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时</title> <script src="../js/jquery.js"></script> <script src="../js/jquery.Timer.js"></script> </head> <body> <div class="wrap"> <div class="wrapCon1"> <p> 剩余时间: <span class="day"></span>天 <span class="hours"></span>小时 <span class="minute"></span>分钟 <span class="second"></span>秒 </p> </div> </div> </body> <script> $(function(){ setUpTimeDom.init({});//调用倒计时参数 DayDom,HourDom,MinDom,SecDom,endTime默认时间是2015/2/28 23:59:59,若要需要天数可在init({DayDom:false}) }); var setUpTimeDom ={ defaults:{ DayDom : ".day", HourDom : ".hours", MinDom : ".minute", SecDom : ".second", endTime : new Date(‘2015/2/28 23:59:59‘)//结束时间 },//默认参数值 //为小于10的数前面置零 checkTime:function(i){ if(i<10) i = "0"+i; return i; }, //设置倒计时 setRemainingTime:function(){ var nowTime = new Date(); //开始时间 // endTime = new Date(‘2015/2/28 23:59:59‘),//结束时间 ts = "", dd = "", hh = "", mm = "", ss = ""; ts = this.defaults.endTime.getTime() -nowTime.getTime();//计算剩余的毫秒数 dd = parseInt(ts/1000/60/60/24,10);//计算剩余的天数 hh = parseInt(ts/1000/60/60%24,10);//计算剩余的小时数 mm = parseInt(ts/1000/60%60,10);//计算剩余的分钟数 ss = parseInt(ts/1000%60,10);//计算剩余的秒数 ts = setUpTimeDom.checkTime(ts); dd = setUpTimeDom.checkTime(dd); hh = setUpTimeDom.checkTime(hh); mm = setUpTimeDom.checkTime(mm); ss = setUpTimeDom.checkTime(ss); if(this.defaults.DayDom) $(this.defaults.DayDom).text(dd); if(this.defaults.HourDom) $(this.defaults.HourDom).text(hh); if(this.defaults.MinDom) $(this.defaults.MinDom).text(mm); if(this.defaults.SecDom) $(this.defaults.SecDom).text(ss); setTimeout("setUpTimeDom.setRemainingTime()",1000); }, init: function(options){ this.defaults = $.extend(this.defaults,options); setUpTimeDom.setRemainingTime(); } //初始化倒计时 } </script> </html>
写成插件形式:
html文件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时</title> <script src="../js/jquery.js"></script> <script src="../js/jquery.Timer.js"></script> </head> <body> <div class="wrap"> <div class="wrapCon2"> </div><!--放置倒计时区域--> </div> </body> <script> $(function(){ $(".wrapCon2").jqueryTimer({ endTime: new Date(‘2015/2/28 23:59:59‘),//设置结束时间 TLabel:{color:"red",fontWeight:"bold",fontSize:20},//设置标签样式 TimeValue:{fontSize:"20px"} //设置时间区域样式 }); });
</html>
js:命名:jquery.Timer.js
/* *$.fn.jqueryTimer *生成倒计时 *参数: *DayDom boolean值 默认为true 开启剩余天数 *HourDom boolean值 默认为true 开启剩余小时 *MinDom boolean值 默认为true 开启剩余分钟 *SecDom boolean值 默认为true 开启剩余秒数 *endTime object值 设置结束时间 默认值为当前时间 赋值形式:endTime: new Date(‘2015/2/28 23:59:59‘) *TLabel object值 设置标签样式 格式为jquery $().css(object)中的object同等 *TimeValue object值 设置时间区的样式 格式为jquery $().css(object)中的object同等 */ ;(function($){ $.fn.jqueryTimer = function(options){ var defaults = { DayDom: true, HourDom: true, MinDom: true, SecDom: true, endTime: new Date(),//结束时间 TLabel : {},//标签样式 TimeValue: {}//倒计时样式 },//默认参数值 $lastTimeDom = ‘‘; defaults = $.extend(defaults,options); $(this).append("<div class=‘lastTime‘><p></p></div>");//生成倒计时节点 $lastTimeDom = $(this).find(".lastTime p"); setDom = function(){ if(defaults.DayDom){ $lastTimeDom.append("<span class=‘day TimeValue‘></span><span class=‘DayLabel TLabel‘>天</span>"); }//是否开启天数 if(defaults.HourDom){ $lastTimeDom.append("<span class=‘hours TimeValue‘></span><span class=‘HoursLabel TLabel‘>小时</span>"); }//是否开启小时 if(defaults.MinDom){ $lastTimeDom.append("<span class=‘minute TimeValue‘></span><span class=‘MinLabel TLabel‘>分</span>"); }//是否开启分钟 if(defaults.SecDom){ $lastTimeDom.append("<span class=‘second TimeValue‘></span><span class=‘SecLabel TLabel‘>秒</span>"); }//是否开启秒 if(defaults.TLabel){ $lastTimeDom.find(".TLabel").css(defaults.TLabel); }//设置标签样式 if(defaults.TimeValue){ $lastTimeDom.find(".TimeValue").css(defaults.TimeValue); }//设置时间区的样式 } checkTime = function(i){ if(i<10) i = "0"+i; return i; }, //为小于10的数前面置零 setRemainingTime = function(){ var nowTime = new Date(), //开始时间 // endTime = new Date(‘2015/2/28 23:59:59‘),//结束时间 ts = "", dd = "", hh = "", mm = "", ss = ""; ts = defaults.endTime.getTime() -nowTime.getTime();//计算剩余的毫秒数 dd = parseInt(ts/1000/60/60/24,10);//计算剩余的天数 hh = parseInt(ts/1000/60/60%24,10);//计算剩余的小时数 mm = parseInt(ts/1000/60%60,10);//计算剩余的分钟数 ss = parseInt(ts/1000%60,10);//计算剩余的秒数 ts = this.checkTime(ts); dd = this.checkTime(dd); hh = this.checkTime(hh); mm = this.checkTime(mm); ss = this.checkTime(ss); if(defaults.DayDom){ $(defaults.DayDom).text(dd); } if(defaults.HourDom){ $(defaults.HourDom).text(hh); } if(defaults.MinDom){ $(defaults.MinDom).text(mm); } if(defaults.SecDom){ $(defaults.SecDom).text(ss); } setTimeout("setRemainingTime()",1000); }, // 设置倒计时 setDom();//生成节点 setRemainingTime();//调用 return this;//支持链式操作 } })(jQuery);
总结:第一种耦合性强,复用性差
第二种复用性强;用法:$().jqueryTimer({});
编写jQuery插件可以充分利用库,将公用的函数抽象出来,“循环利用”。以下是简短的总结:
- 使用;(function($){//plugin})(jQuery);来包装你的插件
- 不要在插件的初始范围中重复包裹
- 除非你返回原始值,否则返回this指针来保证可链式
- 不要用一串参数,而是使用一个对象,并且设置默认值
- 一个插件,不要为jQuery.fn附上多个函数
- 为你的函数,事件,数据附着到某个命名空间
参考:http://www.cnblogs.com/playerlife/archive/2012/05/11/2495269.html
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。