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()函数中的任何内容，并将其转换为函数参数。

e.g。

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

传递4，你将在4-1 =“.step3”上执行removeClass，并在.step4上执行addClass。

Answer 2

不应将每个步骤作为一个函数存在，而应该通过数据和行为将其分解。

我建议使用：

用于存储步骤信息的数组。 e.g。

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

突出显示相应行div的功能。 e.g。

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

如何让我的JavaScript更易于维护？

2 个答案: