The JS Fiddle

Question

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

脚本在悬停时为按钮分配一个类。获取具有该类的元素并执行各种if函数以确定是否应更改图像按钮的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 = "";
    };
}

任何帮助都是王牌！

The JS Fiddle

Answer 1

不要处理JS中的所有内容，只需在可用的锚标签上设置背景图像，而不使用img标签，然后更改背景图像：hover（最好是使用精灵）。 JS应该启动的唯一部分是更改文本图像，但也不能通过更改img标记src属性。您应该将所有文本图像预加载为内容（使用合理的替代文本），将它们放在另一个上面，然后根据悬停的按钮显示/隐藏它们。

如果我接触到它，也许我会调整你的小提琴，但你可能已经用这些信息自己优化了它。

Answer 2

您可以通过删除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，但是使用工厂类，然后是每个箭头方向的特定类的核心思想仍然是合理的。

减少到面向对象的JavaScript

The JS Fiddle

2 个答案: