in jQuery $ .myFunction과 $ .fn.myFunction의 차이점은 무엇입니까?

Question

내가 jQuery를 쓰기위한 플러그인으로 탐구하고있어 내가 pluggin 저자 할당 때때로 모두 사용하거나 본 적이 $ .F 및 $ .fn.f

사이의 차이를 이해하려고 노력 중이 야 $ .F = $ .fn.f

내게이 사실, 추론, 혜택 등을 설명 할 수 있습니까?

Answer 1

물건을 취소 할 jQuery를 소스 코드에서 찾고있다. 그런데, jQuery 및 $는 같은 객체를 참조하고,이 jQuery 오브젝트가 정의하는 방법입니다

var jQuery = function(selector, context) { 
    return new jQuery.fn.init(selector, context); 
} 

jQuery는 함수이며, 자바 스크립트, 함수의 종류도 Function의 개체입니다. 따라서 jQuery.f 또는 $.f은 f을 jQuery Function 개체에 첨부하거나 원하는 경우 jQuery 클래스를 호출합니다. 당신이 jQuery의 소스를 보면 당신은 jQuery.fn.f = .., 또는 $.fn.f = .. 같이 jQuery.fn에 메서드 (또는 속성)를 부착 할 때마다

, 당신은, jQuery.prototype이 jQuery.fn

jQuery.fn = jQuery.prototype 

그래서 할당 된 것을 볼 수 있습니다 또는 jQuery.prototype.f = .. 또는 $.prototype.f = ..이면이 메서드는이 jQuery 클래스의 모든 인스턴스에서 사용할 수 있습니다 (다시 말하면 JavaScript에는 클래스가 없지만 이해하는 데 도움이 될 수 있음). 당신이 jQuery("#someID")에서와 같이 jQuery() 함수를 호출 할 때마다

새 jQuery를 인스턴스는이 라인에 생성됩니다

return new jQuery.fn.init(selector, context); 

이 인스턴스는 모든 우리는 프로토 타입에 부착 된 방법이 아닌 방법을 가지고 그 는 Function 개체에 직접 첨부되었습니다.

올바른 위치에 정의되지 않은 함수를 호출하면 예외가 발생합니다.

$.doNothing = function() { 
    // oh noez, i do nuttin 
} 

// does exactly as advertised, nothing  
$.doNothing(); 

var jQueryEnhancedObjectOnSteroids = $("body"); 
// Uncaught TypeError: Object #<an Object> has no method 'doNothing' 
jQueryEnhancedObjectOnSteroids.doNothing(); 

---

아, 그리고 마지막으로 짧은 긴 실을 절단하고 귀하의 질문에 대답 - $.f = $.fn.f을하고는 플러그인 또는 (JQuery와 용어의) 유틸리티 방법으로 기능을 사용할 수 있습니다.

Answer 2

$.f은 유틸리티 함수이고 $.fn.f은 jQuery 플러그인/메소드입니다.

유틸리티 기능은 기본적으로 어떤 작업을 수행하는 데 유용한 jQuery 네임 스페이스 내의 함수입니다. 예를 들어 $.isArray(obj)은 obj이 배열인지 확인합니다. jQuery 네임 스페이스를 자주 사용하고 전역 네임 스페이스 오염을 피하려면 jQuery 네임 스페이스에 함수를 넣는 것이 유용합니다.

jQuery 메서드는 jQuery 개체/래핑 된 집합에서 작동합니다. 예를 들어 $(document.body).append('<p>Hello</p>');은 문서의 본문 요소에 Hello가 포함 된 단락을 추가합니다. $.fn은 이후 버전의 jQuery에서 $.prototype의 줄임말입니다 (이전 버전의 라이브러리에서는 항상 그렇지 않았습니다). 자신의 플러그인을 작성할 때 이것을 사용할 수 있습니다.

Answer 3

$.fn.f 단순히 fn를 사용하여 jQuery.prototype

에 대한 바로 가기입니다, 당신은 확장 방법을 사용하지 않고 플러그인 방법을 추가 할 수 있습니다

jQuery.fn.myPlugin = function(opts) { ... }