chore: update study note to f23ee17cdd2523cabe2c9f3f56ac8764866317cc

docs/learning-note/stenography/weekly-fe-perusal/mobx-observer.md

@@ -0,0 +1,100 @@
+---
+sidebar_position: 3
+---
+
+# MobX Observer
+
+```js
+// For test only
+
+
+const reactionStacks = [];
+
+const targetsMap = new WeakMap();
+
+function track(target, key) {
+    const currentReaction = reactionStacks[reactionStacks.length - 1];
+
+    if (!currentReaction) return;
+
+    let targetMap = targetsMap.get(target);
+    if (!targetMap) {
+        targetMap = new Map();
+        targetsMap.set(key, targetMap);
+    }
+
+    let depsSet = targetMap.get(key);
+    if (!depsSet) {
+        depsSet = new Set();
+        targetMap.set(key, depsSet);
+    }
+
+    depsSet.add(currentReaction);
+}
+
+function trigger(target, key) {
+    const targetMap = targetsMap.get(target);
+    if (!targetMap) return;
+
+    const depsSet = targetMap.get(key);
+    if (!depsSet) return;
+
+    const depsToRun = [...depsSet];
+    depsToRun.forEach((deps) => {
+        deps.run();
+    });
+
+}
+
+function observable(obj) {
+    return new Proxy(obj, {
+        get(target, key, receiver) {
+            track(target, key);
+            return Reflect.get(target, key, receiver);
+        },
+
+        set(target, key, newValue, receiver) {
+            trigger(target, key);
+            return Reflect(target, key, newValue, receiver);
+        }
+    })
+}
+
+class Reaction {
+    constructor(fn) {
+        this.fn = fn
+    }
+
+    run() {
+        reactionStacks.push(this);
+
+        try {
+            this.fn();
+        } finally {
+            reactionStacks.pop();
+        }
+    }
+
+    track(cb) {
+        cb ();
+    }
+}
+
+function observe(fn) {
+    const reaction = new Reaction(() => reaction.track(fn));
+    reaction.run();
+}
+
+const state = observable({
+    name: 'hello world',
+    count: 1
+});
+
+observe(() => {
+    console.log('count value is ', state.count);
+});
+```
+
+
+<div style={{textAlign: 'right'}}><small style={{color: 'grey'}}>last modified at August 28, 2025 17:17</small></div>
+

docs/learning-note/stenography/weekly-fe-perusal/note-p3.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Perusal Series
@@ -186,7 +186,57 @@ LOD(Level of Detail)，数据详细级别。LOD 表达式，在一个查询中
 
 ## 29.精读《JS 中的内存管理》
 
+内存生命周期：
+1. 分配内存
+2. 使用内存（读/写）
+3. 释放内存（自动/手动）
 
+JS 的内存回收：
+- 标记清除：通过标记不再使用的对象，来回收内存（现代浏览器普遍采用）
+  - 从根节点开始，遍历所有可达对象，标记为“活跃”
+  - 垃圾回收器定期清理未标记的对象
+- 引用计数：通过计数引用对象的数量，来判断何时回收内存
+  - 限制：循环引用
 
-<div style={{textAlign: 'right'}}><small style={{color: 'grey'}}>last modified at August 13, 2025 17:35</small></div>
+## 30.精读《Javascript 事件循环与异步》
+
+1. 同步代码进入 call stack，遵循FIFO原则
+2. 异步代码进入 Event Loop 的 Task Queue
+3. 当 call stack 为空时（这个时机由宿主环境决定），Event Loop 会将 Task Queue 中的任务依次放入 call stack 执行
+
+Macrotask 和 Microtask
+- Macrotask：包括整体代码块、setTimeout、setInterval、I/O 操作等
+- Microtask：包括 Promise.then、MutationObserver、Process.nextTick（Node.js）等
+- 执行顺序：先执行所有 Microtask，再执行一个 Macrotask
+
+> **异步队列是周而复始执行，可以看作二维数组，横排是一个队列的一个个函数，纵排是一个个队列。 Microtask 把回调添加到当前队列，Macrotask 添加一个新的队列。**
+
+## 35.精读《dob - 框架实现》
+
+> MVVM 中，依赖追踪是核心
+
+依赖追踪分为两部分：**依赖收集**和**触发回调**
+
+实现参考 [mobx](./mobx-observer.md)
+
+## 36.精读《When You “Git” in Trouble- a Version Control Story》
+
+```shell
+git fsck --full # 检查repo完整性，会显示未被引用的对象
+git fsck --lost-found # 查找丢失的对象
+git fsck --unreachable # 查找不可达的对象
+
+git hash-object xxx.js # 计算文件的哈希值
+git cat-file -p <hash> # 查看对象内容
+git cat-file -t <hash> # 查看对象类型
+
+# blob 对象，存储文件内容
+# tree 对象，存储目录结构
+# commit 对象，存储提交信息，包括作者、时间、当前tree对象，前一个commit对象
+
+git reflog # 查看引用日志，找到丢失的分支或提交
+```
+
+
+<div style={{textAlign: 'right'}}><small style={{color: 'grey'}}>last modified at August 28, 2025 17:17</small></div>