Блог

Главная - Вопросы по программированию - Как сделать мой код JavaScript более динамичным и масштабируемым

Как сделать мой код JavaScript более динамичным и масштабируемым

#javascript #jquery

#javascript #jquery

Вопрос:

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

вот код

     $('.stepNextBtn1').click(function(){  
    $('#FuielsImg').fadeIn()      
    $.ajax({
        url: '/nexpost',
        type: 'POST',
        data: {
            '_token': csrf,
            'value': $('.AuthenticationKe').val(),
            'key': 'AuthenticationKey'
        },
        dataType: 'JSON',
        success: function( data ) {
            $('#FuielsImg').fadeOut()      
            if(data.success){
                $('.ShowAutCode').fadeOut()
                $('.AuthenticationKe').val('')
                $('.stepfield1').slideUp('slow')
                $('.stepfield2').slideDown('slow')
            }  else{
                $('.ShowAutCode').fadeIn()
            }      
        } 
    })
})
$('.stepNextBtn2').click(function(){
    $('#FuielsImg').fadeIn()      
    $.ajax({
        url: '/nexpost',
        type: 'POST',
        data: {
            '_token': csrf,
            'value': $('.COTcode').val(),
            'key': 'COTcode'
        },
        dataType: 'JSON',
        success: function( data1 ) {
            $('#FuielsImg').fadeOut()
            if(data1.success){
                $('.ShowCotCode').fadeOut()
                $('.COTcode').val('')
                $('.stepfield2').slideUp('slow')
                $('.stepfield3').slideDown('slow')
            }  else{
                $('.ShowCotCode').fadeIn()
            }      
        } 
    })
})
$('.stepNextBtn3').click(function(){
    $('#FuielsImg').fadeIn()      
    $.ajax({
        url: '/nexpost',
        type: 'POST',
        data: {
            '_token': csrf,
            'value': $('.TAXcode').val(),
            'key': 'TAXcode'
        },
        dataType: 'JSON',
        success: function( data2 ) {
            $('#FuielsImg').fadeOut()
            if(data2.success){
                $('.ShowTaxCode').fadeOut()
                $('.TAXcode').val('')
                $('.stepfield3').slideUp('slow')
                $('.stepfield4').slideDown('slow')
            }  else{
                $('.ShowTaxCode').fadeIn()
            }      
        } 
    }) 
})

Спасибо, это действительно важно для меня

Комментарии:

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

2. Можете ли вы также поделиться HTML?

Ответ №1:

Создайте функцию для выполнения всей тяжелой работы

 function clickHandler(p1, p2, p3, p4, p5) {
    return function() {
        $('#FuielsImg').fadeIn()
        $.ajax({
            url: '/nexpost',
            type: 'POST',
            data: {
                '_token': csrf,
                'value': $(p1).val(),
                'key': p2
            },
            dataType: 'JSON',
            success: function(data) {
                $('#FuielsImg').fadeOut()
                if (data.success) {
                    $(p3).fadeOut()
                    $(p1).val('')
                    $(p4).slideUp('slow')
                    $(p5).slideDown('slow')
                } else {
                    $(p3).fadeIn()
                }
            }
        });
    };
}
$('.stepNextBtn1').click(clickHandler('.AuthenticationKe', 'AuthenticationKey', '.ShowAutCode', '.stepfield1', '.stepfield2'))

Ответ №2:

Я не знаком с Jquery, но из вашего кода, поскольку то, что вы передаете в функцию ajax, является объектом, я думаю, вы можете создать оператор switch, который соответствующим образом устанавливает объект на основе имени класса нажатой кнопки

 switch(event.target.classname) {
   case '.stepNextBtn1':
     obj = {...};
     break;
   case 'stepNextBtn2':
     obj = {...};
     break;
   case 'stepNextBtn3':
     obj = {...};
     break;
   default:
     break
}

затем вы можете упростить свой код примерно так

  $(event.target.classname).click(function(){  
 $('#FuielsImg').fadeIn()
 $.ajax(obj)

Ответ №3:

Здесь могут помочь некоторые базовые принципы разработки программного обеспечения!

Держите свой код СУХИМ. Вы выполняете один и тот же вызов AJAX три раза. Не повторяйтесь и создайте единую функцию для обработки вызовов AJAX, а затем передайте соответствующие данные для обработки вызова AJAX и взаимодействия с пользовательским интерфейсом.

 let ajaxObj = {
    fieldsToClear: ['AuthenticationKe','COTcode','TAXcode'],
    slideUpFields: ['stepfield1','stepfield2','stepfield3']
}

function makeAjaxCall(ajaxData) {
    // Do ajax stuff here

    // then your UI interactions
    ajaxData.fieldsToClear.forEach(elem => {
        $(elem).val('');
    });

    ajaxData.slideUpFields.forEach(elem => {
        $(elem).slideUp('slow');
    })

    return(value);
}
Метки: