减少到面向对象的javascript

Question

I have writen a little javascript. It is one of my first and I am still learning. I would like to reduce the line count and make it more efficient. I believe that Object Orientated Programming will be my best choice.

The script assigns a class to a button on hover. gets elements with that class and performs various if functions to determine if the src attribute of the image button should be changed. The script also changes another image src attribute at the same time.

I am wondering if I can somehow condense the logic of the if statements into just one or two, then using variables perform the src attribute changes. But I dont know how to go about this...?

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

Any help would be ace!

The JS Fiddle

Answer 1

Don't handle everything in JS, you can simply set a background image on the available anchor tags without using an img tag and then change the background image on :hover (best would be to use sprites). The only part where JS should kick in would be to change the text image, but there also not by changing an img tag src attribute. You should preload all the text images as content (with a sensible alt text), position them over one another and then show/hide them according to what button was hovered.

Maybe I'll adjust your fiddle if I get to it but you could probably already optimize it with these information yourself.

Answer 2

You could improve the buttonOn function a bit, by removing the if statements and replacing them with a call to a factory class of some kind. For example:

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();
}

The above isn't the complete code, but it gives you the basics to get started.

I'm not stating that the above is the best JavaScript ever, but the core idea of using a factory class, and then a specific class for each arrow direction, is still sound.