Frontend Гид

Принципы SOLID - это набор принципов объектно-ориентированного программирования, которые помогают разработчикам создавать более гибкие, масштабируемые и поддерживаемые приложения. Пять основных принципов SOLID включают в себя: 1. Принцип единственной ответственности (Single Responsibility Principle): класс должен иметь только одну причину для изменения. 2. Принцип открытости/закрытости (Open/Closed Principle): классы должны быть открыты для расширения, но закрыты для модификации. 3. Принцип подстановки Барбары Лисков (Liskov Substitution Principle): объекты должны быть заменяемыми своими подклассами без изменения свойств программы. 4. Принцип разделения интерфейса (Interface Segregation Principle): клиенты не должны зависеть от интерфейсов, которые они не используют. 5. Принцип инверсии зависимостей (Dependency Inversion Principle): модули верхнего уровня не должны зависеть от модулей нижнего уровня. Оба типа модулей должны зависеть от абстракций. Пример применения принципов SOLID на JavaScript можно привести на основе следующего кода:

// Пример класса, нарушающего принцип единственной ответственности
class UserService {
  constructor() {
    this.db = new Database();
    this.emailService = new EmailService();
  }

  registerUser(user) {
    this.db.save(user);
    this.emailService.sendEmail(user.email, "Welcome to our app!");
  }

  deleteUser(user) {
    this.db.delete(user);
    this.emailService.sendEmail(user.email, "We are sorry to see you go!");
  }
}

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

Picture copied.png
class UserDatabase {
  constructor() {
    this.db = new Database();
  }

  save(user) {
    this.db.save(user);
  }

  delete(user) {
    this.db.delete(user);
  }
}

class UserEmailService {
  constructor() {
    this.emailService = new EmailService();
  }

  sendWelcomeEmail(email) {
    this.emailService.sendEmail(email, "Welcome to our app!");
  }

  sendGoodbyeEmail(email) {
    this.emailService.sendEmail(email, "We are sorry to see you go!");
  }
}

// Использование новых классов
class UserService {
  constructor() {
    this.db = new UserDatabase();
    this.emailService = new UserEmailService();
  }

  registerUser(user) {
    this.db.save(user);
    this.emailService.sendWelcomeEmail(user.email);
  }

  deleteUser(user) {
    this.db.delete(user);
    this.emailService.sendGoodbyeEmail(user.email);
  }
}

Теперь класс UserService отвечает только за работу с пользователями, в то время как классы UserDatabase и UserEmailService отвечают за работу с базой данных и отправку электронной почты соответственно. Это позволяет легче поддерживать и расширять код, соблюдая принцип единственной ответственности @frontendG1d #javascript #код #разработка

Абстракция данных в JavaScript относится к процессу скрытия деталей реализации данных и предоставлению интерфейса для работы с этими данными. Это позволяет разработчикам использовать данные без необходимости знать, как они хранятся и обрабатываются внутри. В JavaScript абстракция данных обычно реализуется с использованием объектов и функций. Например, вы можете создать объект для представления пользователя со свойствами, такими как имя, возраст, email и методами для работы с этими данными, такими как изменение имени или отправка сообщения. Пример простой абстракции данных в JavaScript:

// Создаем абстракцию данных для пользователя
function User(name, age, email) {
  this.name = name;
  this.age = age;
  this.email = email;
  
  // Метод для изменения имени пользователя
  this.changeName = function(newName) {
    this.name = newName;
  };
  
  // Метод для отправки email пользователю
  this.sendEmail = function(message) {
    console.log(`Sending email to ${this.email}: ${message}`);
  };
}

// Создаем нового пользователя
let user1 = new User("Алиса", 18, "[email protected]");

// Изменяем имя пользователя
user1.changeName("Вовчик");

// Отправляем пользователю email
user1.sendEmail("Привет, Вовчик! Добро пожаловать на наш сайт.");

При использовании абстракции данных разработчики могут взаимодействовать с объектами данных с помощью понятного интерфейса методов, скрывая при этом сложность реализации работы с этими данными. Это помогает упростить код, делает его более понятным и удобным для разработчиков @frontendG1d #javascript #код #разработка

Папищеки, в последнее время я засиживаю и решаю задачки на codewars, решил вам сюда закинуть задачку в сложностью в 5 kyu Напишите функцию, которая при вводе URL-адреса в виде строки анализирует только доменное имя и возвращает его в виде строки. Например:

url = "http://github.com/carbonfive" -> domain name = "github"
url = "http://www.zombie-bites.com"         -> domain name = "zombie-bites"
url = "https://www.cnet.com"                -> domain name = cnet"

P.S Своё решение закину в комменты, но попробуйте сами. Для 5 kyu слишком просто как по мне @frontendG1d #javascript #задача

Таймер На работе была задачка - создать таймер с отсчётом к мероприятию. Решил преподнести код своим папищекам, чтобы если чо брали, а кто-то так вообще изучил. Забираем:

