目录:
1. $.fn.extend()和$.extend()的区别
2. 插件开发的实例
3.插件开发一步一步完美
3.1 满足链式调用
3.2 防止$污染
3.3
$.fn.extend()定义插件的使用
1. $.fn.extend()和$.extend()的区别
描述:我们可以把jQuery看成一个对象来理解
,其实
$.extend()就是让我们可以为JQuery类本身添加静态方法,而
$.fn.extend() 其中
$.fn=
jQuery.fn = jQuery.prototype (
prototype
属性使我们有能力向对象添加属性和方法
) 其实是让我们可以为
JQuery的类实例添加方法 ,比如:var obj=$("#btn") 表示一个jQuery获取的实际对象实例,这个时候
obj就可以调用
$.fn.extend()实现的方法
。
ps:用Java类的思想来理解就是,
$.fn.extend()实现的非静态方法,必须要有对象实例才能调用;而
$.extend()实现的是静态方法,在类初始化的时候就以及调用了。
so:
$.fn.extend()实用于定义插件,
$.extend()实用于扩展全局通用的JQuery函数,应用于全局。
2. 插件开发的实例
2.1)插件代码:
/**
* Created by Andy Lau on 2017/8/7.
*/
(function($) {
$.fn.btnStyle = function (options) {
var defOption = {
"backgroundColor": "#000",
"fontSize": 14,
"color": "#fff",
"border": "none",
"borderRadius": "5px",
"width": "120px",
"height": "48px",
"textAlign": "center",
"lineHeight": "48px"
};
//如果用户输入参数为空,我们添加默认值
$.each(defOption, function (k, v) {
if (options[k] == null) {
options[k] = v;
}
});
//设置按钮颜色
this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
return this;
};
})(jQuery);
2.2)插件的使用
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type="application/javascript" src="jquery-3.2.1.js"></script>
<script type="application/javascript" src="plugin.js"></script>
</head>
<body>
<div style="width: 100%;margin: 60px auto 0;padding-left: 60px">
<div class="custom-btn">按钮</div>
</div>
- </body>
</html>
<script>
$(".custom-btn").btnStyle(
{
"backgroundColor":"#6f00d2",
"color":"yellow"
});
</script>
2.3)实现效果
3.插件开发一步一步完美
3.1 满足链式调用
什么是链式调用呢,比如我们前面实例实例中的代码
this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px")
因为有时候我们在定义插件以后,开发者可能需要添加其他的jq方法,如何能实现开发者链式添加就很方便了,比如代码如下:
<script>
$(".custom-btn").btnStyle(
{
"backgroundColor":"#6f00d2",
"color":"yellow"
}).addClass("className");
</script>
我们还想添加一个class类或者其他操作,开发者就可以x像上面那样使用
3.2 防止$符号污染
$符号污染的关键点在于作用域的问题,其实一开始那个插件我们可以这么些:
$.fn.btnStyle = function (options) {
var defOption = {
"backgroundColor": "#000",
"fontSize": 14,
"color": "#fff",
"border": "none",
"borderRadius": "5px",
"width": "120px",
"height": "48px",
"textAlign": "center",
"lineHeight": "48px"
};
//如果用户输入参数为空,我们添加默认值
$.each(defOption, function (k, v) {
if (options[k] == null) {
options[k] = v;
}
});
//设置按钮颜色
this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
return this;
};
上面这样写插件的问题在于$符号没有局限于本插件中,可能你的工程下还引用了其他的jq插件,这个时候就有可能影响该插件中的$符号的使用,如果不是很理解"作用域",可以单独去学习了解一下。
3.3 $.fn.extend()定义插件的使用
前面我们使用的是
$.fn.方法名=function(params) 来定义插件,他的局限在于只能定义一个方法,但是我们一开始是说用
$.fn.extend()来定义插件方法的,下面就是用这种形式来定义的,你可以看见他的优势在于你可以在内部定义多个方法(
注意:方法用","
分割
)。
(function ($) {
$.fn.extend({
//方法一
btnStyle:function (options) {
var defOption = {
"backgroundColor": "#000",
"fontSize": 14,
"color": "#fff",
"border": "none",
"borderRadius": "5px",
"width": "120px",
"height": "48px",
"textAlign": "center",
"lineHeight": "48px"
};
//如果用户输入参数为空,我们添加默认值
$.each(defOption, function (k, v) {
if (options[k] == null) {
options[k] = v;
}
});
//设置按钮颜色
this.css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
return this;
},
//方法二
newMethod:function () {
}
})
})(jQuery);
其实你还可以用对象的概念来设计你的插件比如像下面这样:
(function ($) {
$.fn.extend({
initBtn:function(opt) {
//判断传入参数类型是否为object类型
if (typeof opt != "object") {
alert('参数错误!');
return;
}
//判断是否和button设置了id
var id = $(this).attr("id");
if(id==null||id==""){
alert("要设定一个id!");
}
//将默认参数和传入参数合并,没有设定的参数以默认值为标准
$.each(btnTool.getDefaultData(id), function (key, value) {
if (opt[key] == null) {
opt[key] = value;
}
});
//设置button的样式
btnTool.btnStyle(opt)
}
});
})(jQuery);
/*
* 定义一个btnTool的类
* 其中定义getDefaultData(id)和btnStyle(options)两个方法
* */
var btnTool={
"getDefaultData":function (id) {
var defOption = {
"obj":id,
"backgroundColor": "#000",
"fontSize": 14,
"color": "#fff",
"border": "none",
"borderRadius": "5px",
"width": "120px",
"height": "48px",
"textAlign": "center",
"lineHeight": "48px"
};
return defOption;
},
"btnStyle":function (options) {
//设置按钮颜色
$("#"+options.obj).css("background-color", options.backgroundColor).css("fontSize", options.fontSize + "px").css("color", options.color).css("border", options.border).css("border-radius", options.borderRadius).css("width", options.width).css("height", options.height).css("text-align", options.textAlign).css("line-height", options.lineHeight);
return this;
}
};
调用方式类似,代码如下:
<script>
$("#customBtn").initBtn(
{
"backgroundColor":"#6f00d2",
"color":"yellow"
});
</script>