reduce为面向对象的javascript

reduce into object orientated javascript

本文关键字：javascript 面向对象的 reduce      更新时间：2023-09-26

我写了一些javascript。这是我的第一次，我还在学习。我想减少行数，提高效率。我相信面向对象编程将是我的最佳选择。

该脚本在悬停时为按钮分配一个类。获取该类的元素，并执行各种if函数来确定是否应该更改image按钮的src属性。脚本同时还更改了另一个图像src属性。

我想知道是否可以以某种方式将if语句的逻辑压缩为一两个，然后使用变量执行src属性更改。但我不知道该怎么办。。。？

    //assign navButtons to var buttons (creates array)
var buttons = document.getElementsByClassName("navButton");
//set buttonHover function
function buttonOn(){
    if ( arrow == topArrow.mouseout ) {
        newArrow = document.getElementById("topArrow");
        newArrow.setAttribute("src", topArrow.mouseover);
        menuText.setAttribute("src", topArrow.text);
    }
    if ( arrow == rightArrow.mouseout ) {
        newArrow = document.getElementById("rightArrow");
        newArrow.setAttribute("src", rightArrow.mouseover);
        menuText.setAttribute("src", rightArrow.text);
    }
    if ( arrow == bottomArrow.mouseout ) {
        newArrow = document.getElementById("bottomArrow");
        newArrow.setAttribute("src", bottomArrow.mouseover);
        menuText.setAttribute("src", bottomArrow.text);
    }
    if ( arrow == leftArrow.mouseout ) {
        newArrow = document.getElementById("leftArrow");
        newArrow.setAttribute("src", leftArrow.mouseover);
        menuText.setAttribute("src", leftArrow.text);
    } 
}
//set buttonHover function
function buttonOff(){
    if ( arrow != topArrow.mouseout ) {
        resetArrow = document.getElementById("topArrow");
        resetArrow.setAttribute("src", topArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != rightArrow.mouseout ) {
        resetArrow = document.getElementById("rightArrow");
        resetArrow.setAttribute("src", rightArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != bottomArrow.mouseout ) {
        resetArrow = document.getElementById("bottomArrow");
        resetArrow.setAttribute("src", bottomArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != leftArrow.mouseout ) {
        resetArrow = document.getElementById("leftArrow");
        resetArrow.setAttribute("src", leftArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
}
//for each instance of buttons, assign class "active" onmouseover
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.className = "active";
        arrow = document.getElementsByClassName("active");
        //get attribute
        arrow = arrow[0].getAttribute("src");
        console.log(arrow);
        buttonOn();
    };
}
//for each instance of buttons, remove class "active" onmouseout
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseout = function () {
        arrow = document.getElementsByClassName("active");
        //get attribute
        arrow = arrow[0].getAttribute("src");
        buttonOff();
        this.className = "";
    };
}

任何帮助都是一流的！

JS Fiddle

不要在JS中处理所有事情，你可以简单地在可用的锚点标签上设置背景图像，而不使用img标签，然后在：hover上更改背景图像（最好是使用精灵）。JS应该发挥作用的唯一部分是更改文本图像，但也不是通过更改img标记src属性。您应该将所有文本图像预加载为内容（使用合理的alt文本），将它们放在一起，然后根据悬停的按钮显示/隐藏它们。

如果我有机会的话，也许我会调整你的小提琴，但你可能已经用这些信息优化了它。

您可以稍微改进buttonOn函数，方法是删除if语句，并用对某种工厂类的调用来替换它们。例如：

function ArrowHandlerFactory(){    
    var self = this;
    self.Create = function(arrow) {        
        alert(arrow);
        if ( arrow == topArrow.mouseout ) {
            return new topArrowHandler();
        }
    }
    return {
        Create: self.Create
    }
}
var topArrowHandler = function(){
    var self = this;
    self.ArrowPressed = function() {
        newArrow = document.getElementById("topArrow");
    newArrow.setAttribute("src", topArrow.mouseover);
    menuText.setAttribute("src", topArrow.text);
    }    
    return {
        ArrowPressed: self.ArrowPressed
    }
}
var factory = new ArrowHandlerFactory();
//set buttonHover function
function buttonOn(){
    var handler = factory.Create(arrow);
    handler.arrowPressed();
}

以上不是完整的代码，但它为您提供了入门的基础知识。

我并不是说以上是有史以来最好的JavaScript，但使用工厂类，然后为每个箭头方向使用特定类的核心思想仍然是合理的。

相关文章：