前端时间本地化设计及实现

在业务系统中，需要实现业务的时间字段随着客户端本地环境进行变化。假如用户A在美国，用户B在中国，那么就需要使得用户A访问页面的时候，页面上的时间相关的字段是美国时区，而用户B访问时，则需要是中国时区。

有以下设计思路：

用户自行选择时区，服务器根据用户选择的时区，把时间字段格式化成用户所在时区的时间；
服务端根据来源IP进行格式化处理；
客户端接收RFC标准或者IOS标准的时间字串，并通过new Date().toLocalString()进行格式化显示；

方案1和方案2对于服务端的开销较大，在适用性方面，对于API接口的处理较为容易，但对于返回页面的接口不太友好，因此重点讨论方案3。

首先考虑到前端构造时间的问题，根据MDN对于Date构造函数的描述，可以接收符合RFC2822和IOS8601格式的字符串，因此首先需要保证的是服务器返回的时间符合这两个标准中的任意一个。从兼容性最大角度出发，优先考虑使用RFC2822。对于接口返回的数据，前端只需要在JS中使用Date对象格式化后覆写原字段即可。对于接口返回的页面，那么就需要找到哪个元素节点的时间值需要被格式化。因此，定义需要格式化的元素统一加上datetime的类属性，这样可以通过js搜索到这些这些元素，然后使用Date对象格式化后覆写innerText即可。需要注意的是，确保元素节点内仅包含时间值。

function localDatetime(v) {
    const date = new Date(v)
    if (isNaN(date.valueOf())) {
        return v
    }
    return date.toLocaleString()
}

(() => {
    const elements = document.querySelectorAll(".datetime")
    for (const e of elements) {
        e.innerText = localDatetime(e.innerText)
    }
})()

评论