如何在没有框架的情况下使JavaScript更短/更好？_Javascript

如何在没有框架的情况下使JavaScript更短/更好？

javascript

如何在没有框架的情况下使JavaScript更短/更好？,javascript,Javascript,编辑我同意关于将数据存储在数组中的许多其他答案，但我将使用one对象数组，而不是并行数组： function prepareEventHandlers() { var sectionButton1 = document.getElementById("sectionButton1"); var sectionButton2 = document.getElementById("sectionButton2"); var sectionButton3 = document

编辑

我同意关于将数据存储在数组中的许多其他答案，但我将使用one对象数组，而不是并行数组：

function prepareEventHandlers() {
    var sectionButton1 = document.getElementById("sectionButton1");
    var sectionButton2 = document.getElementById("sectionButton2");
    var sectionButton3 = document.getElementById("sectionButton3");
    var sectionButton4 = document.getElementById("sectionButton4");
    var sectionButton5 = document.getElementById("sectionButton5");

    var enabled1 = true;
    var enabled2 = false;
    var enabled3 = false;
    var enabled4 = false;
    var enabled5 = false;


    function checkEnabled() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }

    }

    checkEnabled();
    sectionButton1.onmouseover = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton1.onmouseout = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton2.onmouseover = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton2.onmouseout = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton3.onmouseover = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton3.onmouseout = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton4.onmouseover = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton4.onmouseout = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton5.onmouseover = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton5.onmouseout = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }
    };
}


window.onload = function() {
    prepareEventHandlers();
};

然后

function setClassIfEnabled(enabled, button){
    if (enabled) {
          button.setAttribute("class", "sectionButtonEnabled");
    }
}

也

当然，对于

mouseout

也可以考虑使用添加事件

function setMouseOverIfEnabled(enabled, button) {
    button.onmouseover = function() {
        if (enabled) {
            button.setAttribute("class", "sectionButtonEnabled");
        }
    };
}

setMouseOverIfEnabled(enabled1, sectionButton1);
setMouseOverIfEnabled(enabled2, sectionButton2);
setMouseOverIfEnabled(enabled3, sectionButton3);
setMouseOverIfEnabled(enabled4, sectionButton4);
setMouseOverIfEnabled(enabled5, sectionButton5);

编辑

我同意关于将数据存储在数组中的许多其他答案，但我将使用one对象数组，而不是并行数组：

