Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:05:35
Original
1371 Leute haben es durchsucht

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

Nach dem Login kopieren

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

      }
    }

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Die Art der Anwendung ist eigentlich

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage