如何使我的JavaScript更易於維護？

Question

我正在學習JavaScript，因此很抱歉，如果這個問題很基本。

我進行了用戶界面瀏覽，腳本可以按我的意願工作，但是很難維護和進行任何更改。

問：如何循環執行步驟，以便我只需要添加步驟標題和說明，而不必為函數之間的鏈接所困擾？

還有其他建議可以使腳本更好地實踐嗎？

提前致謝。

鏈接到腳本： http : //jsfiddle.net/gmajsterek/4ar2vvro/15/

$(document).ready(function() {
var title = " ",
    description = " ";

$(".UserGuideModal").hide();

$("#ShowHomeUserGuide").click(function () {
    step1();

});

function guideModal() {
    $("#btnNextTip").attr("disabled", false);
    // User Guide Modal Content
    $(".modal-title").html(title);
    $(".guideDescription").html(description);
}

// Close btn
$(".btn-closewindow").click(function () {
    $(".ugoutline").removeClass("ugoutline");
    $(".step4").removeClass("ugoutline");
    $(".UserGuideModal").hide(300);

});


function step1() {
    $(".UserGuideModal").show(300);
    title = "Step one title",
    description = "Description 1";
    $(".step1").addClass("ugoutline");
    guideModal();
    $("#btnNextTip").click(function () {
        step2();

    });
}


function step2() {

    title = "Step two title",
    description = "Description 2";
    $(".step1").removeClass("ugoutline");
    $(".step4").removeClass("ugoutline");
    $(".step2").addClass("ugoutline");
    guideModal();

    $("#btnNextTip").click(function () {

        $(".step2").removeClass("ugoutline");
        step3();

    });

}

function step3() {

    title = "Step three title",
    description = "Description 3";
    $(".step3").addClass("ugoutline");
    $(".step4").removeClass("ugoutline");
    guideModal();

    $("#btnNextTip").click(function () {
        $(".step3").removeClass("ugoutline");
        step4();
    });

}

function step4() {
    title = "Step four title",
    description = "Description 4";
    $(".step4").addClass("ugoutline");
    guideModal();
    $(".btn-closewindow").click(function () {

        $(".step4").removeClass("ugoutline");
        $(".UserGuideModal").hide(300);
    });

    $("#btnNextTip").attr("disabled", true);
}

    });

Answer 1

在stepX()函數中取不同版本之間的任何內容，並將其轉換為函數參數。

例如

function step(stepNumber) {
    $('.step' + (stepNumber -1)).removeClass('ugoutline');
    $('.step' + stepNumber).addClass('ugoutline"');
    step(stepNumber + 1);
}

傳入4 ，您將在4-1 =“ .step3”上執行removeClass，並在.step4上執行addClass。

Answer 2

不要將每個步驟都作為一個功能存在，而應該按數據和行為將其分解。

我建議使用：

用於存儲步驟信息的數組。 例如

var steps = [{name: "step1", title: "Step 1", description: "Description 1"}, {name: "step2", title: "Step 2", description: "Description 2"},...]

突出顯示適當的行div的功能。 例如

var highlightLabel = function(labelClass){
    $(".stepLabel").removeClass("ugoutline");
    $("."+labelClass).addClass("ugoutline");
} //assuming each of your step1, step2... classes also has the class stepLabel

單一功能可處理步數顯示

var showStep = function(stepIndex){
    $(".modal-title").html(steps[stepIndex].title);
    $(".guideDescription").html(steps[stepIndex].description);
    highlightLabel(steps[stepIndex].name);
    $("#ShowHomeUserGuide").click();
}