Добро пожаловать в мой учебный проект. В нем я разрабатываю чат без использования сторонних библиотек и фреймворков.
В проекте разработаны собственные имплементации таких модулей как:
- Шаблонизатор, использующий концепцию Virtual DOM
- Компонент
- Роутер
- Модуль для работы с HTTP
- Модуль для работы с WebSocket
- Модуль для работы с глобальным состоянием приложения
- Шина событий
- Модуль для валидации форм
Для запуска проекта достаточно выполнить следующие инструкции
npm install
npm start
Для сборки проета необходимо запустить команду:
npm run build
Страницы проекта:
Все остальные пути ведут на страницу 404.
Имена динамических атрибутов начинается с :
, а событий с @
.
Для вывода текста необходимо использовать конструкцию {{ text }}
.
<div class="parent" @click="goBack">
<button :class="buttonClass">
{{ buttonText }}
</button>
</div>
Чтобы использовать компоненты в шаблоне, необходимо зарегистрировать их, передав в Templator.compile
.
const template = `
<div class="buttons">
<my-button className="button" text="Авторизоваться" :onClick="auth" />
<my-button className="button" text="Создать аккаунт" :onClick="goToRegistration" />
</div>
`;
const templator = Templator.compile(template, {
components: {
'my-button': MyButton,
},
});
Для отрисовки вложенных в компонент элементов, используется конструкция $children$
. У компонента может быть только один вложенный элемент.
<my-button>Click me!</my-button>
//MyButton
<button>$children$</button>
Для отрисовки списков используется атрибут $each
.
<ul>
<li $each="chat in chats" class="chat-item" @click="chat.onClick">
<avatar :img="chat.avatar" />
<div class="chat-item__name">{{ chat.title }}</div>
</li>
</ul