循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。 欧了，勉强就是它了。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。 有内味了，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总…

P.S. 本文同时适用于：使用webpack打包的项目。 俗话说得好，引用依赖一时爽，一直引用一直爽。 在开发项目的过程中，我们往往需要引用到大量的第三方模块(node modules)。确实，通过引用第三方模块，能大大的简化开发的过程，提高工程质量。但难免的，也带来了“体积”…

对于中大型前端项目，项目规范与代码质量尤为重要。当功能需求变更或需要重构时，随心所欲的(糟糕的)代码可能带来比重新开发还麻烦的问题。 这个问题不用作过多阐述，想必接手过他人代码的同学，多少都有些体会。简单来说，太过随意的代码会让强迫症患者难以容忍，难以阅读理解的代码有时甚至不如…

这份文字是根据近期团队做 来问丁香医生 SPA 和 丁香医生小程序 加载速度优化的经历整理而成。 古人有一句话叫做：治感冒看疗效。既然是关于速度优化的，我们就先来看一下优化的效果。 选取了访问量较大的首页和我的页面进行随机取样，通过下图可以看到首页的加载时间从 5.1s 下降到…

同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。 代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。 使用扩展运算符（...）拷贝数组。 需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更…

有项目开发经验的童鞋都应该知道，开启一个新的项目，不是上来就开始敲代码的，而是应该有一个约定俗成的流程。 要配置一个能跑起来的工程，目前来说是离不开webpack。 webpack可以帮我们做很多事情，比如如何编译jsx文件、如何处理图片等静态文件、如何打包、如何做前端优化等等…

前端经常需要处理日期时间的格式，自己调 Date api 做转化大概率会遇到兼容性的坑，原因是不同浏览器的 js 引擎对标准的实现不同。 业务中最好的选择是用 date-fns、moment、day.js 这类成熟的方法库。 如果发现业务代码里存在大坨大坨日期字符串解析、转换、…

上一篇讲了一些webpack基础的配置，从这节开始正式构建项目，拿来做演示的是一个移动端项目，淘宝上买的设计图，计划做成一个多模块，模块单独建立和维护，模块间的升级和改造互不影响，但保持项目代码风格、UI风格的统一。 根据生产环境和开发环境的差异，需要将webpack的配置文件…