CodeRoll | Frontend
4.57K subscribers
1.68K photos
75 videos
1 file
1K links
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.iss.one/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции


✏️ Используйте функции для удаления дубликатов кода

Одно из первых правил, которые мы изучаем в функциях - это соблюдение правила DRY (don't repeat yourself)

Если вы видите, что функционал повторяется - создайте для него отдельную функцию, которую вы будете вызывать в нужных местах

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Что выведет этот код?
Классная шпаргалка для методов строк
⚡️ Какие типы данных существуют в JavaScript?

Ответ:
- string
- number
- boolean
- bigInt
- symbol
- null
- undefined
- object


Ставь ❤️ если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯1
Наглядный инструмент для тестирования производительности вашего кода на JavaScript

Позволяет указать базовые случаи, отдельные тест-кейсы к ним и увидеть, сколько операций в секунду уйдет на это

➡️ Ссылка на сервис

Coderoll | Frontend | #инструменты
Please open Telegram to view this post
VIEW IN TELEGRAM
Что выведет этот код?
😁1
Что выведет этот код?
👩‍💻👩‍💻 Как выглядит алгоритм гномьей сортировки на JavaScript?

Алгоритм находит первое место, где два соседних элемента стоят в неправильном порядке и меняет их местами



const gnomeSort = (arr: number[]): number[] => {
if (arr.length <= 1) {
return arr
}

let i: number = 1

while (i < arr.length) {
if (arr[i - 1] <= arr[i]) {
i++ //increment index if sub-array[0:i] already sorted
} else {
;[arr[i], arr[i - 1]] = [arr[i - 1], arr[i]] //swapping two numbers
i = Math.max(1, i - 1) //go back to the previous index to check the swapped number
}
}
return arr
}

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Что выведет этот код?
👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции


Избегайте условных конструкций - один из самых странных принципов 🥺

Вы спросите: "Как так? Как я могу писать код без использования условий?"

Сделать это можно, если вы разделите условную конструкцию на отдельные функциональности. И вместо вычисления вы просто будете запускать нужное. Это перекликается и с другими принципами, которые мы уже с вами разбирали. Например то, что функция/метод должны делать что-то одно

Это работает как в комплексных функциях, так и в классах за счет полиморфизма (см. примеры кода)

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Что выведет этот код?
👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции


Функции должны делать что-то одно


❗️ Это самое важное правило в программной инженерии

Когда функции делают больше, чем одно, их сложнее составлять, тестировать и рассуждать о них

Когда вы можете изолировать функцию только для одного действия, ее можно легко рефакторить (переписывать, исправлять), и ваш код будет читаться намного чище

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции


Функции должны иметь только один уровень абстракции

❗️ Проблема: Функция processOrder содержит код как высокого уровня абстракции (логика обработки заказа), так и низкого уровня (расчет суммы и проверка на складе). Это делает функцию сложной для понимания и поддержки

Чистый код: В исправленном примере processOrder остается на одном уровне абстракции и вызывает вспомогательные функции (calculateTotalAmount и checkStockAvailability), которые решают низкоуровневые задачи

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Что выведет этот код?
Что такое “event delegation”?

Делегация событий — это техника, при которой событие обрабатывается на родительском элементе, а не на каждом дочернем. Это позволяет оптимизировать обработку событий.

document.getElementById('parent').addEventListener('click', function(event) { if (
event.target && event.target.matches('button')) { console.log('Button clicked'); } });

Ставь ❤️ если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend
Что выведет этот код?
😁3🤯2