深入分析Date构造函数问题及解决方法

问题描述 近期在封装时间选择组件的单元测试时,为了构造出Date对象,直接使用了默认Date构造函数, 自己本地开发,测试均无问题,push远程后,某个小伙伴在本地跑测试用例时,却无法通过,具体报错截图如下 通过截图信息,可以初步判断由于Date构造函数返回了不同日期导致,抱着好奇的态度查阅个各种资料后,竟然发一个小小的一个日期构造函数里面大有文章,平时自己写起来都是浅尝辄止,没有深入了解过,下面详细的介绍这个破案过程,以免各位看客后续重蹈覆辙。 问题排查 问题重现 按照一贯做法,出问题后先自己本地跑了一次测试用例,没有任何问题,初步就可以定位是开发环境问题,于是乎就看了下小伙伴nodejs版本号,版本号为6.10.0,而自己本地node版本号为10.3.0,于是直接在不同nodejs命令行下直接执行如下测试用例

执行结果 Node 6.10.0 执行结果 Node 6.10.0

Node 10.3.0

到此基本确认了改问题是有Nodejs环境问题,但是为什么会有这样的问题呢,跟着我继续深入探秘下Date构造函数 深入分析 结合问题,提炼出以下小示例,以供深入分析Date构造函数

nodejs 10.3.0执行结果

nodejs 6.10.0执行结果

为什么在不同环境下Nodejs的解析行为不一样的,这就提下JS中涉及到时间的相关规范了 相关规范 ISO8601标准[参考5] 该标准指定了如果为指定偏移时间就默认为当前时间, [ES5 规范][参考6] 指出了如果没有指定偏移量,默认偏移量为Z [ES6 规范][参考7] 为了和ISO8601标准一致,又对该规范做了更改,如果时区偏移量不存在,日期时间将被解释为本地时间。 源码分析 为了确认改问题由于不同规范导致,我们就需要看下V8源码里面看下的实现了。 获取不同node版本对应的v8版本号,如下图所示

查看 v8 的不同版本下git提交记录可看到在6.6版本上已经增加了对ES6规范的支持 ,实现了如果时区偏移量不存在,日期时间将被解释为本地时间。 问题总结 回头看文章开头的用的日期构造函数导致的bug,就可以解释为什么”1995-12-17T00:00:00″ 在低版本下输出1995-12-17T08:00:00,而高版本下输出1995-12-17T00:00:00? 通过上述规范和源码,低版本由于会加默认偏移量Z,默认就解析成0时区的时间,而我们在东八区,所以最终我们本地的时间是1995-12-17T08:00:00,高版本下由于没有Z,默认会解析成本地时间,输出结果最终就是1995-12-17T00:00:00。 问题解决方案就是只需要加上时间偏移量即可,如下new Date(‘1995-12-17T03:24:00+08:00’)。 经验教训 由于浏览器的差异和不一致,强烈建议不要 使用Date构造函数解析日期字符串(并且Date.parse它们是等价的)。 […]

Flutter 初体验

初识 Flutter 还是在上个月的 GMTC 大会上。来自 Google 的工程师现场演示了如何使用 Flutter 构建美观、高性能的移动应用。个人对其中一些特性,比如良好的开发者体验、优秀的跨平台能力很感兴趣。于是决定在会后亲自体验一下。 最近几天尝试使用 Flutter 把京东 APP 中的排行榜频道的首屏布局实现了一下,算是对基于 Flutter 的开发有了一个最简单的了解,特地记录一下,方便其他想了解、尝试 Flutter 框架的小伙伴。 首先看看我实现了一个什么样的界面: 接下来让我们从不同方面说说 Flutter 的开发。 Flutter 开发环境搭建 安装 Flutter 不同平台的安装流程基本一致,这里就以 macOS 为例。首先下载 flutter macOS 版,并解压。 把 Flutter 的 bin 目录添加到系统 PATH 中:

提示:记得把这行代码放到你的 shell 启动脚本中,避免每次都要手动执行。 路径添加完成后就可以执行 flutter 命令啦。 Flutter 提供了一个 flutter doctor 命令协助我们安装 Flutter 的依赖。它会检查本地是否有 iOS 和 […]

webpack 4.0.0-beta.0 新特性介绍

近年来前端技术如雨后春笋般蓬勃发展,我们也在这个潮流下不断地学习、成长。前端技术的不断发展,给我们提供了许多的便利。例如:JSX的出现为我们提供了一个清晰、直观的方式来描述组件树,LESS/SASS的出现提高了我们书写css的能力,AMD/CommonJS/ES6 的出现为我们模块化开发提供了便利。然而,我们需要使用其它工具将这些工具转化成原生语言以运行在浏览器上。为了能够更好的将这些不同的资源整合到一起,我们就需要一个打包工具,webpack就是这个需求下的产物。 webpack 可以看做是模块打包机。它做的事情是:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。目前,webpack 总共发布了三个稳定版本。从17年八月底开始,经历了长达五个月的开发周期,webpack 团队通过增加大量新特性、bug修复、问题改善并于近期发布了 webpack 4.0.0 的 beta 版本。如果你对 webpack 感兴趣,下面我们就来学习一下 webpack 4.0.0-beta.0 的新特性。 P.S. 以下所有代码演示代码都是基于 webpack 4.0.0-beta.0。 1、安装webpack v4.0.0-beta.0 如果你使用yarn:

如果你使用npm:

2、webpack 4.0.0.beta.0 新特性介绍 下面是一些你肯定会感兴趣的新特性。如果阅读完本章后还觉得不过瘾,你可以再这查看完整的changelog。 本章将从以下几部分来介绍 webpack 4.0.0-beta.0。 2.1 环境 webpack 运行环境升级。已经不支持 Node.js 4 版本。源码升级到更高的 ECMAScript 版本。 根据 webpack package.json 配置中显示 Node.js 最低支持版本:”node”: “>=6.11.5” 2.2 模块 webpack 模块类型及 .mjs 的支持: […]

© 2018 JDC. All Rights Reserved.