jQuery.fn.extend() 的源码实现

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 两个实例方法。
}

– 若有错误的地方，欢迎大家指正 –