Источник

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

В конце изучения о плагинах jQuery я вынужден был сказать: “И это все!?”. Оказывается, это до смешного легко, и я не знаю, почему я не делал это раньше.

Почему плагин?

Во-первых, вы можете спросить себя, почему вы хотите разработать плагин. Первая и лучшая причина заключается в способности поддерживать chainability. Когда люди спрашивают меня о лучшей особенности jQuery, я бы, вероятно, упомянул о целесообразности. Она позволяет вам делать вещи похожие на это:

$('.className').addClass('enabled').append('<a href="#">Click here</a>').click( func );

Берется каждый элемент с именем класса “className”, добавляется к нему новый класс с именем, прилагается некоторый HTML и задается перехватчик события “клик”. Когда вы разработаете плагин, у вас будет способность к вставке своих функций, в то же время сохраняя цепь.

Другая причина разрабатывать плагин jQuery – просто соответствовать идеалу jQuery. Идеал jQuery, на мой взгляд, - это HTML-элемент, который является королем. Это все о создании элементов, а также о выполнении действий с этими элементами.

Теперь давайте посмотрим, как создать плагин, здесь есть два возможных подхода.

Подход 1: Функция

В документации есть хороший пример функционального подхода.

jQuery.log = function(message) {
  if(window.console) {
     console.debug(message);
  } else {
     alert(message);
  }
};

В этом примере функция log была приложена к объекту jQuery. Вы можете потом вызвать это в вашем коде, используя jQuery.log(‘my message’) или $.log(‘my message’). Там нет сложностей или HTML-элементов (если вы не добавляли это в ваш код).

Подход 2: метод

Этот подход метода дает вам доступ к текущему набору HTML-элементов, и позволяет вам продолжать цепочку. Опять-таки, код очень простой … добавьте новую функцию к jQuery.fn и убедитесь в работоспособности (возврате this).

jQuery.fn.newMethod = function(){
    return this;
};

Ключевое слово this относится к текущему объекту jQuery. У вас будет доступ к методам и функциям jQuery. Если Вам необходимо выполнить действия с каждым элементом, то вы можете сделать что-то подобное этому:

jQuery.fn.newMethod = function(){
    return this.each(function(){
        alert(this);
    });
};

Ключевое слово this в пределах внутренней функции относится к текущему HTML-элементу, который не будет иметь доступа к методам jQuery (хотя, это так же легко обернуть в объект jQuery, как и вернуть эти методы назад).

Не используйте $

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

Перейти в

Посмотрите документацию jQuery относительно плагинов для получения подробной информации. Иногда самое трудное - это просто сделать первый шаг!

Популярность: 50%