let endDate = new Date("2024-04-26T12:00:00"); // Здесь нужно добавить конечную дату в таком же формате
const timer = document.querySelector('.timer__container'); 
const timerHours = timer.querySelector('.timer__hours');
const timerMinutes = timer.querySelector('.timer__minutes');
const timerSeconds = timer.querySelector('.timer__seconds');

function addZero(num) {
    if (num < 10) {
        return '0' + num;
    } else return num;
}

function countdownTimer(endDate, display, hrs, min, sec, callback, url) {
    let intervalId = setInterval(function () {
        let now = new Date().getTime();
        let distance = endDate - now;

        if (distance < 0) {
            clearInterval(intervalId);
            window.location.href = url;
            return;
        }

        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);

        hrs.textContent = callback(hours);
        min.textContent = callback(minutes);
        sec.textContent = callback(seconds);

    }, 1000);
}

countdownTimer(endDate, timer, timerHours, timerMinutes, timerSeconds, addZero, 'url страницы');

Когда таймер доходит до нуля - нас переносит на указанную страницу P.S Ваще можно вам найти готовое решение на гитхаб, но мне для вас не жалко, поэтому чекаем @frontendG1d #javascript #код

Тяжело... @frontendG1d #мемы

И снова РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ, но на этот раз обсудим что в них есть, мои папищеки 😑 А конкретнее мы обсудим: СИМВОЛЫ, ФЛАГИ и МЕТОДЫ Символы: Cимволы, используются для поиска или замены текстовых данных. Ниже приведены некоторые из наиболее часто используемых символов: 1. . - соответствует любому одному символу, кроме символа новой строки 2. * - соответствует нулю или более повторениям предшествующего символа 3. + - соответствует одному или более повторениям предшествующего символа 4. ? - соответствует нулю или одному повторению предшествующего символа 5. ^ - указывает на начало строки 6. $ - указывает на конец строки 7. [] - создают символьный класс, который соответствует любому из перечисленных символов 8. () - используются для группировки символов в регулярном выражении 9. | - используется для обозначения альтернативы между несколькими выражениями Флаги: Флаги, определяют способ поиска или сопоставления шаблонов текста 1. i - Игнорировать регистр символов 2. g - Поиск всех возможных сопоставлений шаблона в тексте 3. m - Рассматривать строку как многострочную, то есть символы начала и конца строки (^ и $) применяются к каждой строке, а не ко всему тексту 4. s - Разрешает символу точки (.) соответствовать символу новой строки (\n) включая его 5. u - Включает полную поддержку unicode 6. y - Начинать поиск с указанной позиции 7. d - Запрещает пустые сопоставления 8. x - позволяет добавлять пробелы и комментарии в регулярное выражение Методы: 1. test() - возвращает true/false 2. exec() - используется для поиска совпадений регулярного выражения в строке. Он возвращает массив с информацией о совпадении 3. match() - используется для поиска совпадений регулярного выражения в строке. Возвращает массив совпадений 4. search() - используется для поиска позиции первого совпадения регулярного выражения в строке 5. replace() - используется для замены совпадений 6. split() - используется для разделения строки на массив подстрок Документация @frontendG1d #javascript

Прошу прощения, господа просматривающие, что так долго не было постов 🥺 Из причин могу выделить: 1. Творческий кризис 2. Разногласия с javascript 3. Устал 4. Работа 5. учёба

РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ в JS используются так же, как и в более старых версиях JavaScript, но с некоторыми улучшениями и дополнениями. Примеры регулярных выражений: 1. Использование флага "u" для работы с юникодом:

// Проверка наличия кириллических букв в строке
const str = "Привет, мир!";
const pattern = /\p{Cyrillic}+/u;
console.log(pattern.test(str)); // true

2. Названные группы захвата:

// Извлечение имени и фамилии из строки
const str = "Иванов Иван";
const pattern = /(?<firstName>[А-Я][а-я]+) (?<lastName>[А-Я][а-я]+)/u;
const { firstName, lastName } = str.match(pattern).groups;
console.log(firstName, lastName); // Иванов Иван

3. Многострочный поиск:

// Поиск всех email адресов в многострочном тексте
const text = `Email: [email protected]
Email: [email protected]`;
const pattern = /\w+@\w+\.\w+/gu;
const emails = text.match(pattern);
console.log(emails); // [ '[email protected]', '[email protected]' ]

Регулярные выражения в JavaScript могут быть использованы во многих задачах фронтенд разработчика, таких как валидация форм, поиск и выделение текста, фильтрация данных, замена символов, парсинг данных и другие. Например, они могут быть использованы при: - Проверке корректности введенных данных в формах (например, валидация email адреса) - Поиске ключевых слов, ссылок или шаблонов в тексте (например, ссылок в тексте статьи) - Фильтрации и обработке списка данных (например, удаление ненужных символов из строки) - Проверке правильности ввода пароля (например, требование использования определенных символов) Использование регулярных выражений существенно упрощает и ускоряет обработку текстовой информации в веб-приложениях, делая код более эффективным и удобочитаемым Ссылка на более глубокий материал @frontendG1d #javascript #код