jQuery.extend(object)
概述
用来扩展 jQuery 对象本身,在 jQuery 命名空间上增加新函数。(在 jQuery 下添加静态方法)
参数
说明 | |
---|---|
object | 扩展 jQuery 的对象,里面包含着函数。 |
示例
目的:在 jQuery 命名空间上增加两个函数。
代码:
$.extend({
aMin: function(a, b) { return a < b ? a : b },
aMax: function(a, b) { return a > b ? a : b }
})
结果:
$.aMin(1, 2) // 1
$.aMax(4, 5) // 5
$.extend() 的原理是在 JQuery 函数下增加静态方法。
打印 jQuery
源码
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;
};
由于源码是考虑多种情况下,看起来比较复杂。
所以为了方便学习,只把 jQuery.extend(object)
一种情况下提取出来。
实现思路:循环遍历参数 object,把里面的函数添加到 jQuery 下。
$.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;
--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[aMin] = function(){ // aMin }、jQuery[aMax] = function(){ // aMax }
}
}
}
return target; // 此时,jQuery 函数下面就有 aMin 和 aMax 两个静态方法。
}
– 若有错误的地方,欢迎大家指正 –