Статьи

Признаки плохо написанного плагина jQuery

Декабрь 12, 2017

До сих пор с каждым отдельным семинаром, посвященным как продвинутому JavaScript, так и jQuery для дизайнеров, возникал этот вопрос (или его разновидность):

Как вы знаете, если плагин хорошо использовать?

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

Учтите следующее:

$.fn.myplugin = function () {
  var me = $(this).each(function() {
    return $(this).bind('someEvent', function () {
      // does something
    });
  });

  return me;
};

Хотя код может быть идеальным после выполнения какого-либо события, в большинстве случаев у вас нет времени, чтобы внимательно прочитать весь код, и вам нужно принять решение, чтобы перейти к реальной проблеме, которую вы пытаетесь решить.

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

Встроенный возврат

$.fn.myplugin = function () {
  var me = $(this).each(fn);
  return me;
};

Должен быть написан как:

$.fn.myplugin = function () {
  return $(this).each(fn);
};

Меня переменная не используется снова, так что нет никакого смысла в его создании.

Двойной jQuery

$.fn.myplugin = function () {
  return $(this).each(fn);
};

Хотя в контексте кода плагина — то есть в рамках функции, к которой прикреплен . fn , ключевое слово this относится к экземпляру jQuery, а не к элементам DOM.

Если бы я переписал это, чтобы показать вам значение, вы бы увидели:

$.fn.myplugin = function () {
  return $($('div.foo')).each(fn);
};

Таким образом, в самом плагине (
не в обратных вызовах jQuery)
это относится к jQuery, поэтому мы можем напрямую обращаться к методам jQuery:

$.fn.myplugin = function () {
  return this.each(fn);
};

Вернуть что каждому?

$.fn.myplugin = function () {
  return this.each(function () {
    return $(this).bind('someEvent', fn);
  });
};

Каждый итератор jQuery просто зацикливается, он ничего не собирает. Переменная результата — jQuery с оригинальной коллекцией внутри нее — вы не можете изменить коллекцию, возвращая или не возвращая ее.

Так что возврат не требуется вообще в этом случае:

$.fn.myplugin = function () {
  return this.each(function () {
    $(this).bind('someEvent', fn);
  });
};

Расточительное использование каждого

$.fn.myplugin = function () {
  return this.each(function () {
    $(this).bind('someEvent', fn);
  });
};

Надеемся, что, удалив все фишки из начальной версии, этот следующий шаг должен стать очевидным. Если нет, вот подсказка:

  • Что возвращается с каждого звонка? Коллекция JQuery.
  • Что вернулось из привязки вызова? Коллекция JQuery.

Поскольку мы запускаем связывание для каждого элемента и делаем только это, это означает, что нет никакой разницы. Итак, давайте отбросим каждый вызов и просто вернем привязку :

$.fn.myplugin = function () {
  return this.bind('someEvent', fn);
};

Помните, что в плагине это относится к экземпляру jQuery, а не к элементу, поэтому нам не требуется перенос $ () .

Теперь все лучше, а?

30
Share: