Ctrl + F => target pointer

• CSS/box/index.html

  • macOS强制显示滚动条 #2
  • 单行文本的省略空白处理 #3

• CSS/视觉格式化模型/常规文档流/外边距折叠.html

  • 外边距折叠 #4

• CSS/视觉格式化模型/浮动/ex/css/common.css

  • 分页器

• CSS/视觉格式化模型/定位/二级菜单/css/2th.css

  • 32~ 元素的隐藏与显示，将 :hover 挂载到共同的父元素上
  • 79~ 二级菜单和上层之间衔接的 border 处理：伪元素遮挡

• CSS/视觉格式化模型/定位/弹出层/css/popup.css

  • 居中

• HTML/表单元素/CSS美化/myRadio.css

  • 自实现选择框

• CSS/布局/后台页面布局.html

  • 后台页面布局

• NodeJS/CMJ

  • .cjs 后缀会永远用 CJS
    • 会覆盖 package.json 中的 type: "module"
  • .mjs → 永远是 ES Module

• Vue2/sandboxs

  • demo created from Vue/CLI

• Vue2/sandboxs/src/utils/getComponentRootDom.js

  • 通过 render 以及 $el 获取某个组件渲染的Dom根元素

• Vue2/sandboxs/src/utils/toast.js

  • 实现 toast 提示函数，通过 JS 创建提示框

• Vue2/sandboxs/vue.config.js

  • 通过开发服务器代理处理开发环境中的、浏览器同源策略导致的跨域问题

• Vue2/sandboxs/src/mock/index.js

  • 拦截 AJAX ，重新赋值 XHR 。 Apifox 和 Postman 也支持 mock 环境

• Vue2/sandboxs/test/Lifecycle/timerDestroyed.vue

  • 类似于组合关系的析构函数，凡是在 mounted / created 中引入的“组件外部副作用”，都应该在 beforeDestroy 中对称清理

• vue2沙盒开发的一系列成果测试脚本 link

• Vue2/sandboxs/src/directives/loading/index.js

  • v-loading 自定义指令实现 Loading 态呈现

• auto update Action for README link

• mixins 混入实现配置代码复用 link

• 组件递归 实现 层级列表组件 TreeListMenu link

• vue-router 动态路由匹配 通过 vue-router 注入的原型对象 $route 提供的路由信息 link

• React 自定义组件想要触发DOM事件，得传递到能响应的元素上 同时注意如果没有特殊处理，在事件处理函数中，this指向undefined 1. bind 2. () => link

• JS执行 - call stack 执行上下文中的 this 和 变量对象VO 虽然 ES6 后 const 和 let 不会污染对象，但是之前代码都用的 var 还是得了解 link

• 当找不到某个属性时，执行上下文通过函数对象的隐藏属性 [[Environment]] (之前叫 [[scope]] )指针连接外层词法环境形成作用域链，然后往上寻找 => 即使 outer 执行完了，inner 仍然保留对 outer 变量的引用、导致GC失败 => 闭包 [ => 内存泄漏风险 ] link

• CSRF danger example and 5 ways to solve link

• 如果setState改变状态的代码处于某个HTML元素的事件中，则其是异步的，否则是同步 如果要使用改变之后的状态，需要使用回调函数 如果新的状态要根据之前的状态链式作用，需要使用函数的方式改变状态 同时React会对异步的setState进行优化，将多次setState进行合并 link

• React 通过 props.children 实现 Vue 插槽功能 具名插槽区分 1. 直接传对象 2. 函数对象属性 3. 直接传递一个 render 函数 => ( JSX ) link

• 默认情况下，Form 对在里面的所有的 Input 都传递了 handleChange, 当其中一个变化时，直接修改了 Form 的 state, 那么整个 Form 、 Form 中所有的 Input 都会 re-rende 通过 useForm 内部管理的 _formValues 实现字段级别订阅更新、 _formState 表单整体状态的观察者模式 link

• 以数组作为下标的影响: 数组变化后，相同位置的元素 key 相同，Vue 会认为是同一个元素，直接复用 DOM 但实际上数据已经变了，导致 DOM 和数据错位 特别是表单元素（input、select、textarea），它们的值存储在 DOM 节点上，不是响应式的，复用 DOM 后值就乱了，导致每次删除的都只可能是最后一个 link

• a 被 B 引用了，形成了闭包，B函数携带了 a 创建时的词法环境，所以其存储于堆内存中、不被回收（如果在栈内存上会导致需要引用的时候已经出栈了）；b 没有被引用，只会在 A 的执行上下文中、短暂的存在栈内存中，在 A 执行结束后变得不可达 link

• 父组件异步处理后返回子组件 1. emit 中回调函数，类似于 React 中父组件传递给子组件处理函数、提供权力子组件影响父组件的数据 2. 父组件返回Promise，子组件通过 .$listeners 拿到父组件的 handle 函数引用（但是 listener 是直接调用的函数，没有触发事件的上报） 3. 父组件直接 props 传下去处理函数，处理函数和 2 一样都是返回的 Promise link

• v-model + event-modifiers v-model 默认是 input 事件，在事件修饰符之后 v-model.lazy 是change 事件 开启 .number 修饰自动将事件value转为数字 link

• 手动实现观察者模式 => 事件总线 方便组件之间通信、组件和普通模块通信、事件处理 ( Vue 自带 $emit, $on, $off 实例成员，直接导出一个 Vue 实例都可以 ) link

• 利用浏览器资源缓存，实现 v-lazy 自定义懒加载图片指令 其中滚轮视图事件通过事件总线管理，抽离出mixin统一上抛事件 link

• 通过 vuex 进行共享数据管理 mutations 方法中不允许副作用操作 通过在 actions 中 dispatch 实现副作用操作

• 通过 vuex 和 router 管理 登陆、注销 vuex. module 实现模块化 开启命名空间防止命名冲突 开启严格模式后，只允许通过 mutations 改变状态 getters 计算属性 mapState 简化命名空间相关代码 通过 template 逻辑容器处理同级元素

• 使用 route 对 vuex 的登陆态进行路由守卫、鉴权拦截 在路由对象中带上目标页信息，方便在登录之后重定向、鉴权 添加 exact-path 防止路由中 hash 和 query 对样式匹配的影响

• 公共库体积优化 利用 tree-shaking 优化 Vuex 利用 CDN: 对 webpack 声明不要对公共库进行打包（私有的要收费） 通过模版代码在index中进行分流，否则开发环境也用CDN资源就无法使用Vue-dev 生产环境传统CDN导入会自动"污染"全局 --modern 开启现代模式打包

• 项目包体积优化 利用webpack对动态import的支持实现页面分包

• 通过 defaultImg 粗略优化首屏体验

• 异步组件 + 进度条

• 通过通配符 * 匹配 404 页面

• Vue3 较 2 的 diff 构造函数 this指向 组合内聚

• 虽然 Vue2-mixins 能实现内聚，但是存在混合之间层次扁平化、执行顺序等问题 而 Vue3 composition 可以直接进行 函数级别的交互

• Vue3 将 LifeCycle Function 都抽离成普通函数了，不需要再限定在配置中

• like LifeCycle, Vue3 has computed() func

• Vue2 中计算属性可以通过 set 影响原始数据 Vue3 的 computed 最佳设计只设置 get 视为是只读的快照

• template 预编译 => render() Vite 本地开发时直接请求、快于 webpack css => str vue => js

• 因为 Vite 利用的是“现代浏览器支持ESM”这一特性，在开发时将模块文件直接传输给浏览器，不需要打包，是实时编译 所以 CMJ 是不支持的

• vue3 运行时缓存机制 vnode 存储到 _cache 中进行复用

• Vue3 不会对静态节点反复创建渲染函数，而是上提、然后在render中重复使用

• Vue3 预字符串化

• Vue3 打标是动态节点还是静态节点 如图是动态

• Vue3 中属性的静动态打标区分

• Vue3 双向绑定 v-model :modelValue , @update:modelValue v-model修饰符

• 虽然 Vue2 v-for > v-if ，但是每次变更后都需要重新循环判断 Vue3直接交换了优先级、报错[vue/no-use-v-if-with-v-for] 正确应该通过计算属性进行判断 当使用进行v-for循环时，需要把key值放到中，而不是它的子元素中

• 当使用v-if v-else-if v-else分支的时候，不再需要像Vue2一样指定key值（否则可能数据没清空) vue3会自动给予每个分支一个唯一的key 即便要手工给予key值，也必须给予每个分支唯一的key，不能因为要重用分支而给予相同的key，否则就无法切换了（Block了、编译成静态节点了）

• Vue3 的 router

• Vue3 异步加载组件

• 通过配置 defineAsyncComponent 对象设置 loading 和 error, Vue3 的 util syncGetComp 比 Vue2的 多等待和错误状态 Vue3 h函数具名了，方便随时创建虚拟节点

