学习编写jQuery插件

墨蓝 2021-07-26 17:46 572阅读 0赞

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_joey0210_p_3408349.html]
> 
> [https://www.cnblogs.com/fcsh820/p/3415299.html][https_www.cnblogs.com_fcsh820_p_3415299.html]

[https_www.cnblogs.com_joey0210_p_3408349.html]: https://www.cnblogs.com/joey0210/p/3408349.html
[https_www.cnblogs.com_fcsh820_p_3415299.html]: https://www.cnblogs.com/fcsh820/p/3415299.html