Как правильно писать на JS

232
27 февраля 2018, 04:38

Здравствуйте, по необходимости пользуюсь услугами JS в частности JQurey и AJAX, но суть в том, что мне немного не нравится оформление кода на JS. Скорее всего я как-то не правильно пишу на нем, вот это понятно что нужно js код выносить в отдельный файл, но если к примеру у меня страниц 10 и в каждом много скриптов написано, мне как быть создавать каждый файл под файл html, ну чтобы все более мне было понятно? К примеру файл index.html и ему создавать файл inde.js и потом инклюдить его в html, так же получается? Но а к примеру у меня есть много различных форм не только с input но и select, textarea и т.д. мне как быть, писать для каждой проверку на пустое значений полей и взаимодействие с AJAX, либо можно это как-то все сделать красивее? К примеру вот такой код:

var formChangeGroup = $("form[name='change_group']");
var logger = $(".log_admin");
formChangeGroup.submit(function(){
    var newTitleGroup = $("input[name='new_title_group']");
    var oldTitleGroup = $("select[name='old_title_group'] :selected");
    if(newTitleGroup.val() == ""){
        logger.html(decorateError("Введите новое название группы."));
        return false;
    }
    if(oldTitleGroup.text() == "Не выбрано"){
        logger.html(decorateError("Выберите старое название группы."));
        return false;
    }
    sendDataAndUpdateGroups(formChangeGroup);
    logger.html(decorateSuccess("Название группы " + oldTitleGroup.val() +
                            " успешно изменено на " + newTitleGroup.val() + "."));
});
function sendDataAndUpdateGroups(form){
    $.post(form.attr("action"), form.serialize(), function(responseJson){
        var oldRows = $(".del_row_groups");
        oldRows.remove();
        $.each(responseJson, function(index, group) {
            $("<tr class='del_row_groups'>").appendTo($("#body_table_groups"))
                .append($("<td>").text(group.name))
                .append($("<td>").text(group.countUsers))
                .append($("<td>").text("0%"));
        });
    });
    event.preventDefault();
}

Как это все упростить возможно и сделать более читаемым? Когда много форм и много файлов сложно все понимать. Надеюсь что кто-нибудь подскажет советом, либо кодом или быть может даже посоветует статью или видео с подробным описанием этого вопроса.

Answer 1

Код который касается чисто одной страницы делать

  1. Прямо на странице html.
  2. Либо отдельным файлом page-name.js.

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

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

Answer 2

Добрый день. Постарайтесь ознакомиться с основами JS. Вам необходимо понять прежде всего LexicalEnvironment, затем освойте механизм замыканий, и в заключение изучите стандартный модульный паттерн. В JS программировании необходимо стараться придерживаться Принципа наименьших привилегий, это значит что ваш код должен быть максимально обособлен от глобальной области видимости. Почитать хороший материал можно тут https://github.com/azat-io/you-dont-know-js-ru не старайтесь перепрыгнуть основы, используя готовые блоки кода, как мозаику. В JS используется лексическая область видимости, что концептуально отличается от динамической области видимости используемой в иных языках.

READ ALSO
ACF + сравнение товаров

ACF + сравнение товаров

Есть сайт на WordPress на нем реализован каталог товаров с помощью пользовательских типов записей + ACF произвольные поля, с помощью которых заполняются...

131
Js/Jq разница между $(this) и this

Js/Jq разница между $(this) и this

Здравствуйте, подскажите в чем разница между передачей элемента в on click:

222
помогите с расширением пожалуста

помогите с расширением пожалуста

это расширение выделяет три слова на любой странице (яблоко,лимон,киви)но вот проблема когда эти значения ввёдаться в гугле или в любом другом...

184