Merge pull request #356 from xcurveballx/mutations-minor

правки по mutation observer

Author: iliakan

2-ui/99-ui-misc/01-mutation-observer/article.md

@@ -26,26 +26,26 @@ observer.observe(node, config);
 - `subtree` -- во всех потомках `node`,
 - `attributes` -- атрибуты `node`,
 - `attributeOldValue` -- записать старое значение атрибута  (выводит `attributes`),
-- `characterData` -- наблюдать ли за `node.data` (содержимое текста),
+- `characterData` -- наблюдать ли за `node.data` (текстовое содержимое),
 - `characterDataOldValue` -- записать старое значение `node.data` (выводит `characterData`),
 - `attributeFilter` -- массив имён атрибутов, чтобы наблюдать только за выбранными.
 
-Затем, после изменений, выполняется  `callback`  со списком объектов [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) в качестве первого аргумента, а сам наблюдатель вторым аргументом.
+Затем, после изменений, выполняется  `callback` со списком объектов [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) в качестве первого аргумента, а сам наблюдатель идёт вторым аргументом.
 
-Объекты [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord)имеют следующие свойства:
+Объекты [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) имеют следующие свойства:
 
 - `type` -- тип изменения, один из
    - `"attributes"` изменён атрибут
    - `"characterData"` изменены данные `elem.data`, это для текстовых узлов
    - `"childList"` добавлены/удаленые дочерние элементы,
-- `target` -- где произошло изменение: элемент для "attributes", текстовый узел для "characterData", или элемент для "childList" изменения,
+- `target` -- где произошло изменение: элемент для "attributes", текстовый узел для "characterData" или элемент для "childList",
 - `addedNodes/removedNodes`  -- добавленные/удалённые узлы,
 - `previousSibling/nextSibling` -- предыдущий или следующий одноуровневый элемент для добавленных/удалённых элементов,
 - `attributeName/attributeNamespace` -- имя/пространство имён (для XML) изменённого атрибута,
 - `oldValue` -- предыдущее значение, только для изменений атрибута или текста.
 
 
-Возьмём `<div>` с атрибутом `contentEditable`. Этот атрибут позволяет нам сфокусироваться на нём, например, кликнув, и редактировать.
+Возьмём `<div>` с атрибутом `contentEditable`. Этот атрибут позволяет нам сфокусироваться на элементе, например, кликнув, и отредактировать содержимое.
 
 ```html run
 <div contentEditable id="elem">Отредактируй <b>меня</b>, пожалуйста</div>
@@ -96,7 +96,7 @@ mutationRecords = [{
 
 ## Пример использования наблюдателя
 
-Когда необходим `MutationObserver` ? Существуют ли случаи когда он может быть полезен?
+Когда необходим `MutationObserver`? Существуют ли случаи, когда он может быть полезен?
 
 Мы можем отслеживать что-то вроде `contentEditable` и реализовать "undo/redo" с его помощью (записывать изменения с возможностью отмены). Но бывают и ситуации, когда `MutationObserver` хорошо подходит с архитектурной точки зрения.
 
@@ -112,7 +112,7 @@ mutationRecords = [{
 ...
 ```
 
