Правильно написать плагин jQuery

Существуют много плагинов jQuery. Лучшие из них одобрены многими веб-разработчиками по всему миру. К сожалению, худшие исчезают не известно куда. Вот несколько советов, чтобы правильно написать плагин jQuery и раскрыть полностью ​​потенциал плагина …

1. Не разрывать цепь

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



return this;


this обеспечивает вызовы метода для соединения, например:



$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();


2. Сделать его простым в использовании

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

Если это визуальный виджет, разработчику не нужно редактировать любые JavaScript. Вы можете просто предоставлять HTML с классом ID, который автоматически запускает код, например:




<section class="myjqWidget">
Мой контент
</section>



Ваш плагин может инициализировать себя, например:



$(function() {
		$("section.myjqWidget").myjqWidget();
});


3. Используйте не оригинальные имена и номер версий для контроля

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

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

4. Используйте закрытие

Никогда не зависеть от ссылки jQuery ‘$’ . Если у разработчика установлена другая библиотека, он может схватить её, прежде jQuery был загружен. Самый простой способ решить проблему заключается в передаче jQuery, как аргумент ‘$’ для анонимного автозапуска функции, например:



(function($) {
	// code here can use $ to reference jQuery
})(jQuery);


5. Установить параметры по умолчанию

У большинства плагинов параметры настроены с помощью JavaScript Object буквальное обозначение, например,



$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});


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



$.fn.PlugIn = function(opts) {
	// default configuration
	var config = $.extend({}, {
		opt1: 1,
		opt2: 2,
		opt3: 3,
		opt4: 4,
		opt5: 5
	}, opts);


Ваш плагин может ссылаться параметром с помощью кода, таким как config.opt1 .

6. Поддержка HTML Параметров

В идеале, HTML виджеты должны быть в состоянии установить параметры без необходимости изменять код JavaScript. Вы могли бы рассмотреть атрибуты данных HTML5, например:




<section class="myjqWidget" data-opt1="1" data-opt2="two">
  Мой контент
</section>



Они могут быть доступны через данные метода JQuery: .data(«opt1″)..

7. Документировать код плагина

Добавить краткие комментарии к верхней части плагина, которые описывают:

  • Название плагина и версию
  • Что плагин делает
  • Ссылку на Демо
  • Параметры настроек
  • Контакты и ссылки поддержки

Если очень много документации, напишите в отдельном файле Readme.

8. Тщательно проверяйте плагин

Проверьте плагин. Затем проверить его еще раз. А потом проверить еще раз, во всех браузерах. Там могут быть проблемы совместимости их нужно исправить, например в IE6. И не забывайте упоминать в документации, что плагин работает в IE6.

9. Используйте хороший шаблон

Вот код шаблона при создании нового плагина:




/*!
 * jQuery plugin
 * What does it do
 */
(function($) {
	$.fn.PlugInName = function(opts) {
		// default configuration
		var config = $.extend({}, {
			opt1: null
		}, opts);
		// main function
		function DoSomething(e) {
		}
		// initialize every element
		this.each(function() {
			DoSomething($(this));
		});
		return this;
	};
	// start
	$(function() {
		$("#select").PlugInName();
	});
})(jQuery);


Это обеспечивает хорошую точку возврата:

  • Плагин обернут во вложение.
  • Он устанавливает параметры по умолчанию, которые переопределены параметрам плагина.
  • Каждый выбранный элемент передается DoSomething функции объекта JQuery.
  • return this; входит в свойства.
  • Код автозапуска приведен в конце.

10. Получить Word Out

Если вы хотите дать возможность разработчикам использовать ваш плагин, залейте его в хранилище, например GitHub, Google Code или в каталог плагинов jQuery. Создайте демо страницу, пропагандируйте её в своих статьях, и твитнуть о ней частенько, ну и спам конечно.

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

В заключение

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

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

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

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>