jQuery.fn.extend(object)
概述
在 jQuery 下添加实例方法
参数
参数 | 说明 |
---|---|
object | 扩展 jQuery 实例方法的对象,里面包含着函数 |
示例
目的:在 jQuery 下增加两个实例方法
代码:
const aMin = function (a, b) {
return a < b ? a : b;
};
const aMax = function (a, b) {
return a > b ? a : b;
};
$.fn.extend({ aMin, aMax });
结果:
$().aMin(1, 2) // 1
$().aMax(2, 3) // 3
$.fn.extend() 的原理是在 jQuery 函数下增加实例方法。
打印 jQuery
可以看到,方法是添加到 jQuery.prototype 下面的,所以要通过 $().xxx 来调用。
源码
jQuery.extend = jQuery.fn.extend = function () {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
i = 2;
}
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
if (length === i) {
target = this;
--i;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[name] = jQuery.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
把 $.fn.extend(object)
情况单独提取出来。
实现思路:循环遍历参数 object,把里面的函数添加到 jQuery.prototype 下。
$.extend = function () {
/*
options: 扩展目标({ aMin, aMax })
target: 被扩展目标(静态方法情况下,target 为 jQuery,实例方法情况下,target 为 jQuery.fn)
*/
let options, name, copy, target,
i = 1, // 扩展目标在参数的位置,默认为 1(第一个参数)
length = arguments.length, // 1 参数长度
// 判断是否是添加静态方法或者实例方法情况
if (length === i) {
target = this; // target = jQuery.fn
--i; // 0
}
// i = 0; length = 1
for (; i < length; i++) {
if ((options = arguments[i]) != null) { // options = { aMin: function(){...}, aMax: function(){...} }
for (name in options) { // name = aMin、aMax
copy = options[name]; // function(){ // aMin }、function() { // aMax }
target[name] = copy; // jQuery.fn[aMin] = function(){ // aMin }、jQuery.fn[aMax] = function(){ // aMax }
}
}
}
return target; // 此时,jQuery.fn 下就有 aMin 和 aMax 两个实例方法。
}
– 若有错误的地方,欢迎大家指正 –