Хотелось бы услышать критику кода JavaScript

Question

Хотелось бы услышать критику кода JavaScript

Рейтинг: 0Ответов: 1Опубликовано: 31.05.2023

Всем привет, я занялась изучением веб разработке в январе, сейчас уже 5 месяц учусь, последние 2 месяца изучала java script, познакомилась с понятием ООП и решила начать делать pet проект в ООП стиле и хотелось бы услышать критику, как можно улучшить или может как-то изменить подход если это нужно, что бы можно было поддерживать и масштабировать проект, а так же переиспользовать код
Вот фрагмент первого класса для форм

По функциональности
1 метод - отправка формы, принимает селектор формы и url по которому будет отправлять форму
2 метод - валидация инпута, принимает селектор инпута, регулярное выражение и класс, который будет добавлен инпуту в случае не валидности (предназначен для любых инпутов)
3 метод - меняет тип инпута по нажатию на глазик с пасворд на текст и на оборот + меняет глазик на закрытый и открытый, (предназначен для паролей

export default class Form {
  sendForm(formSelector, url) {  
    const form = document.querySelector(formSelector);
    form.addEventListener('submit', (event) => {
      const formData = new FormData(form);
      event.preventDefault();
      fetch(url, {
        method: 'POST',
        body: formData,
      })
      .then((response) => console.log(response))
      .catch(() => console.log('error'));
    });
  }

  validInput(inputSelector, regularExpressions, noValidCssClass) {
    const input = document.querySelector(inputSelector);

    input.addEventListener('blur', () => {
      const inputValue = input.value.trim();

      if(!regularExpressions.test(inputValue)) {
        input.classList.add(noValidCssClass);
        input.setAttribute('data-valid', 'false');
      }
      if(regularExpressions.test(inputValue)) {
        input.classList.remove(noValidCssClass);
        input.setAttribute('data-valid', 'true');
      }
    });
  }

  showHidePassword(openedEyeSelector, closedEyeSelector, activeSelector, InputSelector) {
    const openedEye = document.querySelector(openedEyeSelector);
    const closedEye = document.querySelector(closedEyeSelector);
    const input = document.querySelector(InputSelector);

    openedEye.addEventListener('click', () => {
      if (/Mobi/.test(navigator.userAgent)) {
        input.focus();
        setTimeout( () => {
          input.selectionStart = input.value.length;
          input.selectionEnd = input.value.length;
        });
      }    

      input.setAttribute('type', 'text');
      openedEye.classList.toggle(activeSelector);
      closedEye.classList.toggle(activeSelector);
    }); 

    closedEye.addEventListener('click', () => {
      if (/Mobi/.test(navigator.userAgent)) {
        input.focus();
        setTimeout( () => {
          input.selectionStart = input.value.length;
          input.selectionEnd = input.value.length;
        });
      } 

      input.setAttribute('type', 'password');
      closedEye.classList.toggle(activeSelector);
      openedEye.classList.toggle(activeSelector);
    }); 
  }
}

Во втором файле, который использует этот класс и методы такой код

import Form from './modules/form.mjs'
document.addEventListener('DOMContentLoaded', () =>{
  
  const form = new Form;
  form.showHidePassword('#opened', '#closed', 'form__password-eye_active', '#password');

  form.validInput('#name', /^[a-zA-Zа-яА-Я\s]{2,32}$/, 'form__input_no-valid');
  form.validInput('#email', /^[\w.\s-]{1,120}@[a-zA-Z0-9_-]{1,120}(?:\.[a-zA-Z0-9_-]{1,120}){1,2}$/, 'form__input_no-valid');
  form.validInput('#password', /^(?=.*[a-zA-Zа-яА-Я])(?=.*[0-9]).{8,48}$/, 'form__input_no-valid');
  form.sendForm('.form', 'ddd.php');
});

javascript инспекция-кода

Источник: Stack Overflow на русском

Answer 1

▲ 0

Что-то вы девушка лапшичку нам на ушки вешаете, за 5 месяцев выучила регулярки (Регулярные выражения)?

Критика простая - нечего из этого всего вообще не нужно! =] Изобретаете велосипед =]

Валидация формы производится атрибутом type (type="email") у поля input, минимальное кол-во символов атрибут minlength, максимальное maxlength необходимость заполнения - required, разрешенные символы pattern="[0-9]{3}"

Построение формы, лучше всего изучить какой-нибудь фреймворк наподобие React, Angular или Vue. Лично мой совет начать именно с Vue он самый простой и понятный. Не хочется изучать фреймворк, то хотя бы изучите генераторы - к примеру Jade он же Pug, простой и просто офигенный во всех смыслах.

А теперь по существу

class Form {
  setName(name) {
    this.#name = name
    return this
  }
}

export default Form

Выглядит намного лучше

Функции setter'ы могли бы возвращать this, тогда можно использовать пайпы.

сonst form = (new Form)
  .showHidePassword()
  .validInput()
  .validInput()
  .validInput()
  .sendForm()

Откажитесь от символа ; так уже никто не пишет, это устаревший синтаксис бородатых JS.

Если используете много параметров функции. То лучше используйте деструктуризацию.

function myFunction({ name, surname, age }) {
}

Так вашу функцию проще будет переиспользовать.

На примере построения формы, вы каждый раз передаёте 'form__input_no-valid' который можно было просто переиспользовать.

Ошибки лучше выводить =)

.catch(err => console.error(err);

fetch - забыли указать Content-Type для запроса, как сервер должен узнать что вы ему отсылаете?

Глазик лучше реализовать в CSS, и использовать.

element.classList.toggle('password-shown')

Еще небольшая, но классная заметка, пэт проекты на изучение - лучше всего писать на codepen каком нибудь, там очень много людей смогут дать вам намного больше полезных откликов на вашу работу.

А теперь очень важное замечание!

Если есть возможность, устраивайтесь на работу junior фронэнд разработчиком! Опытные программисты быстро вытрясут из головы все дурные мысли, и положат умные!) Переучиваться всегда в 100 раз труднее чем сразу научится как надо! И в боевых условиях потока задач все учится намного быстрее.

Сейчас пока каникулы, наша компания взяла 3 интернов. Они хоть и получаю мизерную зарплату, но уже за неделю научились делать весьма сносные сайтики.

Хотелось бы услышать критику кода JavaScript

Ответы