Иногда у нас складывается впечатление, что задача слишком сложна, поэтому мы просто игнорируем ее выполнение.
Таково было и мое мышление, когда я думал о разработке плагина для jQuery. Я всегда думал, что часть кода, которую я разработал, будет иметь больше смысла как плагин, но у меня просто не было времени, чтобы понять это. В конце изучения о плагинах jQuery я вынужден был сказать: “И это все!?”. Оказывается, это до смешного легко, и я не знаю, почему я не делал это раньше.
Почему плагин?
Во-первых, вы можете спросить себя, почему вы хотите разработать плагин. Первая и лучшая причина заключается в способности поддерживать chainability. Когда люди спрашивают меня о лучшей особенности jQuery, я бы, вероятно, упомянул о целесообразности. Она позволяет вам делать вещи похожие на это:
Code
$('.className').addClass('enabled').append('<a href="#">Click here</a>').click( func );
Берется каждый элемент с именем класса “className”, добавляется к нему новый класс с именем, прилагается некоторый HTML и задается перехватчик события “клик”. Когда вы разработаете плагин, у вас будет способность к вставке своих функций, в то же время сохраняя цепь. Другая причина разрабатывать плагин jQuery – просто соответствовать идеалу jQuery. Идеал jQuery, на мой взгляд, - это HTML-элемент, который является королем. Это все о создании элементов, а также о выполнении действий с этими элементами.
Теперь давайте посмотрим, как создать плагин, здесь есть два возможных подхода.
Подход 1: Функция
В документации есть хороший пример функционального подхода:
Code
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).
Code
jQuery.fn.newMethod = function(){
return this;
};
Ключевое слово this относится к текущему объекту jQuery. У вас будет доступ к методам и функциям jQuery. Если Вам необходимо выполнить действия с каждым элементом, то вы можете сделать что-то подобное этому:
Code
jQuery.fn.newMethod = function(){
return this.each(function(){
alert(this);
});
};
Ключевое слово this в пределах внутренней функции относится к текущему HTML-элементу, который не будет иметь доступа к методам jQuery (хотя, это так же легко обернуть в объект jQuery, как и вернуть эти методы назад). Не используйте $
Разрабатывая плагин, вы захотите избежать использование привычных обозначений доллара, $, избежать каких-либо конфликтов. jQuery имеет бесконфликтный режим для превращения псевдонима время от времени. Если хотите, вы можете использовать псевдоним функции jQuery внутри вашего плагина. Он будет самостоятельным и избегать каких-либо внешних конфликтов.
Перейти в
Посмотрите документацию jQuery относительно плагинов для получения подробной информации. Иногда самое трудное - это просто сделать первый шаг!
Источник: http://snook.ca/archives/javascript/jquery_plugin/
Главная 
