Где правильно располагать JS код?

159

23 июня 2021, 18:20

Мой JS код находится на текущий момент времени в HTML файлах. Не скажу чтобы он особо огромен. У меня появилась идея перенести данный код в JS файлы с целью оптимизации проекта. Я обработал пару HTML страниц и весь JS код перенес в отдельные файлы.В HTML страницах хранятся константы из tymeleaft которые в принципе не возможно туда перенести.Теперь там в HTML пустота и меня это пугает... Вопрос: Обязательно ли избегать JS-кодирования в HTML страницах и переносить это дело в отдельные файлы или нет? Вот мой небольшой пример кода:

JS:

$(function () {
    if (STATE_CURRENT == STATE_CREATE || STATE_CURRENT == STATE_EDIT) {
        initPageCompanyEdit();
    }
});
let MAP_CONTROLLER;
function initPageCompanyEdit() {
    const loadingFone = new LoadingFone("#wrap-company-info", { image_opacity_procent: 60 });
    loadingFone.init();
    const modalImageLoader = new ModalImageLoader({
        name: NAME_BUTTONS_MODAL_IMAGE_LOADER,
        parent_div: $("body"),
        props: {
            input: $('#input-image'),
            img: $('#image .company-img'),
            input64: $("#img-base64")
        }
    });
    modalImageLoader.init();
    MAP_CONTROLLER = new MapController(PLACEHOLDER_TEXT_FOR_MAP_CONTROLLER, getInputForMapController());
    const company = new Company($("#form-send"));
    switch (STATE_CURRENT) {
        case STATE_CREATE:
            $("#button-save").click(function() {
                company.create();
            });
            $("#button-back").click(function() {
                window.location.href= PATH_ACCAUNT_COMPANY;
            });
            break;
        case STATE_EDIT:
            $("#button-save").click(function() {
                company.save(COMPANY_ID);
            });
            $("#button-back").click(function() {
                company.back(COMPANY_ID);
            });
            break;
        default:
            console.log("Error. Not fond case for PageState (Enum)...")
    };
}
function reloadMapControllerListeners() {
    MAP_CONTROLLER.addListeners(getInputForMapController());
}
function getInputForMapController() {
    return {
        country: $("#location .country"),
        region: $("#location .region"),
        city: $("#location .city")
    };
};

HTML:

!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.getLanguage()}">
    <head th:replace="~{fragments/head :: head(~{::title}, ~{::link}, ~{::head/script})}">
        <link rel="stylesheet" th:href="@{/css/company/company.css}">
        <link rel="stylesheet" th:href="@{/css/fragments/list.view.css}">
        <script type="text/javascript" th:src="@{/js/map.controller.js}"></script>
        <script type="text/javascript" th:src="@{/js/objects/company.js}"></script>
        <script type="text/javascript" th:src="@{/js/company/company.js}"></script>
        <script type="text/javascript" th:src="@{/js/company/company.edit.js}"></script>
        <script th:inline="javascript" th:with="PageState=${@poolEnums.getPageState()}">
            /*<![CDATA[*/
            const STATE_CURRENT = /*[[${page_state != null} ? ${page_state} : ${PageState.VIEW}]]*/ undefined;
            const STATE_CREATE = /*[[${PageState.CREATE}]]*/ undefined;
            const STATE_EDIT = /*[[${PageState.EDIT}]]*/ undefined;
            const STATE_VIEW = /*[[${PageState.VIEW}]]*/ undefined;
            const PATH_SEARCH_RESUME = /*[[@{/search/resume}]]*/ "/";
            const NAME_BUTTONS_MODAL_IMAGE_LOADER = {
                button_back: /*[[#{button.name.back}]]*/ "",
                button_go: /*[[#{button.name.go}]]*/ ""
            };
            const PLACEHOLDER_TEXT_FOR_MAP_CONTROLLER = {
                country: /*[[#{address.country}]]*/ "",
                region: /*[[#{address.region}]]*/ "",
                city: /*[[#{address.city}]]*/ ""
            };
            const PATH_ACCAUNT_COMPANY = /*[[@{/accaunt/company}]]*/ "/";
            const COMPANY_ID = /*[[${company.id}]]*/ undefined;
            /*]]>*/
        </script>
    </head>
    <body class="grid-three">
        <div class="wrap-headers">
            <header id="main" class="orange" th:include="~{fragments/header :: header-nav}"></header>
            <header id="header-links" class="white" th:include="~{fragments/header :: header-links}"></header>
        </div>
        <main>
            <div id="wrap-content" class="max-page-width">
                <th:block th:switch="${page_state}" th:with="PageState=${@poolEnums.getPageState()}">
                    <th:block th:case="${PageState.CREATE}" th:insert="~{company/company.edit :: company-edit}"/>
                    <th:block th:case="${PageState.EDIT}" th:insert="~{company/company.edit :: company-edit}"/>
                    <th:block th:case="${PageState.VIEW}" th:insert="~{company/company.view :: company-view}"/>
                </th:block>
            </div>
        </main>
        <footer class="fone-img p50" th:style="'background-image:url(' + @{/img/fragments/footer.jpg} + ');'" th:include="~{fragments/footer :: footer-link}"></footer>
    </body>
</html>

Answer 1

Необязательно, но желательно. Вам шашечки или ехать? Одна из целей любого проекта прежде всего его работоспособность, дабы он мог выполнять поставленные перед ним задачи.

Однако, для того чтобы проект жил и развивался, желательно или даже лучше сказать необходимо придерживаться определённых правил разработки, как, например, в вашем случае разделение html-вёрстки и js-кода. Это позволит в дальнейшем не запутаться в логике разрастающегося проекта.

Пустоты же в HTML не бойтесь, если для HTML нет работы, то и нечего её выдумывать.