You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/03-code-quality/04-ninja-code/article.md
+36-36Lines changed: 36 additions & 36 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
4
4
```quote author="Конфуцій (Бесіди і судження)"
5
-
Навчання без міркування — даремне, міркування без навчання — небезпечне
5
+
Навчання без міркування — даремне, міркування без навчання — небезпечне.
6
6
```
7
7
8
8
Ніндзя-програмісти минулого використовували ці хитрощі, щоб загострити розум тих, хто буде підтримувати їхній код.
@@ -39,11 +39,11 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
39
39
## Однолітерні змінні
40
40
41
41
```quote author="Лао-цзи (Дао де цзін)"
42
-
Дао безсловесне. Ім’я, яке можна назвати,
43
-
не є постійним ім’ям.
42
+
Дао безсловесне.
43
+
Ім’я, яке можна назвати, не є постійним ім’ям.
44
44
```
45
45
46
-
Ще один спосіб писати стислий код — використовувати однолітерні змінні. Наприклад,`a`, `b` або `c`.
46
+
Ще один спосіб писати стислий код — використовувати однолітерні змінні. Наприклад:`a`, `b` або `c`.
47
47
48
48
Коротка змінна зникає у коді, наче ніндзя у лісі. Ніхто не зможе знайти її використовуючи "пошук" редактора. І навіть якщо її знайдуть, вони не зможуть "розшифрувати" за що саме змінні `a` чи `b` відповідають.
49
49
@@ -67,21 +67,21 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
67
67
## Будьте абстрактними
68
68
69
69
```quote author="Лао-цзи (Дао де цзін)"
70
-
Великий квадрат не має кутів,<br>
71
-
Великий глек довго ліпиться,<br>
72
-
Великий звук не можна почути,<br>
70
+
Великий квадрат не має кутів,
71
+
Великий глек довго ліпиться,
72
+
Великий звук не можна почути,
73
73
Великий образ неозорий.
74
74
```
75
75
76
76
Обираючи ім’я, намагайтесь використовувати найбільш абстрактне слово. Прикладом може бути `obj`, `data`, `value`, `item`, `elem` тощо.
77
77
78
-
-**`data` є ідеальним варіантом для назви змінної.** Використовуйте його всюди, де зможете. І справді, кожна змінна має *дані*, вірно?
78
+
-**`data` є ідеальним варіантом для назви змінної.** Використовуйте його всюди, де можете. І справді, кожна змінна має *дані*, вірно?
79
79
80
-
...Що робити, якщо назва `data` вже зайнята? Спробуйте `value` — вона також універсальна. Врешті-решт, змінна набуває якесь *значення*.
80
+
...А що робити, якщо назва `data` вже зайнята? Спробуйте `value` — вона також універсальна. Врешті-решт, кожна змінна набуває якесь *значення*.
81
81
82
82
-**Добирайте ім’я змінним згідно з їхнім типом: `str`, `num`...**
83
83
84
-
Спробуйте. Той, що щойно став на шлях ніндзя, може засумніватися чи вони дійсно такі корисні. Авжеж!
84
+
Спробуйте. Той, що щойно став на шлях ніндзя, може засумніватися чи дійсно вони такі корисні. Авжеж!
85
85
86
86
Так, ім’я змінної дещо означає. Це допомагає зрозуміти, що ми використовуємо: рядок, число, чи щось ще. Проте коли сторонні люди намагатимуться зрозуміти код, вони будуть здивовані, що інформація про те, що саме містить змінна, відсутня. У результаті вони не зможуть змінити ваш добре обміркований код.
87
87
@@ -99,45 +99,45 @@ i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
99
99
100
100
Змішуйте їх всюди, де це можливо.
101
101
102
-
Швидко прочитати такий код неможливо. А якщо виникла друкарська помилка... Мммм... Це надовго, час випити чаю.
102
+
Швидко прочитати такий код неможливо. А якщо стався хибодрук... Мммм... Це надовго, час випити чаю.
103
103
104
104
105
-
## Хитрі синоніми
105
+
## Хитромудрі синоніми
106
106
107
107
```quote author="Лао-цзи (Дао де цзін)"
108
108
Істина, яка може бути виражена словами, не є правдива істина. Ім’я, яке може бути названо, не є правдиве ім’я.
109
109
```
110
110
111
-
Використання *схожих* імен для *однакових* речей зробить ваше життя цікавішим і покаже рівень вашої креативності публіці.
111
+
Використання *схожих* імен для *однакових* речей зробить життя цікавішим і продемонструє рівень вашої креативності.
112
112
113
-
Наприклад, розглянемо префікси функцій. Якщо функція показує повідомлення на екрані — почніть назву з `display…` (наприклад, `displayMessage`). І коли інша функція показуватиме щось ще на екрані (скажімо, ім’я користувача), почніть її назву з `show…` (наприклад, `showName`).
113
+
Наприклад, розглянемо префікси функцій. Якщо функція виводить повідомлення на екран — почніть назву з `display…`, як то `displayMessage`. А для іншої функції, що показуватиме ще щось на екрані (скажімо, ім’я користувача), оберіть назву з `show…` (наприклад, `showName`).
114
114
115
-
Тобто натякніть, що є деяка тонка різниця між цими функціями, хоча насправді її немає.
115
+
Натякніть, що є деяка тонка відмінність між цими функціями, хоча насправді її немає.
116
116
117
-
Домовтесь зі своїми ніндзя-колегами, що якщо Іван починає називати функції, що показують щось, використовуючи `display...`, тоді Петро може використовувати `render..`, а Ганна — `paint...`. Зауважте, наскільки цікавим та різноманітним став ваш код.
117
+
Домовтесь зі своїми ніндзя-колегами, що якщо Іван починає називати функції, що показують щось, використовуючи `display...`, тоді Петро може використовувати `render..`, а Ганна — `paint...`. Зауважте, наскільки цікавим та різноманітним став код.
118
118
119
119
...А тепер коронний прийом!
120
120
121
-
Для функцій, у яких дійсно є важлива різниця, використовуйте однаковий префікс!
121
+
Для функцій, у яких дійсно є важливі відмінності, використовуйте однаковий префікс!
122
122
123
-
Наприклад, функція `printPage(page)` використовуватиме принтер. А `printText(text)` виводитиме текст на екран. Нехай люди, що неосвічені у вашому коді, здогадуються щодо схожої функції `printMessage`: "Куди буде виведено повідомлення? На принтер чи на екран?". Для збільшення ефекту неочікуваності, функція `printMessage(message)` повинна вивести повідомлення в нове вікно!
123
+
Наприклад, функція `printPage(page)` використовуватиме принтер. А `printText(text)` виводитиме текст на екран. Нехай люди, що неосвічені у вашому коді, розмірковують щодо схожої функції `printMessage`: "Куди буде виведено повідомлення? На принтер чи на екран?". Будьте послідовними, функція `printMessage(message)` повинна вивести повідомлення в нове вікно!
124
124
125
125
## Використовуйте імена повторно
126
126
127
127
```quote author="Лао-цзи (Дао де цзін)"
128
-
При встановленні порядку<br>
129
-
з’явилися імена.<br>
130
-
Оскільки виникли імена,<br>
128
+
При встановленні порядку
129
+
з’явилися імена.
130
+
Оскільки виникли імена,
131
131
потрібно знати межу їх використання.
132
132
```
133
133
134
134
Вводіть нову змінну тільки тоді, коли це вкрай необхідно.
135
135
136
-
Натомість, використовуйте повторно наявні змінні. Просто записуйте у них нові значення.
136
+
Натомість, використовуйте наявні змінні повторно. Просто записуйте у них нові значення.
137
137
138
138
У функції намагайтесь використовувати лише змінні, що були передані у якості параметрів.
139
139
140
-
Це суттєво ускладнить розуміння того, що саме міститься у змінній *зараз*, і звідки воно там. Метою цих дій є розвиток інтуїції та пам’яті людини, котра прочитає цей код. Людина зі слабкою інтуїцією аналізуватиме такий код рядок за рядком і слідкуватиме за змінами у кожному блоці коду.
140
+
Це суттєво ускладнить розуміння того, що саме міститься у змінній *зараз*, і звідки воно там. Метою цих дій є розвиток інтуїції та пам’яті людини, котра читає цей код. Людина зі слабкою інтуїцією аналізуватиме такий код рядок за рядком і слідкуватиме за змінами у кожному блоці коду.
141
141
142
142
**Просунутим варіантом такого підходу є непомітна (!) заміна значення змінної на щось дуже схоже всередині циклу або функції.**
143
143
@@ -153,9 +153,9 @@ function ninjaFunction(elem) {
153
153
}
154
154
```
155
155
156
-
Програміст, в якого буде бажання використати `elem` у другій частині коду, буде здивований... Тільки під час налагодження, після розбору коду він зрозуміє, що працює з клоном!
156
+
Колега-програміст, в якого буде бажання використати `elem` у другій частині коду, буде здивований... Тільки під час налагодження, після розбору коду він зрозуміє, що працює з клоном!
157
157
158
-
Таке трапляється доволі часто. Ефективний прийом, навіть проти досвідчених ніндзя.
158
+
Таке трапляється доволі часто. Вбивчий прийом, навіть проти досвідчених ніндзя.
159
159
160
160
## Підкреслення задля розваги
161
161
@@ -175,7 +175,7 @@ function ninjaFunction(elem) {
175
175
## Перекриття зовнішніх змінних
176
176
177
177
```quote author="Ґуань Їнь-цзи"
178
-
Той, що перебуває на світлі, не може нічого побачити в темряві.<br>
178
+
Той, що перебуває на світлі, не може нічого побачити в темряві.
179
179
Той, що перебуває у темряві, побачить все, що перебуває на світлі.
180
180
```
181
181
@@ -201,40 +201,40 @@ function render() {
201
201
202
202
## Побічні ефекти всюди!
203
203
204
-
Є функції, які начебто нічого не змінюють. Наприклад,`isReady()`, `checkPermission()`, `findTags()`... Припускається, що такі функції виконують обчислення та повертають результат без впливу на те, що міститься за межами функції. Іншими словами, без "побічних ефектів".
204
+
Є функції, які начебто нічого не змінюють. Наприклад:`isReady()`, `checkPermission()`, `findTags()`... Припускається, що такі функції виконують обчислення та повертають результат без впливу на те, що міститься за межами функції. Іншими словами, без "побічних ефектів".
205
205
206
-
**Дійсно, гарним прийомом є додавати "корисну" дію до них, окрім їхньої основної задачі.**
206
+
**Дійсно гарним прийомом є додавати "корисну" дію до них, окрім їхньої основної задачі.**
207
207
208
208
Вираз приголомшеного подиву на обличчі вашого колеги, коли він побачить, що функція з ім’ям `is..`, `check..` чи `find...` щось змінює, неодмінно розширить межі його розуму.
209
209
210
210
**Іншим способом здивувати є повернення нестандартного результату.**
211
211
212
212
Покажіть своє оригінальне мислення! Нехай виклик функції `checkPermission` поверне не `true/false`, а складний об’єкт з результатом перевірки.
213
213
214
-
Розробники, що намагатимуться написати `if (checkPermission(..))`, будуть цікавитись, чому воно не працює. Скажіть їм: "Читайте документацію!". І дайте їм почитати цю статтю.
214
+
Розробники, що намагатимуться написати `if (checkPermission(..))`, будуть дивуватись, чому воно не працює. Скажіть їм: "Читайте документацію!". І дайте їм почитати цю статтю.
215
215
216
216
217
217
## Могутні функції!
218
218
219
219
```quote author="Лао-цзи (Дао де цзін)"
220
-
Вічне Дао пронизує Собою все.<br>
220
+
Вічне Дао пронизує Собою все.
221
221
Воно є і праворуч, і ліворуч.
222
222
```
223
223
224
224
Не треба обмежувати алгоритм функції лише тим, що пов’язано з її ім’ям. Мисліть ширше.
225
225
226
226
Наприклад, функція `validateEmail(email)` може (окрім перевірки адреси електронної пошти на відповідність правилам) показувати повідомлення про помилку та пропонувати ввести нову адресу.
227
227
228
-
Додаткові дії не мусять бути зрозумілими з імені функції. Справжній ніндзярозробник зробить їх також неочевидними і в самому коді.
228
+
Додаткові дії не мусять бути зрозумілими з імені функції. Справжній ніндзя-розробник зробить їх також неочевидними і в самому коді.
229
229
230
230
**Поєднання декількох дій в одну захищає ваш код від повторного використання.**
231
231
232
-
Уявіть собі, що інший розробник захоче тільки перевірити адресу електронної пошти без виводу жодних повідомлень. Ваша функція `validateEmail(email)` робить обидві ці дії, а, значить, не підійде йому. Тому вони не потурбують вас під час медитації питаннями щодо цієї функції.
232
+
Уявіть собі, що інший розробник захоче тільки перевірити адресу електронної пошти без виводу жодних повідомлень. Ваша функція `validateEmail(email)` робить ці обидві дії, тому не підійде йому. Отже, ніхто не потурбує вас під час медитації питаннями щодо цієї функції.
233
233
234
234
## Підсумки
235
235
236
-
Всі "поради", зазначені вище, взяті з реального коду... Який іноді писали навіть досвідчені розробники. Можливо, навіть досвідченіші за вас ;)
236
+
Всі "поради", зазначені вище, взяті з реального коду... Іноді написаного доволі досвідченими розробниками. Можливо, навіть досвідченішими за вас ;)
237
237
238
-
- Дотримуйтесь їх — і ваш код буде мати повно несподіванок.
239
-
- Дотримуйтесь їх усіх, і ваш код буде дійсно вашим — ніхто не захоче його читати, і тим паче — змінювати.
240
-
- Дотримуйтесь їх усіх — і ваш код стане цінним уроком для молодих розробників, які шукають просвітлення.
238
+
- Дотримуйтесь деяких з цих порад — і у вашому коді буде повно несподіванок.
239
+
- Дотримуйтесь більшості з цих порад — і ваш код буде дійсно вашим; ніхто не захоче його читати, тим паче — змінювати.
240
+
- Дотримуйтесь усіх порад — і ваш код стане неоціненним уроком для молодих розробників, які шукають просвітлення.
0 commit comments