JavaScript: Лучшие практики

Избегайте глобальных переменных

Глобальные переменные ведут к конфликтам имен и затрудняют отладку. Вместо этого используйте модули или замыкания для инкапсуляции логики.

// Плохая практика: загрязняет глобальную область видимости
let counter =  0 ;  

// Хорошая практика: инкапсулировано   
( function(){ 
  let counter = 0 ;
  function  increment(){
    counter ++ ; 
  }
})(); 

#js #лучшиепрактики

CSS фигуры: слеза

Забавно, но слеза является вариантом формы глаза

<div class="tear"></div>

Достаточно просто изменить радиус контура: увеличить radius в положениях top-right, botton-right, bottom-left, чтобы получить круглую форму, и привести его к нулю для top-left, чтобы он заканчивался точкой:

.tear {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  rotate: 45deg;
  border-radius: 0 50% 50% 50%;
}

#frontend #css #shapes

JavaScript: Лучшие практики

Используйте строгий режим

Строгий режим use strict позволяет избегать небезопасных действий, выдавая ошибки при:

1. присвоении значений необъявленным переменным,
2. использовании устаревших функций.

"use strict";  

x = 10; // приводит к ошибке: x is not defined 

#js #лучшиепрактики

JavaScript: Лучшие практики

Всегда используйте === вместо ==

Оператор строгого равенства === позволяет избежать приведения типов, Это делает сравнения более предсказуемыми.

// Плохая практика: приведение типов  

console.log(5 == "5") // true

// Хорошая практика: строгое сравнение

console.log(5 === "5") // false

#js #лучшиепрактики

JavaScript: Лучшие практики

Обрабатывайте ошибки с помощью try-catch

Необработанные ошибки приводят к сбоям в работе приложения. Используйте try-catch для операций, несущих риски возникновения ошибок, таких как вызовы API.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Fetch failed:", error)
  }
} 

#js #лучшиепрактики

JavaScript: Лучшие практики

Избегайте ада обратных вызовов с помощью Promises и Async / Await

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

1. Promises
2. Async / Await

// Callback Hell. Плохая практика  

getUser(userId, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});  


// Async/Await. Хорошая практика

async function loadData() {
  const user = await getUser(userId);
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0].id);

  console.log(comments);
}  

#js #лучшиепрактики

JavaScript: Лучшие практики

Оптимизируйте циклы

Избегайте тяжелых вычислений внутри циклов. Кэшируйте длины массивов и используйте эффективные циклы, такие как for...of или Array methods

const items = [1, 2, 3, 4, 5];  

// Плохая практика: пересчет длины при каждой итерации

for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}  

// Хорошая практика: кэширование длины

for (let i = 0, len = items.length; i < len; i++) {
  console.log(items[i]);
}  

// Лучшая практика (modern JS)  

for (const item of items) {
  console.log(item);
}  

// Функциональный подход (map, filter, reduce)  
items.map(item => console.log(item));  

#js #лучшиепрактики

JavaScript: Лучшие практики

Используйте все возможности JavaScript

1. стрелочные функции
2. шаблонные литералы
3. деструктуризацию
4. spread и rest операторы

// Стрелочные функции  и шаблонные литералы
const greet = (name) => </span><span>Hello, </span><span><span>${</span>name<span>}</span></span><span>;  

// Деструктуризация
const { id, username } = user;  

// Spread  
const merged = [...arr1, ...arr2]; 

#js #лучшиепрактики

JavaScript: Лучшие практики

Используйте ESLint и Prettier для повышения качества кода

1. ESLint
2. Prettier

установите их через npm:

npm install eslint prettier --save-dev  

#js #лучшиепрактики

JavaScript: Лучшие практики

Разбивайте свой код на более мелкие, повторно используемые модули. Так Вы упростите разработку и

Используйте модули ES6 для эффективной организации кода.

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

#js #лучшиепрактики

JavaScript: Лучшие практики

Производительность имеет решающее значение для оптимального взаимодействия с пользователями:

1. избегайте ненужных манипуляций с DOM,
2. минимизируйте использование глобальных переменных,
3. оптимизируйте циклы и алгоритмы.

// Плохая практика
for (let i = 0; i < array.length; i++) {
  // какой-то код
}

