Ниндзя код

Author: xcurveballx

1-js/03-code-quality/04-ninja-code/article.md

@@ -18,6 +18,69 @@
 Многие пытались пойти по пути ниндзя. Мало тех, кто преуспел.
 ```
 
+## Соглашения – по настроению
+
+```quote author="Сериал Симпсоны, серия Helter Shelter"
+Рабочий-чистильщик осматривает дом:
+"…Вот только жук у вас необычный…
+И чтобы с ним справиться, я должен жить как жук, стать жуком, думать как жук."
+(грызёт стол Симпсонов)
+```
+
+Чтобы помешать другому программисту исправить ваш код, вы должны понять путь его мыслей.
+
+Представьте, перед ним – ваш большой скрипт. И ему нужно поправить его. У него нет ни времени ни желания, чтобы читать его целиком, а тем более – досконально разбирать. Он хотел бы по-быстрому найти нужное место, сделать изменение и убраться восвояси без появления побочных эффектов.
+
+Он рассматривает ваш код как бы через трубочку из туалетной бумаги. Это не даёт ему общей картины, он ищет тот небольшой фрагмент, который ему необходимо изменить. По крайней мере, он надеется, что этот фрагмент будет небольшим.
+
+**На что он попытается опереться в этом поиске – так это на соглашения, принятые в программировании, об именах переменных, названиях функций и методов…**
+
+Как затруднить задачу? Можно везде нарушать соглашения – это помешает ему, но такое могут заметить, и код будет переписан. Как поступил бы ниндзя на вашем месте?
+
+**…Правильно! Следуйте соглашениям "в общем", но иногда – нарушайте их.**
+
+Тщательно разбросанные по коду нарушения соглашений с одной стороны не делают код явно плохим при первом взгляде, а с другой – имеют в точности тот же, и даже лучший эффект, чем явное неследование им!
+
+## Пример из jQuery
+
+```warn header="jQuery / DOM" 
+Этот пример требует знаний jQuery/DOM, если пока их у вас нет – пропустите его, ничего страшного, но обязательно вернитесь к нему позже. Подобное стоит многих часов отладки.
+```
+
+Во фреймворке jQuery есть метод [wrap](http://api.jquery.com/wrap/), который обёртывает один элемент вокруг другого:
+
+```js
+var img = $('<img/>'); // создали новые элементы (jQuery-синтаксис)
+var div = $('<div/>'); // и поместили в переменную
+
+img.wrap(div); // обернуть img в div
+div.append('<span/>');
+```
+
+Результат кода после операции `wrap` – два элемента, один вложен в другой:
+
+```html
+<div>
+  <img/>
+</div>
+```
+
+А что же после `append`?
+
+Можно предположить, что `<span/>` добавится в конец `div`, сразу после `img`… Но ничего подобного!
+
+Искусный ниндзя уже нанёс свой удар и поведение кода стало неправильным, хотя разработчик об этом даже не подозревает.
+
+Как правило, методы jQuery работают с теми элементами, которые им переданы. Но не здесь!
+
+Внутри вызова `img.wrap(div)` происходит клонирование `div` и вокруг `img` оборачивается не сам `div`, а его клон. При этом исходная переменная `div` не меняется, в ней как был пустой `div`, так и остался.
+
+В итоге, после вызова получается два независимых `div'а`: первый содержит `img` (этот неявный клон никуда не присвоен), а второй – наш `span`.
+
+Объяснения не очень понятны? Написано что-то странное? Это просто разум, привыкший, что соглашения уважаются, не допускает мысли, что вызов `wrap` – неявно клонирует элемент. Ведь другие jQuery-методы, кроме `clone` этого не делают.
+
+Как говорил [Учитель](https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D1%84%D1%83%D1%86%D0%B8%D0%B9): "В древности люди учились для того, чтобы совершенствовать себя. Нынче учатся для того, чтобы удивить других".
+
 ## Краткость – сестра таланта!
 
 Пишите "как короче", а не как понятнее. "Меньше букв" – уважительная причина для нарушения любых соглашений. Ваш верный помощник – возможности языка, использованные неочевидным образом.
@@ -49,6 +112,16 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
 
 В этом случае заметить, что переменная – счетчик цикла, без пролистывания вверх, невозможно.
 
+## Русские слова и сокращения
+
+Если вам *приходится* использовать длинные, понятные имена переменных – что поделать… Но и здесь есть простор для творчества!
+
+**Назовите переменные "калькой" с русского языка или как-то "улучшите" английское слово.**
+
+В одном месте напишите `var ssilka`, в другом `var ssylka`, в третьем `var link`, в четвёртом – `var lnk`… Это действительно великолепно работает и очень креативно!
+
+Количество ошибок при поддержке такого кода увеличивается во много раз.
+
 ## Будьте абстрактны при выборе имени.
 
 ```quote author="Лао-цзы"
@@ -112,6 +185,16 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
 
 А теперь, пусть читающий код думает: "Куда же выводит сообщение printMessage?". Особый шик – добавить элемент неожиданности. Пусть `printMessage` выводит не туда, куда все, а в новое окно!
 
+## Словарь терминов – это еда!
+
+Ни в коем случае не поддавайтесь требованиям написать словарь терминов для проекта. Если же он уже есть – не следуйте ему, а лучше проглотите и скажите, что так и былО!
+
+Пусть читающий ваш код программист напрасно ищет различия в `helloUser` и `welcomeVisitor` и пытается понять, когда что использовать. Вы-то знаете, что на самом деле различий нет, но искать их можно о-очень долго.
+
+**Для обозначения посетителя в одном месте используйте `user`, а в другом `visitor`, в третьем – просто `u`. Выбирайте одно имя или другое, в зависимости от функции и настроения.**
+
+Это воплотит сразу два ключевых принципа ниндзя-дизайна – *сокрытие информации и подмена понятий*!
+
 ## Повторно используйте имена
 
 ```quote author="Лао-цзы"
@@ -221,13 +304,3 @@ function render() {
 - Следуйте нескольким из них – и ваш код станет полон сюрпризов.
 - Следуйте многим – и ваш код станет истинно вашим, никто не захочет изменять его.
 - Следуйте всем – и ваш код станет ценным уроком для молодых разработчиков, ищущих просветления.
-
-https://learn.javascript.ru/write-unmain-code
-добавить
-Соглашения – по настроению
-Русские слова и сокращения
-Словарь терминов – это еда!
-
-поменялись ряд цитат
-не все цитаты переведены точно
-нет примера jquery