function prepareEventHandlers() {
    var sectionButton1 = document.getElementById("sectionButton1");
    var sectionButton2 = document.getElementById("sectionButton2");
    var sectionButton3 = document.getElementById("sectionButton3");
    var sectionButton4 = document.getElementById("sectionButton4");
    var sectionButton5 = document.getElementById("sectionButton5");

    var enabled1 = true;
    var enabled2 = false;
    var enabled3 = false;
    var enabled4 = false;
    var enabled5 = false;


    function checkEnabled() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }

    }

    checkEnabled();
    sectionButton1.onmouseover = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton1.onmouseout = function() {
        if (enabled1) {
            sectionButton1.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton2.onmouseover = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton2.onmouseout = function() {
        if (enabled2) {
            sectionButton2.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton3.onmouseover = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton3.onmouseout = function() {
        if (enabled3) {
            sectionButton3.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton4.onmouseover = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton4.onmouseout = function() {
        if (enabled4) {
            sectionButton4.setAttribute("class", "sectionButtonEnabled");
        }
    };
    sectionButton5.onmouseover = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonOver");
        }
    };
    sectionButton5.onmouseout = function() {
        if (enabled5) {
            sectionButton5.setAttribute("class", "sectionButtonEnabled");
        }
    };
}


window.onload = function() {
    prepareEventHandlers();
};

然后

function setClassIfEnabled(enabled, button){
    if (enabled) {
          button.setAttribute("class", "sectionButtonEnabled");
    }
}

也

当然，对于

mouseout

也可以考虑使用添加事件

function setMouseOverIfEnabled(enabled, button) {
    button.onmouseover = function() {
        if (enabled) {
            button.setAttribute("class", "sectionButtonEnabled");
        }
    };
}

setMouseOverIfEnabled(enabled1, sectionButton1);
setMouseOverIfEnabled(enabled2, sectionButton2);
setMouseOverIfEnabled(enabled3, sectionButton3);
setMouseOverIfEnabled(enabled4, sectionButton4);
setMouseOverIfEnabled(enabled5, sectionButton5);

每当您发现自己正在编写变量名，如“foo1”、“foo2”等，并且它们的作用或多或少相同时，您确实需要停止、备份并声明一个数组

function setMouseOverIfEnabled(enabled, button) {
    button.addEventListener("mouseover", function() {
        if (enabled) {
            button.setAttribute("class", "sectionButtonEnabled");
        }
    });
}

每当您发现自己正在编写变量名，如“foo1”、“foo2”等，并且它们的作用或多或少相同时，您确实需要停止、备份并声明一个数组

function setMouseOverIfEnabled(enabled, button) {
    button.addEventListener("mouseover", function() {
        if (enabled) {
            button.setAttribute("class", "sectionButtonEnabled");
        }
    });
}

这是一个浓缩版。你肯定不想用不同的变量重复代码块。使用循环或生成局部函数。在这种情况下，由于您的ID是连续的，因此循环在这里工作得很好：

function addClass(elem, c) {
  elem.className += ' ' + c;
}

function removeClass(elem, c) {
  elem.className = elem.className.replace(new RegExp('\\b' + c + '\\b', 'g'), ''));
}

函数prepareEventHandlers（）
{
var按钮；
var enabled=[真、假、假、假、假]；
对于（变量i=0；i


此代码还允许您稍后在其他代码中通过操作按钮的buttonEnabled
属性和/或类名来启用按钮，事件处理程序将自动执行正确的操作。
这里是一个压缩版本。你肯定不想用不同的变量重复代码块。使用循环或生成局部函数。在这种情况下，由于您的ID是连续的，因此循环在这里工作得很好：
function addClass(elem, c) {
  elem.className += ' ' + c;
}

function removeClass(elem, c) {
  elem.className = elem.className.replace(new RegExp('\\b' + c + '\\b', 'g'), ''));
}

函数prepareEventHandlers（）
{
var按钮；
var enabled=[真、假、假、假、假]；
对于（变量i=0；i

此代码还允许您稍后在其他代码中通过操作按钮的buttonEnabled
属性和/或类名来启用按钮，事件处理程序将自动执行正确的操作。
首先：使用onmouseover和onmouseout设置按钮样式是20世纪90年代的一些东西。现在你可以用CSS做同样的事情了
function prepareEventHandlers()
{
    var button;
    var enabled = [true, false, false, false, false];
    for (var i = 0; i < enabled.length; i++) {
        button = document.getElementById("sectionButton" + (i + 1));
        button.buttonEnabled = enabled[i];
        if (button.buttonEnabled) {
           button.className = "sectionButtonEnabled";
        }
        button.onmouseover = function() {
            if (this.buttonEnabled) {
                this.className = "sectionButtonOver";
            }
        }
        button.onmouseout = function() {
            if (this.buttonEnabled) {
                this.className = "sectionButtonEnabled";
            }
        }
    }
}

（注意，对于IE，这需要“标准模式”——读：有一个doctype行——和IE7或更高版本。）
现在，如果你真的想用老一套的方式做事
.sectionButtonEnabled       { regular styles here }
.sectionButtonEnabled:hover { mouseover styles here }

函数prepareEventHandlers（）{
变量按钮=[
“第1节”，
“第2节”，
“sectionButton3”，
“sectionButton4”，
“sectionButton5”
];
var enabled=[真、假、假、假、假]；
对于（变量i=0；i

如果你不需要鼠标悬停处理程序，你可以去掉它们，只使用上面提到的CSS。
首先：使用onmouseover和onmouseout设置按钮样式是上世纪90年代的一些东西。现在你可以用CSS做同样的事情了
function prepareEventHandlers()
{
    var button;
    var enabled = [true, false, false, false, false];
    for (var i = 0; i < enabled.length; i++) {
        button = document.getElementById("sectionButton" + (i + 1));
        button.buttonEnabled = enabled[i];
        if (button.buttonEnabled) {
           button.className = "sectionButtonEnabled";
        }
        button.onmouseover = function() {
            if (this.buttonEnabled) {
                this.className = "sectionButtonOver";
            }
        }
        button.onmouseout = function() {
            if (this.buttonEnabled) {
                this.className = "sectionButtonEnabled";
            }
        }
    }
}

（注意，对于IE，这需要“标准模式”——读：有一个doctype行——和IE7或更高版本。）
现在，如果你真的想用老一套的方式做事
.sectionButtonEnabled       { regular styles here }
.sectionButtonEnabled:hover { mouseover styles here }

函数prepareEventHandlers（）{
变量按钮=[
“第1节”，
“第2节”，
“sectionButton3”，
“sectionButton4”，
“sectionButton5”
];
var enabled=[真、假、假、假、假]；
对于（变量i=0；i