闭包是如何产生的?

大家好,我是前端西瓜哥。

这次从内存管理的角度来看看,闭包是怎么产生的。

我们知道,在调用函数时,其实会产生临时的 调用栈。这些调用栈保存的是 执行上下本,并实际保存在 栈内存 中。

每执行一个函数,函数内的局部临时变量会临时保存起来。如果此时函数又调用了另一个函数,另一个函数下的局部变量也要保存下来,就这样,我们产生了栈。

当一个函数执行完后,它对应的局部临时变量就会被销毁。

局部变量保存下来,是为了保护上下文现场。

阅读更多

计算机图形学:变换矩阵

大家好,我是前端西瓜哥。今天我们来学变换矩阵。

线性变换

矩阵乘法是来自线性代数的内容。

首先我们有一个二维的向量 (x, y),它在线性代数中,我们会这么表示:

阅读更多

快速检索碰撞图形:四叉树碰撞检测

大家好,我是前端西瓜哥。

在上篇文章我们讨论了使用 脏矩形渲染,通过重渲染局部的图形来提优化 Canvas 的性能,将 GPU 密集转换为 CPU  密集。

看这篇文章

Canvas 性能优化:脏矩形渲染

CPU 密集在哪?

在需要遍历 所有的图形,判断它们是否和脏矩形发生相交(碰撞),保存发生碰抓给你的图形,将它们在局部进行重绘。

有没有办法减少需要遍历的图形,不要遍历全部的图形,而是少量的图形呢?有一个办法是使用 四叉树

阅读更多

从源码理解 React Hook 是如何工作的

今天我们从源码来理解 React Hook 是如何工作的。

React 版本为 18.2.0

React Hook 是 React 16.8 后新加入的黑魔法,让我们可以 在函数组件内保存内部状态

阅读更多

Canvas 性能优化:脏矩形渲染

大家好,我是前端西瓜哥。

使用 Canvas 做图形编辑器时,我们需要自己维护自己的图形树,来保存图形的信息,并定义元素之间的关系。

我们改变画布中的某个图形,去更新画布,最简单的是清空画布,然后根据图形树将所有图形再绘制一遍,这在图形较少的情况下是没什么问题的。但如果图形数量很多,那绘制起来可能就出现卡顿了。

那么,有没有什么办法来优化一下?有,脏矩形渲染。

阅读更多

如何在 Canvas 上实现图形拾取?

大家好,我是前端西瓜哥,今天来和大家说说 canvas 怎么做图形拾取。

图形拾取,指的是用户通过鼠标或手指在图形界面上能选中图形的能力。图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。

canvas 作为一个过于朴实无华的绘制工具,我们想知道如何让 canvas 能像 HTML 一样,知道鼠标点中了哪个 “div”。

阅读更多

这次带大家彻底搞懂 flex 布局

大家好,我是前端西瓜哥,今天我来带大家彻底搞懂 flex 布局。

flex 布局,即弹性布局,是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。

首先我们需要有一个容器元素(我们叫做 container),然后容器元素内有一些子元素(我们叫做 item)。

1
2
3
4
5
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
阅读更多

聊聊 JavaScript 的几种模块系统

大家好,我是前端西瓜哥,今天我们来聊聊 JavaScript 的模块系统。

模块系统

模块系统是什么?简单来说,其实就是我们在一个文件里写代码,声明一些可以导出的字段,然后另一个文件可以将其导入并使用。

模块化的优点:

  1. 文件里声明的变量会被隔离,不会暴露到全局,可以有效解决以往变量污染全局空间的问题;

  2. 更容易看出代码之间的依赖关系,看文件头的的导入代码就知道;

  3. 方便多人协作,各自开发自己的模块,而不冲突;

  4. 不用担心文件引入的顺序;

  5. 方便以文件为单位做单元测试;

模块化解决了变量污染、代码维护、依赖顺序问题。

阅读更多

使用 Prettier 美化你的代码

大家好,我是前端西瓜哥。今天带大家来学习 Prettier。

为什么要用 Prettier?

Prettier 是一款流行的代码格式化工具。它支持的语言相当多。

它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。

Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。

Prettier 的优点:

  1. 开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;

  2. 支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。

但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。

比如有个 printWidth 的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。

阅读更多

项目中使用 husky 格式化代码和校验 commit 信息

大家好,我是前端西瓜哥。今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化。

git hook 和 husky

git hook 让我们可以在 git 执行一些行为的前后时机,执行一些脚本。

比如 pre-commit ,能够在我们真正提交 commit 之前先执行一段代码,如果这段代码报错(exit 1),提交会被取消;如果正常执行,commit 会被真正提交。

或是 commit-msg,也能在真正 commit 前拿到 commit 信息内容,去做一些检验工作。

利用 git hook 的能力,我们就可以在 commit 前做一些风格检验或格式化,比如 ESLint、Prettier、commit 格式等。

git hook 是 sh 脚本,在项目 .git/hooks 目录下。这有一个比较尴尬的问题:.git 下的文件是不会被 git 提交的。husky 就是解决这个问题的一个方案。

阅读更多

你需要掌握的 Koa 洋葱模型和中间件

大家好,我是前端西瓜哥。

Koa 是一个 nodejs 框架,经常用于写 web 后端服务。它是 Express 框架的原班人马开发的新一代 web 框架,使用了 async / await 来优雅处理无处不在的异步逻辑。

我们常说 Koa 其实是洋葱模型,今天就来深挖下 Koa 的洋葱模型到底是什么。

什么是洋葱模型

在这之前,我们先简单看看 Koa 是如何使用的。

在 Koa 中,我们通过 app.use 方法注册中间件。中间件可以注册多个,它们的执行顺序和注册时机相关,先注册的先执行。

所谓中间件就是一个函数,这个函数接受 Koa 提供的两个参数:

  1. ctx 上下文对象;
  2. next 函数。

ctx 上有各种参数,比如请求对象 request 和响应对象 response。

调用 next 函数会执行下一个的中间件,如果你不调用 next 函数,那下一个中间件就不会执行。

阅读更多

一些你需要掌握的 tsconfig.json 常用配置项

大家好,我是前端西瓜哥。

tsconfig.json 是用来配置 TS 编译选项的,通常位于项目的根目录位置。

我们可以用 ts 提供的 tsc 命令行工具,执行 tsc --init

1
2
3
4
5
6
7
8
9
10
11
12
13
$ tsc --init

Created a new tsconfig.json with:                                                                   

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

然后我们就能得到一个默认的 tsconfig.json 文件,且这是一种可以添加注释的 json 文件。

里面有很多带有注释的选项,目的是让开发者能够反注释快速启用一些配置。

阅读更多

macOS 上如何写自定义命令行工具?

大家好,我是前端西瓜哥,今天来说说怎么在 macOS 上写自定义命令行工具。

苹果的 masOS 系统的底层核心是 Darwin 系统。Darwin 是类 Unix 系统,所以我们可以在 masOS 上,像 Linux 一样,执行命令行工具。

我们通常通过第三方安装的命令行工具,比如 node、npm、nginx 等,这很方便。

但,有时候我们想运行自己编写的命令行工具,怎么做呢?

阅读更多