Введение в Monkey Patching jQuery

В этой статье я покажу вам, как модифицировать jQuery, используя технику, называемую «Monkey Patching 🐵» или «Duck Punching 🦆». Не волнуйтесь, жестокого обращения с животными нет.

Это распространенный метод в динамических языках, таких как JavaScript, Python, Ruby, для замены поведения программы во время выполнения.

Согласно Википедии:

Обезьяний патч — это способ для программы локально расширить или изменить поддерживающее системное программное обеспечение (влияя только на запущенный экземпляр программы).
Полная статья

Смущенный? Давайте посмотрим на пример, чтобы было проще 💡.

Основной пример ✨

Давайте посмотрим на базовую функцию jQuery. В этом случае наша функция устанавливает текст данного элемента в «Hello, World!».

Вот наш HTML код.

<!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>

а также JavaScript

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

Выход
код1.png
Теперь давайте напишем патч, который добавит что-то к существующему тексту. Итак, в основном наш патч будет добавлять текст к оригинальному «Hello, World!».

Вот наша исправленная версия кода. Он написан как IIFE (выражение немедленно вызываемой функции).

📝 Примечание: Вы можете найти более подробную информацию о IIFE здесь.

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

Выход
код2.png
Итак, теперь мы понимаем основы. Давайте посмотрим на пример из реального мира. Давайте изменим jQuery, используя патч обезьяны.

Изменение jQuery 💲

Давайте изменим сам jQuery и посмотрим, как он даст нам другой результат. Я собираюсь показать, как мы можем исправить $.now() чтобы получить более удобное значение даты и времени. Реализация по умолчанию возвращает число, вызывая (new Date).getTime().

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

Выход
код3.png
Вот оно ✅

Мы успешно исправили jQuery, и теперь мы получаем более удобное для пользователя значение даты/времени из $.now(). Мы можем использовать ту же технику для исправления других функций и плагинов jQuery.

Заключительные слова 📝

Исправление Monkey имеет несколько преимуществ в определенных ситуациях, и оно может быть очень полезным, если делать его с осторожностью и вниманием.

Преимущества:

Вы можете написать патч для устранения проблемы, пока она не будет исправлена в официальном выпуске jQuery.
Вы можете изменить функциональность, не изменяя фактический код jQuery.
Его легко удалить, потому что вы не изменяете исходный код jQuery, вы можете просто удалить файл исправления, чтобы удалить его.

Подводные камни:

Это может нарушить функциональность из-за конфликта с существующей переменной или функцией.
Если несколько патчей пытаются изменить функцию, применяется последний выполненный патч.
Патч может перестать работать, если в более новой версии jQuery есть критические изменения.

Я надеюсь, что это было полезно. Пожалуйста, пишите в комментариях, если у вас есть какие-либо вопросы или предложения. Я постараюсь вернуться к вам в ближайшее время. 👍