Создать свою мини-библиотеку на чистом js?

Здравствуйте, появилась проблема, у меня есть в коде пара функций на чистом js она добавляет классы элементам. В общем я написал ещё парочку и подумал как сократить время на написание всех этих функций.

Есть функция:
document.getElementById('nav-trigger').onclick = function() {
   document.getElementById('menu-navigation').classList.add('active');
   document.getElementById('menu-close').classList.add('active');
}


А я хочу сократить её до примерно вот такого вида:
get_id('nav-trigger').onclick = function() {
   get_id('menu-navigation').classList.add('active');
   get_id('menu-close').classList.add('active');
}


Будут примеры?
  • Вопрос задан
  • 196 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
const ﹩ = document.querySelector.bind(document) // вау, почти jQuery! с одной строчки!
// Кто-то может повестись и знатно вынести себе моск:)

﹩('#nav-trigger').onclick =ௐ=> {
   ﹩('#menu-navigation').classList.add('active');
   ﹩('#menu-close').classList.add('active');
}

(при написании этого кода ни один зомби не пострадал)

Еще можно сделать так:
HTMLElement.prototype.addClass = function(className) { this.classList.add(className) }

тогда получится
﹩('#menu-navigation').addClass('active');
но возможно вас кто-то проклянет за модификацию прототипов

Ну и как подсказывает Антон Швец можно еще улучшить, чтобы возвращал не только один элемент, но и массив элементов
const ﹩ = selector => (list => list.length > 1 ? [...list] : list[0])(document.querySelectorAll(selector))
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы