1. /**
  2. * Creates a cache for DOM elements to avoid repeated DOM lookups.
  3. *
  4. * @returns {object} An object with a `get` method to retrieve cached elements.
  5. */
  6. const domCache = (() => {
  7. const cache = {};
  9. /**
  10. * Retrieves a cached DOM element. If the element is not in the cache,
  11. * it's created, cached, and then returned.
  12. *
  13. * @param {string | Element | Function} selector - The selector to identify the element.
  14. * Can be a string (e.g., 'div#myDiv'),
  15. * an existing Element, or a function that returns an Element.
  16. * @returns {Element} The cached DOM element.
  17. */
  18. function get(selector) {
  19. if (typeof selector === 'function') {
  20. return selector();
  21. }
  23. if (cache[selector]) {
  24. return cache[selector];
  25. }
  27. let element;
  29. if (typeof selector === 'string') {
  30. element = document.querySelector(selector);
  31. if (!element) {
  32. console.warn(`Element not found for selector: ${selector}`);
  33. cache[selector] = null; // Store null if element is not found.
  34. return null;
  35. }
  36. } else {
  37. element = selector;
  38. }
  41. cache[selector] = element;
  42. return element;
  43. }
  45. return { get };
  46. })();

Add your comment