• 异步加载页面（本质就是异步加载组件）

• 朦层 通过 Teleport 修改在真实DOM中的位置

• property-descriptor 属性描述符对象 设置 set/get => 存取器属性“Invoke property getter”: 不再是在内存中管理 obj.a ，而是类似于 直接运行get()和set(val) 预检 通过innerText => UI和数据双向绑定

• ES6 => Reflect => 函数式编程、JS底层能力API

• 可以通过 proxy 在 Reflect 的底层实现基础上做想做的

• 通过 Object.defineProperty 实现浅层观察者模式 设置了两个对象，无法时时刻刻保证两个对象一致性（所以 vue2 有 $set 和 $delete 用于在 mounted 之后的属性更改）

• 递归实现深层观察者模式

• 虽然 defineProperty 可以直接通过覆盖 target 来避免 ob 的创建，但是会导致污染原先对象 最佳实践还是 Proxy

• 类代理，自动进行任何构造函数属性赋值

• 通过代理校验实现类似TS的JS

• #7

  • reactive ⇒ proxy实例
  • readonly ⇒ 返回了新的 proxy 实例，set 和 deleteProperty 做了特殊处理
  • ref 可以代理任何数据类型，封装到一个对象 value 属性上
    1. 原始数据类型 ⇒ ES6的 get value() 和 set value() 本质就是 Object.defineProperty 存取器属性 对象用 Proxy 是为了动态的无感监听，但是原始数据类型直接用一个 对象 包裹后只需要管理一个属性 value 即可，不需要动态代理所有属性
    2. 对象 ⇒ 使用 reactive
    3. proxy实例 ⇒ 直接用该代理
  • computed 在监听对象改变后第一次会触发计算函数，后面都是用的缓存 link

• readonly - 类似于 vuex 不允许外部直接更改数据，得调用暴露的API上报

• 防抖更改响应数据

• watchEffect 的执行是在微任务中回调，配合 stop 的三种情景的对比（有、没有、在宏任务中）

• watch使用场景 - 不希望回调函数一开始就执行 - 数据改变时，需要参考旧值 - 需要监控一些回调函数中不会用到的数据 其余感觉用 watchEffect 更好

• 开发纪律规范 => 减少负担 - 最好所有 composition func 都返回的是 ref Obj unref === isRef(val) ? val.value : val

• Vue3生命周期 在 template ⇒ render 中渲染虚拟节点的时候会对响应式数据收集依赖 renderTracked 在收集到一个依赖就会触发一次

• renderTriggered 在响应数据每变化一次就会触发一次 这两个生命周期钩子一般用于开发排查

• 利用 live-server 启动的服务器 + 文件路径 => 访问本地资源模拟API请求

• 利用 Vue3 的 reactive API 模拟 vuex 全局的响应式数据、对外暴露的是只读的以及API接口 接口兜底 闭包隐藏 userState

• React 旧版生命周期（仅类组件有）

• React 新版生命周期（同理仅类组件用）

• 反模式 - 使用姿势不当 - componentWillReceiveProps 导致的数据来源不单一

• 尝试使用新版 GDSFP 模拟上条反模式，会发现子组件自身属性完全变成了父组件状态的映像，因为每次更新组件都会调用 GDSFP 这个生命周期钩子、变成父组件状态 故而限制了数据来源单一

• 通过 name 属性区分实现单一 handleChange 管理整个表单 别忘记计算属性名

• React - defaultProps 混合assign

• TS 直接用 interface 编译期强制规定即可 老项目 JS 的话得用 prop-type 库 ，那么只能在运行时报错 链式调用添加一个 isRequired 函数进行检查

• 通过HOC高阶组件关注横切关注点实现日志记录、登录 别忘记下放props 还能在中间额外修饰等等、玩法很多

• 装饰器模式重构 - 抽象横向关注点、抽离重复渲染事情给 HOC，不用重复书写渲染

• 通过 React.createRef() 创建 ref对象 通过 .current 拿到目标

• 通过 ref 得到 (类似Vue) React HTML Element 真实 DOM 对象 类组件实例 调用方法

• 通过 函数ref={el => this.txt = el;} 创建 ref 不再需要 .current 如果不是通过 外部的getRef 那么每次 render 都会重新创建一个新函数，函数会调用两次、旧的函数返回null 现代函数组件推荐使用 useRef() ref 这种直接操作的思想其实是和 React 背道相驰的

