首页 > 代码库 > 初试jquery插件开发
初试jquery插件开发
之前一直只是在理论上学习jquery插件的开发。。。现在写了个倒计时的小插件尝试下，顺便重新温习下jquery插件的开发和写法：
倒计时效果:
首先是写取个常规的函数调用方法：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>倒计时</title> <script src="http://www.mamicode.com/js/jquery.js"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/js/jquery.js"></script> <script src="http://www.mamicode.com/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
初试jquery插件开发
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。