// Хорошая практика
const length = array.length;
for (let i = 0; i < length; i++) {
  // какой-то код
}

#js #лучшиепрактики

JavaScript: Лучшие практики

Тестируйте свой код.

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

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

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

#js #лучшиепрактики

CSS фигуры: круг

Создать круг с помощью CSS легко и просто

<div class="circle"></div>

Допустим у нас уже есть квадрат:

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
}

Теперь нужно задать округлую форму. Нам поможет свойство border-radius. Присвоим ему значение 50% или больше:

.circle {
  width: 300px;
  aspect-ratio: 1;
  background: black;
  border-radius: 50%;
}

#frontend #css #shapes

JavaScript: Лучшие практики

Необязательное объединение в цепочку

Представьте себе глубоко вложенную структуру данных, подобную объекту person в предложенном примере. Допустим, Вы хотите получить доступ к имени и фамилии человека. Вы бы написали это на JavaScript следующим образом:

person = { name: { first: 'John', last: 'Doe', }, age: 42}

person.name.first // 'John'
person.name.last // 'Doe'

А теперь представьте, что бы произошло, если бы объект person не содержал вложенного объекта name.

person = { age: 42}

person.name.first // TypeError: Cannot read property 'first' of undefined
person.name.last // TypeError: Cannot read property 'last' of undefined

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

person && person.name && person.name.first // undefined

Познакомьтесь с опциональной цепочкой, функцией JavaScript, уничтожающей подобное чудовище. Опциональная цепочка прерывает процесс копания, как только встречается значение null или undefined, и возвращает управление undefined без возникновения ошибки.

person?.name?.first // undefined

Полученный код гораздо лаконичнее и чище.

#js #лучшиепрактики

JavaScript: Лучшие практики

Нулевое слияние

До введения оператора нулевого слияния ?? разработчики JavaScript использовали оператор логического ИЛИ || для возврата к значению по умолчанию, если входные данные отсутствовали. Это сопровождалось существенной оговоркой, заключавшейся в том, что даже допустимые, но ложные значения приводили к возврату к значениям по умолчанию.

function print(val) { return val || 'Missing'
} print(undefined) // 'Missing'
print(null) // 'Missing'

print(0) // 'Missing'
print('') // 'Missing'
print(false) // 'Missing'
print(NaN) // 'Missing'

Но JavaScript предложил оператор ??, давший разработчикам лучшую альтернативу: он приводит к откату только в том случае, если предыдущее выражение равно null lили undefined.

function print(val) { return val ?? 'Missing'
} print(undefined) // 'Missing'
print(null) // 'Missing'

print(0) // 0
print('') // ''
print(false) // false
print(NaN) // NaN

Это дает уверенность в том, что, если программа принимает ложные значения в качестве допустимых входных данных, Вам не придется заменять их резервными.

#js #лучшиепрактики

JavaScript: Лучшие практики

Логическое присваивание

Допустим, вы хотите присвоить значение переменной, но только если ее значение в данный момент равно нулю. Логично будет сделать так:

if (x === null || x == undefined) { x = y}

Если бы Вы знали, как работает короткое замыкание, вы, возможно, захотели бы заменить эти 3 строки кода более краткой версией, использующей оператор объединения null-подобных значений.

x ?? (x = y) // x = y if x is nullish, else no effect

Здесь мы используем функцию короткого замыкания оператора нулевого слияния для выполнения части x = y. Код довольно лаконичен, но его все равно достаточно трудно читать или понимать. Логическое нулевое слияние устраняет необходимость в таком обходном пути.

x ??= y // x = y if x is nullish, else no effect

Схожим образом JavaScript ввел логические операторы присваивания AND &&= и OR ||=. Эти операторы выполняют присваивание только при выполнении определенного условия и не имеют никакого эффекта в противном случае.

x ||= y // x = y if x is falsy, else no effect
x &&= y // x = y if x is truthy, else no effect

#js #лучшиепрактики

JavaScript: Лучшие практики

Именованные группы захвата

Давайте начнем с краткого обзора групп захвата в регулярных выражениях.

Группа захвата — это часть строки, которая соответствует части регулярного выражения в скобках.

