Как можно улучшить мою функцию?

Question

[Дима Паутов]

Всем привет! У меня в макете есть разные выпадающие блоки, при клике на кнопку.
Так вешаю событие открытия блока

$('button').on('click', function(){
	$(this).toggleClass('act');
	$('div').toggleClass('act');
});

А так, скрываю блок, при клике за его пределами:

$(document).on('click', function(event){
		var target = event.target;

		var closeByDocument = function(docTarget, butTrigger, triggerElem, removeClass, butTriggerBullClass){
			// docTarget - Элемент, при клике по документу
			// butTrigger - Кнопка открытия элемента
			// triggerElem - Открытие блока, при нажатии на кнопку
			// removeClass - Имя удаляемого класса с блока и кнопки
			// butTriggerBullClass - Удалять ли класс у кнопки 

			if(docTarget !== $(triggerElem)[0] && !$(triggerElem).has(docTarget).length && docTarget !== $(butTrigger)[0] && !$(butTrigger).has(docTarget).length){
				$(triggerElem).removeClass(removeClass);

				if(butTriggerBullClass){
					$(butTrigger).removeClass(removeClass);
				}
			}
		};

		// Закроем блок
		closeByDocument(target, 'button', 'div', 'act', true);
	});

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

Answer 1

[Даша Циклаури]

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

var divs = $('div');
$('button').on('click', function(){
  $(this).toggleClass('act');
   divs.toggleClass('act');
});

var closeByDocument = function(docTarget, butTrigger, triggerElem, removeClass, butTriggerBullClass){
      // docTarget - Элемент, при клике по документу
      // butTrigger - Кнопка открытия элемента
      // triggerElem - Открытие блока, при нажатии на кнопку
      // removeClass - Имя удаляемого класса с блока и кнопки
      // butTriggerBullClass - Удалять ли класс у кнопки 

      if(docTarget !== $(triggerElem)[0] && !$(triggerElem).has(docTarget).length && docTarget !== $(butTrigger)[0] && !$(butTrigger).has(docTarget).length){
        $(triggerElem).removeClass(removeClass);

        if(butTriggerBullClass){
          $(butTrigger).removeClass(removeClass);
        }
      }
    };
$(document).on('click', function(event){
    var target = event.target;
    // Закроем блок
    closeByDocument(target, 'button', 'div', 'act', true);
  });

Comments

[Дима Паутов]

Не до конца понял, но спс что откликнулась! Ок, функцию перестали переопределять. А дальше то что изменилось?
Как же мне вызывать его для других классов? Кроме как вызывать функцию для еще одного селектора. Всплывающих блоков то у меня полно, и они все разные. Там один, там другой

[Даша Циклаури]

Дима Турков: имелось в виду улучшение с точки зрения оптимизации использования ресурсов клиентской машинки:
1) $('div') - это селектор jquery, такая же функция как и все с именем $, когда вызывается $('div') выполняется поиск элементов, замечание касалось того, что нету надобности искать элементы заново при каждом клике.
2) тоже самое с функцией (определение функции - работа с памятью, тем меньше вероятность утечек, чем меньше свапаются всякие значения).
Оптимизировали - глазом может быть не заметно. Но на требовательных приложениях (запускаем на планшете, телефоне или отрисовка не менее 30 кадров) это важно, есть живые примеры. Привыкайте сразу писать более-менее оптимальный код с точки зрения потребления ресурсов. Что касается красоты кода - нужны уточнения в части архитектуры приложения. Но как правило заранее на все случаи жизни предусмотреть не удаётся.

[Дима Паутов]

Даша Циклаури: Большое спс, за подробный рассказ!

Answer 2

[Stalker_RED]

Простейший пример модального окна: jsfiddle.net/ph8zd19j/1
Вместо того, чтобы создавать 100500 разных всплывающих блоков, можно копировать их внутрь одного #modal
Могу пример набросать.