Jquery는 $.fn.extend 및 $.extend 함수_jquery를 구현합니다.

앞서 바인드 방법과 준비 기능을 확장했습니다. 이번에는 $.fn.extend 및 $.extend 함수에 대해 이야기하고 싶습니다.

더 이상 할 말은 없고 바로 본론으로 들어가겠습니다!

먼저 두 기능의 차이점을 살펴보겠습니다.

$.fn.extend는 쿼리된 노드 객체에 대한 확장 메소드로, $

의 프로토타입 확장을 기반으로 한 메소드입니다.

$.extend는 확장 일반 메소드이자 $.extend의 ​​정적 메소드입니다.

이전에 작성한 코드를 보세요: 　　

   (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
  
        },
        each: function (callback) {
 
        }      
      }
      _$.prototype.Init.prototype = _$.prototype;       
      window.$ = window.JQuery = _$;
    })(window);

본체의 코드입니다.

먼저 $.fn.extend 메소드를 확장하겠습니다:

이 메서드의 원래 의도는 확장한 후 $("").newMetod()를 사용하여 액세스할 수 있다는 것입니다. 실제로는 $ 프로토타입에 확장 메서드를 추가하는 것입니다. 중간에 있는 fn은 실제로 네임스페이스의 역할과 유사하며 실제적인 의미는 없습니다. $.extend와 구별하려면.

프로토타입에 익숙한 사람들은 한 눈에 알 수 있습니다. $.fn이 $의 프로토타입을 가리키도록 하면 충분하지 않을까요?

따라서 다음과 같은 코드가 있습니다: _$.fn = _$.prototype;

다음으로 확장 메소드를 추가하겠습니다.

  var isObj = function (o) {
      return Object.prototype.toString.call(o) === "[object Object]";
    }
    _$.fn.extend = function (obj) {
      if (isObj(obj)) {
        for (var i in obj) {
          this[i] = obj[i];
        }

      }
    }

이 코드에서 isObj의 기능은 들어오는 매개변수가 객체 개체인지 확인하는 것입니다. _$.fn.extend 이 메서드는 실제로 _$.prototype.extend와 동일합니다. 이 코드는 다음과 같습니다. JQUERY 소스코드와 동일합니다. 동일하지 않고, 제가 원하는 대로 작성했습니다.

$.extend 메소드를 구현해 보겠습니다. 방금 언급한 것처럼 이 메소드는 실제로 $에 정적 메소드를 추가합니다.

    $.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }

두 가지 방법은 동일하지만 잘 생각해보면 다릅니다.

_$.fn.extend의 ​​이것은 실제로 $.prototype을 나타내고, $.extend의 ​​이것은 $를 나타냅니다.

우리는 이 두 가지 방법을 구현했으며, 전체 코드는 다음과 같습니다.

 (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {

        },
        each: function (callback) {

        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      _$.fn = _$.prototype;
      var isObj = function (o) {
        return Object.prototype.toString.call(o) === "[object Object]";
      }
      _$.fn.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }
      _$.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }
      window.$ = window.JQuery = _$;
    })(window);

실제로 사용방법은

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

Jquery 소스 코드와는 다릅니다. 작성 방법을 단순화하기 위해 여기에 왔습니다. 내용을 읽어주셔서 감사합니다.