Разбор ошибок

Производительность

const element = document.getElementById('my-element');
element.classList.add('selected');
const element = document.getElementById('my-element');

element.styles.visibility = 'visible';
element.styles.marginTop = '10px';
element.styles.marginBottom = '10px';

Неправильно

Правильно

Изменение стилей

Добавление элементов

const container = document.querySelector('#root');

friends.forEach(friendHtml => container.appendChild(friendHtml));

Правильно

Обертка из DOM элемента

const container = document.querySelector('#root');
const wrapper = document.createElement('div');

wrapper.classList.add('wrapper');

friends.forEach(friendHtml => wrapper.appendChild(friendHtml));

container.innerHtml = '';
container.appendChild(wrapper);

Обертка из фрагмента

const container = document.querySelector('#root');
const fragment = document.createFragment();

friends.forEach(friendHtml => fragment.appendChild(friendHtml));

container.innerHtml = '';
container.appendChild(fragment);

Клонирование

Как настоящий разработчик

const container = document.querySelector('#root');

container.innerHtml = '';
container.append(...friends);

const container = document.querySelector('#root');
const wrapper = document.querySelector('.wrapper');
const cloned = wrapper.cloneNode();

friends.forEach(friendHtml => cloned.appendChild(friendHtml));

container.replaceChild(cloned, wrapper);

Codestyle

const MyFavoriteNumber = 42;
const my_favorite_number = 42;
const my-favorite-number = 42;
const myfavoiritenumber = 42;

Shopopalo-case

Отступы


const myFavoriteNumber = 42;

for (let i = 0; i < myFavoriteNumber; i++) {
myFavoriteNumber += 1;
   console.log(myFavoriteNumber);
                   }


  function myFunction(variable) {

 myFavoriteNumber = 0;


}

const, let и var

let myFunction = () => {
  // please, work
}

DOM

CSS

Принципы

DRY !== WET

YAGNI

KISS

Made with Slides.com