网页多时区实时时间显示的JavaScript代码优化咨询

问题背景 #

你已经搞定了GMT/BST、CET、EST、PST四个时区的实时时间显示，还解决了之前只有第一个时间动态更新的问题。现在想精简代码——因为除了timeZone，其他配置全一样，想问有没有更优写法，或者当前写法是不是也能用。

当前写法的可行性 #

当前写法完全没问题，逻辑直白，每个时区的配置独立，要是以后想单独改某个时区的参数（比如调整显示格式或locale），直接改对应变量就行。但重复代码太多，确实能优化得更简洁。

优化方案 #

核心思路 #

把所有时区共享的配置抽成一个基础模板，然后用数组存每个时区的差异化信息（元素ID、时区标识、对应的locale），最后通过循环统一处理时间更新逻辑，大幅减少冗余代码。

优化后的代码 #

JavaScript部分

// 所有时区共享的基础配置
const baseOpts = {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
    timeZoneName: 'short'
};

// 每个时区的差异化信息：元素ID、时区、对应locale
const timeZoneConfigs = [
    { elementId: 'timeGMT', timeZone: 'Europe/London', locale: 'en-GB' },
    { elementId: 'timeCET', timeZone: 'Europe/Amsterdam', locale: 'en-GB' },
    { elementId: 'timeEST', timeZone: 'America/New_York', locale: 'en-US' },
    { elementId: 'timePST', timeZone: 'America/Los_Angeles', locale: 'en-US' }
];

// 提前获取所有DOM元素并组装好配置，避免每次更新重复查询DOM
const timeItems = timeZoneConfigs.map(config => ({
    element: document.getElementById(config.elementId),
    displayOpts: { ...baseOpts, timeZone: config.timeZone },
    locale: config.locale
}));

const updateTimes = () => {
    const now = new Date(); // 只创建一次Date实例，提升性能
    timeItems.forEach(item => {
        item.element.textContent = now.toLocaleString(item.locale, item.displayOpts);
    });
};

updateTimes();
setInterval(updateTimes, 1000);

HTML部分（无需修改）

<p class=sidebar__time>
<span id="timeGMT"></span>
&nbsp; — &nbsp;
<span id="timeCET"></span>
&nbsp; — &nbsp;
<span id="timeEST"></span>
&nbsp; — &nbsp;
<span id="timePST"></span>
</p>

优化点说明 #

• 减少重复代码：用baseOpts统一共享参数，只在数组里定义每个时区独有的timeZone和locale
• 提升性能：提前获取所有DOM元素，避免定时器每次触发都重复查询；只创建一次Date实例，减少不必要的对象创建
• 扩展性更强：以后要加新时区，只需在timeZoneConfigs数组里加一条数据就行，不用重复写变量和赋值逻辑
• 维护更方便：代码更简洁，要是要改所有时区的共享配置（比如把hour12改成true），直接改baseOpts就行，不用挨个改四个配置对象

总结 #

当前写法完全能正常运行，但优化后的代码在冗余度、性能和扩展性上更优。如果后续不需要频繁单独调整某个时区的配置，推荐用优化后的方案；要是想保留每个时区配置的独立性（比如未来可能单独改某一个的显示格式），当前写法也完全可行。

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