Разделение кода jQuery на повторно используемые модули - PullRequest
Новая
       13

Разделение кода jQuery на повторно используемые модули

0 голосов
/ 18 ноября 2018

Я нахожусь в процессе разработки php-приложения с некоторым добавлением js.Поскольку мои знания JS не особенно хороши, я полагаюсь на jQuery.Тем не менее, мне нравится работать с кодом многократного использования, а не спагетти.Итак, ситуация сложилась.

У меня есть два вида форм в приложении - классические и ajax.Теперь я хочу переместить мои обработчики ajax-форм в отдельный файл, модуль и запустить его в основном js-файле.Давайте посмотрим мой код:

main.js 

import forms from './plugins/ajaxForms';

forms.init($('form.ajax'));

ajaxForms.js 

function init(form) {
    const obj = this;
    form.on('submit', function (e) {
        e.preventDefault();
        const form = $(this);
        const url = form.attr('action');
        const data = form.serialize();
        const method = form.find('input[name="method"]').val() ? form.find('input[name="method"]').val() : form.attr('method');

        const call = $.ajax({
            type: method,
            url: url,
            data: data,
            dataType: "json",
            beforeSend: function() {
            obj.beforeSend(form);
            }
        });

        call.done(function (response) {
            Toastr["success"](response.message);
        });

        call.fail(function (response) {
            Toastr["error"](response.responseJSON.message);
            obj.renderErrors(form);
        });

        call.always(function () {
            obj.after(form);
        });
    });
}

function beforeSend(container) {
    if(container === null) {
    return;
    }
    container.find('.form-loading-overlay').show();
}

function after(container) {
    if(container === null) {
    return;
    }
    container.find('.form-loading-overlay').hide();
}

function renderErrors(errors, form) {
    $.each(errors, function (i, e) {
    if (Array.isArray(e)) {
        let output = '';
        $.each(e, function (i,e) {
            output += e + '<br />';
        });

        form.find('input[name="' + i + '"]')
            .after('<span class="error">' + output + '</span>')
            .addClass('has-error');

    } else {
        form.find('input[name="' + i + '"]')
            .after('<span class="error">' + e + '</span>')
            .addClass('has-error');
    }
    });

}


export default {
    init: init,
    beforeSend: beforeSend,
    after: after,
    renderErrors: renderErrors
};

Примечание: функция renderErrors в настоящее время не работает, так как имеет проблему с переменной формы.Сейчас это не имеет значения.

Ожидаемое решение:

Мне не нравится, как я использую другие функции из этого модуля (например, после(контейнер) - мне нужно было передать "this" в const obj, чтобы заставить его работать, т.е. beforeSend в вызове const.

Короче говоря, я считаю, что есть лучший способ написать этот кусок кода.Я предполагаю, что этот конкретный пример слишком сложен и может быть просто оставлен в виде кода jquery, закрытого в событии submit. Однако я настаиваю на том, чтобы сделать его модульным, поскольку я хочу изучить этот пример, и самостоятельно изменить рефакторинг остального кода.

Кроме того, мне нужно иметь доступ к таким методам, как «beforeSend» и «after», без использования метода init (), так как я ссылаюсь на эти методы в других модулях при использовании вызовов ajax без форм - я все еще хочу отобразить загрузкуналожение на данный контейнер во время действия ajax.

...