如何将批量变量传入JavaScript函数实现便捷访问？

1. 命名空间对象封装（兼容所有环境） #

创建一个全局命名空间对象，把所有复选框的状态统一管理，用getter属性保证每次拿到的都是实时状态：

// 在所有JS文件加载前定义这个全局对象
window.PackChecks = {
  get highSchool() {
    return document.getElementById('highSchoolPack').checked;
  },
  get forRent() {
    return document.getElementById('forRentPack').checked;
  },
  get horseRanch() {
    return document.getElementById('horseRanchPack').checked;
  },
  get growingTogether() {
    return document.getElementById('growingTogetherPack').checked;
  },
  get cottageLiving() {
    return document.getElementById('cottageLivingPack').checked;
  },
  // 按这个格式补全剩余选项
};

之后任何JS文件里的函数，直接访问这个对象的属性即可：

function someFunction() {
  if (PackChecks.highSchool && PackChecks.cottageLiving) {
    // 执行你的业务逻辑
  }
}

既不用重复写DOM查询，也不用传一堆参数，getter会在每次调用时重新获取最新状态，不会有缓存过期的问题。

2. ES6模块（推荐，无全局污染） #

如果项目支持ES6模块，创建专门的状态管理文件（比如packChecks.js）：

// packChecks.js
export const PackChecks = {
  get highSchool() {
    return document.getElementById('highSchoolPack').checked;
  },
  get forRent() {
    return document.getElementById('forRentPack').checked;
  },
  // 补全剩余选项
};

在需要的JS文件里直接导入使用：

// 其他业务JS文件
import { PackChecks } from './packChecks.js';

function anotherFunction() {
  if (PackChecks.snowyEscape) {
    // 逻辑处理
  }
}

这种方式不会污染全局作用域，代码结构更清晰，适合现代前端项目。

3. 实时缓存状态（适合频繁访问场景） #

如果担心重复查询DOM影响性能，可以监听复选框的change事件，实时更新缓存的状态对象：

// 初始化状态缓存对象
const PackChecks = {
  highSchool: false,
  forRent: false,
  horseRanch: false,
  // 补全所有选项的初始值
};

// 批量绑定事件并初始化状态
const packIds = [
  'highSchoolPack',
  'forRentPack',
  'horseRanchPack',
  'growingTogetherPack',
  // 补全所有复选框ID
];

packIds.forEach(id => {
  const element = document.getElementById(id);
  // 初始化状态
  const propName = id.replace('Pack', '');
  PackChecks[propName] = element.checked;
  // 监听变化实时更新
  element.addEventListener('change', () => {
    PackChecks[propName] = element.checked;
  });
});

// 挂载到全局供其他文件访问
window.PackChecks = PackChecks;

之后访问PackChecks的属性就是最新的缓存状态，不用每次查询DOM，性能更优。

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