为何使用函数而非直接变量引用DOM元素？JS学习疑问

Great question! Let's unpack the key differences between these two patterns and when each makes sense in your JavaScript code.

Core Difference: Execution Timing & Caching #

The biggest distinction boils down to when the DOM query runs and whether the result is cached:

• Direct assignment: const navItems = document.querySelectorAll("nav li");
  This runs immediately when the line of code executes, storing the resulting NodeList in navItems permanently. If your DOM later changes (e.g., you add/remove nav items dynamically), navItems will still hold the original collection—it won't update automatically.
• Function wrapper: const navItems = () => document.querySelectorAll("nav li");
  This doesn't run the DOM query until you call navItems(). Every time you invoke the function, it re-runs the query and returns the current state of the DOM. So if nav items are added or removed later, you'll get the latest collection each time.

When the Function Approach is Preferable #

The function style shines in specific scenarios:

• Dynamic DOM environments: If your page modifies nav items after initial load (e.g., filtering, async data loading, user interactions), wrapping the query in a function ensures you always get up-to-date elements. No more dealing with stale cached NodeLists.
• Modular/reusable code: If you need to fetch nav items in multiple places, putting the query in a function avoids repeating the selector string. You can even move this function to a utility module for cleaner code organization.
• Functional programming practices: If you're leaning into functional JS, wrapping side effects (like DOM queries) in functions aligns with principles of avoiding global state and keeping operations predictable.

When Direct Assignment is Better #

Don't dismiss direct assignment—it's still the right choice in many cases:

• Static DOM: If your nav items never change after page load, querying once and caching the result is more efficient. Re-running the query every time would be unnecessary overhead.
• Frequent access: If you need to interact with navItems multiple times (e.g., adding event listeners, looping through items), using a cached value avoids redundant DOM queries, which are relatively expensive operations.

Bonus: Hybrid Optimization #

If you want the best of both worlds—fresh results when needed, but without redundant queries—you can add caching logic to the function using a closure:

const getNavItems = (() => {
  let cachedItems;
  // Optional: Track if DOM has changed (e.g., via a mutation observer)
  let domChanged = true;

  return () => {
    if (!cachedItems || domChanged) {
      cachedItems = document.querySelectorAll("nav li");
      domChanged = false;
    }
    return cachedItems;
  };
})();

This way, you only re-run the query if the cache is empty or you've detected a DOM change.

Final Verdict #

There's no universal "better" style—it depends on your use case. The function approach is more flexible for dynamic UIs, while direct assignment is more efficient for static content. The key is to match the pattern to how your DOM behaves!

内容的提问来源于stack exchange，提问作者quenn