Эффективность функции Javascript

Question

Я запускаю программу, которая имеет множество модальных всплывающих окон, которые пользователь перемещает и закрывает 1 или 2 за один раз. Как правило, лучше ли в javascript закрывать конкретные функции в каждой функции? Или я должен создать функцию, которая закрывает все сразу, даже те, которые не открыты?

Пример:

//when only 1 & 2 are open 
$('#btnA').click(function() { 
    modal1.style.display = "none"; 
    modal2.style.display = "none"; 
    //unique code 
} 
//when 1, 3 & 4 are open 
$('#btnB').click(function() { 
    modal1.style.display = "none"; 
    modal3.style.display = "none"; 
    modal4.style.display = "none"; 
    //unique code 
} 
//when only 5 & 6 are open 
$('#btnC').click(function() { 
    modal5.style.display = "none"; 
    modal6.style.display = "none"; 
    //unique code 
} 

По сравнению с:

//when only 1 & 2 are open 
$('#btnA').click(function() { 
    closeall(); 
    //unique code 
} 
//when 1, 3 & 4 are open 
$('#btnB').click(function() { 
    closeall(); 
    //unique code 
} 
//when only 5 & 6 are open 
$('#btnC').click(function() { 
    closeall(); 
    //unique code 
} 
function closall() { 
    modal1.style.display = "none"; 
    modal2.style.display = "none"; 
    modal3.style.display = "none"; 
    modal4.style.display = "none"; 
    modal5.style.display = "none"; 
    modal6.style.display = "none"; 
} 

Answer 1

Лично я хотел бы сделать последний (One closeAll функции). Вы не потеряете заметный объем производительности, переопределив атрибуты CSS для любого разумного количества модалов.

Возможно, вы можете не потерять много вообще - в зависимости от того, как браузер реализует изменение CSS. IE: Если он проверяет, отличается ли новое значение от старого значения.

я бы однако изменить его немного, чтобы сделать его легче иметь дело с другими модальностями в будущем:

function closeAll() { 
    var modals = [modal1, modal2, modal3, modal4, modal5, modal6]; 

    for (var i = 0; i < modals.length; i++) { 
     modals[i].style.display = "none"; 
    } 
} 

что значительно уменьшит ваше количество строк в числе модальностей растет.

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

function closeAll() { 
    var modals = [modal1, modal2, modal3, modal4, modal5, modal6]; 

    for (var i = 0; i < modals.length; i++) { 
     if (getComputedStyle(modals[i]).getPropertyValue('display') != "none") { 
      modals[i].style.display = "none"; 
     } 
    } 
} 

Answer 2

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

При рассмотрении вопроса о включении включенного атрибута данных вы можете рассмотреть возможность использования атрибута данных и хранения объекта JSON, в котором перечислены используемые вами модальности, а затем отправить одну функцию, которая захватывает объект данных, отключает все, а затем поворачивается только на объектах, тогда вы присоединяете одну функцию ко всем кнопкам с определенным классом. Это позволяет вам отвлечь всех остальных ... в HTML, просто решите, что происходит. Примечание: это хорошо, если переключатели предназначены только для модалов, а не для других действий, основанных на самой кнопке. Если вам нужно добавить другие действия, вы можете отправить идентификатор нажатой кнопки в другую функцию и запустить переключатель, чтобы решить, что еще делается. Принимая это направление, может быть эффективным, если ваш проект будет обладать большой функциональностью по мере того, как вы будете описывать, по мере его роста, вам нужно только беспокоиться о 1 случае в 1 переключателе для добавления/редактирования с помощью 1 прикрепленного дескриптора, и JSON находится прямо там в HTML, когда вы все равно создаете модалы. В противном случае, для последующей отладки и редактирования, у вас будет много отдельных прикрепленных ручек для прокрутки и добавления/редактирования.

// HTML 
<button id="b1" class="modbuts" data-modalson='{"on":["m1","m3"]}'>b1</button> 
<button id="b2" class="modbuts" data-modalson='{"on":["m2","m4"]}'>b2</button> 
<button id="b3" class="modbuts" data-modalson='{"on":["m1","m4"]}'>b3</button> 
<button id="b4" class="modbuts" data-modalson='{"on":["m2","m3"]}'>b4</button> 
<div id="otherDiv"></div> 
<div id="m1" class="mods" style="display:none;">m1</div> 
<div id="m2" class="mods" style="display:none;">m2</div> 
<div id="m3" class="mods" style="display:none;">m3</div> 

// attach handler in your script 
$('.modbuts').click(function() { 
     var modalson = $(this).data('modalson') ; 
    $('.mods').hide(); 
    $.each(modalson.on,function(index,m){ 
     $('#'+m).show(); 
    }); 
    otherActions($(this).attr('id')); 


}); 

function otherActions(id){ 
switch(id) { 
     case "b1": 
    $('#otherDiv').html('Button #'+id+ ' was pressed, do js stuff here!'); 
    break; 
      case "b2": 
    $('#otherDiv').html('Button #'+id+ ' was pressed, do js stuff here!'); 
    break; 
      case "b3": 
    $('#otherDiv').html('Button #'+id+ ' was pressed, do js stuff here!'); 
    break; 

    default: 
    // dev/debug trail, ok to remove 
    console.log('FYI, no actions attached to #'+id +' to run in otherActions.') 
} 
} 

Вот скрипка: JSFiddle