Detaillierte Erläuterung der Jquery-Implementierung von ready and bind events_jquery

Bevor wir über diesen Abschnitt sprechen, schauen wir uns den vorherigen Codeabschnitt an:

  (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
          this.elements = [];
          var context = context || document;
          if (context.querySelectorAll) {
            var arr = context.querySelectorAll(selector);
            for (var i = 0; i < arr.length; i++) {
              this.elements.push(arr[i]);
            }
          }
          ////这一块是选择器的实现,没有写完，可以自己实现
        },
        each: function (callback) {
          if (this.elements.length > 0) {
            for (var i = 0; i < this.elements.length; i++) {
              callback.call(this, i, this.elements[i]);
            }
          }
        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      window.$ = _$;
    })(window || global);

Wir haben oben die Knotensuche implementiert. Heute werden wir über die Ereignisbindung an Knoten sprechen.

TX, die mit dem Jquery-Quellcode vertraut sind, sollten wissen: In unserem Code oben fehlt das Ready-Ereignis und er fragt nur die Knoten ab, ohne das Dokumentobjekt zu berücksichtigen. Ich habe bereits über den Unterschied zwischen window.onload und document.ready gesprochen und auch das document.ready-Ereignis erweitert.

Jetzt fügen wir die Erweiterungsmethode hinzu:

Unsere Init-Methode muss korrigiert werden:

 Init: function (selector, context) {
          this.elements = [];
          if (typeof selector === "function") {
            this.elements.push(document);
            this.ready(selector);
          }
          else {
            var context = context || document;
            var isDocument = function (ele) {
              var tostring = Object.prototype.toString;
              return tostring.call(ele) == "[object HTMLDocument]" || "[object Document]";
            }
            if (isDocument(selector)) {
              this.elements.push(selector);
            }
            else if (context.querySelectorAll) {
              var arr = context.querySelectorAll(selector);
              for (var i = 0; i < arr.length; i++) {
                this.elements.push(arr[i]);
              }
            }
          }
        }

Die allgemeine Bedeutung dieses Codes lautet: Wenn der übergebene Parameterselektor vom Funktionstyp ist, führen Sie das Ready-Ereignis aus. Wenn es sich um ein Dokument handelt, fügen Sie das Dokumentobjekt in das Array this.elements ein (nachdem es übergeben wurde, wird es im Ready-Ereignis beurteilt). Wenn es sich um eine Zeichenverschiebung handelt, fragen Sie einfach den Knoten ab und fügen Sie ihn in einer Schleife in das Array this.elements ein. Berücksichtigen Sie hauptsächlich die Schreibmethoden der beiden Bereitschaftsereignisse $(document).ready und $(function(){}).

Als nächstes werden wir die Bereitschaftsfunktion hinzufügen:

  ready: function (callback) {
          var isDocument = function (ele) {
            var tostring = Object.prototype.toString;
            return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";
          }
          if (isDocument(this.elements[0])) {
            if (document.addEventListener) {
              document.addEventListener('DOMContentLoaded', function () {
                document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                callback();
              }, false);
            }
            else if (document.attachEvent) {
              document.attachEvent('onreadystatechange', function () {
                if (document.readyState == "complete") {
                  document.detachEvent('onreadystatechange', arguments.callee);
                  callback();
                }
              });
            }
            else if (document.lastChild == document.body) {
              callback();
            }
          }
        }

Ich habe tatsächlich schon einmal über diesen Code gesprochen (den Unterschied zwischen Onload und Ready). Wenn Sie es nicht wissen, können Sie einen Blick darauf werfen.

Jetzt haben wir das Ready-Event umgesetzt. Anschließend können Sie Ereignisse für den Knoten registrieren.

Lassen Sie uns die Bindefunktion implementieren. Der Code lautet wie folgt:

 bind: function (type, callback) {
          if (document.addEventListener) {
            this.each(function (i, item) {
              item.addEventListener(type, callback, false);
            });
          }
          else if (document.attachEvent) {
            this.each(function (i, item) {
              item.attachEvent('on' + type, callback);
            });
          }
          else {
            this.each(function (i, item) {
              tem['on' + type] = callback;
            });
          }

        }

Hier sind einige Kompatibilitätscodes zum Implementieren der Knotenereignisregistrierung. Vor jedem wissen Sie möglicherweise nicht, wozu es dient. Es wird jetzt hier verwendet.

Die Hauptfunktion besteht darin, einige Operationen an Knotenschleifen auszuführen.

Vollständiger Code, hierher kommen:

    (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
          this.elements = [];
          if (typeof selector === "function") {
            this.elements.push(document);
            this.ready(selector);
          }
          else {
            var context = context || document;
            var isDocument = function (ele) {
              var tostring = Object.prototype.toString;
              return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";
            }
            if (isDocument(selector)) {
              this.elements.push(selector);
            }
            else if (context.querySelectorAll) {
              var arr = context.querySelectorAll(selector);
              for (var i = 0; i < arr.length; i++) {
                this.elements.push(arr[i]);
              }
            }
          }
        },
        each: function (callback) {
          var length = this.elements.length;
          if (length > 0) {
            for (var i = 0; i < length; i++) {
              callback.call(this, i, this.elements[i]);
            }
          }
        },
        ready: function (callback) {
          var isDocument = function (ele) {
            var tostring = Object.prototype.toString;
            return tostring.call(ele) == "[object HTMLDocument]" | "[object Document]";
          }
          if (isDocument(this.elements[0])) {
            if (document.addEventListener) {
              document.addEventListener('DOMContentLoaded', function () {
                document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                callback();
              }, false);
            }
            else if (document.attachEvent) {
              document.attachEvent('onreadystatechange', function () {
                if (document.readyState == "complete") {
                  document.detachEvent('onreadystatechange', arguments.callee);
                  callback();
                }
              });
            }
            else if (document.lastChild == document.body) {
              callback();
            }
          }
        },
        bind: function (type, callback) {
          if (document.addEventListener) {
            this.each(function (i, item) {
              item.addEventListener(type, callback, false);
            });
          }
          else if (document.attachEvent) {
            this.each(function (i, item) {
              item.attachEvent('on' + type, callback);
            });
          }
          else {
            this.each(function (i, item) {
              tem['on' + type] = callback;
            });
          }

        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      window.$ = _$;
    })(window);

Diese Funktionen können grundsätzlich die Ereignisregistrierung für Knoten implementieren. Einige der verbleibenden Spezialeffekte müssen noch erweitert werden. Bei Interesse können Sie selbst Methoden zum _$.prototype-Objekt hinzufügen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er kann allen helfen.