闭包详解
本文详细介绍闭包的概念、应用场景及一些坑首先搞明白什么是闭包简单说， 一个函数，能访问到它 “创建时” 所在作用域的变量，哪怕这个作用域已经执行结束，函数依然能 “抓着” 这些变量不放。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 ...
Nginx--简论
本文会帮你解答一个问题，nginx 这玩意儿是干嘛的Nginx 是啥，官方说法，一种高性能的 http 与反向代理的 web 服务器。什么叫高性能？说白了就是响应尽可能地快。一般的项目后端配置 tomcat 即可满足需求，因为一个站点在某个时刻不可能会有大量的请求达到。tomcat 最高同时能够满足 5、600 的请求响应，所以说一般场景下基本 hold 住。但是总有些热门的站点。在某一时刻会有数以万计的请求，这个时候，tomcat 就扛不住了，服务器直接飘红。为了解决这一问题，nginx 就来了（最大支持 50000 请求）。
反向代理、负载均衡、动静分离、打包预览
反向代理先说明什么是正向代理。玩吃鸡这类游戏的时候，我们往往要挂个加速器（vpn），不然就很慢。关于为什么慢甚至无法访问，请移步”梯子”那篇文章。这里的加速器，就是正向代理，开启代理，我们触发的任何请求均是由加速器代替我们的客户端发出去的。即：代理客户端就是正向代理。而反向代理的典型就是 nginx。当客户端的请求发送给服务端的时候，实际上被 nginx 拦截，代替服务端返回响应。即：代理服务端就叫做反向代理。两者的效果 ...
Cookie、Token相关
cookie、token都是做鉴权验证的方式，实际上还应该有一个session，面试的时候总会问的一个问题：cookie、session和token的区别。实际上我认为这个问题很傻叉。因为本质上讲这三个东西就是一个东西，这种问题的逻辑，就相当于一只鸡从上下左右观察有什么区别。有鸡毛区别。
鉴权的两种方式：
cookie+session
用户登录，提交用户信息
后端根据用户提交的数据生成一个sessionID，存储到磁盘，并通过set-cookie返回给前端
前端收到自动存储到对应域名下的cookie中，之后的每次请求，都会自动带上这sessionID
token
用户登录，提交用户信息
后段通过jwt等库提供的加密方式，生成一串字符串，无需存储，通过set-cookie返回给前端
前端收到自动存储到对应域名下的cookie中，之后的每次请求，都会自动带上这token，后端只需要判断是不是他生成的即可
过程一致，唯一不同的，就是一个叫sessionID，一个叫token字符串，。这种问题，毫无意义。