如果笔记

如果笔记

做有价值的技术笔记

性能优化系列1:一种你没见过的时间格式化方法

对前端JS来说,需要格式化时间的场景是很常见的,时间格式化也不难,一搜一大把。但本文会介绍一个新创的你以前没见过的方法,虽然技术点不大不难,但更多的意义是在于实践性能优化的思路吧

对前端JS来说,需要格式化时间的场景是很常见的,时间格式化也不难,一搜一大把。但本文会介绍一个新创的你以前没见过的方法,虽然技术点不大不难,但更多的意义是在于实践性能优化的思路吧。 先简单说下什么是时间格式化,就是把以秒或毫秒为单位的时间格式化成方便人阅读的时间形势,例如“2018年11月24日”或“2018-11-24 16:06”这样的。时间格式化函数一般接受两个参数,一是要格式化的时间点,二是要格式化成的格式模板,形如“YYYY年MM月DD日”之类。 我们从网上找一种最常见的时间格式化方法,大致都类似这样: ```javascript // time是时间对象或以秒为单位的时间值 function formatTime(time, format) { if (typeof time=='number') { time = new Date(time * 1000); } var t = {}; t.YYYY = time.getFullYear(); t.M = time.getMonth() + 1; t.D = time.getDate(); t.H = time.getHours(); t.I = time.getMinutes(); t.S = time.getSeconds(); t.MM = t.M>9 ? t.M : '0'+t.M; t.DD = t.D>9 ? t.D : '0'+t.D; t.HH = t.H>9 ? t.H : '0'+t.H; t.II = t.I>9 ? t.I : '0'+t.I; t.SS = t.S>9 ? t.S : '0'+t.S; return format.replace(/\b[YMDHIS]+\b/g, function ($0) { return t[$0] || ''; }); } ``` 这种方法以“YYYY”表示4位的年份,以“MM”、“DD”表示补齐2位的月份或日,以“M”、“D”表示不补0的月份或日,以此类推时分秒。 这种方法还有什么可优化的地方呢? 可以看到,如果我们要的时间格式只是“YYYY年MM月DD日”,那么时分秒就白计算了!甚至我们只要月和日,那连年也白计算了。 > **性能优化的策略之一就是按需计算。** 所以我们应该根据传入的时间格式,来判断要计算哪些值,而不是全部计算好备用。 那么具体要如何根据传入的格式判断呢?粗略一想用一大堆if肯定可以实现,但这太粗暴,if太多不好。 思路:**我们可以把要调用的时间API放到一个对象里,然后在`format.replace`的回调里根据匹配到的标识调用对应的时间API。**这样就省去一堆if判断。 > **用对象代替if-else是一种常用的简化代码的方法。** 首先给出把时间API做成对象的代码: ```javascript const methods = { 'y': 'getFullYear', 'm': 'getMonth', 'd': 'getDate', 'h': 'getHours', 'i': 'getMinutes', 's': 'getSeconds' }; ``` 相比上面那个常见方法,我们在参数设计上也要做些优化:不用两位的格式表示需要补齐两位的时间,而是改用大写表示需要补齐,小写表示不需要补齐。 主要思路和部分代码已给出,看官们可以自己实现代码,或继续阅读最终代码(共24行)。

性能优化, JS

前端

hahaboy