学习编写jQuery插件

jquery插件基本上分为两种,一种是对象级别的插件,另一种是全局级别的插件。对象级别的插件就像是实例方法,它是属于实例对象的,而全局级别的相当于静态方法,是属于类的,调用起来自然也就不一样,对于全局级别的插件我们自然是使用jQuery来调用,比如$.NPScrollLoad(....),对象级别的插件自然是应用与jQuery对象上了,比如:$("selector").NPScrollLoad(...)。

全局级别插件:,相当于类的静态方法:

//用于扩展jQuery类本身,在jQuery类/命名空间上增加新函数
//属于静态方法
jQuery.extend({
	"minValue":function(a,b){
		return a<b?a:b;
	},
	"maxValue":function(a,b){
		return a>b?a:b;
	}
});
var a=100,b=101;
//调用
var min=$.minValue(a,b);
var max=$.maxValue(a,b);
console.log(min);
console.log(max);

对象级别插件:相当于对象的成员方法

$(function(){
$.fn.extend({
	maxValue:function(a,b){
		return a>b?a:b;
	},
	minValue:function(a,b){
		return a<b?a:b;
	}
});
var a=1,b=2;
var max=$.fn.maxValue(a,b);
var min=$.fn.minValue(a,b);

console.log(max);
console.log(min);
});

jQuery.extend有个重载版本,可用于配置参数:

<body>
	<p>jQuery.extend() 方法的重载版本:</p>
	<p>
		jQuery.extend(deep,target,object1,[objectN]);
		// deep:是否递归合并
		// target:待修改的对象
		// object1-N: 待合并到第一个对象的对象
	</p>
	<script>
		//合并 settings 和 options,修改并返回 settings。
		var settings={validate:false,limit:5,name:"foo"};
		var options={validate:true,name:"bar"};
		jQuery.extend(settings,options);
		// console.log(settings);
		//合并 defaults 和 options, 不修改 defaults。
		var empty = {}; 
		var defaults = { validate: false, limit: 5, name: "foo" }; 
		var options = { validate: true, name: "bar" }; 
		var settings = jQuery.extend(empty, defaults, options);
		console.log(settings);
		console.log(empty);
		console.log(defaults);
	</script>
</body>

最后一个综合示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编写jquery插件</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="lib.js"></script>
		<script type="text/javascript">
			$(function(){
				$("p").bold();
			});
		</script>
	</head>
	<body>
		<p>
			封装JQuery插件
		</p>
		<script>
			//闭包限定命名空间
			(function($){
				//扩展jQuery对象的原型方法
				$.fn.extend({
					"highLight":function(options){
						//使用jQuery.extend覆盖插件默认参数
						var opts=$.extend({},defaults,options); 
						//这里的this是jQuery对象
						//return 返回传进来的对象,便于链式操作
						return this.each(function(){
							//遍历所有要高亮的dom
							//获取当前dom的jQuery对象,这里的this是当前循环的dom
							var $this=$(this);
							//根据参数来设置dom的样式
							$this.css({
								backgroundColor:opts.background,
								color:opts.foreground
							});
							//公共方法:格式化高亮文本
							var markup=$this.html();
							markup=$.fn.highLight.format(markup);
							$this.html(markup);
						});
					}
				});
				//默认参数
				var defaults={
					foreground:'red',
					background:'yellow'
				};
				// 公共的格式化方法,默认是加粗,用户可以通过覆盖该方法来达到不同的效果
				$.fn.highLight.format=function(str){
					return "<strong>"+str+"</strong>";
				}
				
				//私有方法,检测参数是否合法
				function isValid(options){
					return !options || (options && typeof options === "object") ? true : false;
				}
				
				
				
			})(window.jQuery);
			
			$.fn.highLight.format = function (txt) {
			            return "<em>" + txt + "</em>"
			        }
		
			$(function () {
				$("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
			});
			
			//调用
			
		</script>
	</body>
</html>

参考:

https://www.cnblogs.com/joey0210/p/3408349.html

https://www.cnblogs.com/fcsh820/p/3415299.html

原文地址:https://www.cnblogs.com/AlexanderZhao/p/12878890.html