@Evtera

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

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

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

b.addEventListener("click", () => {
    let $activatedFilters = document.querySelectorAll(".chose");
/*-- делает что-то  --*/
}
}
  • Вопрос задан
  • 124 просмотра
Решения вопроса 2
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Можно
// тут     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
Ответ написан
sergiks
@sergiks Куратор тега JavaScript
♬♬
если там именно в момент клика важно обновлять выбор, то можно через 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()
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Да, просто объявите вашу функцию выше и отдельно и передавайте колбэком вместо анонимных.

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


Ссылки:
колбэки, введение (ru)
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
XPOWER Одесса
от 3 000 до 5 500 $