CODEWITHSUNDEEP
javascript
Grzegorz Majsterek
Grzegorz Majsterek

Reputation: 3

How to make my JavaScript more maintainable?

I am learning JavaScript so sorry if the question appears basic.

I made User interface tour, script is working as i want but it is hard to maintain and do any changes.

Q: How to loop the steps so i will just need to add Step title and description and not be bothered with linking between functions?

Any more suggestions to make script better practice?

Thanks in advance.

Link to script: 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);
}

    });

Upvotes: 0

Views: 78

Answers (2)

Alderis
Alderis

Reputation: 49

Instead of having each step exist as a function, you should break it up by data and behavior.

I would recommend using:

An array to store step information. e.g.

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

A function to highlight the appropriate row 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

A single function to handle step display

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

Upvotes: 0

Marc B
Marc B

Reputation: 360922

Take anything in the stepX() functions that's DIFFERENT between the various versions and turn that into a function parameter.

e.g.

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

pass in 4, you'll do a removeClass on 4-1 = ".step3", and do an addClass on .step4.

Upvotes: 3

Related Questions