现在，用户对于前端页面的要求已经不能满足于实现功能，更要有颜值，有趣味。除了整体 UI 的美观，在合适的地方添加合适的动画效果往往比静态页面更具有表现力，达到更自然的效果。比如，一个简单的 loading 动画或者页面切换效果不仅能缓解用户的等待情绪，甚至通过使用品牌 logo…

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

mock.js 可以模拟 ajax 数据，拦截 ajax 请求，返回模拟数据。在数据格式已经确定的情况下，无需后端返回就可以测试前端程序。

接上一篇文档学习，我采用json-server模拟服务器API的方式在项目中模拟数据，实现前后端分离。此文档是以 json-server 作为 mock 服务器， mock.js 生成mock 数据，针对自己项目的情况接入json-server的过程总结。 项目目前情况：同一个…

mock.js是一个模拟数据生成器，帮助前后端分离。它可以根据数据模版生成模拟数据，模拟Ajax请求，生成随机数据返回。 3. 模板语法 Mock.Random 是一个工具类，用于生成各种随机数据。 Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符…

一个月前，React 官方正式发布了 v16.3 版本。在这次的更新中，除了前段时间被热烈讨论的新 Context API 之外，新引入的两个生命周期函数 getDerivedStateFromProps，getSnapshotBeforeUpdate 以及在未来 v17.0 …

React 其实只是一个 UI 框架，频繁进行 DOM 操作的代价是很昂贵的，所以 React 使用了虚拟 DOM 的技术，每当状态发生改变，就会生成新的虚拟 DOM 并与原本的进行改变，让变化的地方去渲染。并且为了性能的考虑，只对状态进行浅比较（这是一个很大的优化点）。 Re…

14. 多行字符串 但是有一种更简单的方法。只需使用反引号。 15. 展开(spread)操作符 ES6中引入的展开运算符有几个用例，可以使JavaScript代码更高效，更有趣。它可以用来替换某些数组函数。展开操作符只是连续的三个点。 与 concat() 函数不同，您可以使…

设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、Antd、iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理。 我们在学习设计模式的时候会遇到很多种设计原则,其中一个设计原则就是单一职责原则,在组…