Как сделать мой 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

Вместо того, чтобы каждый шаг существовал как функция, вы должны разбить его данными и поведением.

Я рекомендовал бы использовать:

массив для хранения информации шага. например

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

Answer 2

Возьмите что-нибудь в stepX() функций, которые по-другому между различными версиями и превратить это в качестве параметра функции.

например.

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

проходят в 4, вы будете делать removeClass на 4-1 =».step3" , и сделать addClass на .step4.