Эффективные DOM-запросы к методам класса ES6 - PullRequest
Новая
       60

Эффективные DOM-запросы к методам класса ES6

0 голосов
/ 13 апреля 2020

В настоящее время я работаю над проектом, в котором используются модули браузера ES6 (и классы ES6), в результате чего большинство методов классов запускаются с помощью обработчиков событий щелчка. В большинстве случаев эти методы требуют взаимодействия с элементами DOM, которые могут не существовать в DOM при первоначальной загрузке модулей. Большинство методов класса используют одни и те же элементы DOM повсеместно, поэтому, если ссылки на элементы DOM не поддерживаются, DOM необходимо будет неоднократно запрашивать (для одних и тех же элементов) в разных методах класса. Это, конечно, далеко от идеала.

Исходя из вышеизложенного, наиболее разумный подход, который я придумаю, состоит в том, чтобы все элементы DOM, требуемые конкретным классом, были установлены один раз в конструкторе на классовое создание. Этот метод работает хорошо, так как на этом этапе необходимые элементы DOM уже были бы загружены в дереве DOM. Таким образом, методы класса могут получать ссылки на элементы DOM, обращаясь к соответствующему свойству класса. Хотя этот подход является подходящим, он приводит к огромным конструкторам и коду, который довольно неопрятен и не поддерживается. Пример конструктора класса: 

this.navBar = document.getElementById('navBar')
this.sideBar = document.getElementById('sideBar')
this.container = document.getElementById('container')
this.modal = document.getElementById('modal')
this.mainScreen = document.getElementById('mainScreen')
this.nextPage = document.getElementById('nextPage')
this.previousPage = document.getElementById('previousPage')
this.pageNo = document.getElementById('pageNo')

et c ..

Я также не могу сохранить ссылки на элементы DOM как глобальные, поскольку, как отмечалось ранее, некоторые элементы HTML изначально не присутствуют в дереве DOM при загрузке модуля. Более того, глобальные переменные - это не очень хорошая практика.

Есть ли у вас какие-либо предложения / идеи относительно других подходов, которые могли бы подойти для эффективного запроса DOM при рассмотрении этого конкретного сценария?

...