• forwardRef => 从函数组件中拿到目标的 ref 是高阶组件，拿到新组件后，在使用时声明了 ref ，那么就会作为第二个参数传入到forwardRef的入参函数组件A中

• forwardRef 不能直接用于类组件，直接用函数包装一下，然后通过属性接续传递

• 通过 ref 转发解决 HOC 导致的 ref 错误 如果不加处理，外层 ref 会在 HOC 的包装层上，如果想用最内层的方法需要在 HOC 中间层转发

• 上下文旧版API childContextTypes, getChildContext 创建上下文 contextTypes 获取上下文

• Context 数据变化时，所有消费者强制更新直接不运行 shouldComponentUpdate setState 被调用时，创建的是一个新对象（即使什么都没有变），那么上下文在比较时（通过Object.is比较引用内存地址）会判断二者不一致、 解决方案：包一层 ctx 后，后面更新 setState({}) => 只影响了 state 但是内部的 ctx 的地址没有变化

• 旧版效率问题严重，新版上下文API Provider, Consumer/useContext 生产者消费者模式

• 通过上下文实现组件之间的联动 - 基础功能的表单组件Form Form.Input Form.Button

• componentDidMount => 执行队列

• react渲染 - React元素 在 执行React Component 后得到 虚拟DOM树 React Element => 执行React Component => Reconciler diff(Fiber) => Commit => Real DOM 手动模拟实现递归渲染

• 虚拟DOM编程思想 => 框架在内存中实现为JS对象, 如React17之前的createElement和17之后的jsx-runtime方法返回的对象

• Fiber, Reconciler from stack => time slice ; Scheduler => tasks priority

• 模拟 React ARCH Scheduler => priority ; requestIdleCallback 这个 API 有兼容性问题 scheduler源码 - npm install scheduler

• React ARCH 模拟 performUnitOfWork 创建下一个 FiberNode 对象，并且进行链表连接

• MessageChannnel API => macrotask => Scheduler 目标是利用事件循环机制，将上一次被渲染打断的JS任务继续执行 - setTimeout 嵌套层次多后有 4ms clamping - requestAnimationFrame 只能在渲染前执行，rAF 必须等到下一帧 - microtask 通过 Promise 包装成一个微任务，但是微任务队列需要清空后才能渲染，浏览器渲染等不了那么久

• Scheduler 源码指针

• Scheduler 源码分析: 调度任务 unstable_scheduleCallback taskQueue普通任务, timerQueue延时任务

• 通过 githook 钩子配置实现自动跟随子模块提交

• Scheduler 源码分析: requestHostCallback => schedulePerformWorkUntilDeadline 根据不同的环境选择不同的生成宏任务的方式，大多数是实例化 MessageChannel 进行后续调度

• Scheduler 源码分析: performWorkUntilDeadline 浏览器宏任务里的调度入口

• Scheduler 源码分析: flushWork => workLoop workLoop 首先有一个 while 循环，该 while 循环保证了能够从任务队列中不停的取任务出来 任务还没有过期 && 任务暂停、归还主线程渲染时break 根据 taskQueue => timerQueue 返回布尔值给 hasMoreWork

• Scheduler 源码分析: shouldYieldToHost 判断任务执行阻塞时间是否会导致丢帧、需要归还主线程

• Scheduler 源码分析: advanceTimers 遍历 timerQueue 判断是否有已经到期的任务，如果有、将这个任务放入到 taskQueue

• Scheduler 源码分析: 延时任务调度 unstable_scheduleCallback => requestHostTimeout

• Scheduler 源码分析: => handleTimeout

• Scheduler 流程图

• Scheduler 源码分析: MinHeap

• React位运算源码分析: - FiberNode flags 合并变更状态、判断 - lanes & -lanes 取最高优先级 - Context 上下文判断等等

• Reconciler 源码分析: beginWork

• Reconciler 源码分析: completeWork - mount阶段三步 ReactFiberConfig => HostConfig

• Reconciler 源码分析: completeWork - update阶段 diffProperties

• Reconciler 源码分析: completeWork - flags冒泡 => 快速确定 FiberNode 以及子树是否存在副作用 => 判断是否需要执行和副作用相关的操作

• Reconciler 源码分析: 单节点diff, 多节点diff

• commit 源码分析: - commitXXXEffects - commitXXXEffects_begin - commitXXXEffects_complete 删除逻辑链条迁移 commitMutationEffectsOnFiber ⇒ recursivelyTraverseMutationEffects ⇒ commitDeletionEffects ⇒ commitDeletionEffectsOnFiber

