React中为什么最好不要用数组的index作为key

当你在写或者在读别人渲染列表的React代码的时候,很容易看到使用index作为Key的情况,这看起来不错,还可以避免React的Key Warning。但是,这样做却是最常见的React错误之一,至少它很危险!...
2 months ago
217 1 0

理解 JavaScript 中的 microtasks 和 macrotasks(微任务和宏任务)

如果一段JavaScript代码中包含了setTimeout几乎所有的前端同学都知道其代码会被延迟(异步)执行,但是如果代码中同时出现了setTimeout、await以及Promise resolve的话大家还能说出来他们的先后执行顺序么?...
5 months ago
426 1 0

配置全局.gitignore文件

很多时候,在审查代码的时候,会看到.gitignore文件中新增加了一些开发者自己的环境变量比如 .vscode,.vscode是vscode的配置文件,如果所有人都把自己的环境/编辑器配置放到.gitignore中的话,就会导致.gitignore文件很长很难维护。为了保持项目的干净整洁,我们有什么办法解决么?...
6 months ago
339 3 0

如何使用Canvas实现一个时间控件

前段时间在一个分享上提及到了我们的时间穿梭控件,分享之后很多同学在Github的Issue中留言想了解该控件的具体开发过程,利用周末的时间将该控件单独重新写成一个Demo,和大家分享一下具体的技术实现细节。 重新整理的控件开源在Github上 [https:...
2020-03-22
1435 5 0

从地图看疫情

前段时间我们发布了一张可以动态展示全球新型冠状病毒疫情趋势的地图,这张图经过N个版本的迭代,结合了来自东西方灵感的碰撞,最终形成了目前大家看到的还算令我们满意的一个版本。今天和大家谈谈开发这张地图背后的故事:我们想通过地图表达什么以及我们通过哪些技术方案让疫情地图得以实现。...
2020-02-23
3587 3 0

从零开始做点阵地图

最近有不少人看到我放在个人主页上的地图之后,问我是怎么做的或者是用了什么插件。 这张地图最早诞生在几年前的一次博客改版,当时是想把我去过...
2019-08-30
3171 14 0

JavaScript数字前补0小技巧

经常处理财务数据的朋友可能会遇到这样一个需求:给定一个数值,转换成固定的长度的字符串,不足的地方前面补零,比如 123 = 000123。 通常我们会尝试这样的做法: let num = 123; 把数值转换成字符串 let numStr = num.toString(); let strLen = 5; 计算差几个空缺的0 let spac...
2019-01-10
2295 4 230

使用Travis-ci自动SSH部署代码

之前文章谈代码质量控制的时候说过,Travis-ci等持续集成工具可以帮助我们在代码提交之后进行单元测试之类的工作,那么有没有什么办法在单元测试之后让代码自动部署到我们需要的机器上呢?答案是完全可以。今天以我自己的博客为例和大家谈谈我的自动部署之路。 1. 从手动部署到自动部署 在整个代码部署的道路上,我经历了...
2018-12-27
3964 4 0

像大神一样写代码之代码质量控制

Mofei超爱开源,最近接触了不少大神的开源项目,特别羡慕这些项目的代码质量控制,再加上公司最近也在强调代码质量,在挖坑、填坑的路上总结出一些经验和大家分享。 今天想聊的是其中的持续集成、单元测试和代码覆盖率的部分。 ![article image from 'zhuwenlong.com'](https:static.zhuwenlong.comuploadimage154...
2018-11-13
3608 8 1

Web APP/JavaScript 下载大文件解决方案

随着浏览器处理数据能力的不断增强以及Web APP的流行,很多时候我们会需要把浏览器处理好的数据下载保存,如:将报表生成CSV、前端大数据可视化的结果保存、前端数据计算结果(在线Excel)的保存等。 关于前端生成的文件的下载,我之前也在《[JavaScript生成CSV,以及中文乱码问题](www.zhuwenlong.comblogarticle599c2a21f21d525b...
2018-07-13
7759 11

mapv-Editor 预发布版简介

<iframe height=498 width=800 src='https:player.youku.comembedXMzE4MDYwMjc0NA==' frameborder=0 'allowfullscreen'<iframe mapv-Editor是一个基于mapv引擎的一款在线编辑器,目前还...
2017-11-29
2828 4 5

使用JavaScript Canvas模拟绘制带斑马线的十字路口及其细节

最近,在工作中需要模拟绘制一些带斑马线的十字路口,整个实现的过程中用了不少的时间,把具体的绘制过程简单的记录一下。 首先我们看一下手上有哪些数据,在下图中,左边就是我们能拿到的全部数据了。而右边的效果则是我们需要的图形。 ![https:static.zhuwenlong.comuploadimage1509690126944-20171103-1.png?imageView...
2017-11-06
3941 7 203