无线电研究：第一回
由于个人近期的需要，准备着手研究一下无线电，所以就有了本系列，用于一些必要的记录。本文做一个开场热身。
谈及无线电就不得不提电磁波。世界是神奇的，我们都知道空气存在，但是不可见，无线电波亦是如此。任何高于绝对零度（零下273，15摄氏度）的物体，都在发射着电磁波，包括人。温度越高，波长越短。这就是测温枪的原理。想象一下，如果电磁波可见，那么这个世界会是什么样的盛况？我们看每一个人，都是大仙。电磁波的传播速度就是光的速度，30万公里/s，光也是一种电磁波。
无线电波分布在3Hz–3000GHz的频率范围内，被分成了12个波段，如下所示。
无线电特性
频率越低，波长越长，覆盖距离越远，绕射能力越强，穿透能力越低。反之亦反。这就是为什么，在城市中，常见的手持电台都是分米波，就是俗称的UV段中的U，见上图的UHF和VHF。不需要传输的有多远，但需要强悍的穿透力。但是在野外活动，基本就是V段。
电磁波的发射，需要有足够高的震荡频率。频率越高，发射电磁波的本领越大。
电磁波的接收。电磁波在空气中传播时，如果遇到导体，会让导体产生感应电流，感应电流的频率和激发他的电磁波频率一致。当接收 ...
Paperjs：view和tool事件注解
在前面介绍点类的时候，我们有提到过，tool类的实例有鼠标的各种事件，view类的实例也有相关的一些方法。但是，似乎又有些不同。本文将尽可能详细介绍
拿onMouseDown事件举例，我们分别绑定触发点击的函数事件，如下图所示：
从上图中我们能够嗅到一些信息，首先view的优先级高于tool的，且名称还是有点区别的，在view中叫做MouseEvent，而在tool中，叫做ToolEvent事件。其次，很明显，MouseEvent有的ToolEvent都有除了target，基本属于包含于的关系。下面，我们就一个个看这些属性，究竟能干嘛。
关于delta。在view的事件中delta为空，而在tool中是以一个各个属性值均为0的点实例，两者其实等价，那么这个属性是用来干嘛的？对于tool中的delta，官方解释：
The difference between the current position and the last position of the mouse when the event was fired. In case of the mouseup event, the ...
闭包详解
本文详细介绍闭包的概念、应用场景及一些坑首先搞明白什么是闭包简单说， 一个函数，能访问到它 “创建时” 所在作用域的变量，哪怕这个作用域已经执行结束，函数依然能 “抓着” 这些变量不放。react代码演示：
import { useEffect, useState } from "react";
export default function TestPage() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
const newVal = count + 1;
console.log("newVal", newVal);
setCount(newVal);
}, 2000);
return () => {
clearInterval(timer);
};
}, []); ...
Typescript备忘录
本文纯属ts的内容备忘录ts能干嘛？将弱类型的js，变为强类型的语言。举例:
const fn = (str: string) => {
console.log(str)
}
fn([1,2,3,4])
// err
示例代码中，我们声明的msg是一个数组，但是我们通过类型注解，规定fn的参数应该是一个字符串，配合一些插件工具，显示报错。
那么ts还有其他什么特性吗？
接口，一种声明的约束interface Role {
name: string,
blood: number
}
interface Role2 {
name: string,
old?: number,
readonly sex: string
}
const role: Role = {
name: 'hhvcg',
blood: 100
}
同一类似，如果role的某些字段，类型同接口定义的不一致，会报错。同时写代码的时候，有字段提示的功能。如果说需要某些字段是可选的，加？ ...
网络请求与远程资源：第一回
本系列文章主要用于介绍获取网络资源的三种方式：Ajax、Fetch和WebSocket1. Ajax（Asynchronous Javascript + XML），异步js和xml注：ajax基本被淘汰，现在基本是fetch或者axios曾经的页面及其简单。页面类似于公告栏，文字加图片。打开地址拿到资源展示即可。什么？你说你还想要点击交互？刷新页面吧。而作为上古技术的ajax的出现，第一次实现了无需刷新也能重新发送请求获取数据。提到ajax就一定会涉及到XHR（XMLHttpRequest）。下面时经典的ajax请求写法
const xhr = new XMLHttpRequest()
xhr.onreadystateChange = function() {
// 状态码4代表响应完成
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
...
工作者线程系列：第一回
本文介绍前端开发中，工作者线程相关的基础知识我们一直都说js是一个单线程语言，这话没错，但又不失完全正确。因为当今的js，已经有了开线程干活的概念。就是说，当某些运算我们呢觉得会耗时较长，严重影响应用性能时，这种操作完全可以开启一个完全独立的线程环境，扔给他一坨数据后转头执行后续任务，然后等到那坨数据被处理好后，拿到输出结果再做进一步的操作。注意：独立线程的处理和当前主线程的执行可以理解为并行的。
官方定义：使用工作者线程，浏览器可以在原始页面环境之外，再分配一个完全独立的二级子环境。这个子环境不能与依赖单线程交互的API互操作（如dom）。但可以与父环境并行执行代码。
工作者线程:目下包含了三种
专用工作者线程， web worker
共享工作者线程
服务工作者线程
专用工作者线程数据的传输有三种情况
结构化克隆算法。当我们用postMessage传输对象时，浏览器会遍历该对象，并在目标上下文生成一个他目标的副本，说白了深拷贝了一份数据。
可转移对象。主线程将对象给到线程后，主线程的该数据被清除，线程环境创建了一个该数据对象。说白了就是一份数据。
SharedArrayBuf ...
Paperjs：像素打印机
本文介绍一个像素打印机的小玩具就是要在画布中，从左上角开始绘制指定大小的像素方块。从左到右，到了边缘折回继续。思路：全局维护一个x，y，用来记录当前的位置，每帧的时候在该位置绘制方块，然后更新xy，直到到达画布的右下角。
效果如下：
动图懒得搞了，将就着看吧。。。完整vue2代码：
<!--
* @Author: Hhvcg
* @Date: 2022-02-20 15:26:48
* @LastEditors: -_-
* @Description:
-->
<template>
<div class="dashboard">
<div class="dashboard-text flex-cc">
<span>
像素打印机
</span>
</div>
<div class="dashboard-container pd10 flex-cc">
<canvas id="main_canvas" ref="main_canvas" resiz ...
Paperjs：先验内容
本文主要介绍一些paperjs的先验知识（当然英文可以的，你也可以选择直接阅读官方原版文档）。1. 关于paperjs中的图形(path)，官方定义如下：
In Paper.js, paths are represented by a sequence of segments that are connected by curves. A segment consists of a point and two handles, defining the location and direction of the curves.
在paperjs中，paths（路径，或者说是图形），是由一系列曲线(curves)连接的段(segments)，组成的。每个段segment都有一个点和两端的handler组成—->handleIn和handleOut（注意，这三个东西代码层面，都是一个东西，vector）。上图中0，1，2三个segment构成了当前的这个波浪path。handler的作用，用于定义两边的位置及方向。实质就是俩向量，确定该段的始端和末端。为了方便理解，可以直接先将 ...
Paperjs: 序章
最近因为公司项目需要，接触到了paper.js这个库，看完了其官方的示例，倍感惊叹。关注我专栏的同学都知道，自己之前也写过游戏，比如坦克大战，但总感觉太low。要开发一个游戏，涉及到的东西很多，大到游戏的机制设计，小到游戏中的人物角色、NPC类的设计等等。且代码只是实现的游戏机制的手段，作为一个产品，ui也是极其的重要(当然你可以使用虚幻引擎这样的工具–拿来即用，修修改改即可)。看完了paperjs的官方示例，我突然意识到，我找到了一个绝佳的ui武器库。paperjs官方将其形容为向量图形编程界的“瑞士军刀”，在我看来，至少目前看来，也是名副其实的。在本系列接下来的文章中，我会通过研究各种官方有意思的示例代码，掌握该工具库的一些基本使用，然后尝试着，做一些有意思的东西。在这之前，先目睹一番paperjs的强大能力
Tadpoles
蹦迪版的效果如下，其中的每个蝌蚪实例的颜色都是帧数级的在变化：
svg引入tiger图像
绘制各种基本图形
画笔工具系列–主要涉及tools工具包及向量相关操作实现
见缝插针
高斯梯度上色
….等等等。各位看官，敬请期待吧
JS继承相关
本文介绍js继承的几种方法1. 原型链继承利用js的原型链，访问实例对象上不存在但是原型对象中存在的属性和方法。缺点就是假继承。父类的引用属性是共享的。
const Parent = function () {
this.name = 'parent'
this.children = ['son1', 'son2']
}
Parent.prototype.getChildren = function() {
console.log('儿子们:', this.children)
}
const Children = function () {
}
Children.prototype = new Parent()
const child = new Children()
child.children.push('bitch')
child.getChildren()
const child2 = new Children()
child2.children.push('bitch2')
ch ...