Как можно сократить данный код?

Question

[yanieniz]

const menuWrapper = document.querySelector('.portfolio-menu'),
          menuElems = menuWrapper.querySelectorAll('li'),
          allButton = menuWrapper.querySelector('.all'),
          loveButton = menuWrapper.querySelector('.lovers'),
          chefButton = menuWrapper.querySelector('.chef'),
          girlButton = menuWrapper.querySelector('.girl'),
          guyButton = menuWrapper.querySelector('.guy'),
          grandmotherButton = menuWrapper.querySelector('.grandmother'),
          grandfatherButton = menuWrapper.querySelector('.granddad');

Comments

[iBird Rose]

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

Answer 1

[Сергей Соколов]

Если бы был порядок и полное совпадение имен переменных и классов, можно часть сократить так:

const buttons = {};
'all,love,chef,girl,boy,grandma,grandpa'
  .split(',').forEach((name) => buttons[name] = menuWrapper.querySelector('.' + name));

Использовать потом, например, вместо girlButton — buttons.girl

Answer 2

[BorLaze]

Никак.
Тебе нужны разные сущности по разным критериям.

Сколько вариантов - столько и запросов. Что тут сокращать?

Comments

[edward_freedom]

никак, а уже куча вариантов накидали

[WbICHA]

edward_freedom, "Java developer" ¯\_(ツ)_/¯

[BorLaze]

WbICHA, aга, есть проф-деформация :-)

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

[WbICHA]

BorLaze, а что мешает их хранить в переменных? Посмотри моё решение.

Answer 3

[WbICHA]

const menuQuerySelector = (selectors) => selectors.map((s) => menuWrapper.querySelector(s));
  
  const buttonSelectors = ['.b1', '.b2', '.b3', '.b4', ...];
  const [button1, button2, button3, button4, ...] = menuQuerySelector(buttonSelectors);

Comments

[edward_freedom]

не подходит, в одном случае надо querySelectorAll, в другом querySelector

[WbICHA]

edward_freedom, подходит, для одного случая можно написать селектор и отдельно.

[WbICHA]

edward_freedom, приятно, конечно, но не лень было по моим ответам бегать?)

Answer 4

[edward_freedom]

let objects = {
        allButton: {
            wrapper: 'menuWrapper',
            selector: 'li',
            'function': 'querySelectorAll'
        },
        loveButton : {
            wrapper: 'menuWrapper',
            selector: '.lovers',
            'function': 'querySelector'
        },
    };

    Object.entries(objects).forEach(entry => {
        const [key, value] = entry;
        const wrapper = document.querySelector(value.wrapper);
        value.object = wrapper[value.function](value.selector);
    });

Comments

[WbICHA]

'function': 'querySelectorAll'
Ох, в жс такое решение слишком уязвимо для ошибок, это же не тс.
Но вообще интересное решение, только ты забыл о том, что ловерс ─ это класс.)

Answer 5

[profesor08]

Как по мне код должен быть простым и читабельным. Много переменных именно так и выглядят.

const menuWrapper = document.querySelector(".portfolio-menu");

if (menuWrapper !== null) {
  const [all, lovers, chef, girl, guy, grandmother, granddad] = [
    ".all",
    ".lovers",
    ".chef",
    ".girl",
    ".guy",
    ".grandmother",
    ".granddad",
  ].map((selector) => {
    return menuWrapper.querySelector(selector);
  });

  const menuElems = menuWrapper.querySelectorAll("li");
}

Answer 6

[Анатолий]

Добавить функцию, например:
function _(x) {return document.querySelector(x); }
И сразу вставлять в код типа:
_('.a').style.color = 'red';

Короче не придумать, так как тут нет чего-то общего, что можно заменить.

Answer 7

[SaziX1337]

const buttons = new Array[массивы]