Evelynzzz

以下又是一篇学习笔记。 history 是一个第三方库，用来兼容在不同浏览器、不同环境下对历史记录的管理，封装了浏览器内置的 History API 和 Location API。 特点：适用高版本浏览器。 技术：利用HTML5里面的history。 前进：使用 pushSta…

函数式编程（Functional Programming）是一种编程范式（programming paradigm），也就是基于一些原则来编程。面向对象编程（Object Oriented Programming）和过程编程（Procedure Programming）也都是编…

在一个 function 组件中使用 echarts 生成图表。大概思路如下: 这时候 Linter 会提示需要把 option 加到 effect 的依赖列表里面。加进入之后呢？Linter 又会提示，对 option 变量的依赖会导致每一次渲染时都会触发 effect，建议…

在一个 Function 组件中，使用 Ant Design 的组件 Form，实现搜索关键字的功能。主要代码如下： 每一次输入框的内容改变，getData 就会被调用，于是频繁发送请求。正常是希望输入完成之后，点击“搜索”按钮或者输入回车再发送搜索请求。getData 中使用…

这篇文档将通过一个 demo，介绍 React 几个 Hook 的使用方法和场景。包括： 阅读此文档之前，建议先仔细阅读 React 官网文档中的 Hooks 部分。感兴趣的话，当然也强烈建议看看 Dan Abramov 在 React Conf 2018 上介绍 Hook 的…

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。 配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新…

在配置 Webpack 时，需要区分用于开发模式还是生产模式。比如我们只需要在生产模式时压缩 CSS；而在开发模式的时候，我们又希望生成 Sourcemap 便于调试，以及样式热更新。那么，怎么在 webpack.config.js 中判断开发、生产模式呢？ webpack.c…

之前用D3制作图表是初次接触SVG，当时只顾感叹D3的强大了。后来当看到网站 Serio Verify 的时候，才意识到SVG用于制作可交互的页面动画是多么有意思。 于是自己也尝试在HTML页面中制作了一个鼠标滚轮控制的SVG线条动画，具体的效果是，随着滚轮的滑动，线条一点点出…

圆弧末尾有一个竖线，作为仪表盘的指针，在仪表盘数值变化时，有一个弹性的动画效果。 一开始，我是用 Echarts 来实现仪表盘，但是它无法满足上面的两点需求。所以后来改成用D3.js。 D3.js可以完美地实现图表的定制，从细节上，完美地满足我们的需求。 创建一个 arc 方法…