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

我個人做後者（一張closeAll功能）。通過重新設置任何合理數量的模式的CSS屬性，您不會失去顯着的性能。

根據瀏覽器如何實現CSS更改，IE可能不會損失太多 - 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

我看這從當你需要添加一些額外的情態動詞下來會發生什麼想法道路......就像你的第二個例子一樣，它讓你更容易在一個地方跟蹤所有需要關閉的地方...所以效率就是在我猜的較少的地方進行編輯。

在考慮控制打開的內容時，可以考慮使用data屬性並存儲一個列出所需模式的JSON對象，然後發送到一個抓取數據對象的函數，將所有內容都關閉，但接着轉動只是對象中的那些，然後你將一個函數附加到具有特定類的所有按鈕上。這可以讓你抽出所有剩下的東西......在HTML中，只需決定發生了什麼。注意：如果開關僅用於模態而不是基於按鈕本身的其他動作，那麼這很好。如果您需要添加其他操作，您可以將點擊的按鈕的ID發送到另一個功能並運行切換來決定還有哪些操作。如果你的項目在你描述的時候會有很多功能，隨着它的發展，這個方向可能會很有效率，你只需要擔心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