Welcome to Bonza's Blog!
编码征途路漫漫，填坑旅行述辛酸！-
React Hooks 系列之1 useState
本系列将讲述 React Hooks 的使用方法，从 useState 开始，将包含如下内容：
掌握 React Hooks api 将更好的帮助你在工作中使用，对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示，非常易于初学者和复习使用。
前提，需要会使用 React Class 的写法，会使用
setState()和 props。下面从第一个例子开始吧。
-
队列在前端弹窗中的应用
前端开发中，如果遇到复杂的交互逻辑，数据结构的知识将帮助你理清思路，抽象逻辑，完成稳定可靠的逻辑代码。
本文就讲讲我在开发弹窗时加入的队列数据结构，也许有人疑问弹窗不是很简单吗，还需要引入队列？其实在复杂交互中，特别是互动类的界面中，很容易就会有超过 10 个弹窗对话框，万一同时被触发时，逻辑就会混乱，我们希望一个接一个的方式弹出，这里就需要队列了。
-
vscode 插件 markdown-schedule-snippet
起因
不知道大家是怎样安排自己的日常计划的，我习惯是建立一个仓库，按照年/周记录在 markdown 里，平时这个仓库也写点简单的 demo，目录类似如下：
week ├── 2016 ├── 2017 ├── 2018 │ ├── 20180102.md │ ├── 20180108.md │ ├── 20180115.md │ ├── 20180122.md │ ├── 20180126.md │ ├── ... │ ├── ... │ ├── ... │ ├── 20181007.md │ ├── pixi.md │ ├── schedule.md │ ├── temp.css │ ├── temp.html │ ├── temp.js │ ├── temp.json │ └── temp.md ├── package.json └── yarn.lock
-
从设计师和开发的角度使用 lottie
简介
lottie 是一个可以轻易的给各种 native app 添加高质量动画的类库。可以在 iOS、Android 和 React Native 实时渲染 After Effects 动画，就像使用静态图片一样容易。上图即为 lottie 的 logo。
简单的说，lottie 动画制作的流程是，通过 Bodymovin 扩展将 AE 动画导出为 json 数据，然后再将这个 json 渲染在客户端或者 web 端。如下图：
-
提升用户体验的前端动画
与其他开发人员不同的是，前端开发都是在端上游走舞者，直接与用户交流沟通，这就需要前端开发具有更敏锐的交互体验思考，或者能更精准地理解设计师们意图，将最佳的用户体验带给用户。优质的交互体验对于用户来说学习成本应该是极低的，都是非常自然的操作，却可以让用户感到畅快愉悦，甚至惊喜。本文将通过一个看似简单的 poplayer 来分析我在这其中通过思考做的体验优化，获得类似 native 的体验感。
-
前端如何写一个精确的倒计时
关于写倒计时大家可能都都比较熟悉，使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题，但是如果是长时间的倒计时，这样写就会不准确。如果用户修改了他的设备时间，这样的倒计时就没有意义了。今天就说说写一个精确的倒计时的方法。
-
使用 JavaScript 创建并下载文件
本文将介绍如何使用 JavaScript 创建文件，并自动/手动将文件下载。这在导出原始数据时会比较方便。
先上代码
/** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */ function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); var blob = new Blob([content]); aTag.download = fileName; aTag.href = URL.createObjectURL(blob); aTag.click(); URL.revokeObjectURL(blob); }很简单对吧，直接调用这个方法，传入文件名和文件内容，程序新建 a 标签，新建 Blob 对象，将文件名赋给 a 标签，同时将 Blob 对象作为 Url 也赋给 a 标签，模拟点击事件，自动下载成功，最后再回收内存。下面我们来看看具体是怎么操作的。
-
Fisher–Yates shuffle 洗牌算法
简单来说 Fisher–Yates shuffle 算法是一个用来将一个有限集合生成一个随机排列的算法（数组随机排序）。这个算法生成的随机排列是等概率的。同时这个算法非常高效。
本文主要介绍这个算法的来源、演变、原理。并举出一个例子为大家清晰的描述每次迭代过程。最后使用 JavaScript 代码将算法实现。
-
Git 如何 clone 非 master 分支的代码
问题描述
我们每次使用命令
git clone git@gitlab.xxx.com:xxxxx.git默认 clone 的是这个仓库的 master 分支。如果最新的代码不在 master 分支上，该如何拿到呢？如下图所示，最新的代码可能在
daily/1.4.1分支上，我们希望拿到这个分支上的代码。
-
如何使用 babel
Babel 用于将 ES6 的代码转化为 ES5，使得 ES6 可以在目前的浏览器环境下使用。学习使用 babel 是为了使用 ES2015 做准备。本文将介绍如何使用 babel，以及一些相关的配置。