jQuery에서 확장을 사용하는 방법

이 기사에서는 jQuery에서 확장을 사용하는 방법에 대해 자세히 설명합니다. 내용이 꽤 좋습니다.

메서드 소개

jQuery의 API 매뉴얼에 있습니다. 확장 메소드는 jQuery와 jQuery.fn이라는 두 개의 서로 다른 객체에 마운트되지만 jQuery의 내부 코드 구현은 동일하지만 기능이 다릅니다.

공식 설명을 먼저 살펴보겠습니다.

• jQuery.extend두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다. 두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다.

• jQuery.fn.extend객체의 내용을 jQuery 프로토타입에 병합하여 새로운 jQuery 인스턴스 메서드를 제공합니다. 새로운 jQuery 인스턴스 메소드.

jQuery.extend의 확장 메서드 기능에 대한 공식적인 언급은 없지만 jQuery 클래스 메서드를 확장하는 기능도 있습니다.

객체 병합

먼저

객체 병합의 확장 기능 사용법을 소개하겠습니다.

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

object1 ... objectN을 대상 개체에 병합합니다. 매개 변수가 하나만 있으면 대상 개체가 jQuery 개체에 병합됩니다.

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");
    }
});

위 내용은 jQuery에서 확장을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!