Show your code Saturday: код-рев’ю #10

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Коментар редакції. Нещодавно ми оголосили про початок Show your code Saturday — це інтерактивна рубрика, у якій кожен охочий може поділитися власним проєктом, написавши про нього в коментарях. А ми натомість щосуботи обираємо найцікавіший і розповідатимемо детальніше.

Сьогодні ми хочемо поділитися з вами роботою Андрія Блищака.

Наш активний учасник спільноти Максим Рудний зробив код-рев’ю проєкту! Тож далі передаємо слово Максиму 👇

Дисклеймер: я не є автором коду і не знаю причин реалізації будь-якої частини коду таким чином, як це є. Стиль написання коду без ознайомлення з Code Style та Code Convention проєкту не можу критикувати, може це так було задумано.

Сьогодні у нас на ревю щось новеньке — проєкт на Vue 3. Автор Андрій Блищак спробував зробити клон Minesweeper з Windows, щоб попрактикуватись, але пет-проєкт трохи виріс і тепер там чотири гри — сапер, тетріс, 2048 та судоку.

Я ніколи не писав на Vue і навіть не дивився в його сторону. Якщо ви теж не використовували Vue то, гадаю, буде цікаво глянути на цей проєкт з погляду React-розробника.

Генерація проєкту

Vite спростив нам трохи життя, адже він створює проєкти як на React, так і на Vue. Структура проєкту максимально знайома і «онбординг» відбувається швидше.

Оскільки структура знайома то і проблеми тут теж знайомі. В нас не налаштовані інструменти автоматичного забезпечення якості коду — ESlint та Pritter. Файли конфігурації були згенеровані, але дальше цього автор не пішов. В package.json не додана жодна команда для запуску цих інструментів.

Попри відсутність цих інструментів, код виглядає чистим, нема до чого придертись.

Юніт-тестів тут теж нема, що не дуже личить Senior-розробнику.

По коду

Автор закомітив .vscode папочку, при тому що сам же додав її в .gitignore. Там лежать налаштування IDE конкретного розробника і вони будуть відрізнятися в різних програмістів. В мене взагалі .idea і там свої файли лежать. Ці папки завжди ігноруються в Git.

Місцями видно шматки коду скопійовані з іншого проєкту, причому не з JavaScript. Нотація для змінних не CamelCase, а snake_case. В JS ми все таки пишемо в одній єдиній нотації.

export function unique(allowed: number[], index: number, value: number) {
 let { row, col } = indexToRowAndColumn(index);
 let r1 = 3 * ((row / 3) | 0);
 let c1 = 3 * ((col / 3) | 0);
 let ir = 9 * row;
 let ic = col;
 let uniq_row = true;
 let uniq_col = true;
 let uniq_3x3 = true;
 for (let r = r1; r < r1 + 3; ++r) {
   for (let c = c1; c < c1 + 3; ++c, ++ir, ic += 9) {
     if (uniq_3x3) {
       let i = rowAndColumnToIndex(r, c);
       if (i != index && allowed[i] & value) uniq_3x3 = false;
     }
     if (uniq_row) {
       if (ir != index && allowed[ir] & value) uniq_row = false;
     }
     if (uniq_col) {
       if (ic != index && allowed[ic] & value) uniq_col = false;
     }
     if (!(uniq_3x3 || uniq_row || uniq_col)) return false;
   }
 }
 return uniq_row || uniq_col || uniq_3x3;
}

Також місцями в коді ще є var для оголошення змінної. Схоже що якась частина коду була скопійована і не оновлена.

Робота зі стилями

Що цікаво, у Vue уже з коробки є функція що спрощує побудову класів стилів. У React нам потрібно використовувати бібліотеки classnames або clsx. Тут же ми просто беремо метод computed і отримуємо той же результат (сподіваюсь).

const cellClasses = computed(() => ({
 [styles.cell]: true,
 [styles.opened]: !props.fieldCell.isHidden,
 [styles.mine]: props.fieldCell.isPlanted,
 [styles.flag]: props.fieldCell.label === FieldCellLabel.Flag,
 [styles.question]: props.fieldCell.label === FieldCellLabel.Question,
 [styles.highlight]: props.fieldCell.isHighlighted,
 [styles.hidden]: hidden.value,
}));

Ще більше цікавого у моєму огляді на YouTube. Також підписуйтесь на телеграм, де я ділюсь корисною інформацією для Front-end розробників.