javascript - 如何让我的 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。