JS код ― что куда класть

JS и HTML зачастую сильно связаны между собой. Чуть тронешь HTML – ломается JS. Что-то меняешь в JS – нужно править HTML. Усугубляется проблема тем, что JS кода и файлов со временем становится все больше. Понять, что от чего зависит и на что влияет, становится затруднительно. Есть несколько простых приемов, которые упрощают жизнь.

Не смешивать классы для JS и CSS

В html разметке можно явно указать от каких тегов зависит работа JavaScript кода. Для этого заводят классы с префиксом js-, по аналогии с CSS селекторами. Например: js-submit или js-title. Такие классы предназначены исключительно для привязки JavaScript кода, для CSS используются другие классы.

Благодаря такому приему редактировать разметку становится проще и безопаснее. Изменение визуального оформления не ломает JS.

Вставки JS в HTML

Если кода мало и он завязан на верстку — стоит разместить его непосредственно в HTML документе, оставить небольшие включения JS кода

Такая разметка и JS код не используются отдельно друг от друга. Они связаны друг с другом, удобно когда все это лежит в одном месте.

HTML документ инициализирует JS

Если JS кода много, либо он используется на разных страницах – вынести его в отдельный JS файл. Но при этом код инициализации стоит оставить на HTML странице. Например, это может быть явный вызов функции с передачей селекторов DOM дерева и прочих параметров конфигурации. Смысл в том, чтобы явно указать зависимости в HTML документе. В таком коде проще разобраться, он устойчивее.

<script src="./popup.js"></script>
<script type="text/javascript">
    bind_popup('.js-popup-toggle', '.js-popup-template')
</script>

Шаблон разместить в теге <script type=“text/template”>

На стороне браузера часто используется шаблонизация. Например, для динамических модальных окон или всплывающих сообщений. Шаблонизаторов существует масса, под разные задачи и на любой вкус. Но в любом случае встает вопрос “Куда положить сам шаблон?”

Можно хранить его в виде строки JS кода. Но, как правило, это неудобно. Верстка расползается по множеству файлов, её становится сложно поддерживать.

Вариант лучше ― поместить шаблон в специальный тег в файле HTML документа:

<script type="text/template" id="popup_template">
    <h1>Hello, {username}!</h1>
    <p>Lorem ipsum dolor sit amet..</p>
</script>
<script type="text/javascript">
    var container = document.getElementById('popup_template');
    var containerContent = container.textContent || container.innerText;
    render_template(containerContent, {
        username: 'Bob',
    });
</script>