初试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
