Я использую Webpack для импорта / запроса нескольких JS файлов для клиентской стороны. Я также использую jQuery в этих файлах. В нескольких из этих JS файлов я использую jQuery, чтобы выбрать что-то в DOM и сделать что-то с ним:
$('button').addClass('whatever')
Я использую jQuery, чтобы выбрать button в нескольких файлах. Поскольку использование jQuery для выбора чего-то более одного раза является плохой практикой, каков наилучший способ разделения кэшированных jQuery селекторов между этими файлами?
Я думал о том, чтобы сделать что-то вроде добавления другого файла elements.js, которое требуется во всех моих JS файлах. Содержимое этого будет:
module.export = {
button = $('button'),
body = $('body')
myDiv = $('div.hello')
etc...
}
И затем во всех моих JS файлах, после требования вышеупомянутого, я просто получу доступ к общему выбору, используя elements.button, et c.
Есть ли лучший способ сделать это?
Легко кэшировать и сохранять селекторы jQuery при работе с одним гигантским файлом JS, но когда вам требуется и импортируется множество JS файлы через Webpack могут быть немного более утомительными, чтобы поддерживать их производительность.