-Также на нашем сайте мы будем использовать JavaScript-библиотеку для подсветки синтаксиса, например [Prism.js](https://prismjs.com/). Вызов метода  `Prism.highlightElem(pre)` ищет такие элементы `pre` и добавляет в них стили и теги, которые в итоге дают цветную подсветку синтаксиса, подобно той, которую вы видите в примерах здесь, на этой странице.
+Также на нашем сайте мы будем использовать JavaScript-библиотеку для подсветки синтаксиса, например [Prism.js](https://prismjs.com/). Вызов метода `Prism.highlightElem(pre)` ищет такие элементы `pre` и добавляет в них стили и теги, которые в итоге дают цветную подсветку синтаксиса, подобно той, которую вы видите в примерах здесь, на этой странице.
 
 Когда нам вызвать этот метод? Можно по событию `DOMContentLoaded` или просто внизу страницы написать код, который будет искать все `pre[class*="language"]` и вызывать `Prism.highlightElem` для них:
 
@@ -128,23 +128,23 @@ document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem)
 let hello = "world";
 ```
 
-Пока всё просто, правда? В HTML есть фрагменты кода в `<pre>`, - для них мы включаем подсветку синтаксиса.
+Пока всё просто, правда? В HTML есть фрагменты кода в `<pre>`, и для них мы включаем подсветку синтаксиса.
 
-Идём дальше. Представим, что мы собираемся динамически подгружать материалы с сервера. Позже в учебнике мы выучим для этого [способы](info:fetch-basics). На данный момент имеет значение только то, что мы получаем HTML статьи с веб-сервера и показываем её по запросу:
+Идём дальше. Представим, что мы собираемся динамически подгружать материалы с сервера. Позже в учебнике мы выучим для этого [способы](info:fetch-basics). На данный момент имеет значение только то, что мы получаем HTML-статью с веб-сервера и показываем её по запросу:
 
 ```js
-let article = /* получить новое содержание с сервера */
+let article = /* получить новый контент с сервера */
 articleElem.innerHTML = article;
 ```
 
-HTML подгружённой статьи `article` может содержать примеры кода. Нам нужно вызвать  `Prism.highlightElem` для них, чтобы подсветить синтаксис.
+HTML подгруженной статьи `article` может содержать примеры кода. Нам нужно вызвать `Prism.highlightElem` для них, чтобы подсветить синтаксис.
 
 **Кто и когда должен вызывать `Prism.highlightElem` для динамически загруженной статьи?**
 
 Мы можем добавить этот вызов к коду, который загружает статью, например, так:
 
 ```js
-let article = /* получить новое содержание с сервера */
+let article = /* получить новый контент с сервера */
 articleElem.innerHTML = article;
 
 *!*
@@ -153,21 +153,21 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...Но представьте, что у нас есть много мест в коде, где мы загружаем что-либо: статьи, опросы, посты форумов. Нужно ли нам в каждый такой вызов добавлять `Prism.highlightElem`? Это не очень удобно, и легко забыть.
+...Но представьте, что у нас есть много мест в коде, где мы загружаем что-либо: статьи, опросы, посты форума. Нужно ли нам в каждый такой вызов добавлять `Prism.highlightElem`? Получится не очень удобно, а также можно легко забыть сделать это.
 
 А что, если содержимое загружается вообще сторонним кодом? Например, у нас есть форум, написанный другим человеком, загружающий содержимое динамически, и нам захотелось добавить к нему выделение синтаксиса. Никто не любит править чужие скрипты.
 
 К счастью, есть другой вариант.
 
 Мы можем использовать `MutationObserver`, чтобы автоматически определять примеры кода, вставленные в страницу, и выделять их.
 
-Так что весь функционал для подсветки синтаксиса будет в одном месте, мы будем избавлены от необходимости интегрировать его.
+Так что весь функционал для подсветки синтаксиса будет в одном месте, а мы будем избавлены от необходимости интегрировать его.
 
 ## Пример динамической подсветки синтаксиса
 
 Вот работающий пример.
 
-Если вы запустите этот код, он начнёт наблюдать за элементом ниже, подсвечивая код любого примера кода, который появляется там:
+Если вы запустите этот код, он начнёт наблюдать за элементом ниже, подсвечивая код любого примера, который появляется там:
 
 ```js run
 let observer = new MutationObserver(mutations => {
@@ -176,7 +176,7 @@ let observer = new MutationObserver(mutations => {
     // проверка новых узлов
 
     for(let node of mutation.addedNodes) {
-      // мы будем отслеживать только узлы-элементы, другие (текстовые) пропустить
+      // мы будем отслеживать только узлы-элементы, другие (текстовые) пропускаем
       if (!(node instanceof HTMLElement)) continue;
 
       // проверить, не является ли вставленный элемент примером кода
@@ -215,37 +215,37 @@ demoElem.innerHTML = `Фрагмент кода ниже:
 `;
 ```
 
-Теперь у нас есть `MutationObserver`, который может отслеживать все выделения в наблюдаемых элементах или во всём документе. Мы можем добавлять/удалять фрагменты кода в HTML, не задумываясь об их подсветке.
+Теперь у нас есть `MutationObserver`, который может отслеживать вставку кода в наблюдаемых элементах или во всём документе. Мы можем добавлять/удалять фрагменты кода в HTML, не задумываясь об их подсветке.
 
 ## Дополнительные методы
 
-Есть метод для остановки наблюдения за узлами:
+Есть метод для остановки наблюдения за узлом:
 
 - `observer.disconnect()` -- останавливает наблюдение.
 
-К тому же:
+Кроме того:
 
 - `mutationRecords = observer.takeRecords()` -- получает список необработанных записей изменений, которые произошли, но колбэк для них ещё не выполнился.
 
 ```js
-// мы отключаем наблюдатель 
-// он возможно не успел обработать некоторые изменения
+// мы отключаем наблюдатель
+// он, возможно, не успел обработать некоторые изменения
 let mutationRecords = observer.takeRecords();
 // обработать mutationRecords
 
 // теперь всё выполнилось, отключить
 observer.disconnect();
 ```
 
-## Сбор мусора
+## Сборка мусора
 
-Объекты `MutationObserver` используют внутри себя так называемые "слабые ссылки" на узлы, за которыми смотрят. Так что если узел удалён из DOM и больше недостижим, то он будет удалён из памяти, не смотря на наличие наблюдателя.
+Объекты `MutationObserver` используют внутри себя так называемые ["слабые ссылки"](https://ru.wikipedia.org/wiki/%D0%A1%D0%BB%D0%B0%D0%B1%D0%B0%D1%8F_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0) на узлы, за которыми смотрят. Так что если узел удалён из DOM и больше недостижим, то он будет удалён из памяти вне зависимости от наличия наблюдателя.
 
 
 ## Итого
 
-`MutationObserver` может реагировать на изменения в DOM: атрибуты, добавленные/удалённые элементы, содержание текста.
+`MutationObserver` может реагировать на изменения в DOM: атрибуты, добавленные/удалённые элементы, текстовое содержимое.
 
-Мы можем использовать его, чтобы отслеживать изменения, внедрённые другими частями нашего собственного или чужого кода.
+Мы можем использовать его, чтобы отслеживать изменения, производимые другими частями нашего собственного или чужого кода.
 
-Например, чтобы осуществить последующую обработку динамически вставленного  содержимого, такого как  пример `innerHTML`, выделенного на примере выше.
+Например, чтобы осуществить обработку (подсветку кода) динамически вставленного содержимого, как в демо выше с `innerHTML`.