Пишем jQuery плагин – 12 советов по написанию jquery плагина

10 причин, почему тормозит компьютер
11.02.2018
Список функций для создания личного кабинета
15.02.2018
<div class="page-header-left">
				<h1 class="page-title"><?php echo __("Latest Posts", 'medicenter'); ?></h1>
				<ul class="bread-crumb">
					<li>
						<a href="#" title="###">
							####
						</a>
					</li>
					<li class="separator template-arrow-horizontal-1">
						 ##
					</li>
					<li>
						234234
					</li>
				</ul>
			</div>

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

В этой статье мы меньше будем фокусироваться на самом Java Script коде, больше будем уделять внимания практическим советам.

1 – Пишите плагин по правильному шаблону

Существуют некоторые шаблоны, которые в той или иной степени, соответствуют «правильному способу» написания плагинов. Если вы не будете следовать этим шаблонам, ваш плагин может работать не правильно. Вот один из наиболее известных шаблонов:

(function($, window, undefined){
$.fn.myPlugin = function(opts) {
   var defaults = {
      // установите ваши сстандартные переменные
   }
 
  // дополните стандартные опции пользовательскими
  var options = $.extend(defaults, opts || {});
 
   return this.each(function(){ // jQuery chainability
     // действия плагина
   });
})(jQuery, window);

Для начала, мы создаем анонимную функцию, которая защитит нас от использования глобальных переменных. По умолчанию передаются три аргумента $, window, и undefined. Они потребуются ядром jQuery.

Далее мы напишем шаблон jQuery плагина, $.fn.PluginName. Таким образом, мы регистрируем плагин, чтобы можно его было использовать в формате $(selector).method(). Если вы хотите вместо написания плагина использующего функции, сделать его напрямую, пишите следующим образом:

$.PluginName = function(options){
   // опции и действия плагина
}

Такой тип плагина не может иметь цепочку функций, он будет состоять из одной прямой функции. Для примера:

$.splitInHalf = function(stringToSplit){
   var length = stringToSplit.length;
   var stringArray = stringToSplit.split(stringToSplit[Math.floor(length/2)]);
   return stringArray;
}

В этом коде, мы возвращаем массив строк. Для большей ясности, еще один пример:

$.getOddEls = function(jQcollection){ //
   return jQcollection.filter(function(index){
      var i = index+1;
      return (index % 2 != 0);
   });
}

В этом случае, пользователь получает jQuery объект, фильтр, которые берется из jQuery коллекции. Плагины могут возвращать, как массивы, так и строки, цифры, функции, и другие типы данных.

1 – Пишите плагин по правильному шаблону

Существуют некоторые шаблоны, которые в той или иной степени, соответствуют «правильному способу» написания плагинов. Если вы не будете следовать этим шаблонам, ваш плагин может работать не правильно. Вот один из наиболее известных шаблонов:

(function($, window, undefined){
$.fn.myPlugin = function(opts) {
   var defaults = {
      // установите ваши сстандартные переменные
   }
 
  // дополните стандартные опции пользовательскими
  var options = $.extend(defaults, opts || {});
 
   return this.each(function(){ // jQuery chainability
     // действия плагина
   });
})(jQuery, window);