• commit 源码分析: Mutation - 2. 插入、移动Placement flag - 3. 更新属性 Layout - 负责执行类组件生命周期钩子函数、useLayoutEffect...

• lane 源码分析: 优先级调度

• 实现 合成事件对象 & 事件传播机制 模拟 ReactDOM 中的事件系统

• Hooks 源码分析: hook对象 => 链表 执行流程

• useReducer - 同 Redux 都是可预测状态容器

• GSAP ScrollTrigger 的 scrub 实现滚动条映射到动画进度 用户滚动 → ScrollTrigger 计算 [0, 1] 进度 → 驱动 GSAP Tween 更新 o.value (0 → 120) → onUpdate 回调调用 canvas.upData(frameIndex) → Canvas drawImage() 绘制对应帧 → 视觉上形成"滚动控制动画"

• useState, useReducer 源码分析: useState 的本质就是 useReducer 的一个简化版 - 其 reducer 是内置的基础版而不是用户传入的

• Effect相关钩子 源码分析

• useCallback 源码分析

• useMemo 源码分析

• useRef 源码分析

• update, UpdateQueue 源码分析

• eagerState策略 源码分析

• bailout策略 源码分析: update阶段后立马进行一次判断

• bailout策略 源码分析: 第二次命中机会 开发者使用性能优化API实质就是放宽bailou策略的命中条件 - React.memo - PureComponent - markWorkInProgressReceivedUpdate()

• 源码阅读技巧 #8

• V8 源码分析 执行上下文Context - VariableEnvironment var穿透块

• V8 源码分析 变量提升 "变量提升"在 V8 里根本没有一个叫 Hoist 的运行时操作——它是编译期 DeclareVariable 时选择作用域的静态决策，配合 InitializationFlag 控制运行时是否允许访问

• V8 源码分析 词法环境 1. 编译期 — 决定哪些变量需要进 Context

• V8 源码分析 词法环境 2. 字节码生成期 — 何时创 新Context

• V8 源码分析 词法环境 3. 运行时 Context 链 — ContextScope 管理 outer 引用

• V8 源码分析 词法环境 4. 变量读取 — 沿 Context 链查找

• V8 源码分析 词法环境 作用域链 静态编译期 & 动态运行时

• V8 源码分析 ThisBinding this全局数据流向 四条绑定规则的底层字节码

• V8 源码分析 闭包 - 让变量的生命周期独立于调用栈 的底层实现细节

• V8 源码分析 垃圾回收GC 新老生代的分代处理( 内存页标志位 )，大多数对象出生在新生代 Minor GC，在存活超过一轮之后晋升为老生代 Major GC

• em 在是 font-size 相对父元素字体大小，非font-size 属性相对当前自身元素字体大小

• 现代 CSS3 flex / grid 快速实现布局

• transition / animation 配合 transform 实现翻转效果动画

• 箭头函数特性

• V8 源码分析 启动注册内置全局对象Function Function 的 constructor, prototype ...

• V8 源码分析 老生代Major GC-三色标记

• ESM 会在静态编译阶段就分析依赖，不要在条件循环代码块中进行导入导出

• V8 源码分析 V8引擎只负责了微任务的调度，宏任务相关是纯虚函数让宿主环境覆盖

• Chromium 源码分析 事件循环 for( ; ; ) 并不会空转，而是根据是否有延时任务有两种休眠和唤醒方式

• Chromium 源码分析 浏览器决定携带cookie

• V8 源码分析 新生代 Minor GC 的处理细节 新生代的复制 GC 是以空间换时间，且时间代价与存活量成正比。老生代存活量大、体积大，两个维度都不划算

• useFetch useRef 创建在渲染期间持久存在、修改不触发重渲染的容器 AbortController 浏览器原生API用于取消异步操作 useEffect副作用清理函数会 在组件卸载时 以及 依赖项更新副作用下次执行之前 两种情况执行，常用于 AJAX请求、定时器、事件监听、WebSocket 的清理 不用 useCallback 的话，reFetch 每次渲染都会创建一个新的函数引用

• Ahooks 源码分析 useRequest 通过 计数器取消异步，没有用 AbortController ，因为 service 可以是任意的异步函数

• Ahooks 源码分析 useMemoizedFn: useCallback 依赖变化时引用会变，使用时需要注意依赖; 而 useMemoizedFn 引用永远稳定、无需设置依赖，且始终调用最新函数