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：如果它检查新值是否与旧值不同。

我会然后稍微修改它，以便将来更容易处理其他模态：

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

Javascript功能效率

2 个答案: