Jquery implementiert die Funktionen $.fn.extend und $.extend_jquery

Wir haben die Bind-Methode und die Ready-Funktion bereits früher erweitert. Dieses Mal möchte ich über die Funktionen $.fn.extend und $.extend sprechen.

Mehr gibt es nicht zu sagen, kommen wir gleich zur Sache!

Werfen wir zunächst einen Blick auf den Unterschied zwischen diesen beiden Funktionen:

$.fn.extend ist eine Erweiterungsmethode für das abgefragte Knotenobjekt und eine Methode, die auf der Prototyperweiterung von $

basiert

$.extend ist eine reguläre Erweiterungsmethode und eine statische Methode von $.

Schauen Sie sich den Code an, den wir zuvor geschrieben haben: 　　

   (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);

Dies ist der Code des Hauptteils.

Lassen Sie mich zunächst die Methode $.fn.extend erweitern:

Die ursprüngliche Absicht dieser Methode besteht darin, dass wir nach der Erweiterung mit $("").newMetod() darauf zugreifen können. Tatsächlich besteht sie darin, dem $-Prototyp eine Erweiterungsmethode hinzuzufügen. Der FN in der Mitte ähnelt tatsächlich der Rolle eines Namespace und hat keine praktische Bedeutung. Zur Unterscheidung von $.extend.

Wer sich mit Prototypen auskennt, weiß auf einen Blick: Wäre es nicht ausreichend, $.fn einfach auf den Prototyp von $ zeigen zu lassen?

Wir haben also den folgenden Code: _$.fn = _$.prototype;

Als nächstes fügen wir die Extend-Methode hinzu:

  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];
        }

      }
    }

Die Funktion von isObj in diesem Code besteht darin, zu bestimmen, ob der eingehende Parameter ein Objektobjekt ist. _$.fn.extend Diese Methode ist tatsächlich dieselbe wie _$.prototype.extend. Schauen Sie sich diesen Code an das gleiche wie der JQUERY-Quellcode Es ist nicht dasselbe, ich habe es nach meinen eigenen Wünschen geschrieben.

Lassen Sie uns die Methode $.extend implementieren. Wie bereits erwähnt, fügt diese Methode tatsächlich eine statische Methode zu $ ​​hinzu:

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

Sie werden feststellen, dass die beiden Methoden gleich sind, aber wenn Sie genau darüber nachdenken, sind sie unterschiedlich:

_Dies in $.fn.extend stellt tatsächlich $.prototype dar, und dies in $.extend repräsentiert $.

Wir haben diese beiden Methoden implementiert und hier ist der vollständige Code:

 (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);

Die Art der Anwendung ist eigentlich

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

Der Code unterscheidet sich vom Jquery-Quellcode. Ich möchte hauptsächlich über die darin enthaltenen Ideen nachdenken.