Javascript函数效率

我正在运行一个程序，它有很多模式弹出窗口，用户可以一次导航并关闭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";
 } 

---

我个人会做后者（一个

closeAll

函数）。通过为任意数量的模态重新设置CSS属性，您不会损失显著的性能

可能你不会损失太多——这取决于浏览器如何实现CSS更改——即：如果它检查新值与旧值是否不同

不过，我会稍微修改它，以便将来更容易处理其他情态动词：

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

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

函数closeAll（）{
var modals=[modal1，modal2，modal3，modal4，modal5，modal6]；
对于（变量i=0；i

随着情态动词数量的增加，这将大大减少你的行数

您甚至可以进行检查，但这可能比上述检查更昂贵：

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";
        }
    }
}

函数closeAll（）{
var modals=[modal1，modal2，modal3，modal4，modal5，modal6]；
对于（变量i=0；i

我个人会做后者（一个

closeAll

功能）。通过为任意数量的模态重新设置CSS属性，您不会损失显著的性能

可能你不会损失太多——这取决于浏览器如何实现CSS更改——即：如果它检查新值与旧值是否不同

不过，我会稍微修改它，以便将来更容易处理其他情态动词：

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

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

函数closeAll（）{
var modals=[modal1，modal2，modal3，modal4，modal5，modal6]；
对于（变量i=0；i

随着情态动词数量的增加，这将大大减少你的行数

您甚至可以进行检查，但这可能比上述检查更昂贵：

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";
        }
    }
}

函数closeAll（）{
var modals=[modal1，modal2，modal3，modal4，modal5，modal6]；
对于（变量i=0；i

我是从这样一个角度来看待这个问题的：当你需要添加一些额外的模态时会发生什么……像你的第二个例子那样做会让你更容易只在一个地方跟踪所有需要关闭的模态……所以我想效率在于必须在更少的地方编辑

在考虑控制打开的内容时，可以考虑使用数据属性并存储一个JSON对象，该对象列出所需的模态，然后发送到一个抓取数据对象的函数，关闭所有对象，然后打开对象中的一个，然后将一个函数附加到具有特定类的所有按钮上。这可以让你抽象掉HTML中的所有剩余部分，然后决定发生了什么。注意：如果开关仅用于模态，而不是基于按钮本身的其他动作，则这是很好的。如果需要添加其他操作，可以将单击按钮的id发送到另一个函数中，并运行一个开关来决定还可以执行哪些操作。如果您的项目具有您所描述的许多功能，那么采取这个方向可能是有效的。随着项目的发展，您只需担心1开关中的1个案例，即添加/编辑1个附加句柄，并且JSON在创建modals时就在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.')
 }
 }

//HTML
b1
b2
b3
b4
m1
平方米
m3
//在脚本中附加处理程序
$（'.modbuts'）。单击（函数（）{
var modalson=$（this.data（'modalson'）；
$（'.mods'）.hide（）；
$.each（modalson.on，函数（索引，m）{
$（'#'+m）.show（）；
});
其他操作（$（this.attr（'id'））；
});
函数其他操作（id）{
开关（id）{
案例“b1”：
$（'otherDiv'）.html（'Button#'+id+'被按下，在这里做js工作！'）；
打破
案例“b2”：
$（'otherDiv'）.html（'Button#'+id+'被按下，在这里做js工作！'）；
打破
案例“b3”：
$（'otherDiv'）.html（'Button#'+id+'被按下，在这里做js工作！'）；
打破
违约：
//开发/调试跟踪，确定删除吗
console.log（'仅供参考，没有附加到#'+id+'的操作可在其他操作中运行。'））
}
}

---

这里有一个小问题：

我从这样一个角度来看，当你需要添加一些额外的模态时，会发生什么……像你的第二个例子那样做会让你更容易只在一个地方跟踪所有需要关闭的模态……所以我想效率在于必须在更少的地方编辑

在考虑控制打开的内容时，可以考虑使用数据属性并存储一个JSON对象，该对象列出所需的模态，然后发送到一个抓取数据对象的函数，关闭所有对象，然后打开对象中的一个，然后将一个函数附加到具有特定类的所有按钮上。这可以让你抽象掉HTML中的所有剩余部分，然后决定发生了什么。注意：如果开关仅用于模态，而不是基于按钮本身的其他动作，则这是很好的。如果需要添加其他操作，可以将单击按钮的id发送到另一个函数中，并运行一个开关来决定还可以执行哪些操作。如果您的项目具有您所描述的许多功能，那么朝这个方向发展可能是有效的，因为随着它的发展，您只需要担心abo