1

Наткнулся на фрагмент кода кэширования результата работы querySelector. Знаю, что этот метод довольно "тяжелый", поэтому хотел попробовать его применить и потестить в какой-нибудь своей вёрстке. Только вот не смог понять как этот код работает.

function cache(key, value) {
  if (typeof value == 'undefined') {
    return cache[key];
  }
  cache[key] = value;
}
 _io_q = function(selector){
    if (!cache(selector)) { 
      cache(selector, document.querySelector(selector));
    }
    return cache(selector);
 }

Со второй функцией всё прекрасно ясно: если не существует данного селектора, записываем его в cache. Затем обращаемся к cache дабы та вернула значение value по ключу key. Вот тут мне абсолютно непонятно. Смущает cache[key] = value. Это же функция, а не объект, как такое возможно? Почему бы просто не создать какой-то объект и уже туда записывать все пары ключ-значение? Будут ли различаться подходы записи cache[key] = value и предложенный мой вариант some_object[key] = value?

2
  • 1
    Ну код учебный, чтобы показать, что "так можно было". В реальной жизни вы не будете доставать миллионы элементов в секунду по querySelector, чтобы заботиться именно о скорости. А ссылки на элементы, к которым нужно постоянно обращаться - да, полезно где-то сохранить. Но не факт, что это лучший способ: Нужно постоянно помнить и записывать селекторы. Может быть легче хранить их в "говорящих" переменных (свойствах объекта). Commented 27 июл. 2020 в 16:01
  • @OPTIMUS PRIME проходил всякие уроки по DOM и везде устрашали тем, что querySelector ну очень прожорливый. Прямо сейчас я работаю просто над тренировочной вёрсткой где очень много интерактивных элементов. В коде я их прогоняю циклом, собирая с помощью querySelectorAll, ну и , соответственно, на каждой итерации цикла с каждым элементом работаю, Конечно, там отнюдь не миллионы элементов, но тем не менее стоит ли мне опасаться убытка производительности и когда стоит задумываться о таком кэшировании?
    – user348432
    Commented 27 июл. 2020 в 16:31

1 ответ 1

1

Поскольку в JavaScript функция является разновидностью объекта, создатели кода решили, наверное, просто сэкономить и воспользоваться самой функцией для хранилища. Альтернативы — создавать объект-хранилище в области видимости выше функции (как глобальную переменную или часть замыкания).

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

1
  • 1
    ну я имел в виду подобный вариант: codepen тут я так же подразумевал объект в зоне видимости функции
    – user348432
    Commented 27 июл. 2020 в 16:23

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.