SPA на голом Javascript. Наполняемость страниц
Необходимо переделать многостраничный сайт на одностраничный (SPA) используя модель MVС. Так как я студент изучающий Javascript, то допустимо использовать HTML, CSS и Javascript и немного JQuery(слайды).
В примерах которые я смотрел return возвращает кусок кода HTML. Обычно у всех в примерах 2-4 строчки HTML. Выглядит в целом неплохо.У меня вопрос, если кода много (допустим 150 и более строк кода HTML) он так же тупо огромным куском копируется из HTML, вставляется и через innerHTML потом выводится на экран? Или необходимо разбивать на более мелкие группы?
И второй вопрос по скрипту. Вставленный таким образом скрипт через <script></script> не работает. Пришлось оставлять блок где был скрипт пустым, дописывать метод myScript и потом вручную добрасывать в блоки скрипты. Более детально о чем я в примере кода который я выложил. Допустимо ли так делать? Может есть стандартные простые адекватные решения?
id: "secondmain",
title: `OOО "БПИ" гидравлическое оборудование - поставки, cервис, ремонт в Беларуси`,
render: (className = "container", ...rest) => {
return `
<section class="${className}">
<div class="left_sidebar left_sidebar_v2">
<div class="engineering">
<h3>Инжиниринг</h3>
<ul>
<li><a href="#engineering_hydraulic_systems">Проектирование гидросистем</a></li>
<li><a href="#engineering_power_pack">Проектирование гидростанций</a></li>
<li><a href="#production_power_pack">Производство гидростанций</a></li>
</ul>
</div>
<div class="hydraulics_service">
<h3>Сервис гидравлики</h3>
<ul>
<li><a href="#hydraulics_diagnostics">Диагностика и ремонт</a></li>
<li><a href="#service_center">Сервисный центр</a></li>
<li><a href="#hydrofication">Гидрофикация</a></li>
</ul>
</div>
<div class="sale">
<h3>Продажа</h3>
<ul>
<li><a href="#pump_motor">Гидронасосы, гидромоторы</a></li>
<li><a href="#valve">Гидроклапаны</a></li>
<li><a href="#directional_valve">Гидрораспределители</a></li>
<li><a href="#hydraulics_accessories">Аксессуары для гидравлики</a></li>
<li><a href="#accumulator">Гидроаккумуляторы</a></li>
<li><a href="#radiators">Теплообменники</a></li>
<li><a href="#filters">Фильтры</a></li>
</ul>
</div>
</div>
<div class="content content_v2 main">
<h2 style="text-align: left; margin-bottom: 20px;">Компания «БПИ»</h2>
<p> Мы рады приветствовать Вас на сайте компании «БПИ».
Наша компания имеет большой опыт в направлении промышленная гидравлика, мы
разбираемся в том, что продаем и надеемся быть Вам полезными. Мы предлагает широкую
номенклатуру гидравлических компонентов различных мировых производителей. Большое количество
комплектующих находится на складе. Наши специалисты грамотно и качественно осуществляют подбор
необходимых гидравлических компонентов по характеристикам, необходимых заказчику. Подбор аналогов
других производителей.</p>
<h3>Основные направления деятельности нашей компании:</h3>
<ul>
<li>Выездная диагностика и ремонт гидроприводов любой сложности;</li>
<li>Модернизация гидроприводов;</li>
<li>Монтаж и демонтаж гидравлического оборудования;</li>
<li>Изготовление и ремонт гидростанций по индивидуальным проектам;</li>
<li>Изготовление и ремонт гидроцилиндров;</li>
<li>Производство рукавов высокого давления;</li>
<li>Ремонт, проверка и дозаправка гидропневмоаккумуляторов;</li>
<li>Производство фильтровальных установок;</li>
<li>Продажа воздушных, топливных и масляных фильтров;</li>
<li>Продажа гидравлического оборудования и компонентов;</li>
</ul>
<h3>Наши преимущества:</h3>
<ul>
<li>Высококвалифицированный персонал;</li>
<li>Профессиональный подход к каждому клиенту;</li>
<li>Круглосуточная техническая помощь в Минске;</li>
<li>Бесплатная консультация наших специалистов;</li>
<li>Гарантия на все виды работ;</li>
</ul>
<p>Мы предлагаем решение проблем в области обслуживания и ремонта гидравлики. Стремимся к долгосрочным
партнерским отношениям.</p>
<p class="slogan">Гарантируем высокое качество в кратчайшие сроки!!!</p>
<div class="slider_man_bottom">
<img src="img/slider_man_bottom/1.JPG" alt="slide_1">
<img src="img/slider_man_bottom/2.JPG" alt="slide_2">
<img src="img/slider_man_bottom/3.jpg" alt="slide_3">
<img src="img/slider_man_bottom/4.jpg" alt="slide_4">
<img src="img/slider_man_bottom/5.jpg" alt="slide_5">
<img src="img/slider_man_bottom/6.jpg" alt="slide_6">
<img src="img/slider_man_bottom/7.jpg" alt="slide_7">
</div>
</div>
<div class="clear">
</div>
</div>
</section>
`;
},
myScript: () => {
let divSliderMainBottom = document.querySelector(".content_v2");
let scriptSliderMainBottom = document.createElement("script");
scriptSliderMainBottom.setAttribute("src", "js/scriptSliderMainBottom.js");
divSliderMainBottom.appendChild(scriptSliderMainBottom);
}
};