Ниже часть кода для реализации табов в двух вариантах.
При создании класса в конструкторе сохраняется ссылка на активные кнопку и таб с контентом
class Tabs {
constructor(el) {
this.activeBtn = el.querySelector('.btn_active')
this.activePane = el.querySelector('.pane_active')
el.addEventListener('click', this.change.bind(this))
}
change() {
// do stuff with this.activeBtn and this.activePane
}
}
new Tabs()
Проблема в том, что большинство пользователей сайта могут вообще не пользоватся табами и нет смысла каждый раз при загрузке страницы выполнять querySelector
Поэтому код можно переписать так
class Tabs {
constructor(el) {
this.el = el
this.activeBtn = null
this.activePane = null
this.refSaved = false
el.addEventListener('click', this.change.bind(this))
}
saveRef() {
this.activeBtn = this.el.querySelector('.btn_active')
this.activePane = this.el.querySelector('.pane_active')
this.refSaved = true
}
change() {
if(!this.refSaved) {
this.saveRef()
}
// do stuff with this.activeBtn and this.activePane
}
}
new Tabs()
Здесь мы сохраняем ссылки на элементы непосредственно перед тем, как они будут нужны, то есть после клика пользователя по кнопке таба. Таким образом мы сокращаем обращение к dom
Мой вопрос в следующем: в теории это даст плюсы в быстродействии за счет логики вызова querySelector или с увеличившимся размером файла будет еще хуже?
Понятно, что это все экономия на спичках. Но в тех же гайдах по js рекомендуют сохранять ссылку на dom-элемент, если он используется повторно. А тут похожая ситуация.
