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

Question

[Evtera]

Здравствуйте. Есть следующий код. В нём две функции используют одну и ту же переменную. Хотелось бы узнать, можно ли вынести эту переменную в общую область видимости так, чтобы при срабатывании любой из функции объект с данными переменной обновлялся.

const wrapper = ()=>{
 
a.addEventListener("click", () => {
    let $activatedFilters = document.querySelectorAll(".chose");
/*-- делает что-то  --*/
}

b.addEventListener("click", () => {
    let $activatedFilters = document.querySelectorAll(".chose");
/*-- делает что-то  --*/
}
}

Comments

[Tim]

а что у вас в переменной a и b?

Answer 1

[Вадим]

Можно

// тут     let $activatedFilters = document.querySelectorAll(".chose"); 
const wrapper = ()=>{
// или тут     let $activatedFilters = document.querySelectorAll(".chose"); 
  a.addEventListener("click", () => {
    /*-- делает что-то  --*/
  }

  b.addEventListener("click", () => {
    /*-- делает что-то  --*/
  }
}

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

Но можно сделать эту операцию дешевле, сохранив в вышестоящей области видимости родительский контэйнер для элементов .chose, скажем в переменную choseCont. И тогда в функциях обработчках уже обращаться не к document.querySelectorAll а к choseCont.querySelectorAll, что значительно ускорит поиск по DOM, так как будем искать не во всём дереве, а лишь в определённом элементе.

P.s. для переменной $activatedFilters правильнее использовать const а не let. Если только Вы где-то ниже в коде не переопределяете саму переменную $activatedFilters

Comments

[Evtera]

Да, данная переменная нужна для мониторинга .length массива. Поэтому данные приходится обновлять таким некрасивым образом

[Вадим]

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

Answer 2

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

если там именно в момент клика важно обновлять выбор, то можно через getter:

spoiler

const wrapper = () => {
  const $$$ = {
    get activatedFilters() {
      return document.querySelectorAll(".chose");
    }
  }

  a.addEventListener("click", () => {
    // делает что-то с $$$.activatedFilters
  }

  b.addEventListener("click", () => {
    // делает что-то другое с $$$.activatedFilters
  }
}

..хотя зачем, если просто функцию сделать:

const wrapper = () => {
  const getActivatedFilters = ()  => document.querySelectorAll(".chose");

  a.addEventListener("click", () => {
    // делает что-то с getActivatedFilters()
  }

  b.addEventListener("click", () => {
    // делает что-то другое с getActivatedFilters()
  }
}