Javascript功能效率

我正在运行一个程序，其中包含许多用户一次导航并关闭1或2的模态弹出窗口。一般来说，在javascript中关闭每个函数中的特定函数会更好吗？或者我应该创建一个一次关闭所有内容的函数，即使是那些不能打开的函数？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"; 
}

来源

2017-01-05 anesthetic

我个人做后者（一张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"; 
     } 
    } 
}

来源

2017-01-05 03:18:00 JosephGarrone

我看这从当你需要添加一些额外的情态动词下来会发生什么想法道路......就像你的第二个例子一样，它让你更容易在一个地方跟踪所有需要关闭的地方...所以效率就是在我猜的较少的地方进行编辑。

在考虑控制打开的内容时，可以考虑使用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

来源

2017-01-05 03:19:24 Marc

Javascript功能效率

回答

相关问题