- Notifications
You must be signed in to change notification settings - Fork179
Comments#60
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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Comments#60
Changes fromall commits
7da2050
2af7451
4737f15
0e115ee
94ed238
519fe02
8ef3e3a
49c4109
0f5d422
379d44a
6630148
bcdc3d1
68ca202
e731e5a
File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,38 @@ | ||
#Коментарі | ||
Як нам відомо з розділу<info:structure>,коментарі можна писати як на одному рядку: починаючи його з`//`так і на декількох рядках, розділяючи їх за допомогою `/* ... */`. | ||
Зазвичай ми використовуємо коментарі для опису того, як і чому наш код працює. | ||
На перший погляд, коментування може здаватись очевидним, проте початківці часто використовують їх неправильно. | ||
##Погані коментарі | ||
Початківці намагаються використовувати коментарі, щоб пояснити "що саме відбувається у коді".Наприклад: | ||
```js | ||
//Цей код зробить це(...)а потім ось це (...) | ||
// ...і хто знає що ще... | ||
дуже; | ||
складний; | ||
код; | ||
``` | ||
Проте в якісному коді, кількість таких "пояснювальних" коментарів повинна бути мінімальною. Серйозно, код повинен бути зрозумілим без них. | ||
Є хороше правило з приводу цього: "якщо код настільки не зрозумілий, що потребує коментарів, можливо його краще переписати". | ||
###Рецепт: виносьте код у функції | ||
Іноді має сенс замінити частину коду на функцію, наприклад: | ||
```js | ||
function showPrimes(n) { | ||
nextPrime: | ||
for (let i = 2; i < n; i++) { | ||
*!* | ||
//перевірка чи є `i` простим числом | ||
for (let j = 2; j < i; j++) { | ||
if (i % j == 0) continue nextPrime; | ||
} | ||
@@ -43,7 +43,7 @@ function showPrimes(n) { | ||
} | ||
``` | ||
Кращим варінтом було б помістити код в окрему функцію `isPrime`: | ||
```js | ||
@@ -52,7 +52,7 @@ function showPrimes(n) { | ||
for (let i = 2; i < n; i++) { | ||
*!*if (!isPrime(i)) continue;*/!* | ||
alert(i); | ||
} | ||
} | ||
@@ -65,21 +65,21 @@ function isPrime(n) { | ||
} | ||
``` | ||
Тепер ми можемо легко зрозуміти код. Сама функція замінила нам коментар. Такий код називається *самоописним*. | ||
###Рецепт: створюйте функції | ||
І якщо ми маємо такий довгий фрагмент коду: | ||
```js | ||
//тут ми додаємо віскі | ||
for(let i = 0; i < 10; i++) { | ||
let drop = getWhiskey(); | ||
smell(drop); | ||
add(drop, glass); | ||
} | ||
//тут ми додаємо сік | ||
for(let t = 0; t < 3; t++) { | ||
let tomato = getTomato(); | ||
examine(tomato); | ||
@@ -90,7 +90,7 @@ for(let t = 0; t < 3; t++) { | ||
// ... | ||
``` | ||
Тоді кращим варінтом буде замінити його на окремі функції: | ||
```js | ||
addWhiskey(glass); | ||
@@ -111,70 +111,71 @@ function addJuice(container) { | ||
} | ||
``` | ||
Знову ж таки, ім'я функцій самі описують, що в них відбувається. Немає потреби коментувати такий код. Також кращою є структура коду, коли він розподілений. Стає зрозумілим, що функція робить, що вона приймає і що повертає. | ||
Насправді, ми не можемо уникнути повністю "пояснювальних" коментарів. Є складні алгоритми. Також існують деякі "прийоми" для оптимізації. Проте, як правило, ми повинні намагатись залишати код простим та самоописним. | ||
##Хороші коментарі | ||
Тож, пояснювальні коментарі зазвичай погані. Які ж тоді хороші? | ||
Описуйте архітектуру | ||
:Додавайте опис компонентів висого рівня, як вони взаємодіють, який потік управління мають у різних обставинах...Якщо коротко - огляд коду з висоту пташиного польоту. Є спеціальна мова[UML](https://uk.wikipedia.org/wiki/Unified_Modeling_Language)для побудови діаграм високорівневої архітектури коду. Її однозначно варто вчити. | ||
Документуйте параметри функції та її використання | ||
:Існує спеціальний синтаксис[JSDoc](https://uk.wikipedia.org/wiki/JSDoc)для документації функції: її використання, параметри, значення, що повертає. | ||
Наприклад: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Remove extra space. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Created separate PRjavascript-tutorial/en.javascript.info#1780 for this in English version | ||
```js | ||
/** | ||
* повертає x у n-й степені. | ||
* | ||
* @param {number} x число, що треба піднести до степеня. | ||
* @param {number} n cтепінь, повинно бути натуральним числом. | ||
* @return {number} x піднесене у n-нну степінь. | ||
*/ | ||
function pow(x, n) { | ||
... | ||
} | ||
``` | ||
Такі коментарі дозволяють нам зрозуміти мету функції та використовувати її правильно без потреби зазирати у її код. | ||
До речі, багато редакторів, наприклад[WebStorm](https://www.jetbrains.com/webstorm/)можуть їх розуміти та використовувати для автодоповнення і деякої автоматичної перевірки коду. | ||
Також є інструменти, наприклад[JSDoc 3](https://github.com/jsdoc3/jsdoc), які можуть генерувати HTML-документацію з коментарів. Ви можете почитати більше проJSDocтут: <http://usejsdoc.org/>. | ||
Чому завдання було вирішено у такий спосіб? | ||
:Те, що написано є дуже важливим. Проте, те, що *не* написано може бути ще більш важливим, щоб зрозуміти, що саме відбувається. Чому завдання було вирішено саме у такий спосіб? Код не дає відповідь на це питання. | ||
Якщо існує декілька способів вирішення завдання, чому саме цей? Особливо, якщо цей спосіб не самий очевидний. | ||
Без таких коментарів можлива наступна ситуація: | ||
1.Ви (або ваш колега) відкриває код, написаний колись раніше, і бачить, що він "неоптимальний". | ||
2.Ви думаєте: "Який я був недосвідчений, і наскільки розумнішим я став зараз",і переписуєте код використовуючи "більш очевидний і правильний" варіант. | ||
3. ...Бажання переписати код було хорошим. Але в процесі ви помічаєте, що "більш очевидне" рішення не є оптимальним. Ви навіть смутно пригадуєте чому воно так, тому що колись давно вже намаглись спробувати такий варіант. Ви вертаєте правильне рішення, проте час було витрачено даремно. | ||
Коментарі, які пояснюють рішення є дуже важливими. Вони допомагають продовжувати розробку правильним шляхом. | ||
Чи є якісь тонкощі у коді? Де вони використовуються? | ||
:Якщо код має якісь тонкощі та неочевидні речі, його точно варто коментувати. | ||
##Підсумки | ||
Коментарі є важливою ознакою хорошого розробника: як їх наявність, так і їх відсутність. | ||
Хороші коментарі полегшують нам підтримку коду, вертатись до нього через деякий час та використовувати його більш ефективно. | ||
**Коментуйте наступне:** | ||
-Загальну архітектуру, опис "високого рівня". | ||
-Використання функцій. | ||
-Важливі рішення, особливо, якщо вони не є очевидним. | ||
**Уникайте коментарі:** | ||
-Які описують, як код працює і що він робить. | ||
-Пишіть їх тільки у тому випадку, коли не має змоги написати простий та самоописний код, якому пояснення не потрібні. | ||
Коментарі також використовуються інструментами для автоматичної генерації документації, наприкладJSDoc3 - вони читають їх та генеруютьHTML-документи (або документи у іншому форматі). |