Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Заменяет короткие тире на длинные #5440

Merged
merged 1 commit into from
Jul 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion js/cleartimeout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const timerId = setTimeout(() => {
clearTimeout(timerId)
```

Функция `clearTimeout()` принимает один аргумент числовой идентификатор таймаута. Этот идентификатор можно получить в результате вызова `setTimeout()`.
Функция `clearTimeout()` принимает один аргумент числовой идентификатор таймаута. Этот идентификатор можно получить в результате вызова `setTimeout()`.

## Как понять

Expand Down
2 changes: 1 addition & 1 deletion js/element-dataset/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ item.dataset.candidateRole = 'junior'
</ul>
```

Преобразование названий работает и в обратную сторону дата-атрибут на HTML-элементе, записанный в `kebab-case`, будет превращён в `dataset` в `camelCase`.
Преобразование названий работает и в обратную сторону дата-атрибут на HTML-элементе, записанный в `kebab-case`, будет превращён в `dataset` в `camelCase`.

```html
<ul>
Expand Down
2 changes: 1 addition & 1 deletion js/element-getattribute/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ tags:

## Как пишется

`getAttribute()` принимает один аргумент строку с именем атрибута. В ответ метод возвращает значение атрибута в виде строки или `null`, если атрибута нет на элементе.
`getAttribute()` принимает один аргумент строку с именем атрибута. В ответ метод возвращает значение атрибута в виде строки или `null`, если атрибута нет на элементе.

```html
<script type="application/json" id="hydration"></script>
Expand Down
2 changes: 1 addition & 1 deletion js/element-innerhtml/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ HTML после изменения:

## Как понять

Браузер предоставляет разработчику возможность управлять содержимым на странице и менять его как угодно. `innerHTML` самый простой способ считать или изменить HTML-содержимое элемента. Это свойство использует строки, что даёт возможность легко менять и очищать содержимое элементов.
Браузер предоставляет разработчику возможность управлять содержимым на странице и менять его как угодно. `innerHTML` самый простой способ считать или изменить HTML-содержимое элемента. Это свойство использует строки, что даёт возможность легко менять и очищать содержимое элементов.

Когда в `innerHTML` присваивается новое значение, всё предыдущее содержимое удаляется и создаётся новое, что приводит к [перерисовке страницы](/tools/how-the-browser-creates-pages/).

Expand Down
2 changes: 1 addition & 1 deletion js/element-innertext/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ console.log(button)

## Как понять

Считывание и изменение текстового содержимого довольно распространённая задача. `innerText` позволяет считывать содержимое элемента и его потомков, но с несколькими исключениями:
Считывание и изменение текстового содержимого довольно распространённая задача. `innerText` позволяет считывать содержимое элемента и его потомков, но с несколькими исключениями:

- не считывается содержимое тегов `<script>` и `<style>`;
- не считывается содержимое скрытых элементов.
Expand Down
2 changes: 1 addition & 1 deletion js/element-outerhtml/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ HTML после изменения:

## Как понять

Свойство `outerHTML` проще понять в сравнении с другим похожим свойством [`innerHTML`](/js/element-innerhtml/).
Свойство `outerHTML` проще понять в сравнении с другим похожим свойством [`innerHTML`](/js/element-innerhtml/).

Свойство `innerHTML` позволяет получить только **содержимое** элемента как HTML-строку. В то время как `outerHTML` делает то же самое, но при этом возвращает и HTML самого элемента. Можно сказать, что вывод будет идентичен `innerHTML`, только в строке будет содержаться открывающий и закрывающий тег самого элемента, у которого было вызвано свойство.

Expand Down
2 changes: 1 addition & 1 deletion js/settimeout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ console.log(timerId)

<aside>

⏱ Миллисекунда это одна тысячная доля секунды, то есть одна секунда состоит из 1000 миллисекунд.
⏱ Миллисекунда это одна тысячная доля секунды, то есть одна секунда состоит из 1000 миллисекунд.

</aside>

Expand Down
6 changes: 3 additions & 3 deletions js/window-history/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ window.history.forward()

Метод `go()` является универсальным и позволяет переместиться по истории вперёд или назад относительно текущей страницы.

Метод принимает один аргумент число, которое определяет, на сколько шагов по истории вперёд или назад нужно перейти. Отрицательное значение определяет сколько шагов назад, а положительные вперёд.
Метод принимает один аргумент число, которое определяет, на сколько шагов по истории вперёд или назад нужно перейти. Отрицательное значение определяет сколько шагов назад, а положительные вперёд.

```js
window.history.go(2)
Expand Down Expand Up @@ -84,7 +84,7 @@ window.history.go(0)

### Управление историей

Для создания новой записи в истории используется метод `pushState()`, а для модификации текущей записи `replaceState()`.
Для создания новой записи в истории используется метод `pushState()`, а для модификации текущей записи `replaceState()`.

Оба метода похожи с точки зрения использования и оба принимают три аргумента:

Expand Down Expand Up @@ -154,7 +154,7 @@ window.history.back()
- https://example.com/about
- https://example.com/

Верхние пункты списка это недавно посещённые страницы, а последний пункт — страница, с которой началась сессия.
Верхние пункты списка это недавно посещённые страницы, а последний пункт — страница, с которой началась сессия.

### Навигация в одностраничных приложениях

Expand Down
18 changes: 9 additions & 9 deletions tools/reactivity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ tags:

## Кратко

Реактивность это способ автоматически обновлять систему в зависимости от изменения [потока данных](/tools/architecture-data-flow/).
Реактивность это способ автоматически обновлять систему в зависимости от изменения [потока данных](/tools/architecture-data-flow/).

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

Реактивное программирование парадигма в программировании, в которой программа больше сосредоточена на управлении потоками данных, таким образом описывая взаимосвязи между ними.
Реактивное программирование парадигма в программировании, в которой программа больше сосредоточена на управлении потоками данных, таким образом описывая взаимосвязи между ними.

## Что такое реактивность?

Давайте вспомним, как пользователь представляет себе работу с интерфейсом. Мы ожидаем, что интерфейс будет мгновенно *реагировать* на наши действия. Начали вводить текст, он сразу же появляется в поле. Нажали на кнопку, форма тут же изменилась, появились лоадеры, а затем выпрыгнуло радостное сообщение об успехе. С точки зрения пользователя реактивность это мгновенная реакция на его действия.
Давайте вспомним, как пользователь представляет себе работу с интерфейсом. Мы ожидаем, что интерфейс будет мгновенно *реагировать* на наши действия. Начали вводить текст, он сразу же появляется в поле. Нажали на кнопку, форма тут же изменилась, появились лоадеры, а затем выпрыгнуло радостное сообщение об успехе. С точки зрения пользователя реактивность это мгновенная реакция на его действия.

Для разработчика этот термин имеет немного другое значение. Когда речь заходит о реактивности, фокус смещается на данные. Для примера напишем код, чтобы сложить два числа:

Expand Down Expand Up @@ -77,21 +77,21 @@ console.log($sum)

Пример выше ненастоящий, он не будет работать таким образом, но он даёт возможность понять, какую проблему может решать реактивность.

Во фронтенде мы можем связать любое изменение в интерфейсе с изменениями данных внутри программы. Реактивность с точки зрения фреймворков это обновление интерфейса на основе изменений состояния.
Во фронтенде мы можем связать любое изменение в интерфейсе с изменениями данных внутри программы. Реактивность с точки зрения фреймворков это обновление интерфейса на основе изменений состояния.

В реактивности данные часто представляются в виде потока последовательности событий, упорядоченной по времени.
В реактивности данные часто представляются в виде потока последовательности событий, упорядоченной по времени.

![схема потока данных](images/stream_simple.png)

Поток данных можно начать обрабатывать в любой момент времени, и все новые события могут быть обработаны. Таким образом, реактивность это удобный способ синхронизировать данные, например, с интерфейсом, который видит пользователь. Реактивность помогает сосредоточиться на данных, как они связаны между собой, что гораздо ближе к бизнес-логике.
Поток данных можно начать обрабатывать в любой момент времени, и все новые события могут быть обработаны. Таким образом, реактивность это удобный способ синхронизировать данные, например, с интерфейсом, который видит пользователь. Реактивность помогает сосредоточиться на данных, как они связаны между собой, что гораздо ближе к бизнес-логике.

## Типы реактивности

Основная идея реактивности строится на [паттерне «Наблюдатель» (Observer)](/tools/architecture-and-design-patterns/). Это [поведенческий паттерн проектирования](/tools/design-patterns-behaviorial/), который создаёт механизм подписки, позволяющий другим следить и реагировать на события, происходящие в источнике. А вот в какой момент подписчики узнают об обновлениях, зависит от типа реактивности. Она бывает двух типов: *push* и *pull*.

### Push-реактивность

Когда в реактивной системе по методу *push* происходит изменение, она самостоятельно проталкивает (от англ. *push* «толкать») это изменение всем подписчикам. При таком типе реактивности все подписчики будут получать актуальные изменения сразу, как только они произошли.
Когда в реактивной системе по методу *push* происходит изменение, она самостоятельно проталкивает (от англ. *push* «толкать») это изменение всем подписчикам. При таком типе реактивности все подписчики будут получать актуальные изменения сразу, как только они произошли.

Если мы подписываемся на событие (например, [клик](/js/element-click/)), то браузер сразу же уведомит всех подписчиков, когда оно случится.

Expand Down Expand Up @@ -130,7 +130,7 @@ $clicks.subscribe(event => {

### Pull реактивность

Реактивность по методу *pull* работает противоположно *push*-реактивности. Вычисления, вызванные изменением данных в источнике, здесь откладываются до тех пор, пока не будут нужны. При таком типе реактивности подписчики вытянут (от англ. «pull» тянуть) новые данные, только когда обновится вся система.
Реактивность по методу *pull* работает противоположно *push*-реактивности. Вычисления, вызванные изменением данных в источнике, здесь откладываются до тех пор, пока не будут нужны. При таком типе реактивности подписчики вытянут (от англ. «pull» тянуть) новые данные, только когда обновится вся система.

Примером из реальной жизни может быть паттерн pull-to-refresh из мобильных приложений. Например, в Twitter пользователь может потянуть контент с верхнего края немного вниз, а затем отпустить. Такое действие заставит ленту твитов обновиться, и пользователь сможет увидеть актуальные данные. При *push*-подходе лента обновлялась бы каждый раз самостоятельно, как только появляется новый твит.

Expand Down
Loading
Loading