在JavaScript中存储HTML元素引用的通用开发规范是什么？

首先明确：不需要创建全局变量就能实现该需求，原生JS有多种更安全、不会污染全局命名空间的通用实现方式，具体如下：

方案1：IIFE闭包作用域（无模块化场景首选） #

将所有业务代码包裹在立即执行函数中，在IIFE顶层声明DOM元素变量，所有内部定义的函数都可直接访问这些变量，变量仅在闭包内生效，不会泄露到全局作用域。

// app.js 整体代码包裹IIFE
(function() {
  // 闭包顶层声明的元素变量，所有内部函数均可访问
  const someEl = document.getElementById('some-element');
  const submitBtn = document.getElementById('submit-btn');

  function handleSubmit() {
    someEl.textContent = '提交成功';
  }

  submitBtn.addEventListener('click', handleSubmit);
})();

如果有少量方法需要暴露给全局调用，仅手动挂载需要暴露的内容到window即可，其余变量全为私有。

方案2：ES6模块顶层作用域（模块化场景首选） #

如果项目使用ES6模块（引入script时添加type="module"属性），模块的顶层作用域本身就是模块私有的，直接在顶层声明元素变量即可，模块内部所有函数都能访问，不会污染全局。

// app.js 作为ES6模块使用
const someEl = document.getElementById('some-element');
const listEl = document.getElementById('list');

export function renderList(data) {
  listEl.innerHTML = data.map(item => `<li>${item}</li>`).join('');
  someEl.classList.remove('hidden');
}

方案3：单一全局对象挂载（多文件共享场景可选） #

如果没有使用模块化，且需要在多个JS文件之间共享元素引用，仅创建一个全局对象挂载所有内容即可，比声明多个全局变量的命名污染风险小很多。

// 全局仅暴露一个自定义对象，所有内容统一挂载
window.MY_APP = window.MY_APP || {};
// 存储所有常用DOM元素
MY_APP.dom = {
  someEl: document.getElementById('some-element'),
  modalEl: document.getElementById('modal')
};

// 任意JS文件中都可以通过MY_APP.dom访问对应元素
function openModal() {
  MY_APP.dom.modalEl.classList.add('show');
}

注意事项 #

• 必须等DOM加载完成后再执行元素获取逻辑，否则会拿到null。可以将JS代码放在body标签末尾，或者监听DOMContentLoaded事件后再初始化元素存储。
• 存储元素变量优先使用const声明，避免意外修改变量指向。

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