chore: 全量图片替换为 WebP 格式
ZiuChen
|
Before Width: | Height: | Size: 117 KiB |
BIN
docs/article/assets/Object.prototype.toString.webp
Normal file
|
After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 14 KiB |
BIN
docs/article/assets/vm-demo.webp
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
@ -153,7 +153,7 @@ console.log(classof({})) // Object
|
||||
|
||||
`Object.prototype.toString()`被调用时，会进行如下步骤：
|
||||
|
||||
|
||||
|
||||
|
||||
在ES6里，之前的内部属性 `[[Class]]` 不再使用，取而代之的是一系列的 internal slot
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 56 KiB |
BIN
docs/note/CSS.assets/BFC-1.webp
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 92 KiB |
BIN
docs/note/CSS.assets/BFC-2.webp
Normal file
|
After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 48 KiB |
BIN
docs/note/CSS.assets/BFC-3.webp
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 52 KiB |
BIN
docs/note/CSS.assets/BFC-4.webp
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
@ -1461,7 +1461,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
我们为两个元素分别设置垂直方向的`margin`，此时BFC的规则就被触发了：**在同一个BFC中**，垂直方向的`margin`会发生折叠，取二者较大的值，真正的边距变成了`20px`，而不是臆想中的`30px`
|
||||
|
||||
@ -1478,7 +1478,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
这两个盒子位于同一个BFC之中进行布局：`<html>`标签形成的BFC
|
||||
|
||||
@ -1550,7 +1550,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
我们不能简单的从现象归纳本质：*BFC让浮动元素向父级元素汇报了高度，所以解决了高度塌陷的问题*
|
||||
|
||||
@ -1593,7 +1593,7 @@ FC全称是 Formatting Context， 译作格式化上下文。元素在标准流
|
||||
|
||||
给`.container`设置`overflow: auto;`，让`.container`创建一个新的BFC，这样之前的高度塌陷问题也能够被解决
|
||||
|
||||
|
||||
|
||||
|
||||
官方文档中是这样解释的：
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ Node.js是一个基于**V8 JavaScript引擎**的**JavaScript运行时环境**
|
||||
- JavaScript代码 -> V8 -> Node.js Bindings -> LibUV
|
||||
- LibUV是使用**C语言编写的库**，提供了**事件循环、文件系统读写、网络IO、线程池**等等内容
|
||||
|
||||
|
||||
|
||||
|
||||
### Node.js的应用场景
|
||||
|
||||
@ -635,7 +635,7 @@ ESModule的解析过程可以分为三个阶段：
|
||||
- 运行代码，计算值，并且将值填充到内存地址中
|
||||
- 将导入导出的**值**赋给对应的变量`name = 'Ziu'`
|
||||
|
||||
|
||||
|
||||
|
||||
文章推荐：[ES modules: A cartoon deep-dive](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)
|
||||
|
||||
@ -1001,7 +1001,7 @@ PNPM（performant npm）有以下优点：
|
||||
- 符号链接 是一类特殊的文件
|
||||
- 其包含有一条以绝对路径或者相对路径的形式**指向其他文件或者目录的引用**
|
||||
|
||||
|
||||
|
||||
|
||||
操作系统使用不同的**文件系统**，**对真实的硬盘读写操作做了一层抽象**，借由文件系统，我们得以方便地操作和访问文件的真实数据
|
||||
|
||||
@ -1055,7 +1055,7 @@ PNPM（performant npm）有以下优点：
|
||||
- 在`node_modules/.pnpm`中，包含了附加版本信息的真实文件（硬链接到硬盘数据的文件）
|
||||
- 所有间接依赖，都通过软链接的方式，链接到被铺平在`.pnpm`文件夹中对应版本的硬链接文件上
|
||||
|
||||
|
||||
|
||||
|
||||
#### 常用命令
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1001 KiB |
BIN
docs/note/Front-end-Engineering.assets/esmodule-phases.webp
Normal file
|
After Width: | Height: | Size: 464 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 122 KiB |
BIN
docs/note/Front-end-Engineering.assets/how-pnpm-works.webp
Normal file
|
After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 49 KiB |
BIN
docs/note/Front-end-Engineering.assets/the-node.js-system.webp
Normal file
|
After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 41 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221122103111654.webp
Normal file
|
After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 36 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221122103256116.webp
Normal file
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 36 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221122103715428.webp
Normal file
|
After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 249 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221125090752249.webp
Normal file
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 110 KiB |
BIN
docs/note/JavaScriptEnhanced.assets/image-20221125094148365.webp
Normal file
|
After Width: | Height: | Size: 15 KiB |
@ -1453,9 +1453,9 @@ inherit(Student, Person)
|
||||
|
||||
- 遇到`<script>`标签则向服务器请求下载`.js`文件
|
||||
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.png" alt="浏览器解析HTML过程" style="zoom:80%;" />
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222207332-16687813334481.webp" alt="浏览器解析HTML过程" style="zoom:80%;" />
|
||||
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.png" alt="浏览器是和如何工作的" style="zoom:80%;" />
|
||||
<img src="./JavaScriptEnhanced.assets/image-20221118222311200-16687813941873.webp" alt="浏览器是和如何工作的" style="zoom:80%;" />
|
||||
|
||||
[How browsers work](https://web.dev/howbrowserswork/)
|
||||
|
||||
@ -1580,7 +1580,7 @@ inherit(Student, Person)
|
||||
|
||||
在开发者工具的图层工具中可以看到，两个元素`.box1` 和 `.box2`都是在一个层（Document）下渲染的：
|
||||
|
||||
|
||||
|
||||
|
||||
##### 案例2：分层渲染
|
||||
|
||||
@ -1595,7 +1595,7 @@ inherit(Student, Person)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### 案例3：transform 3D
|
||||
|
||||
@ -1613,7 +1613,7 @@ inherit(Student, Person)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### 案例4：transition+transform
|
||||
|
||||
@ -1731,7 +1731,7 @@ JavaScript代码下载好后，是如何一步步被执行的？
|
||||
|
||||
### JavaScript V8引擎
|
||||
|
||||
|
||||
|
||||
|
||||
JS源代码经过解析，生成抽象语法树（词法分析器、语法分析器），经过ignition转为字节码（二进制、跨平台），即可由CPU执行
|
||||
|
||||
@ -1751,7 +1751,7 @@ JS源代码经过解析，生成抽象语法树（词法分析器、语法分析
|
||||
- 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码
|
||||
- 官方文档：https://v8.dev/blog/turbofan-jit
|
||||
|
||||
|
||||
|
||||
|
||||
Blink 获取到源码 => 转为Stream => Scanner扫描器
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 696 KiB |
BIN
docs/note/React.assets/prototype-setState.webp
Normal file
|
After Width: | Height: | Size: 280 KiB |
|
Before Width: | Height: | Size: 129 KiB |
BIN
docs/note/React.assets/react-life-cycle.webp
Normal file
|
After Width: | Height: | Size: 53 KiB |
@ -1108,7 +1108,7 @@ export default function App() {
|
||||
|
||||
我们需要在组件的不同生命周期中执行不同的操作，比如添加解除监听器、发起网络请求等
|
||||
|
||||
|
||||
|
||||
|
||||
结合上图，解读一下组件的完整生命周期：
|
||||
|
||||
@ -1979,7 +1979,7 @@ export default class Player extends Component {
|
||||
|
||||
从React的源码可以看到，setState方法是从Component集继承而来的
|
||||
|
||||
|
||||
|
||||
|
||||
### setState的异步更新
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 45 KiB |
BIN
docs/project/ClipboardManager/assets/gi4.webp
Normal file
|
After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 178 KiB |
BIN
docs/project/ClipboardManager/assets/gi5.webp
Normal file
|
After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 695 KiB |
BIN
docs/project/ClipboardManager/assets/img_1.webp
Normal file
|
After Width: | Height: | Size: 110 KiB |
|
Before Width: | Height: | Size: 536 KiB |
BIN
docs/project/ClipboardManager/assets/img_2.webp
Normal file
|
After Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 711 KiB |
BIN
docs/project/ClipboardManager/assets/img_3.webp
Normal file
|
After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 673 KiB |
BIN
docs/project/ClipboardManager/assets/img_4.webp
Normal file
|
After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 501 KiB |
BIN
docs/project/ClipboardManager/assets/img_5.webp
Normal file
|
After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 54 KiB |
BIN
docs/project/ClipboardManager/assets/logo.webp
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 18 KiB |
BIN
docs/project/ClipboardManager/assets/mac-chmod.webp
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 266 KiB |
BIN
docs/project/ClipboardManager/assets/sign-mac-2.webp
Normal file
|
After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 60 KiB |
BIN
docs/project/ClipboardManager/assets/sign-mac.webp
Normal file
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 494 KiB |
BIN
docs/project/ClipboardManager/assets/webdav.webp
Normal file
|
After Width: | Height: | Size: 89 KiB |
@ -29,17 +29,17 @@ aside: false
|
||||
sudo codesign --force --deep --sign -
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
然后将此目录中的`clipboard-event-handler-mac`文件拖入终端执行命令
|
||||
|
||||
|
||||
|
||||
|
||||
**2. 授权**
|
||||
|
||||
左上角🍎 / 系统偏好设置 / 安全性与隐私 / 通用 / 点击允许
|
||||
|
||||
|
||||
|
||||
|
||||
## 如何创造自己的功能按钮
|
||||
|
||||
@ -98,8 +98,8 @@ sudo codesign --force --deep --sign -
|
||||
|
||||
需要注意的是，因为自定义功能按钮实现的是**携带数据跳转不同插件**，所以`redirect`后的内容并不应该是普通关键字（普通关键字仅能作为插件入口，而不能携带数据），而应该是`文本`/`图片`/`文件或文件夹`：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- `id`: `String` 全局唯一 必须以`custom`开头 建议以时间戳为后缀
|
||||
- `title`: `String` 鼠标悬停时展示的文本
|
||||
@ -120,7 +120,7 @@ sudo codesign --force --deep --sign -
|
||||
- 主面板下拉菜单中支持主动上传/主动下载数据；
|
||||
- 主面板用户信息左侧的同步的状态指示灯用以显示当前的同步状态，点击状态指示灯可以主动下载/上传数据；
|
||||
|
||||
|
||||
|
||||
|
||||
同时，每次本地剪贴板内容发生变化，都会将最新数据同步到同步到服务器。
|
||||
|
||||
|
||||
@ -6,12 +6,12 @@ aside: false
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import url from './assets/logo.png'
|
||||
import img1 from './assets/img_1.png'
|
||||
import img2 from './assets/img_2.png'
|
||||
import img3 from './assets/img_3.png'
|
||||
import img4 from './assets/img_4.png'
|
||||
import img5 from './assets/img_5.png'
|
||||
import url from './assets/logo.webp'
|
||||
import img1 from './assets/img_1.webp'
|
||||
import img2 from './assets/img_2.webp'
|
||||
import img3 from './assets/img_3.webp'
|
||||
import img4 from './assets/img_4.webp'
|
||||
import img5 from './assets/img_5.webp'
|
||||
const titleInfo = {
|
||||
subTitle: '✨ 更强大的剪贴板管理工具。',
|
||||
logo: url,
|
||||
|
||||
|
Before Width: | Height: | Size: 317 KiB |
BIN
docs/project/JSRunner/assets/img1.webp
Normal file
|
After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 415 KiB |
BIN
docs/project/JSRunner/assets/img2.webp
Normal file
|
After Width: | Height: | Size: 93 KiB |
|
Before Width: | Height: | Size: 368 KiB |
BIN
docs/project/JSRunner/assets/img3.webp
Normal file
|
After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 310 KiB |
BIN
docs/project/JSRunner/assets/img4.webp
Normal file
|
After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 16 KiB |
BIN
docs/project/JSRunner/assets/logo.webp
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
@ -6,11 +6,11 @@ aside: false
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import url from './assets/logo.png'
|
||||
import img1 from './assets/img1.png'
|
||||
import img2 from './assets/img2.png'
|
||||
import img3 from './assets/img3.png'
|
||||
import img4 from './assets/img4.png'
|
||||
import url from './assets/logo.webp'
|
||||
import img1 from './assets/img1.webp'
|
||||
import img2 from './assets/img2.webp'
|
||||
import img3 from './assets/img3.webp'
|
||||
import img4 from './assets/img4.webp'
|
||||
const titleInfo = {
|
||||
subTitle: '✨ JavaScript运行器 支持多种运行环境 快速验证代码逻辑',
|
||||
logo: url,
|
||||
|
||||
|
Before Width: | Height: | Size: 443 KiB |
BIN
docs/project/Markdown/assets/img1.webp
Normal file
|
After Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 527 KiB |
BIN
docs/project/Markdown/assets/img2.webp
Normal file
|
After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 305 KiB |
BIN
docs/project/Markdown/assets/img3.webp
Normal file
|
After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 16 KiB |
BIN
docs/project/Markdown/assets/logo.webp
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
@ -6,10 +6,10 @@ aside: false
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import url from './assets/logo.png'
|
||||
import img1 from './assets/img1.png'
|
||||
import img2 from './assets/img2.png'
|
||||
import img3 from './assets/img3.png'
|
||||
import url from './assets/logo.webp'
|
||||
import img1 from './assets/img1.webp'
|
||||
import img2 from './assets/img2.webp'
|
||||
import img3 from './assets/img3.webp'
|
||||
const titleInfo = {
|
||||
subTitle: '✨ 强大的Markdown编辑器',
|
||||
logo: url,
|
||||
|
||||
|
Before Width: | Height: | Size: 129 KiB |
BIN
docs/public/logo.webp
Normal file
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 814 KiB |
BIN
docs/self/img/reward/1.webp
Normal file
|
After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 138 KiB |
BIN
docs/self/img/reward/2.webp
Normal file
|
After Width: | Height: | Size: 56 KiB |
@ -4,7 +4,7 @@ editLink: false
|
||||
|
||||
# 个人介绍
|
||||
|
||||
|
||||
|
||||
|
||||
北京交通大学（BeijingJiaoTong University）电子信息工程学院本科在读
|
||||
|
||||
|
||||