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

Question

[Сергей]

Здравствуйте, появилась проблема, у меня есть в коде пара функций на чистом 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');
}

Будут примеры?

Comments

[Евгений Самсонов]

Вы придумали jQuery :)

Answer 1

[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))

Comments

[Stalker_RED]

Артём Петренков, да, вы правы, добавлю.

[Антон Швец]

const $ = v => (k => k.length > 1 ? k : k[0])(document.querySelectorAll(v));
Reflect.setPrototypeOf($, Array.prototype);

;-)
так мозг выносится еще более знатно

[Антон Швец]

Артём Петренков, добавим ада

const $ = v => (z => (Object.getOwnPropertyNames(Array.prototype).forEach(name => z[name] = Array.prototype[name]), z))((k => k.length > 1 ? k : k[0])(document.querySelectorAll(v)));

теперь у $('a') есть forEach, даже если там один элемент. Ну работать он конечно не будет

[Stalker_RED]

Антон Швец, не совсем понимаю зачем reflect вы ведь возвращаете NodeList. Не лучше ли в массив конвертнуть?

[Антон Швец]

Stalker_RED, эта фигня с рефлект добавляет методы самой $, а не результату. Хотя бред, да. У меня цель запутать, а не сделать мини jQuery.
вообще конечно нужно возвращать из $ объект, у которого в прототипах будет специальный объект с методами, а у него уже в прототипе NodeList или Element, который нашли. Но это уже сложно.