Статьи

10 советов по разработке лучших плагинов jQuery

Март 8, 2019

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

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

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


return this;

this 

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

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

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

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

 
<section class="myjqWidget">
<p>My content</p>
</section>

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

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

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

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

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

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

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

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

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

Большинство плагинов устанавливают параметры, используя буквенную нотацию объекта JavaScript, например 

 
$("#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">
<p>My content</p>
</section>

Доступ к ним можно получить с помощью метода данных jQuery: .data("opt1")

7. Документируйте свой код

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

  • название и версия плагина
  • что делает плагин
  • пример использования
  • параметры
  • контакты и ссылки поддержки

Если это особенно сложно, рассмотрите отдельный файл readme.

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

Проверь это. Тогда проверьте это снова. Во всех браузерах.

Могут быть проблемы, которые вы не готовы исправить, например, проблемы совместимости 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. Получите Слово

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

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

Есть ли у вас какие-либо советы по эффективной разработке плагинов jQuery?

36
Share: