안녕하십니까? 여기는 오솔길입니다.
이번에 우리는 jQuery 확장의 메커니즘을 깊이 있게 연구할 것이다.
어떻게 다음 구성원 변수에 대한 접근을 실현합니까?

jQuery.xxx()
jQuery('x').xxx()

대상 버전: jQuery -2.1.1
목록은 여기 있습니다.

jQuery의 하드 코어

갑작스럽지만 이번 연구의 가장 큰 성과다.
만약 jQuery가 정말 뼈와 껍질만 남았다면 이렇게 될 것이다.바본!
자기 코어

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

함수와 대상의 내용은 비어 있지만, 이것은 실제 jQuery 원본 문법에서 추출한 것입니다. 이것만으로도 정상적으로 작동할 수 있습니다.
그럼 내용을 확인해 봅시다.

jQuery 함수

첫 번째 집행문을 보면
jQuery 함수를 실행하면 자신이 받은 같은 매개 변수를 직접 전달new jQuery.fn.init하여 실행합니다.
jQuery.fn.init 함수가 jQuery 실례를 생성하고 되돌려주기 때문에
"jQuery 함수는 jQuery 실례를 생성하는 구조 함수입니다."
나는 이렇게 말할 수 있다고 생각한다.

init 함수

다음은 세 번째 실행 문장을 보겠습니다.
jQuery 함수의 jQuery 입니다.fn.init 함수는 init 이라는 변수로 대입됩니다.
init 함수는 jQuery 실례의 내부 구조 함수입니다.
※ jQuery 함수는 외부를 위한 구조 함수입니다.

jQuery.fn 객체

두 번째와 네 번째 집행 문장을 보면 두 문장을 뛰어넘어 초중요한 대입을 했다.
두 문장을 합치면 다음과 같다.
하이퍼베이스 객체

init.prototype = jQuery.fn = jQuery.prototype = {};

중요한 요점은 다음과 같다.
jQuery.이름이 fn인 대상은 init입니다.프로토타입에 대입되다.
즉, "모든 jQuery 실례는 jQuery.fn 대상의 구성원을 계승한다."
그나저나 new jQuery(selector) 이런 상황을 생각하지 못했기 때문에 jQuery.prototype 부분은 중요하지 않다고 생각합니다.

jQuery.fn을 통한 확장 시도

그럼 제이쿼리.fn의 기능 확장을 보여 드리겠습니다.

문제없이 움직이다.jQuery.fn.foo에서 함수를 설정하고 jQuery 실례에서 성공적으로 호출했습니다$().foo().
참고로 프로토타입 계승$.foo()을 했기 때문에 인기가 많습니다.
이 경우 구성원을 jQuery에 직접 삽입하여 확장할 수 있습니다.

jQuery.fn.extend 함수로 확장

그럼, jQuery.알겠습니다. fn을 통해 기능을 확장할 수 있습니다.
jQuery는 jQuery.fn.extend 라는 API 기능 확장을 제공합니다.

나는 이런 방법도 잘 확장될 수 있다는 것을 안다.
겸사겸사 말씀드리지만, jQuery.extend를 통해 jQuery 함수의 구성원을 설정할 수도 있습니다.

어떤 확장 방식을 사용해야 합니까?

그럼, 우리는 두 가지 확장 방식을 보았다.
jQuery.fn에 들어가는 방식과 jQuery.fn.extend 함수를 사용하는 방식입니다.
어느 것을 사용해야 하느냐는 질문에 "어느 것이든 가능하다"는 것이 최종 답이 아닐까...
객체를 설정할 때 jQuery입니다.fn.나는 extend 함수를 사용해야 한다고 생각한다.
이에 비해 단일 함수를 설정할 때는 jQuery입니다.나는 fn으로 설정할 수 있다고 생각한다.
그렇다면 실제 기능 확장이 어떻게 실현되는지 살펴보자.

실제 확장 구현 보기

이벤트 구현

우리 곧 갑시다.jQuery의 활동은 다음과 같습니다.
이벤트 구현

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
  "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
  "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
  // Handle event binding
  jQuery.fn[ name ] = function( data, fn ) {
    return arguments.length > 0 ?
      this.on( name, null, data, fn ) :
      this.trigger( name );
  };
});

이벤트 함수의 정의는 jQuery.fn 대상의 확장을 통해 이루어진다.

Ajax 구현

다음은 Ajax의 확장 구현입니다.
aax 구현

jQuery.extend({
  /* 設定周りのコード... */

  ajax: function( url, options ) { /*...*/ },
  getJSON: function( url, data, callback ) { /*...*/ },
  getScript: function( url, callback ) { /*...*/ }
});

이것은 실례에 의존하지 않고 $.ajax 등과 함께 사용하기 때문에 jQuery.extend를 사용하고 있습니다.

플러그인 구현

그림을 예쁘게 축소 + 확대하여 표시하는 least.js 씨를 예로 들자.
github의 js 코드.
least.js

(function($){
  $.fn.least = function(options) { /.../ };
})(jQuery);

이것은 jQuery입니다.fn에서 설정합니다.
자신이 플러그인을 만들 때의 예의로 어떤 방법으로 확장하는 것이 좋을지 생각해 보는 것도 즐겁다.
이번에는 여기까지 하겠습니다.
jQuery의 핵심을 이해했기 때문에 그 후에 다양한 기능이 그곳에서 확장되었다고 상상할 수 있습니다.
다음부터는 jQuery에 싫증이 나는 jQuery의 각 처리를 깊이 파헤치기보다는 코드에서 얻은 정수를 JS의 기본 처리로 깊이 파헤친다.
어쨌든call/apply 함수 가져오기.