+
+
+
+На самом деле вы с ним уже работали - это [EventTarget](https://developer.mozilla.org/ru/docs/Web/API/EventTarget)
+
+
+
+Данный шаблон часто применяют в ситуациях, в которых отправителя сообщений не интересует, что делают получатели с предоставленной им информацией.
+
+
+
+Может быть представлен как
+
+
+
+```ts
+IObservable {
+ addObserver(event, handler)
+ removeObserver(event, handler)
+ notifyObserver(event, data)
+}
+```
+
+
+
+или
+
+
+
+```ts
+EventTarget {
+ addEventListener(event, handler)
+ removeEventListener(event, handler)
+ dispatchEvent(event)
+}
+```
+
+
+
+или
+
+
+
+```ts
+Backbone.Events {
+ on(event, handler)
+ off(event, handler)
+ trigger(event)
+}
+```
+
+
+
+Иногда могут добавлять вспомогательные методы, например
+
+
+
+```ts
+Backbone.Events {
+ // ...
+ once(event, handler)
+}
+```
+
+
+
+```ts
+document.querySelector(element).addEventListener("click", (ev) => {
+ alert("Boom!");
+});
+```
+
+
+
+Оговорка: чаще всего обработчиком события является функция. Но это также может быть и объект ([EventListener](https://developer.mozilla.org/ru/docs/Web/API/EventListener)) - в зависимости от реализации.
+
+
+
+### Вопросы?
+
+
+
+### Посредник (Mediator)
+
+
+
+[Посредник](https://refactoring.guru/ru/design-patterns/mediator) - это поведенческий паттерн проектирования, который позволяет уменьшить связанность множества классов между собой, благодаря перемещению этих связей в один класс-посредник.
+
+
+
+**Задача:** Обеспечить взаимодействие множества объектов, сформировав при этом слабую связанность и избавив объекты от необходимости явно ссылаться друг на друга.
+
+**Решение:** Создать объект, инкапсулирующий способ взаимодействия множества объектов.
+
+**Преимущества:** Устраняется связанность между "Коллегами", централизуется управление.
+
+
+
+Самый распространенный (и простой) вариант реализации паттерна - с использованием **EventEmitter** интерфейса (**Event Bus** - Шина событий).
+
+
+
+Разница, по сравнению с обычным использованием EventTarget:
+
+- события в EventTarget генерирует сам объект, при работе с EventBus это делают сторонние объекты
+- список событий при работе с EventTarget ограничен устройством объекта, при работе с EventBus он определяется участниками
+
+
+
+
+
+
+
+При этом, чтобы избежать коллизии имен событий, зачастую вводят `namespaces`, в формате **{NAMESPACE}:{EVENT NAME}**. Например `user:add`, `searchHistory:add`.
+
+Нужно отметить, что по-хорошему, префиксы делаются на основе сущностей, а не на основе модулей (иначе происходит раскрытие структуры системы).
+
+
+
+```ts
+const eventBus = new EventBus();
+
+// module 1
+eventBus.on("city:changed", (cityName) => console.log(`New city: ${cityName}`));
+
+// module 2
+eventBus.trigger("city:changed", "Minsk");
+```
+
+
+
+Как мы могли бы применить это к уже сделанным домашним заданиям?
+
+
+
+### Вопросы?
+
+
+
+### Практика
+
+
+
+[Реализовать Event Emitter](https://codesandbox.io/s/github/vvscode/otus--javascript-basic/tree/master/lessons/lesson33/code/eventEmitter)
+
+
+
+Реализовать поверх существующего функционала метод **once** (для одноразового вызова обработчика).
+
+
+
+### Вопросы?
+
+
+
+Дополнительные материалы:
+
+- [Backbone Events](https://backbonejs.org/#Events) и [исходники](https://backbonejs.org/docs/backbone.html#section-17)
+- [EventTarget simple implementation](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)
+- [Паттерны проектирования понятным языком](https://refactoring.guru/ru/design-patterns)
+- [Design patterns for humans!](https://github.com/sohamkamani/javascript-design-patterns-for-humans)
+
+
+
+### Опрос о занятии
diff --git a/lessons/lesson28/code/routing-examples/README.md b/lessons/lesson28/code/routing-examples/README.md
new file mode 100644
index 0000000..000d747
--- /dev/null
+++ b/lessons/lesson28/code/routing-examples/README.md
@@ -0,0 +1,3 @@
+# vanilla-client-side-routing-examples
+
+Created with CodeSandbox
diff --git a/lessons/lesson28/code/routing-examples/examples/hash-api.js b/lessons/lesson28/code/routing-examples/examples/hash-api.js
new file mode 100644
index 0000000..939ad80
--- /dev/null
+++ b/lessons/lesson28/code/routing-examples/examples/hash-api.js
@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+const render = () => {
+ const route = location.hash.replace("#", "") || "/";
+ document.getElementById("root").innerHTML = `"${route}" page
`; +}; + +// 1. Handle initial page load +window.addEventListener("load", () => { + render(); // 👈 +}); + +// 2. Handle hash changes +window.addEventListener("hashchange", () => { + render(); // 👈 +}); + +// 3. Catch tag clicks +document.body.addEventListener("click", (event) => { + if (!event.target.matches("a")) { + return; + } + event.preventDefault(); + const url = event.target.getAttribute("href"); + location.hash = url; // doesn't reload page + // location.href = url; // reloads page + // location.replace(url); // reloads page +}); diff --git a/lessons/lesson28/code/routing-examples/examples/history-api.js b/lessons/lesson28/code/routing-examples/examples/history-api.js new file mode 100644 index 0000000..7be0621 --- /dev/null +++ b/lessons/lesson28/code/routing-examples/examples/history-api.js @@ -0,0 +1,28 @@ +/* eslint-disable */ + +const render = () => { + const route = location.pathname; + document.getElementById("root").innerHTML = `"${route}" page
`; +}; + +// 1. Handle initial page load +window.addEventListener("load", () => { + render(); // 👈 +}); + +// 2. Handle history navigations. alternative "window.onpopstate" +window.addEventListener("popstate", (event) => { + render(); +}); + +// 3. Catch tag clicks + trigger change handler +document.body.addEventListener("click", (event) => { + if (!event.target.matches("a")) { + return; + } + event.preventDefault(); + let url = event.target.getAttribute("href"); + history.pushState({ foo: "bar" }, document.title, url); + // history.replaceState({ foo: "bar" }, url, url); + render(); // 👈 +}); diff --git a/lessons/lesson28/code/routing-examples/examples/practice.js b/lessons/lesson28/code/routing-examples/examples/practice.js new file mode 100644 index 0000000..a7ebba4 --- /dev/null +++ b/lessons/lesson28/code/routing-examples/examples/practice.js @@ -0,0 +1,44 @@ +/* eslint-disable */ + +/** + * TODO: modify router.js to support + * 1. unsubscribe function. + * Hint: inside Router.go function return unsubscribe function, + * which will remove listener by id + * 2. onLeave callback + * Hint: Add 3rd 'onLeave' parameter to Router.on + save in listener object + * Check in Router.handleListener if previousPath matches listener + */ + +const render = (content) => + (document.getElementById("root").innerHTML = `${content}
`); + +const createLogger = + (content, shouldRender = true) => + (...args) => { + console.log(`LOGGER: ${content} args=${JSON.stringify(args)}`); + if (shouldRender) { + render(content); + } + }; + +const router = Router(); + +const unsubscribe = router.on(/.*/, createLogger("/.*")); +router.on( + (path) => path === "/contacts", + createLogger("/contacts"), // onEnter + createLogger("[leaving] /contacts", false) // onLeave +); +router.on("/about", createLogger("/about")); +router.on("/about/us", createLogger("/about/us")); + +document.body.addEventListener("click", (event) => { + if (!event.target.matches("a")) { + return; + } + event.preventDefault(); + let url = event.target.getAttribute("href"); + router.go(url); + unsubscribe(); +}); diff --git a/lessons/lesson28/code/routing-examples/examples/router.js b/lessons/lesson28/code/routing-examples/examples/router.js new file mode 100644 index 0000000..edd14ea --- /dev/null +++ b/lessons/lesson28/code/routing-examples/examples/router.js @@ -0,0 +1,92 @@ +/* eslint-disable */ + +// IMPLEMENTATION +function Router() { + let listeners = []; + let currentPath = location.pathname; + let previousPath = null; + + const isMatch = (match, path) => + (match instanceof RegExp && match.test(path)) || + (typeof match === "function" && match(path)) || + (typeof match === "string" && match === path); + + const handleListener = ({ match, onEnter, onLeave }) => { + const args = { currentPath, previousPath, state: history.state }; + + isMatch(match, currentPath) && onEnter(args); + onLeave && isMatch(match, previousPath) && onLeave(args); + }; + + const handleAllListeners = () => listeners.forEach(handleListener); + + const generateId = () => { + const getRandomNumber = () => + Math.floor(Math.random() * listeners.length * 1000); + const doesExist = (id) => listeners.find((listener) => listener.id === id); + + let id = getRandomNumber(); + while (doesExist(id)) { + id = getRandomNumber(); + } + return id; + }; + + const on = (match, onEnter, onLeave) => { + const id = generateId(); + + const listener = { id, match, onEnter, onLeave }; + listeners.push(listener); + handleListener(listener); + + return () => { + listeners = listeners.filter((listeners) => listeners.id !== id); + }; + }; + + const go = (url, state) => { + previousPath = currentPath; + history.pushState(state, url, url); + currentPath = location.pathname; + + handleAllListeners(); + }; + + window.addEventListener("popstate", handleAllListeners); + + return { on, go }; +} + +// USAGE +const render = (content) => + (document.getElementById("root").innerHTML = `${content}
`); + +const createLogger = + (content, shouldRender = true) => + (...args) => { + console.log(`LOGGER: ${content} args=${JSON.stringify(args)}`); + if (shouldRender) { + render(content); + } + }; + +const router = Router(); + +const unsubscribe = router.on(/.*/, createLogger("/.*")); +router.on( + (path) => path === "/contacts", + createLogger("/contacts"), // onEnter + createLogger("[leaving] /contacts", false) // onLeave +); +router.on("/about", createLogger("/about")); +router.on("/about/us", createLogger("/about/us")); + +document.body.addEventListener("click", (event) => { + if (!event.target.matches("a")) { + return; + } + event.preventDefault(); + let url = event.target.getAttribute("href"); + router.go(url); + unsubscribe(); +}); diff --git a/lessons/lesson28/code/routing-examples/index.html b/lessons/lesson28/code/routing-examples/index.html new file mode 100644 index 0000000..06129c6 --- /dev/null +++ b/lessons/lesson28/code/routing-examples/index.html @@ -0,0 +1,32 @@ + + + + + + +Client-side URL change examples
+ +
+
+
+
+### React - абстрактная идея
+
+- может использоваться на разных платформах (не только Web, но и нативные системы и что-угодно еще представляющее UI - [React Native](https://reactnative.dev/), [React for terminal](https://github.com/vadimdemedes/ink))
+- сам React никак не связан ни с Web ни с DOM
+- для работы с DOM(HTML) используется отдельный пакет — [react-dom](https://reactjs.org/docs/react-dom.html)
+
+
+
+### Из чего состоит приложение на React?
+
+[React-элементы](https://ru.reactjs.org/docs/glossary.html) — это составляющие блоки React-приложений. Их **можно перепутать с более известной концепцией «компонентов»**, но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране.
+React-элементы иммутабельны.
+
+
+
+Представление React элементов через [`createElement`](https://ru.reactjs.org/docs/react-api.html#createelement)
+
+```jsx
+React.createElement(type, [props], [...children]);
+```
+
+
+
+```tsx [1-30]
+React.createElement(
+ "div",
+ {
+ className: "wrapper",
+ style: "margin: 5px",
+ },
+ React.createElement(
+ "button",
+ {
+ onClick: function onClick() {
+ return alert("Click");
+ },
+ className: "btn",
+ },
+ "Click me"
+ )
+);
+```
+
+
+
+```jsx [1-30]
+// jsx:
+// https://bit.ly/3gCKQOI
+
+
+
+```
+
+
+
+[React-компоненты](https://ru.reactjs.org/docs/glossary.html) — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. Самый простой React-компонент — JavaScript функция, которая возвращает элементы React.
+
+
+
+```tsx [1-50]
+// компонент
+const Button = ({ name }) => {
+ return React.createElement(
+ "button",
+ {
+ onClick: function onClick() {
+ return alert("Click");
+ },
+ className: "btn",
+ },
+ name
+ );
+};
+
+// применение компонента
+React.createElement(
+ "div",
+ {
+ className: "wrapper",
+ style: "margin: 5px",
+ },
+ React.createElement(Button, {
+ name: "Click me",
+ })
+);
+```
+
+
+
+```jsx [1-30]
+const Button = ({ name }) => (
+
+);
+
+// применение компонента
+
+
+
;
+```
+
+
+
+Чтобы [отрисовать элемент на странице](https://ru.reactjs.org/docs/rendering-elements.html) нужен пакет [`react-dom`](https://ru.reactjs.org/docs/react-dom.html)
+
+```jsx [1-10]
+const element = Hello, world
; + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(element); +``` + + + +### [Пример работы с React элементами](https://stackblitz.com/edit/basic-react-dom-novgwc?file=index.js) + + + +Для поддержки синтаксиса `JSX` нужен пакет [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react). Но при этом вполне можно обходиться и [вообще без JSX](https://ru.reactjs.org/docs/react-without-jsx.html) + + + +### Вопросы? + + + +### JSX + + + +`JSX` — синтаксический сахар для функции `React.createElement` + +> JSX — расширение языка JavaScript. Мы рекомендуем использовать его, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript. + + + +[Знакомство с JSX](https://ru.reactjs.org/docs/introducing-jsx.html) + +[JSX в деталях](https://ru.reactjs.org/docs/jsx-in-depth.html) + + + +#### [Немного о правилах JSX](https://stackblitz.com/edit/react-basic-jsx-otus?file=jsxExamples.jsx) + + + +```tsx [1-30] +// 1. Объявление компонентов + +// 1.1 Как функция +const Cmp1 = (props) =>{props.name}
;
+
+// 1.2 Как класс
+class Cmp2 extends React.Component {
+ render() {
+ return {props.name}
;
+
+// 4.2 Внутри jsx
+const Cmp4 = (props) => (
+
+ {/* вот так */}
+ {props.name}
+
+);
+```
+
+
+
+```tsx [1-30]
+// 5 Выражения
+
+// jsx - subset js, выражения пишутся внутри {} (как в примере с свойствами компонентов)
+const Cmp5 = (props) => (
+
+ {props.disabled ? No way : }
+ {props.names.map((name) => (
+
+ ))}
+ {props.someFlag &&
+);
+```
+
+
+
+```tsx
+// Важно! (ну или было важно)
+import React from "react";
+```
+
+Начиная с React 17 появилась [возможность](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) использования новой JSX трансформации
+
+
+
+### Вопросы?
+
+
+
+### Тестирование
+
+
+
+- Подход от реализации - [Enzyme](https://enzymejs.github.io/enzyme/)
+
+- Подход от пользователя - [RTL](https://testing-library.com/docs/react-testing-library/intro/)
+
+
+
+### React-testing-library
+
+> The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils
+
+
+
+```js [1-30]
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import App from "./App";
+
+describe("App", () => {
+ test("renders App component", () => {
+ // Render component
+ render(
+
+
+```
+
+
+
+### Выбор элементов
+
+
+
+[jest-dom](https://github.com/testing-library/jest-dom/)
+
+```js [1-30]
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import App from "./App";
+
+describe("App", () => {
+ test("renders App component", () => {
+ render(Hello React
+
+
+
+
+ );
+}
+```
+
+
+
+```js [1-30]
+import React from "react";
+import Search from "./Search";
+// FireEvent
+describe("Search", () => {
+ test("calls the onChange callback handler", () => {
+ const onChange = jest.fn();
+
+ render(
+