学习编写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>
参考：
