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

Функции


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

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

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

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

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
Как работают дебаунсинг и троттлинг?

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


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

Coderoll | Frontend
Что выведет этот код?
Какие способы клонирования объектов существуют в JavaScript?

Ответ:
Клонирование объектов можно сделать несколькими способами:
Использование Object.assign()
Использование оператора spread (...)
Использование JSON.parse() и JSON.stringify() (для глубокого клонирования, но с ограничениями).


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

Coderoll | Frontend
2
👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции


Создавайте отдельные объекты, а не модифицируйте их напрямую

⚠️ Так же это одно из правил иммутабельности, которое важно соблюдать при работе с продвинутыми инструментами

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

Сейчас это можно делать за счет object spread operator (...obj) или по старинке через Object.assign()

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Что выведет этот код?
Что должен знать современный Middle Frontend

Вы и сами знаете, как тяжело обстоят дела с трудоустройством в 2025 году. Откликов на джунов больше, чем вакансий, и даже опытные вроде бы мидлы долго ищут работу.

Автор видео разобрал подробно, что нужно знать современному мидлу, чтобы соответствовать запросам рынка


👉 Смотреть видео

Coderoll | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1😁1
Изоляция рунета ближе, чем ты думаешь

Loading

██████████████] 99%


Роскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее.

Чтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack.

Тут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса.

Не жди момента «Х». Перестрахуйся подпиской.
Что выведет этот код?
This media is not supported in your browser
VIEW IN TELEGRAM
🤬Обход цензуры в gpt, deepseek, gmini, sora - Читать гайд

🎁Флирт бот, влюбит в тебя любую только он - Узнать название

💪Помогает накачаться знает ВСЕ о питании - Узнать название

🎁Решает домашку, по фотке твоего задания - Узнать название

💸Генерир‌‎ует идеи для заработка, без бюджета - Узнать название

📉Мониторит сайт и уведомляет о падении цены - Узнать название

📹Делает тиктоки на сотни тысяч просмотров - Узнать название
Please open Telegram to view this post
VIEW IN TELEGRAM
Что такое Spread оператор (...)?

Ответ:
Spread оператор позволяет расширять или разворачивать итерируемые объекты (например, массивы или строки) в местах, где ожидается ноль или более аргументов (для функций) или элементов (для массивов).

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

Coderoll | Frontend