闭包是如何产生的?
大家好,我是前端西瓜哥。
这次从内存管理的角度来看看,闭包是怎么产生的。
我们知道,在调用函数时,其实会产生临时的 调用栈。这些调用栈保存的是 执行上下本,并实际保存在 栈内存 中。
每执行一个函数,函数内的局部临时变量会临时保存起来。如果此时函数又调用了另一个函数,另一个函数下的局部变量也要保存下来,就这样,我们产生了栈。
当一个函数执行完后,它对应的局部临时变量就会被销毁。
局部变量保存下来,是为了保护上下文现场。
大家好,我是前端西瓜哥。
这次从内存管理的角度来看看,闭包是怎么产生的。
我们知道,在调用函数时,其实会产生临时的 调用栈。这些调用栈保存的是 执行上下本,并实际保存在 栈内存 中。
每执行一个函数,函数内的局部临时变量会临时保存起来。如果此时函数又调用了另一个函数,另一个函数下的局部变量也要保存下来,就这样,我们产生了栈。
当一个函数执行完后,它对应的局部临时变量就会被销毁。
局部变量保存下来,是为了保护上下文现场。
大家好,我是前端西瓜哥。
在上篇文章我们讨论了使用 脏矩形渲染,通过重渲染局部的图形来提优化 Canvas 的性能,将 GPU 密集转换为 CPU 密集。
看这篇文章
CPU 密集在哪?
在需要遍历 所有的图形,判断它们是否和脏矩形发生相交(碰撞),保存发生碰抓给你的图形,将它们在局部进行重绘。
有没有办法减少需要遍历的图形,不要遍历全部的图形,而是少量的图形呢?有一个办法是使用 四叉树。
今天我们从源码来理解 React Hook 是如何工作的。
React 版本为 18.2.0
React Hook 是 React 16.8 后新加入的黑魔法,让我们可以 在函数组件内保存内部状态。
大家好,我是前端西瓜哥。
今天我们来学习用 devtool 的 Performance 和 Memory 工具来找出网页哪里发生了内存泄漏。
大家好,我是前端西瓜哥。
使用 Canvas 做图形编辑器时,我们需要自己维护自己的图形树,来保存图形的信息,并定义元素之间的关系。
我们改变画布中的某个图形,去更新画布,最简单的是清空画布,然后根据图形树将所有图形再绘制一遍,这在图形较少的情况下是没什么问题的。但如果图形数量很多,那绘制起来可能就出现卡顿了。
那么,有没有什么办法来优化一下?有,脏矩形渲染。
大家好,我是前端西瓜哥,今天来和大家说说 canvas 怎么做图形拾取。
图形拾取,指的是用户通过鼠标或手指在图形界面上能选中图形的能力。图形拾取技术是之后的高亮图形、拖拽图形、点击触发事件的基础。
canvas 作为一个过于朴实无华的绘制工具,我们想知道如何让 canvas 能像 HTML 一样,知道鼠标点中了哪个 “div”。
大家好,我是前端西瓜哥。今天带带大家来分析 React 源码,理解它的单节点 diff 和多节点 diff 的具体实现。
React 的版本为 18.2.0
大家好,我是前端西瓜哥,今天我来带大家彻底搞懂 flex 布局。
flex 布局,即弹性布局,是前端开发中非常常用的布局方式。主要是馋它很简单就能让容器内元素水平垂直居中的能力。
首先我们需要有一个容器元素(我们叫做 container),然后容器元素内有一些子元素(我们叫做 item)。
1 | <div class="container"> |
大家好,我是前端西瓜哥,今天我们来聊聊 JavaScript 的模块系统。
模块系统是什么?简单来说,其实就是我们在一个文件里写代码,声明一些可以导出的字段,然后另一个文件可以将其导入并使用。
模块化的优点:
文件里声明的变量会被隔离,不会暴露到全局,可以有效解决以往变量污染全局空间的问题;
更容易看出代码之间的依赖关系,看文件头的的导入代码就知道;
方便多人协作,各自开发自己的模块,而不冲突;
不用担心文件引入的顺序;
方便以文件为单位做单元测试;
模块化解决了变量污染、代码维护、依赖顺序问题。
大家好,我是前端西瓜哥。今天带大家来学习 Prettier。
Prettier 是一款流行的代码格式化工具。它支持的语言相当多。
它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。
Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。
Prettier 的优点:
开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;
支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。
但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。
比如有个 printWidth
的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。
大家好,我是前端西瓜哥。今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化。
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 是一个 nodejs 框架,经常用于写 web 后端服务。它是 Express 框架的原班人马开发的新一代 web 框架,使用了 async / await 来优雅处理无处不在的异步逻辑。
我们常说 Koa 其实是洋葱模型,今天就来深挖下 Koa 的洋葱模型到底是什么。
在这之前,我们先简单看看 Koa 是如何使用的。
在 Koa 中,我们通过 app.use 方法注册中间件。中间件可以注册多个,它们的执行顺序和注册时机相关,先注册的先执行。
所谓中间件就是一个函数,这个函数接受 Koa 提供的两个参数:
ctx 上有各种参数,比如请求对象 request 和响应对象 response。
调用 next 函数会执行下一个的中间件,如果你不调用 next 函数,那下一个中间件就不会执行。
大家好,我是前端西瓜哥。
tsconfig.json 是用来配置 TS 编译选项的,通常位于项目的根目录位置。
我们可以用 ts 提供的 tsc 命令行工具,执行 tsc --init
。
1 | $ tsc --init |
然后我们就能得到一个默认的 tsconfig.json 文件,且这是一种可以添加注释的 json 文件。
里面有很多带有注释的选项,目的是让开发者能够反注释快速启用一些配置。
大家好,我是前端西瓜哥,今天来说说怎么在 macOS 上写自定义命令行工具。
苹果的 masOS 系统的底层核心是 Darwin 系统。Darwin 是类 Unix 系统,所以我们可以在 masOS 上,像 Linux 一样,执行命令行工具。
我们通常通过第三方安装的命令行工具,比如 node、npm、nginx 等,这很方便。
但,有时候我们想运行自己编写的命令行工具,怎么做呢?