減少到面向對象的javascript

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

任何幫助都是王牌！

JS小提琴

Answer 1

不要處理JS中的所有內容，您可以在不使用img標記的情況下在可用錨標記上設置背景圖像，然后更改背景圖像：hover（最好是使用sprite）。 JS應該啟動的唯一部分是更改文本圖像，但也不能通過更改img標記src屬性。 您應該將所有文本圖像預加載為內容（使用合理的替代文本），將它們放在彼此之上，然后根據懸停的按鈕顯示/隱藏它們。

也許我會調整你的小提琴，但是你可能已經用這些信息自己優化了它。

Answer 2

您可以通過刪除if語句並將其替換為對某種工廠類的調用來改進buttonOn函數。 例如：

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，但是使用工廠類的核心思想，然后是每個箭頭方向的特定類，仍然是合理的。