做一个微信消息的日期展示

目标：观察微信收发消息的时间展示，完成一个日期转化函数

---

一：分析问题

首先观察微信消息的时间展示后提取有用信息。

1.  如果是当天收发的信息，日期显示的是小时+分钟。手机端的话又分为了凌晨，上午，下午，晚上。
2. 如果是昨天收发的信息，显示的时间为昨天+小时+分钟。
3. 如果是一周以内，两天之前，显示的时间为星期几+小时+分钟。
4. 如果是一周以后，可以显示年月日+小时+分钟。还可以细分为当前年份时只显示月日+小时+分钟，我这里没有细分。

二：解题思路

1. 得到收发消息的时间。
2. 格式化收发消息的时间。
3. 过一段时间后用当前时间减去之前收发消息的时间。
4. 判断差值，根据差值显示不同的日期格式。

三：编写代码

//一天内的时间，显示为凌晨xx：xx；上午xx：xx；晚上xx：xx
//超过一天小于两天的，显示为昨天：凌晨xx：xx；上午xx：xx；晚上xx：xx
//超过两天小于一周的，显示为星期几：凌晨xx：xx...
//超过一周的，显示几月几日：凌晨xx：xx；。。。。
const ONE_DAY =  24*60*60*1000;
const LOCAL_TIME = new Date();
const LOCAL_DATE = LOCAL_TIME.getDate();
const LOCAL_ZERO_TODAY = (LOCAL_TIME.getHours()*60*60 + LOCAL_TIME.getMinutes()*60 + LOCAL_TIME.getSeconds())*1000;//距离今天零点
const ONE_WEEK_ARRAY = ['','星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
function getFormatCommentTimeInfo(time){
    let createTime = new Date(time);
    let commentTimeInfo = {
        year : createTime.getFullYear(),
        month: createTime.getMonth()+1,
        day: createTime.getDay(),
        hour: createTime.getHours(),
        minute: createTime.getMinutes()<10 ? '0' +createTime.getMinutes() : createTime.getMinutes(),
        date: createTime.getDate()
    }
    return commentTimeInfo
}
function formatCommentTime(time){
    let diffTime = LOCAL_TIME - time;//与现在时间的差异
    const {year,month,day,hour,minute,date} = getFormatCommentTimeInfo(time);
    if(diffTime <= ONE_DAY+ LOCAL_ZERO_TODAY){
        if(date === LOCAL_DATE ){
            if(hour < 6){
                return `凌晨${hour}:${minute}`
            }else if( hour >= 6 && hour < 12){
                return `上午${hour}:${minute}`
            }else if(hour >= 12 && 18 >hour){
                return `下午${hour}:${minute}`
            }else{
                return `晚上${hour}:${minute}`
            }   
        }else {
            if(hour < 6){
                return `昨天 凌晨${hour}:${minute}`
            }else if( hour > 6 && hour < 12){
                return `昨天 上午${hour}:${minute}`
            }else if(hour > 12 && 18 >hour){
                return `昨天 下午${hour}:${minute}`
            }else{
                return `昨天 晚上${hour}:${minute}`
            }
        }
    }else if (diffTime <= (ONE_DAY * 7 + LOCAL_ZERO_TODAY)) {
        return `${ONE_WEEK_ARRAY[day]} ${hour}:${minute}`;
    } else {
        return `${year}年${month}月${date}日 ${hour}:${minute}`;
    }
}
console.log(formatCommentTime(1549530579463))

四：测试结果

多次测试，效果良好。

 五：优化代码

1. 修改命名规范。
2. 抽离相同功能代码。