Корректно ли вот так сопоставлять классы со страницами сайта?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста, корректно ли организовывать данным образом код ?
Есть такое вот содержимое в app.js:

import Route from "./route";
import HomeController from "./controllers/HomeController";
import BlogController from "./controllers/BlogController";

Route.url(/\//, HomeController);
Route.url(/blog/, BlogController);

Проще говоря за скрипты на главной странице отвечает класс HomeController
а за скрипты в блоге BlogController

Делаю таким образом по такой вот причине:
Не хочется делать кучу проверок, то есть к примеру на главной странице нету пагинации и нету фильтров а в блоге есть и пагинация и фильтры, если инициализация пагинации и фильтров будет в одно app.js то нужно же делать проверку есть ли в DOM элементы пагинации и фильтров, т.к если проверки не будет, будет ошибка на главной.

Но по поводу правильности моего решения тоже есть некоторые сомнений, допустим если будет 10 разных страниц, и для них разные скрпиты, то в app.js будет происходить 9 вызовов функции url, пока не дойдём до нужной. Но данный код нравится своей изоляцией, как то всё чётко разделено, HomeController - тут всё для главной, BlogController - тут всё для блога.

В голове правда крутиться мысль, создавай файл:
- blog.js - для блога
- home.js - для главной
Но я проект делаю под laravel, а тут laravel-mix, мне кажется будет не очень правильно создавать отдельные файлы вручную а потом во view подключать их

В общем корректен ли данный подход ? Или может я делаю какой то велосипед, заранее благодарю за ответ.

Comments

[Сергей delphinpro]

На мой взгляд, ваш подход вообще не имеет смысла.
Разделение на отдельные файлы (blog.js, home.js) еще можно понять, но деление по критерию страниц в вашем случае, когда весь код все равно собирается в один файл, непонятно.

Не лучше ли делить на функциональные модули?

import Carousel from "./Carousel";
import Slider from "./Slider";

[Сергей Хлопов]

Сергей delphinpro, делю таким образом что бы отделять код обрабатывающий главную страницу от блога. В общем проще говоря:

• Избегаю проверок в каждом модулей, существует ли требуемый для модуля элемент на странице, т.к в таком случае я чётко разграничиваю, слайдера нету на главной, значит в HomeController не импортирую модуль слайдера, а в блоге к примеру есть слайдер, значит в BlogController я импортирую модуль слайдера
  

Route.js делает вот что:

export default class Route {
    static url(pattern, logic) {
        let url = window.location.pathname;
        if(pattern.test(url)) {
            let obj = new logic();
        }
    }
}

А к примеру в HomeController вот что:

export default class HomeController {
    constructor() {
        alert("123");
    }
}

[Сергей delphinpro]

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

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

[Сергей delphinpro]

Вы написали модуль Slider. Нужно его сделать как можно более самодостаточным, независим от окружения. Пусть он сам проверит все что ему необходимо, а не надеется на то, что его будут запускать в подготовленном окружении.

[Сергей delphinpro]

Смотрите как например может выглядеть основной скрипт-файл:

/*!
 * File: main.js
 */
app.initMobileMenu();
app.initBigSlider();
app.initSlider();
app.initModalDataApi();
app.initAccordions();
app.initAdvantagesCarousel();

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

[Сергей delphinpro]

А разделение по страницам имеет смысл для оптимизации загрузки, уменьшения загружаемых данных.
Но и тут не нужно фанатизма. Если есть к примеру на сайте личный кабинет, то понятно, не каждый пользователь будет им пользоваться, значит все скрипты для ЛК можно вынести в отдельный бандл и загружать только по надобности. Или функционал оформления заказа. Опять же не каждый посетитель что-то будет у вас заказывать, большинство просто смотрят. Им необязательно грузить соответствующие скрипты.
Вот тут может быть и имеет смысл разделить код на бандлы. Может быть.

Но даже тут это нужно делать не на уровне организации кода =) Таким делением лучше заниматься вашему сборщику.