源码共读 - grid-layout-plus
grid-layout-plus是一个支持拖动、重新设置大小的网格布局组件。它的代码是在vue-grid-layout的基础上修改的，而 vue-grid-layout 又是参考 gridster.js 和 react-grid-layout。我们这里之所以讲 grid-layout-plus 是因
...
Canvas系列（21）：多边形碰撞检测
发表于
|
分类于
Canvas
之前的文章我们做过写过一篇碰撞检测的文章，那篇文章中我们简绍了，圆与圆的碰撞检测，长方形与长方形的碰撞检测，以及圆与长方形的碰撞检测。本章我们来介绍多边形与多边形的碰撞检测。
多边形类结构我们先定义一个多边形的类，方便以后操作。
1234567891011121314151617181920212
...
Canvas系列（20）：画布中画满圆
发表于
|
分类于
Canvas
今天的内容比较简单，我们学习如何在画布中画满圆。要求圆与圆之间不能相交，最终效果如下。
HTML结构首先我们先展示我们基础的HTML结构。
12345678<style type="text/css"> #canvas{ background:
...
Canvas系列（19）：实战-五彩纸屑
发表于
|
分类于
Canvas
上一节我们学习了如何通过 Canvas 来实现烟花效果，这节我们学习另一种效果 —— 五彩纸屑。具体效果如下：
功能设计
如上图所以，要实现五彩纸屑效果，需要在屏幕左右两侧向上发射粒子。上一节，我们放烟花时也发射了粒子，这里可以继续复用上节课粒子相关代码。上一节我们绘制的是圆形，这节课通过最终效
...
Canvas系列（18）：实战-烟花效果
发表于
|
分类于
Canvas
今天我们来学习 Canvas 的一个经典案例 —— 烟花效果，具体效果可以看下图。本章的内容会涉及之前的加速度和速度相关的知识，如果对这部分不太了解的建议先看其他章节。
画一个点Canvas效果往往需要我们去逐帧观察，烟花效果也一样。我们先看单个烟花，在不考虑拖尾的情况下，烟花先往上飞，飞行过程
...
一文看懂TypeScript工具类型
发表于
|
分类于
JavaScript
TypeScript 的工具类型，也被称作类型体操。通过本文你就知道这些工具类型的原理，并可以自己写出一些工具类型。在学习工具类型之前，我们先学学工具类型所用到的基础知识，当基础知识掌握牢固后，看懂工具类型自然水到渠成。
基础知识泛型我们先看一个泛型的例子：
12345678function ide
...
TypeScript一些知识点
发表于
|
分类于
JavaScript
区域注释TypeScript 可以添加区域注释，可以让VS Code等编辑器识别为一个代码区域，区域注释使用的是单行注释语法：
1234//#region 区域描述let x = 0;let y = x + 1;//#endregion
运算符空值合并运算符1a ?? b
如上，当 a 为 un
...
源码共读-Redux
发表于
|
分类于
源码共读
Redux是优秀的状态管理库，本节我们学习一下Redux源码，由于Redux源码是TypeScript写的，为了方便学习，本节去掉一些类型定义，转化为JavaScript来展示，另外对于错误信息我们这里就先不处理了。
使用Redux官方示例：
1234567891011121314151617181
...
H5 history API
发表于
|
分类于
JavaScript
对于JS中history对象我们最常用的就是back()、forward()、go()三个方法，H5新增了pushState()和replaceState()用来无刷新页面来更新URL地址，本章所说的H5 history API也指的是这两个方法。
H5 history API浏览器兼容情况请看这里
...