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

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

Чат: https://t.me/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
Что выведет этот код?
Твои пароли — слиты, а номер телефона гуляет по базам мошенников 

Это статистика: более 45 млн россиян оказались в слитых базах. Государство, компании, мошенники — все эти базы используют в своих интересах.

Но от этого есть одна таблетка — канал «Only Hack». Российский хакер, консультирующий безопасников Сбера и Т-Банка, рассказывает как:

удалить себя из всех слитых баз (5 минут по инструкции);
легально обходить блокировки и «глушилки»;
соблюдать цифровую гигиену в век тотального контроля, cookie-файлов и алгоритмов.

Крайне полезная подписка в сегодняшних реалиях: @OnlyHack
Что такое “event delegation”?

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

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

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

Coderoll | Frontend