Einführung in Monkey Patching jQuery

In diesem Artikel zeige ich Ihnen, wie Sie jQuery mit einer Technik namens „Monkey Patching 🐵“ oder „Duck Punching 🦆“ modifizieren können. Keine Sorge, es handelt sich nicht um Tierquälerei 😃

Dies ist eine gängige Technik in dynamischen Sprachen wie JavaScript, Python, Ruby, um das Verhalten eines Programms während der Laufzeit zu ersetzen.

Laut Wikipedia:

Ein Affen-Patch ist eine Möglichkeit für ein Programm, unterstützende Systemsoftware lokal zu erweitern oder zu modifizieren (was nur die laufende Instanz des Programms betrifft).
Kompletter Artikel

Verwirrt? Schauen wir uns ein Beispiel an, um es einfach zu machen 💡.

Einfaches Beispiel ✨

Schauen wir uns eine grundlegende jQuery-Funktion an. In diesem Fall setzt unsere Funktion den Text des angegebenen Elements auf “Hello, World!”.

Hier ist unsere HTML Code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="js/jquery.js"></script>
  <script src="js/patch.js"></script>
  <title>Document</title>
</head>
<body>    
  <div id="message"></div>
  <input type="button" id="button1" value="Do It!">
</body>
</html>

und JavaScript

$(document).ready(function() {
  $.fn.hello = function() {
    this.text('Hello, World!');
  };
  $('#button1').click(function() {
    $('#message').hello();
  });      
});

Ausgabe
code1.png
Lassen Sie uns nun einen Patch schreiben, der etwas an den vorhandenen Text anhängt. Unser Patch fügt also im Grunde Text an das ursprüngliche „Hello, World!“ An.

Hier ist unsere gepatchte Version des Codes. Er ist als IIFE (Immediately Invoked Function Expression) geschrieben.

📝 Hinweis: Weitere Details finden Sie unter abolut IIFE hier.

$(document).ready(function() {
  $.fn.hello = function() {
    this.text('Hello, World!');
  };
  $('#button1').click(function() {
    $('#message').hello();
  });      
  (function($) {
    var original = $.fn.hello;
    $.fn.hello = function() {
      original.apply(this, arguments);
      if(this.text() === 'Hello, World!') {
        this.append(' and Hello, Monkey Patching!');
      }
    }
  }(jQuery));
});

Ausgabe
code2.png
So, jetzt verstehen wir die Grundlagen. Schauen wir uns ein Beispiel aus der realen Welt an. Lassen Sie uns jQuery mit einem Monkey-Patch ändern.

Ändern von jQuery 💲

Lassen Sie uns jQuery selbst modifizieren und sehen, wie es uns eine andere Ausgabe liefert. Ich werde zeigen, wie wir patchen können $.now() um freundlichere Datums- und Uhrzeitwerte zu erhalten. Die Standardimplementierung gibt beim Aufrufen eine Zahl zurück (new Date).getTime().

  (function($) {
    var orig = $.now;
    $.now = function() {
      return new Date().toLocaleString();
    }
  }(jQuery))

Ausgabe
code3.png
Da ist es ✅

Wir haben jQuery erfolgreich gepatcht und erhalten jetzt einen benutzerfreundlicheren Datums-/Zeitwert von $.now(). Wir können dieselbe Technik verwenden, um andere jQuery-Funktionen und -Plugins zu patchen.

Schlussworte 📝

Monkey Patching hat in bestimmten Situationen mehrere Vorteile, und es kann sehr nützlich sein, wenn es mit Sorgfalt und Aufmerksamkeit durchgeführt wird.

Vorteile:

  • Sie können einen Patch schreiben, um ein Problem zu beheben, bis es in der offiziellen jQuery-Version behoben ist.
  • Sie können die Funktionalität ändern, ohne den tatsächlichen jQuery-Code zu ändern
  • Es ist einfach, es zu entfernen, da Sie den Quellcode von jQuery nicht ändern, Sie können einfach die Patch-Datei löschen, um es zu entfernen.

Tücken:

  • Es kann die Funktionalität aufgrund von Konflikten mit bestehenden Variablen oder Funktionen unterbrechen.
  • Wenn mehrere Patches versuchen, eine Funktion zu ändern, wird der zuletzt ausgeführte Patch angewendet.
  • Der Patch funktioniert möglicherweise nicht mehr, wenn es in neueren Versionen von jQuery Breaking Changes gibt.

Ich hoffe, das war hilfreich. Bitte schreiben Sie in die Kommentare, wenn Sie Fragen oder Anregungen haben. Ich werde versuchen, mich so schnell wie möglich bei Ihnen zu melden. 👍

giphy.gif

Similar Posts

Leave a Reply

Your email address will not be published.