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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hanbingljw/p/4250769.html