Введение в 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 есть критические изменения.

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

giphy.gif

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *