jQuery.extend와 jQuery.fn.extend의 ​​차이점은 무엇입니까?


83

두 개의 플러그인을 하나로 병합하고 싶기 때문에 jquery 플러그인 구문을 이해하려고합니다. 간격을 멈추거나 여러 번 실행할 수 있어야하는 깜박이.

어쨌든,이 구문은

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },

$.fn.blink = function(options)
    {

first (without =)는 한 번에 여러 메서드를 설정하는 방법 인 것처럼 보이기 때문입니다. 이게 옳은 거니? 또한 내가 여기있는 동안 jquery 객체에 요소와 로직을 추가하는 이유는 무엇입니까?

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",

(이것은 타이머 플러그인에서 가져온 것입니다)


사용자 정의 jQuery 플러그인 개발을 배우는 경우이 스레드를 읽는 것이 좋습니다. stackoverflow.com/questions/1117086/…
CrandellWS

답변:


89

jQuery.extend는 추가 기능으로 모든 객체를 확장하는 데 사용되지만 jQuery.fn.extend는 실제로 여러 플러그인 기능을 한 번에 추가하는 jQuery.fn 객체를 확장하는 데 사용됩니다 (각 기능을 개별적으로 할당하는 대신).

jQuery.extend :

var obj = { x: function() {} }

jQuery.extend(obj, { y: function() {} });

// now obj is an object with functions x and y

jQuery.fn.extend :

jQuery.fn.extend( {
        x: function() {},
        y: function() {}
});

// creates 2 plugin functions (x and y)

1
감사합니다. 여러 객체를 할당하는 것이 분명하지만 언제 jquery.extend를 사용해야하는지 확실하지 않습니다. fn.extend에서 수행 한 작업을 jquery.extend에 전달하는 이유는 무엇입니까? 두 가지 질문을했기 때문에 이에 대한 새 질문을 게시 할 수도 있습니다.
Richard

13
jQuery.extend ()는 실제로 객체를 일반적인 방식으로 확장하기 위해 자신의 자바 스크립트 코드에서 사용할 수있는 편리한 함수입니다. jQuery의 "유틸리티"함수의 일부입니다 (DOM 조작에 사용되지 않음)
Philippe Leybaert

74
jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

사용법 : $.abc(). (같은 선택기가 필요하지 않습니다 $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});

사용법 : $('.selector').xyz(). (와 같은 선택기가 필요합니다 $('#button').click().)

주로 구현하는 데 사용됩니다 $.fn.each().

도움이되기를 바랍니다.


20

jQuery.extend와 jQuery.fn.extend의 ​​차이점은 무엇입니까?

실제로 기본 참조 외에는 아무것도 없습니다. 에서 jQuery를 소스 , 당신은 읽을 수 있습니다 :

jQuery.extend = jQuery.fn.extend = function() { … };

그래서 어떻게 작동합니까? 설명서를

둘 이상의 개체 내용을 첫 번째 개체로 병합합니다.

속성을 복사하는 for-in-loop 일 뿐이며 중첩 된 객체를 재귀하기위한 플래그가 있습니다. 그리고 또 다른 기능 :

에 하나의 인수 만 제공되는 $.extend()경우 이는 대상 인수가 생략되었음을 의미합니다.

 // then the following will happen:
 target = this;

따라서 함수가 jQuery자체적 으로 호출되면 (명시 적 대상없이) jQuery 네임 스페이스가 확장됩니다. 그리고 함수가 jQuery.fn(명시적인 대상없이 ) 호출되면 모든 (플러그인) 메서드가있는 jQuery 프로토 타입 객체를 확장합니다.


내 찬성 !!!! 이에 . 내가 jQuery를 자체를 확장하는 방법을 확인하기 위해 소스 코드를 찾고 있었어요
dekdev

15

이 블로그 게시물 에는 멋진 설명이 있습니다.

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

인용 부호:

일반적으로 함수의 경우 jQuery 객체를, 메소드의 경우 jQuery.fn 객체를 확장해야합니다. 메소드와 달리 함수는 DOM에서 직접 액세스 할 수 없습니다.


1
'DOM에서 직접' 메소드에 액세스한다는 것은 무엇을 의미 합니까?
Dan Nissenbaum

1
directly from the DOM함수 호출 대 객체 속성 / 프로토 타입 호출 (네이티브 DOM 객체 주변의 jQuery 래퍼에서)의 매우 기본적인 JavaScript 개념을 나타냅니다. 예제를보고 차이점을 찾고 예제의 코드가 상호 교환 할 수없는 이유를 생각해보십시오.
gavenkoa

10
$.fn.something= function{};

jQuery.prototype을 가리키고 "this"를 통해 dom 요소에 액세스 할 수 있습니다. 이제 u를 사용할 수 있으므로 $(selector).something();이것은 다음과 같은 플러그인 기능으로 작동합니다.$(selector).css();

$.something = function{};

jQuery 객체 자체에 속성이나 함수를 추가하고 u는 dom 액세스에 "this"를 사용할 수 없습니다. 이제 u는 다음과 같이 사용할 수 있습니다 $.something(). 이것은 유틸리티 기능으로 작동합니다.$.trim()

그러나

$.fn.extend({function1(), function2()}) and  $.extend({function1(), function2()}) 

동시에 하나 이상의 함수를 추가 할 수 있으며, 둘 이상의 객체를 제공하는 경우 두 객체 리터럴을 병합하는 데 사용할 수도 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.