So verwenden Sie Extend in jQuery

Dieser Artikel gibt Ihnen eine detaillierte Erklärung zur Verwendung von „Extend“ in jQuery. Ich hoffe, er kann Freunden in Not helfen >Methodeneinführung

Im jQuery-API-Handbuch ist die Erweiterungsmethode auf zwei verschiedenen Objekten montiert: jQuery und jQuery.fn, aber die interne Code-Implementierung von jQuery ist dieselbe, aber die Funktionen sind unterschiedlich . Nicht dasselbe.

Schauen wir uns zunächst die offizielle Erklärung an:

• jQuery.extend

  Füge den Inhalt von zwei oder mehr Objekten zum ersten Objekt zusammen . Füge zwei oder mehr Objekte zum ersten Objekt zusammen.

• jQuery.fn.extend

  Füge den Inhalt eines Objekts mit dem jQuery-Prototyp zusammen, um neue jQuery-Instanzmethoden bereitzustellen . Hängen Sie das Objekt in den jQuery-Prototyp ein, um eine neue jQuery-Instanzmethode zu erweitern.

Obwohl es keine offizielle Erwähnung der Erweiterungsmethodenfunktion von

jQuery.extend

gibt, hat sie auch die Funktion, jQuery Klassenmethode zu erweitern .

Objekte zusammenführen

Lassen Sie mich zunächst die Verwendung der Erweiterungsfunktion in

Objekte zusammenführen

vorstellen.

jQuery.extend(target [, object1] [, objectN])

Objekt1 ... ObjektN mit dem Zielobjekt zusammenführen. Wenn nur ein Parameter vorhanden ist, wird das Zielobjekt mit dem jQuery-Objekt zusammengeführt.

var obj1 = {
    name: 'Tom',
    age: 21
}

var obj2 = {
    name: 'Jerry',
    sex: 'boy'
}

$.extend(obj1, obj2); // {name: "Jerry", age: 21, sex: "boy"}

obj1 // {name: "Jerry", age: 21, sex: "boy"}
obj2 // {name: "Jerry", sex: "boy"}

上述代码展示的是将 obj2 对象合并到 obj1 对象中，这种方法会 改变 obj1 对象的结构。如果你 不想改变 合并目标对象的结构，你可以这么做。

var obj1 = {
    name: 'Tom',
    age: 21
}

var obj2 = {
    name: 'Jerry',
    sex: 'boy'
}

$.extend({}, obj1, obj2); // { name: "Jerry", age: 21, sex: "boy" }

obj1 // { name: "Tom", age: 21 }
obj2 // { name: "Jerry", sex: "boy" }

深浅拷贝

jQuery.extend([deep], target, object1 [, objectN])

和上面的讲述的不同的是，该方法多了一个类型为 boolean 的 [deep] 传参，当其为 true 时，将 object1 , objectN 深度复制 后合并到 target 中。

首先，我们理解一下什么叫做 深度复制 。看看其和 浅度复制 有什么区别。

var obj1 = {
    name: "John",
    location: {
        city: "Boston",
        county: "USA"
    }
}

var obj2 = {
    last: "Resig",
    location: {
        state: "MA",
        county: "China"
    }
}

$.extend(false, {}, obj1, obj2); // { name: "John", last: "Resig", location: { state: "MA", county: "China" }}

$.extend(true, {}, obj1, obj2); // { name: "John", last: "Resig", location: { city: "Boston", state: "MA", county: "China" }}

由此可见，执行 深度复制 会递归遍历每个对象中含有复杂对象（如：数组、函数、json对象等）的属性值进行复制，而且 浅度复制便不会这么做。

方法扩展

上述的 extend 方法中的 target 参数是可以省略的。如果省略了，则该方法就只能传入一个 object 参数，该方法功能是将该 object 合并到调用 extend 方法的对象中。

我们通常会使用这种方式来对 jQuer进行一些方法上的扩展。

引子

jQurey 提供了两种方法扩张方式，分别为jQuery.fn.extend(object)和jQuery.extend(object).

想要搞清楚两种扩展方式之间的区别的话，先要了解什么是jQuery.fn.

本猿参考了 jQuery 的源码，发现其中玄机：

jQuery.fn = jQuery.prototype = {　　　
    init: function(selector, context) {
        // ...
    };
}

jQuery.fn = jQuery.prototype这句代码明确指出jQuery.fn指代的就是 jQuery 的原型。

其次，我们要引入两个概念 类方法 和 实例方法 。

• 类方法 是直接可以使用类引用，不需要实例化就可以使用的方法。一般在项目中 类方法 都是被设置为工具类使用；

• 实例方法 必须先创建实例，然后才能通过实例调用该 实例方法 。

jQuery可以看做是这个封装得非常好的类，而我们可以使用jQuery选择器来创建 jQuery 的实例。比如：使 id 选择器$('#btn')来创建一个实例。

区别

jQuery.extend(object)相当于对 类方法 的扩展。

jQuery.extend({
    /* 返回两个元素中较小的值 */
    min: function(a, b) {
        return a < b ? a : b;
    },
    /* 返回两个元素中较大的值 */
    max: function(a, b) {
        return a > b ? a : b;
    }
});

jQuery.min(2, 3); // 2 
jQuery.max(4, 5); // 5

jQuery.fn.extend(object)是对jQuery.prototype上的扩展。

jQuery.fn.extend = jQuery.prototype.extend

这种方式相当对 实例方法 的扩展。

举个栗子：
开发一个简单的小功能，使用该方法可以使选定元素内的文字变红。

$.fn.extend({
    setRed: function() {
        $(this).css("color", "red");
    }
});

$('.tip').setRed();

$(".tip")创建了一个jQuery实例，通过它可以调用成员方法setRed.

上述代码可以实现预想的扩展，但最好返回this 以满足 jQuery 链式操作 的需要。

改良之后，代码如下：

$.fn.extend({
    red: function() {
        return $(this).css("color", "red");
    }
});

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Extend in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!