let re = /(\d{4})-(\d{2})-(\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!') result[0] // '2020-03-14', the complete match
result[1] // '2020', the first capture group
result[2] // '03', the second capture group
result[3] // '14', the third capture group

Регулярные выражения поддерживали именованные группы захвата в течение долгого времени, что было

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

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!') result.groups.year // '2020', the group named 'year'
result.groups.month // '03', the group named 'month'
result.groups.day // '14', the group named 'day'

API прекрасно работает с деструктурированными присваиваниями.

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
let result = re.exec('Pi day this year falls on 2021-03-14!')
let { year, month, day } = result.groups year // '2020'
month // '03'
day // '14'

#js #лучшиепрактики

Вы чувствовали себя глупцом, изучая программирование?

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

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

Никто не знает всего, мы учимся по ходу дела, и программирование — это вызов, в котором всегда можно стать лучше

#мнение

Нужные элементы HTML5

Модальные окна: <dialog>

Вы начинаете новый проект и встречаетесь с необходимостью добавить модальный диалог.

Ваше первое действие... JavaScript, React, Vue? Вы делали это бесчисленное количество раз.

Но в HTML5 есть элемент, специально разработанный для этой цели:

<dialog id="myDialog">
  <h2>This is a Native Dialog</h2>
  <p>No JavaScript frameworks required!</p>
  <button id="closeDialog">Close</button>
</dialog>

<button id="openDialog">Open Dialog</button>

Конечно, для обработки действий открытия и закрытия модального окна все-таки потребуется немного JavaScript:

const dialog = document.getElementById('myDialog');
document.getElementById('openDialog').addEventListener('click', () => {
  dialog.showModal(); // Открываем диалог в модальном окне
});
document.getElementById('closeDialog').addEventListener('click', () => {
  dialog.close(); // Закрываем диалог
});

И еще... <dialog> можно оформить по своему усмотрению:

dialog {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

dialog::backdrop {
  background-color: rgba(0,0,0,0.6);
}

Для сложных модальных окон с большим количеством интерактивных элементов все равно понадобится отдельная библиотека, но d большинстве рутинных случаев нативный элемент работает отлично

#frontend #html

Нужные элементы HTML5

Аккордеон: <details> и <summary>

Аккордеоны используются везде - это часто задаваемые вопросы, сведения о продукте, панели настроек... Чаще всего разработчики ищут решенеи на JavaScript, но в HTML5 для этого есть собственные элементы:

<details>
  <summary>Развернуть</summary>
  <p>Этот контент разворачивается и скрывается без JavaScript!</p>
</details>

Это все, что нужно. Браузер обрабатывает функционал переключения, атрибуты доступности и навигацию с помощью клавиатуры.

Вы можете оформить элементы в соответствии со своими потребностями:

details > summary {
  list-style: none;
}

details > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

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

<details>
  <summary>Programming Languages</summary>
  <details>
    <summary>Frontend</summary>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </details>
  <details>
    <summary>Backend</summary>
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Ruby</li>
    </ul>
  </details>
</details>

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

#frontend #html

Нужные элементы HTML5

Автозаполнение: <datalist>

Возможность автозаполнения является основой современных вебформ. Большинство разработчиков обращаются к сторонним решениям, но в HTML5 для этого есть встроенный элемент:

<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Это дает вам возможность ввода текста c предложением вариантов по мере его набора, дополненную как возможностью выбора из списка, так и вводом целиком собственного текста.

Интересным вариантом использования является создание палитры цветов с именованными цветами:

<input type="text" list="colors" placeholder="Choose a color">
<datalist id="colors">
  <option value="#FF0000">Red</option>
  <option value="#00FF00">Green</option>
  <option value="#0000FF">Blue</option>
</datalist>

Пользователь может ввести название цвета или шестнадцатеричный код. Добавив JavaScript, можно создать предварительный просмотр:

const input = document.querySelector('input');
const preview = document.getElementById('colorPreview');

input.addEventListener('input', () => {
  preview.style.backgroundColor = input.value;
});

Главное ограничение <datalist> - стилизация: невозможно с легкостью настроить внешний вид появляющихся вариантов. Поэтому, если Вам нужен индивидуальный стиль, все равно понадобится решение на JavaScript. Но во многих случаях нативный элемент вполне применим.

#frontend #html