jQuery编写一个类级别的插件

最新推荐文章于 2023-02-01 12:41:03 发布

一剑一心

最新推荐文章于 2023-02-01 12:41:03 发布

阅读量466

点赞数

本文深入解析jQuery插件的开发技巧，包括类插件的通用格式与面向对象的实践，通过实例展示如何创建使元素居中的插件，强调参数传递与事件处理的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.类插件的通用格式

//这里加分号（；）主要是为了更好的兼容性，以及避免他人不规范的代码给插件带来不必要的影响。
;(function($){
	//对象级别
	$.fn.center = function(options){       //此处options为匿名函数的形参，即从外传入的对象     $.fn.center 则是指对外暴露出center这个自定义的方法
		var defaults = {
			//此处编写默认目标对象的默认状态
		}
		
		var options = $.extend(defaults,options); //这里则为合并对象状态。也可以说成是覆盖对象状态，即在options传入新的状态后，可以覆盖掉default处的默认对象
		this.each(function(){
			var _this = $(this)
							//此处为编写对象执行函数后的事件。切记在编写事件之前要先将$(this)用var _this固定起来，不然后续事件可能会发生不必要的偏差与找不到对的对象
		})
		return this //返回对象
	}
})(jQuery);		//这里将jQuery作为实参传递给匿名函数。

<script>
			$(".box").center()  // 调用插件中编写的center() 
</script>

二.类插件的面向对象

让我们来看一个列子，这是一个让目标盒子始终水平竖直居中的插件。

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/sb.js" ></script>
		<style>
			.box{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		<script>
			$(".box").center()
		</script>
	</body>
</html>

jq插件部分

;(function($){
	//对象级别
	$.fn.center = function(options){
		var defaults = {
			"position":"absolute",
			"background":"red",
			"width":100,
			"height":100
		}
		
		var options = $.extend(defaults,options);
		this.each(function(){
			//功能实现逻辑
			var _this = $(this)
			$(window).resize(function(){          //此处主要为让盒子随着屏幕大小改变而跟随改变。
				fn()
			})
			function fn(){
				var _vH = ($(window).height()-options.height)/2
				var _vW = ($(window).width()-options.width)/2
				_this.css({
					"background":options.background,
					"position":options.position,
					"width":options.width,
					"height":options.height,
					"left":_vW,
					"top":_vH
				})
				
			}
			fn()
		})
		return this
		
		
	}
	
	
	
})(jQuery)

我们可以从这个列子注意到，在插件中，它的$(this)是默认指向调用此插件的对象。

但在随后的事件书写中，它很有可能受到影响与改动，所以我们最好事先把它存起来，以防止这一现象发生。

我们从这个列子也不难看出，插件的核心思想便是对虚参的运用。。。