Всем привет! При создании сайта разработчики часто сталкиваются с тем, что большинство элементов на сайте повторяются. И постоянное написание стилей и тегов для таких элементов становится рутиной.
Чтобы не создавать, например, кнопку, повторяющуюся на сайте время от времени, можно воспользоваться готовым шаблоном кнопки, разработанным один раз и повторно используемым.
Это ускоряет создание сайта в разы.
Для создания такого шаблона обычно используется javascript. Классу или функции передаются параметры, которые тем или иным образом изменяют HTML-шаблон, описанный в классе или функции. Например, шаблон кнопки может иметь в качестве параметра текст кнопки.
const buttonTemplate = (text) =>{
return ‘<button>’+ text+’</button>’;
}
Обычно файлы создаются для компонентов, из которых они экспортируются. Экспорт может происходить как в другие компоненты, так и в класс или функцию, которая отрисовывает все компоненты.
export buttonTemplate;
import {buttonTemplate} from “buttonTemplate”;
Фреймворк имеет класс Cample, который отображает все указанные компоненты. Компоненты визуализируются путем вызова функции класса с именем render во всех компонентах.
import { Cample, Component } from 'cample’;
const component = new Component("new-component",
`<div class="component">
{{component_text}}
</div>`,
{
data:{
component_text:"Component"
});
new Cample("#page").render(`<div class="content">
{{component}}
</div> `,
{ component });
В данном примере для компонента создается экземпляр класса, который рендерится экземпляром класса Cample, путем вызова в нем через цикл функции рендеринга всех экземпляров класса компонента, указанных в объекте класса (параметры).
Сам экземпляр Cample отображается в теге с атрибутом id со значением «страница».
Используя этот метод из большинства других, компоненты создаются на javascript.
Большое спасибо всем за чтение этой статьи!
