思考点</th>	建议</th></tr></thead>
单一职责</strong></td>	一个组件只做一件事（例如：渲染列表、显示弹窗、处理表单输入）。如果功能变多，考虑拆分为更小的子组件。</td></tr>
可复用性</strong></td>	思考「这段 UI/逻辑」是否可能在其他页面或业务中使用。若是，则抽离成独立组件。</td></tr>
组合优于继承</strong></td>	使用 `props.children</code>、render props、函数子组件实现“插槽”式组合。</td></tr>`
命名规范</strong></td>	名称要语义化、简短、清晰。如 <UserAvatar /></code>、<OrderList /></code>、<CreateOrderForm /></code>。</td></tr> </tbody></table> 组件 API 设计</a></h2> 组件的“接口”设计直接决定了其易用性。</p> Props 设计原则</a></h3> 命名语义化</strong>：例如 isDisabled</code> 比 disabled</code> 更能明确表示这是一个布尔值开关。</li> 避免传递复杂对象</strong>：尽量只传递组件需要的数据，不要传递整个庞大的 user</code> 对象，而是只传 userName</code> 和 avatarUrl</code>。</li> 提供默认值</strong>：使用默认参数或解构赋值，降低使用门槛。</li> 深层传递优化</strong>：3 层以上的 props 传递可以考虑 Context、状态管理（如 Redux/Zustand）或自定义 Hook。</li> </ul> 统一的 Props 命名规范</a></h3> 事件回调：onXxx</code>（如 onSubmit</code>、onCancel</code>）</li> 布尔开关：isXxx</code> / hasXxx</code>（如 isLoading</code>、hasError</code>）</li> 数据集合：items</code>（列表）或 data</code>（单条）</li> </ul> // 好的设计：解构赋值 + 默认值 + 明确的类型注释</span></span> const</span> Button</span> =</span> (</span>{</span></span> type</span> =</span> "primary"</span>,</span></span> onClick</span>,</span></span> children</span>,</span></span> loading</span> =</span> false</span>,</span></span> }</span>:</span> ButtonProps</span>)</span> =></span> {</span></span> // ...</span></span> };</span></span></code></pre>利用 children</code> 和插槽</a></h3> 不要把所有内容都通过 props 传递。对于布局组件或容器类组件，优先使用 children</code>：</p> // 坏设计：写死内容结构</span></span> <</span>Card</span> title</span>=</span>"标题"</span> content</span>=</span>"内容"</span> /></span></span> </span> // 好设计：灵活的组合</span></span> <</span>Card</span>></span></span> <</span>Card.Header</span>></span>标题</span></</span>Card.Header</span>></span></span> <</span>Card.Body</span>></span>任意复杂的内容</span></</span>Card.Body</span>></span></span> </</span>Card</span>></span></span></code></pre>受控 vs 非受控组件</a></h3> 受控组件</strong>：由父组件完全控制状态，通过 props 接收 value</code> 和 onChange</code>。</li> 非受控组件</strong>：内部管理自己的状态，只在需要时通知父组件（通过 ref 暴露方法）。</li> 最佳实践</strong>：编写同时支持两种模式的组件（例如 Ant Design 的 Input，既可以受控也可以非受控）。</li> </ul> 逻辑复用与状态管理</a></h2> 状态下沉原则</a></h3> 状态应尽量放在离它最近的共同父组件中（局部状态）。</li> 不要随意引入 Redux/Zustand，对于模态框开关、表单输入等 UI 状态，保留在组件内部或父组件即可。</li> </ul> 逻辑抽离：自定义 Hooks</a></h3> 这是现代 React 设计的灵魂。如果组件中充斥着 useEffect</code>、useState</code> 和复杂的数据转换，应将它们抽离出来：</p> // 组件内逻辑混杂</span></span> const</span> UserList</span> =</span> ()</span> =></span> {</span></span> const</span> [</span>users</span>,</span> setUsers</span>]</span> =</span> useState</span>([])</span>;</span></span> useEffect</span>(</span>()</span> =></span> {</span> fetch</span>...</span> },</span> [])</span>;</span></span> // ... 渲染逻辑</span></span> };</span></span> </span> // 优秀设计：逻辑抽离</span></span> const</span> useUsers</span> =</span> ()</span> =></span> {</span></span> const</span> [</span>users</span>,</span> setUsers</span>]</span> =</span> useState</span>([])</span>;</span></span> useEffect</span>(</span>()</span> =></span> {</span> fetch</span>...</span> },</span> [])</span>;</span></span> return</span> {</span> users</span>,</span> loading</span>: !</span>users</span>.</span>length</span> };</span></span> };</span></span> </span> const</span> UserList</span> =</span> ()</span> =></span> {</span></span> const</span> {</span> users</span>,</span> loading</span> }</span> =</span> useUsers</span>()</span>;</span></span> // 现在组件只关心渲染</span></span> if</span> (loading)</span> return</span> <</span>Spinner</span> /></span>;</span></span> return</span> <</span>ul</span>></span>...</span></</span>ul</span>></span>;</span></span> };</span></span></code></pre>性能优化意识</a></h2> 设计组件时要有“防患于未然”的性能优化意识：</p> 避免不必要的渲染</a></h3> React.memo</strong>：对于接收相同 props 但渲染开销较大的组件，使用 React.memo</code> 进行浅比较优化。</li> useCallback / useMemo</strong>：如果传递给子组件的 props 是函数或对象，在父组件中使用 useCallback</code> 或 useMemo</code> 包裹，防止引用变化导致子组件无效刷新。</li> </ul> 合理的代码分割</a></h3> 对于大型组件（如复杂的图表、编辑器），使用 React.lazy</code> 和 Suspense</code> 进行懒加载：</p> const</span> HeavyChart</span> =</span> React</span>.</span>lazy</span>(</span>()</span> =></span> import</span>(</span>"./HeavyChart"</span>))</span>;</span></span> </span> const</span> Dashboard</span> =</span> ()</span> =></span> (</span></span> <</span>Suspense</span> fallback</span>=</span>{</span><</span>Skeleton</span> /></span>}</span>></span></span> <</span>HeavyChart</span> /></span></span> </</span>Suspense</span>></span></span> )</span>;</span></span></code></pre>实战案例：设计一个健壮的列表组件</a></h2> 假设我们要设计一个加载用户数据的列表。</p> 设计思路</a></h3> 分离关注点</strong>：数据获取与 UI 展示分离。</li> 可配置性</strong>：列表项如何渲染应由使用者决定。</li> 健壮性</strong>：处理加载态、空态和错误态。</li> </ul> interface</span> User</span> {</span></span> id</span>:</span> string</span>;</span></span> name</span>:</span> string</span>;</span></span> age</span>:</span> number</span>;</span></span> }</span></span> </span> const</span> useUserList</span> =</span> ()</span> =></span> {</span></span> const</span> [</span>users</span>,</span> setUsers</span>]</span> =</span> useState</span><</span>User[]</span>></span>([])</span>;</span></span> const</span> [</span>loading</span>,</span> setLoading</span>]</span> =</span> useState</span>(</span>true</span>)</span>;</span></span> const</span> [</span>error</span>,</span> setError</span>]</span> =</span> useState</span><</span>Error</span> \|</span> null</span>></span>(</span>null</span>)</span>;</span></span> </span> useEffect</span>(</span>()</span> =></span> {</span></span> fetch</span>(</span>"/api/users"</span>)</span></span> .</span>then</span>(</span>(</span>res</span>)</span> =></span> res</span>.</span>json</span>())</span></span> .</span>then</span>(</span>(</span>data</span>)</span> =></span> {</span></span> setUsers</span>(data)</span>;</span></span> setLoading</span>(</span>false</span>)</span>;</span></span> }</span>)</span></span> .</span>catch</span>(</span>(</span>err</span>)</span> =></span> {</span></span> setError</span>(err)</span>;</span></span> setLoading</span>(</span>false</span>)</span>;</span></span> }</span>)</span>;</span></span> },</span> [])</span>;</span></span> </span> return</span> {</span> users</span>,</span> loading</span>,</span> error</span> };</span></span> };</span></span> </span> interface</span> UserListProps</span> {</span></span> renderItem</span>?:</span> (</span>user</span>:</span> User</span>)</span> =></span> React</span>.</span>ReactNode</span>;</span></span> }</span></span> </span> const</span> UserList</span> =</span> ({</span> renderItem</span> }</span>:</span> UserListProps</span>)</span> =></span> {</span></span> const</span> {</span> users</span>,</span> loading</span>,</span> error</span> }</span> =</span> useUserList</span>()</span>;</span></span> </span> if</span> (loading)</span> return</span> <</span>div</span>></span>Loading...</span></</span>div</span>></span>;</span></span> if</span> (error)</span> return</span> <</span>div</span>></span>Error: </span>{</span>error</span>.</span>message</span>}</span></</span>div</span>></span>;</span></span> if</span> (users</span>.</span>length</span> ===</span> 0</span>)</span> return</span> <</span>div</span>></span>No users found.</span></</span>div</span>></span>;</span></span> </span> return</span> (</span></span> <</span>ul</span> className</span>=</span>"user-list"</span>></span></span> {</span>users</span>.</span>map</span>(</span>(</span>user</span>)</span> =></span> (</span></span> <</span>li</span> key</span>=</span>{</span>user</span>.</span>id</span>}</span>></span></span> {</span>/* 默认渲染逻辑，允许被覆盖 /</span>}</span></span> {</span>renderItem</span> ?</span> renderItem</span>(user)</span> :</span> user</span>.</span>name</span>}</span></span> </</span>li</span>></span></span> ))</span>}</span></span> </</span>ul</span>></span></span> )</span>;</span></span> };</span></span> </span> export default</span> UserList</span>;</span></span></code></pre>总结</a></h2> 设计优秀的 React 组件需要综合考虑多个维度：</p> 维度</th> 检查点</th> 详细说明 / 最佳实践</th></tr></thead> 职责单一</strong></td> 组件只做一件事？</td> 是否可以进一步拆分？是否存在逻辑过重的“巨型组件”？</td></tr> API 友好</strong></td> Props 设计质量</td> props 命名是否直观、语义化？是否有合理的默认值？是否实现了类型安全（TypeScript）？</td></tr> 可测试性</strong></td> 测试覆盖能力</td> 是否可以用 React Testing Library (RTL) 直接渲染并模拟交互？</td></tr> 可复用性</strong></td> 业务数据解耦程度</td> 是否只依赖 props / context，而不硬编码业务数据？逻辑是否通用？</td></tr> 性能优化</strong></td> 渲染效率</td> 是否需要 React.memo</code> / useMemo</code> / useCallback</code>？列表渲染是否使用了唯一的 key</code>？</td></tr> 样式管理</strong></td> 样式封装方式</td> 样式是否被封装（模块化 CSS 或 CSS-in-JS）？是否抽离了主题 token（颜色、间距等）？</td></tr> 可访问性</strong></td> Accessibility 支持</td> 是否有必要的 aria-</code> 属性和 role</code>？键盘导航是否完整可访问？</td></tr> 错误处理</strong></td> 健壮性</td> 是否有 ErrorBoundary</code> 包裹？异常状态（如接口报错）是否有友好提示？</td></tr> 文档建设</strong></td> 示例与文档</td> 是否提供 Storybook story 或清晰的文档示例代码？</td></tr> 组织规范</strong></td> 目录结构</td> 组件是否存放在对应的 features/</code> 或 components/</code> 目录下？</td></tr> </tbody></table> 设计要点回顾</a></h3> 职责拆分</strong>：让每个组件只负责“一件事”。</li> 函数组件 + Hooks</strong>：用函数组件和 Hooks 来组织 UI 与逻辑，保持代码简洁、可组合。</li> Props 设计</strong>：精心设计 props，确保语义化、类型安全，并提供合理的默认值。</li> 状态管理</strong>：分层管理（展示 ↔ 容器），使用 Context 或 Hooks 进行状态共享。</li> 样式处理</strong>：抽离样式，使用 CSS Modules、Styled-Components、Tailwind 或 UI 框架。</li> 性能优化</strong>：使用 React.memo</code>、虚拟列表、代码分割等手段。</li> 测试覆盖</strong>：确保测试到位，使用 RTL + Storybook + E2E 测试。</li> 遵循规范</strong>：遵循目录结构和设计检核表，保证项目长期可维护。</li> </ol> Leptos 中的暗色模式适配 2025-03-18T00:00:00+00:00 如今暗色模式已经是各个操作系统都实现的较为完善了，而浏览器也提供了一些方便适配的 API。</p> 实现一个简单的适配暗色模式只是第一步，既然浏览器已经提供好了较为完善的 API 那么就可以实现一个所谓的能用的暗色模式适配方案。</p> 在第一次打开页面或从未进行过设置时，优先匹配系统的颜色模式;</li> 在手动调整过颜色主题时，利用 localStorage</code> 进行保存，以实现再次打开或刷新的持续生效;</li> </ol> 第一步的实现在 CSS 的 mediaQuery</a> API 中可以去查询 '(prefers-color-scheme: dark)'</code> 来检测当前系统是否偏好暗色模式。</p> if</span> (</span></span> window</span>.</span>matchMedia</span> &&</span></span> window</span>.</span>matchMedia</span>(</span>"(prefers-color-scheme: dark)"</span>)</span>.</span>matches</span></span> )</span> {</span></span> // dark mode</span></span> }</span></span></code></pre> 甚至还可以对其使用事件监听器来进行系统颜色模式的切换进行监听。</p> window</span></span> .</span>matchMedia</span>(</span>"(prefers-color-scheme: dark)"</span>)</span></span> .</span>addEventListener</span>(</span>"change"</span>, (</span>event</span>)</span> =></span> {</span></span> const</span> newColorScheme</span> =</span> event</span>.</span>matches</span> ?</span> "dark"</span> :</span> "light"</span>;</span></span> }</span>)</span>;</span></span></code></pre> 在第二步的实现中，主要是判断好当前的状态，如果 localStorage</code> 中没有保存过的颜色主题，则使用第一步的系统匹配模式。</p> 整体的实现并不是多么的复杂，详细任何有经验的前端在任何环境下都能搓出来。但在 WebAssembly 中略有不同，尤其是在 Rust 中。对比 JavaScript 就会发现 Rust 为内存安全做了多大的努力（Rust 的空值判断有多麻烦</del>）。</p> WebAssembly</a></h2> 在 Rust 的 WASM 中访问浏览器的 DOM API 几乎都是通过 web_sys</a> 这个 crate，例如访问 window</a>。或者使用一些更为轻松的方法，例如使用 leptos_use</code></a></p> let</span> window</span> =</span> use_window</span>();</span></span> let</span> is_dark</span> =</span> window</span></span> .</span>match_media</span>(</span>"(prefers-color-scheme: dark)"</span>)</span></span> .</span>map</span>(</span>\|</span>m</span>\|</span> m</span>.</span>map</span>(</span>\|</span>mt</span>\|</span> mt</span>.</span>matches</span>())</span>.</span>unwrap_or</span>(</span>false</span>))</span></span> .</span>unwrap_or</span>(</span>false</span>);</span></span> logging</span>::</span>log!</span>(</span>"</span>{</span>is_dark</span>}</span>"</span>);</span></span></code></pre>Context</a></h2> Leptos 中的 provide_context</code> API 与 React 的 Context 十分类似，作用当然也是一样。使用 leptos_use</code> 中 use_color_mode_with_options</code> hooks 不仅仅可以实现主题的切换，更方便的还是它可以一起实现保存到 localStorage</code> 中。</p> // color mode global context</span></span> let</span> UseColorModeReturn</span> {</span> mode</span>,</span> set_mode</span>,</span> ..</span> }</span> =</span> use_color_mode_with_options</span>(</span></span> UseColorModeOptions</span>::</span>default</span>()</span></span> .</span>emit_auto</span>(</span>true</span>)</span></span> .</span>attribute</span>(</span>"data-theme"</span>)</span></span> .</span>custom_modes</span>(</span>COLOR_MODE</span>.</span>iter</span>()</span>.</span>map</span>(</span>\|</span>m</span>\|</span> m</span>.</span>to_string</span>())</span>.</span>collect</span>::</span><</span>_</span>></span>()),</span></span> );</span></span> provide_context</span>((</span>mode</span>,</span> set_mode</span>));</span></span></code></pre> Library</a></h2> Leptos use 提供了一些开箱即用的方法，可以更加方便的实现上述操作。</p> use</span> leptos_use</span>::</span>{</span>use_color_mode_with_options</span>,</span> UseColorModeOptions</span>,</span> UseColorModeReturn</span>};</span></span> </span> pub const</span> COLOR_MODE</span>:</span> [</span>&</span>str</span>;</span> 3</span>]</span> =</span> [</span>"auto"</span>,</span> "light"</span>,</span> "dark"</span>];</span></span> </span> // color mode global context</span></span> let</span> UseColorModeReturn</span> {</span> mode</span>,</span> set_mode</span>,</span> ..</span> }</span> =</span> use_color_mode_with_options</span>(</span></span> UseColorModeOptions</span>::</span>default</span>()</span></span> .</span>emit_auto</span>(</span>true</span>)</span></span> .</span>attribute</span>(</span>"data-theme"</span>)</span></span> .</span>custom_modes</span>(</span>COLOR_MODE</span>.</span>iter</span>()</span>.</span>map</span>(</span>\|</span>m</span>\|</span> m</span>.</span>to_string</span>())</span>.</span>collect</span>::</span><</span>_</span>></span>()),</span></span> );</span></span> provide_context</span>((</span>mode</span>,</span> set_mode</span>));</span></span></code></pre> 通过 leptos 的全局状态，可以直接设置对应的主题。</p> // components/dark_mode_btn.rs</span></span> use</span> std</span>::</span>borrow</span>::</span>Cow</span>;</span></span> </span> use</span> leptos</span>::</span>prelude</span>::</span>;</span></span> use</span> leptos_use</span>::</span>ColorMode</span>;</span></span> </span> use crate</span>::</span>{</span>consts</span>::</span>COLOR_MODE</span>,</span> utils</span>::</span>capitalize_first</span>};</span></span> </span> /// 颜色模式切换下拉框</span></span> #</span>[</span>component</span>]</span></span> pub fn</span> DarkMode</span>(</span>#</span>[</span>prop</span>(</span>optional</span>)]</span> class</span>:</span> Cow</span><</span>'</span>static</span>,</span> str</span>></span>)</span> -></span> impl</span> IntoView</span> {</span></span> let</span> (</span>mode</span>,</span> set_mode</span>)</span> =</span> use_context</span>::</span><</span>(</span>Signal</span><</span>ColorMode</span>></span>,</span> WriteSignal</span><</span>ColorMode</span>></span>)</span>></span>()</span></span> .</span>expect</span>(</span>"to have found the setter provided"</span>);</span></span> </span> view!</span> {</span></span> <</span>div class</span>=</span>move</span> \|\|</span> format!</span>(</span>"dropdown </span>{</span>class</span>}</span>"</span>)</span>></span></span> <</span>div tabindex</span>=</span>"0"</span> role</span>=</span>"button"</span> class</span>=</span>"m-1 btn"</span>></span></span> Themes</span></span> <</span>/</span>div</span>></span></span> <</span>ul</span></span> tabindex</span>=</span>"0"</span></span> class</span>=</span>"dropdown-content menu bg-base-100 rounded-box z-1 w-32 p-2 shadow flex flex-col h-64 overflow-y-auto flex-nowrap"</span></span> ></span></span> <</span>For</span></span> each</span>=</span>move</span> \|\|</span> COLOR_MODE</span></span> key</span>=\|</span>theme</span>\|</span> theme</span>.</span>to_string</span>()</span></span> children</span>=</span>move</span> \|</span>theme</span>\|</span> {</span></span> view!</span> {</span></span> <</span>li class</span>=</span>"w-full"</span> on</span>:</span>click</span>=</span>move</span> \|</span>_</span>\|</span> set_mode</span>.</span>set</span>(</span>theme</span>.</span>into</span>())</span>></span></span> <</span>a class</span>:</span>active</span>=</span>move</span> \|\|</span> {</span></span> mode</span>.</span>get</span>()</span>.</span>to_string</span>()</span> ==</span> theme</span></span> }</span>></span>{</span>capitalize_first</span>(</span>theme</span>)}</span><</span>/</span>a</span>></span></span> <</span>/</span>li</span>></span></span> }</span></span> }</span></span> /</span>></span></span> <</span>/</span>ul</span>></span></span> <</span>/</span>div</span>></span></span> }</span></span> }</span></span></code></pre> 第 9 章结构体 2025-02-12T00:00:00+00:00 Rust 有 3 种结构体类型：具名字段型结构体、元组结构体和单元型结构体。</p> 具名型结构体：为每个组件命名。</li> 元组型结构体：按组件出现的顺序标识他们。</li> 单元型结构体：没有组件。</li> </ul> 具名结构体</a></h2> struct</span> GrayscaleMap</span> {</span></span> pixels</span>:</span> Vec</span><</span>u8</span>></span>,</span></span> size</span>:</span> (</span>usize</span>,</span> usize</span>),</span></span> }</span></span></code></pre> 与其他所有语法项一样，结构体默认情况下是私有的，仅在声明它们的模块及其子模块种可见。可以通过在结构体的定义前加上 pub</code> 来是结构体在其模块外部可见。结构体中的每个字段也是默认私有的。</p> pub struct</span> GrayscaleMap</span> {</span></span> pub</span> pixels</span>:</span> Vec</span><</span>u8</span>></span>,</span></span> pub</span> size</span>:</span> (</span>usize</span>,</span> usize</span>),</span></span> }</span></span></code></pre> 其他模块不能按名称访问私有字段或使用结构体表达式来创建新的 GrayscaleMap</code> 值。</p> 在结构体表达式中，如果具有名字的字段后面跟着 .. EXPR</code>，则任何未提及的字段都会从 EXPRE</code>（必须是相同结构体的另一个值）中获取它们的值。</p> struct</span> Broom</span> {</span></span> name</span>:</span> String</span>,</span></span> height</span>:</span> u32</span>,</span></span> health</span>:</span> u32</span>,</span></span> position</span>:</span> (</span>f32</span>,</span> f32</span>,</span> f32</span>),</span></span> intent</span>:</span> BroomIntent</span>,</span></span> }</span></span> </span> #</span>[</span>derive</span>(</span>Copy</span>,</span> Clone</span>)]</span></span> enum</span> BroomIntent</span> {</span></span> FetchWater</span>,</span></span> DumpWater</span>,</span></span> }</span></span> </span> fn</span> chop</span>(</span>b</span>:</span> Broom</span>)</span> -></span> (</span>Broom</span>,</span> Broom</span>) {</span></span> let mut</span> broom1</span> =</span> Broom</span> {</span></span> height</span>:</span> b</span>.</span>height </span>/</span> 2</span>,</span></span> ..</span>b</span></span> };</span></span> </span> let mut</span> broom2</span> =</span> Broom</span> {</span></span> name</span>:</span> broom1</span>.</span>name</span>.</span>clone</span>(),</span></span> ..</span>broom1</span></span> };</span></span> </span> broom1</span>.</span>name</span>.</span>push_str</span>(</span>" I"</span>);</span></span> broom2</span>.</span>name</span>.</span>push_str</span>(</span>" II"</span>);</span></span> </span> (</span>broom1</span>,</span> broom2</span>)</span></span> }</span></span></code></pre>元组型结构体</a></h2> 元组型结构体顾名思义类似于元组：</p> struct</span> Bounds</span>(</span>usize</span>,</span> usize</span>);</span></span></code></pre> 表达式 Bounds(1024, 768)</code> 看起来像一个函数调用，实际上它确实是，级定义这种类型时也隐式定义了一个函数：</p> fn</span> Bounds</span>(</span>elem0</span>:</span> usize</span>,</span> elem1</span>:</span> uszie</span>)</span> -></span> Bounds</span> {</span> ...</span> }</span></span></code></pre> 元组型结构体适用于创造新类型</strong>（newtype），即建立一个只包含单组件的结构体，以获得更严格的类型检查。</p> 单元型结构体</a></h2> 单元型结构体声明了一个根本没有元素的结构体类型：</p> struct</span> onesuch</span>;</span></span></code></pre> 这种类型的值不占用内存，很像单元类型 ()</code>。Rust 既不会在内存中实际存储单元类型的值，也不会生成代码对它们进行操作，因为仅通过值的类型它就能知道关于值的所有信息</p> 结构体布局</a></h2> 在内存中，具名字段结构体和元组型结构体是一样的：值的集合以特定的方式在内存中布局。</p> struct</span> GrayscaleMap</span> {</span></span> pixels</span>:</span> Vec</span><</span>u8</span>></span>,</span></span> size</span>:</span> (</span>usize</span>,</span> usize</span>),</span></span> }</span></span></code></pre> 与 C 和 C++ 不同，Rust 没有具体承诺它将如何在内存中对结构体的字段或元素进行排序。然而，Rust 确实承诺会将字段的值直接存储在结构体本身的内存块中。JavaScript、Python 和 Java 会将 pixels</code> 值和 size</code> 值分别放在它们自己的分配的堆上的块中，并让 GrayscaleMap</code> 的字段指向它们，而 Rust 会将 pixel</code> 值和 size</code> 值直接嵌入在 GrayscaleMap</code> 值中。只有由 pixels</code> 向量拥有的在堆上分配的缓冲区才会留在它自己的块中。</p> 可以使用 #[repr(C)]</code> 属性要求 Rust 以兼容 C 和 C++ 的方式对结构体进行布局。</p> 方法</a></h2> 在 impl</code> 块中定义的函数被称为关联函数，因为它们是与特定类型相关联的。与关联函数相对应的是自由函数，它是未定义在 impl</code> 块中的语法项。</p> impl</code> 块知识定义 fn</code> 的集合，每个定义都会成为块顶部命名的结构体类型上的一个方法。</p> 当调用一个需要引用的方法时，我们不需要自己借用可变引用，常规的方法调用语法已经隐式的处理了这一点。</p> struct</span> Queue</span><</span>T</span>></span> {</span></span> older</span>:</span> Vec</span><</span>T</span>></span>,</span></span> younger</span>:</span> Vec</span><</span>T</span>></span>,</span></span> }</span></span> </span> impl</span><</span>T</span>></span> Queue</span><</span>T</span>></span> {</span></span> pub fn</span> push</span>(</span>&</span>mut</span> self</span>,</span> item</span>:</span> T</span>) {</span></span> self</span>.</span>younger</span>.</span>push</span>(</span>item</span>);</span></span> }</span></span> }</span></span> </span> let mut</span> q</span> =</span> Queue</span> {</span></span> older</span>:</span> vec!</span>[</span>1</span>],</span></span> younger</span>:</span> vec!</span>[],</span></span> };</span></span> </span> q</span>.</span>push</span>(</span>2</span>);</span></span></code></pre> 只需要编写 q.push()</code> 就可以借入对 q</code> 的可变引用，就好像写的是 (&mut q).push()</code> 一样，因为这是 push</code> 方法的 self</code> 参数所要求的。</p> 第 8 章 Create 与模块 2025-01-12T00:00:00+00:00 有时，可能需要对函数的内联进行微观管理，但我们通常会把这种优化留给编译器。可以使用 #[inline]</code> 属性进行微观管理：</p> #</span>[</span>inline</span>]</span></span> fn</span> add</span>(</span>x</span>:</span> i32</span>,</span> y</span>:</span> i32</span>)</span> -></span> i32</span> {</span></span> x</span> +</span> y</span></span> }</span></span></code></pre> 只有在一种特定的情况下，如果没有 #[inline]</code>，就不会发生内联。当一个 crate 中定义的函数或方法在另一个 crate 中被调用时，Rust 不会将其内联，除非它是泛型的或名曲的标记为 #[inline]</code>。</p> 第 7 章错误处理 2024-12-12T00:00:00+00:00 Rust 中有两类常见的错误处理：panic</code> 和 Result</code>。</p> 普通错误使用 Result</code> 类型来处理。Result</code> 通常用以表示由程序外部的事物引发的错误，比如错误的输入、网络的中断或权限问题。</p> panic</code> 针对的是另一种错误，即那种永远不应该发生的错误。</p> Rust 之所以会用一个新词（panic）而不是沿用“异常”来表达，是因为两者并不等价。</p> </blockquote> panic</a></h2> 当程序遇到下列问题时，就可以断定程序自身存在 Bug，故而引发 panic：</p> 数组越界访问；</li> 整数除以 0；</li> 在恰好为 Err</code> 的 Result</code> 上调用 .expect()</code>；</li> 断言失败；</li> </ul> 在 panic 时，Rust 为我们提供了一种选择，展开调用栈或者终止进程。展开调用栈是默认方案。</p> 展开调用栈</a></h3> 如果在 Rust 中除以了 0，就会触发 panic，通常按如下方式处理：</p> #</span>[</span>allow</span>(</span>unconditional_panic</span>)]</span></span> fn</span> main</span>() {</span></span> let</span> x</span> =</span> 37</span> /</span> 0</span>;</span></span> }</span></span></code></pre> 把一条错误信息打印到终端。</li> </ul> thread</span> 'main' panicked at main.rs:3:13:</span></span> attempt</span> to divide by zero</span></span> note:</span> run with</span> `</span>RUST_BACKTRACE</span>=</span>1</span>`</span> environment</span> variable to display a backtrace</span></span></code></pre> 如果设置了 RUST_BACKTRACE=1</code> 环境变量，那么就像这条消息打印的一样，Rust 也会在这里转储当前调用栈。</p> ❯</span> RUST_BACKTRACE=</span>1</span> ./main</span></span> thread</span> 'main' panicked at main.rs:3:13:</span></span> attempt</span> to divide by zero</span></span> stack</span> backtrace:</span></span> 0:</span> rust_begin_unwind</span></span> at</span> /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library/std/src/panicking.rs:645:5</span></span> 1:</span> core::panicking::panic_fmt</span></span> at</span> /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library/core/src/panicking.rs:72:14</span></span> 2:</span> core::panicking::panic</span></span> at</span> /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library/core/src/panicking.rs:145:5</span></span> 3:</span> main::main</span></span> 4:</span> core::ops::function::FnOnce::call_once</span></span> note:</span> Some details are omitted, run with</span> `</span>RUST_BACKTRACE</span>=</span>full</span>`</span> for</span> a verbose backtrace.</span></span></code></pre> 展开调用栈。这很像 C++ 的异常处理。当前函数使用的任何临时值、局部变量或参数都会按照与创建它们时相反的顺序被丢弃。丢弃一个值仅仅意味着随后会进行清理：程序正在使用的任何字符串或者向量都将被释放，所有打开的文件都将被关闭，等等。还会调用由用户定义的 drop</code> 方法。</li> </ul> 清理了当前函数调用后，我们将继续执行到其调用者中，以相同的方式丢弃其变量和参数。然后再“走到”那个调用者的调用者中，在调用栈中逐级向上，以此类推。</p> panic 是安全的，没有违反 Rust 的任何安全规则，即使你故意在标准库方法的中间引发 panic，它也永远不会在内存中留下悬空指针或半初始化的值。</p> panic 是基于线程的，一个线程 panic 时，其他线程可以继续做自己的事。</p> 第 5 章引用 2024-10-10T00:00:00+00:00 Rust 中的指针分为拥有型指针和非拥有型指针。其中，拥有型指针意味着当拥有者被丢弃时，它的引用目标也会随之消失。引用（reference）的非拥有型指针，意味着对引用目标的生命周期毫无影响。</p> 事实上，引用的生命周期绝不能超过其引用目标。为了强调这一点，Rust 把创建对某个值的引用的操作称为借用（borrow）那个值：凡是借用，终须归还。</p> 为了在不影响其所有权的情况下访问值。引用分为一下两种。</p> 共享引用允许我们读取但不能修改其引用目标。但是，共享引用可以同时存在任意数量个。共享引用是 Copy 类型。</li> 可变引用允许我们读取和修改值。但是，一旦一个值拥有了比可变引用，就无法再对该值创建其他任何种类的引用了。可变引用同时只能存在一个。可变引用不是 Copy 类型。</li> </ul> 共享引用和可变引用之间的区别可以视为在编译器强制执行“多重读取”或“单一写入”规则的一种手段。</p> 当通过将值的所有权转移给函数的方式将这个值传递给函数时，就可以说按值传递了它。如果将值的引用传递给函数，就可以说按引用传递了它。</p> 如果需要用一个值来表示对某个“可能不存在”事物的引用，请使用类型 Option<&T></code>。在机器码级别，Rust 会将 None 表示为空指针，将 Some(r)</code> 表示为非零地址（其中 r</code> 是 &T</code> 型的值），因此 Option<&T></code> 和 C 或 C++ 中的可空指针一样高效，但更安全：它的类型要求我们在使用之前必须检查它是否为 None。</p> 除了对简单地址的引用，Rust 还包括两种胖指针，即携带某个值地址的双字值，以及要正确使用该值所需的某些额外信息。</p> 对切片的引用就是一个胖指针，携带者此切片的起始地址及其长度。</p> 另一个胖指针是特型对象，即对实现了指定特型的值的引用。特型对象会携带一个值的地址和指向适用于该值的特型实现的指针。</p> 生命周期</a></h2> 包含引用的结构体</a></h3> 对于一个包含引用的结构体，Rust 要求我们必须要写出它的生命周期</p> struct</span> Person</span> {</span></span> name</span>: &</span>str</span>,</span></span> }</span></span></code></pre> 编译器会贴心的为我们提示需要修改的地方</p> error[E0106]:</span> missing lifetime specifier</span></span> --</span>></span> examples/reference.rs:2:11</span></span> \|</span></span> 2</span> \|</span> name:</span> &</span>str,</span></span> \|</span> ^</span> expected named lifetime parameter</span></span> \|</span></span> help:</span> consider introducing a named lifetime parameter</span></span> \|</span></span> 1</span> ~ struct Person</span><</span>'a> {</span></span> 2 ~ name: &'a str,</span></span> \|</span></span></code></pre>不同的生命周期参数</a></h3> 当一个结构体只多个字段分别来自不同的生命周期的变量，而结构体本身只有一个生命周期时，编译器可能无法推断准确的引用。</p> struct</span> Person</span><</span>'</span>a</span>></span> {</span></span> pub</span> name</span>: &</span>'</span>a</span> str</span>,</span></span> pub</span> age</span>: &</span>'</span>a</span> u32</span>,</span></span> }</span></span> </span> fn</span> main</span>() {</span></span> let</span> name</span> =</span> String</span>::</span>from</span>(</span>"xfy"</span>);</span></span> let</span> n</span>;</span></span> {</span></span> let</span> age</span> =</span> 18</span>u32</span>;</span></span> let</span> xfy</span> =</span> Person</span> {</span></span> name</span>: &</span>name</span>,</span></span> age</span>: &</span>age</span>,</span></span> };</span></span> n</span> =</span> xfy</span>.</span>name</span>;</span></span> }</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> n</span>);</span></span> }</span></span></code></pre>error[E0597]:</span> `</span>age</span>`</span> does</span> not live long enough</span></span> --</span>></span> examples/reference.rs:13:18</span></span> \|</span></span> 10</span> \|</span> let</span> age = 18u32</span>;</span></span> \|</span> ---</span> binding</span> `</span>age</span>`</span> declared</span> here</span></span> ...</span></span> 13</span> \|</span> age:</span> &</span>age,</span></span> \|</span> ^^^^</span> borrowed value does not live long enough</span></span> ...</span></span> 16</span> \|</span> }</span></span> \|</span> -</span> `</span>age</span>`</span> dropped</span> here while still borrowed</span></span> 17</span> \|</span> println!("{}",</span> n</span>)</span>;</span></span> \|</span> -</span> borrow later used here</span></span></code></pre> 虽然代码本身不会创建任何悬空指针，但是编译器还是拒绝了这段代码。</p> Person</code> 的两个字段在生命周期的生命上具有相同的生命周期 'a</code> 的引用，因此 Rust 必须要找到一个同时适合 xfy.name</code> 和 xfy.age</code> 的生命周期。</li> 赋值 n = xfy.name</code> 就要求 'a</code> 涵盖到变量 n</code> 到生命周期。</li> 使用 &age</code> 初始化 xfy.age</code>，这就要求 'a</code> 不能长于 age</code> 的生命周期。</li> </ul> 显然这些约束是不能同时满足的，所以就需要为结构体的不同字段声明使用不同的生命周期。</p> struct</span> Person</span><</span>'</span>a</span>, '</span>b</span>></span> {</span></span> pub</span> name</span>: &</span>'</span>a</span> str</span>,</span></span> pub</span> age</span>: &</span>'</span>b</span> u32</span>,</span></span> }</span></span> </span> fn</span> main</span>() {</span></span> let</span> name</span> =</span> String</span>::</span>from</span>(</span>"xfy"</span>);</span></span> let</span> n</span>;</span></span> {</span></span> let</span> age</span> =</span> 18</span>u32</span>;</span></span> let</span> xfy</span> =</span> Person</span> {</span></span> name</span>: &</span>name</span>,</span></span> age</span>: &</span>age</span>,</span></span> };</span></span> n</span> =</span> xfy</span>.</span>name</span>;</span></span> }</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> n</span>);</span></span> }</span></span></code></pre> 第 4 章所有权与移动 2024-05-22T00:00:00+00:00 谈及内存管理，我们希望编程语言具备两个特点：</p> 希望能在我们选定的时机及时释放，这使我们能控制程序的内存消耗；</li> 在对象被释放后，我们绝不希望继续使用指向它的指针，这是未定义行为，会导致崩溃和安全漏洞。</li> </ul> 所有权</a></h2> 在使用指向一个堆内存的指针时，人们普遍认为，虽然其他代码也可以创建指向拥有内存的临时指针，但是在拥有者决定销毁拥有对象之前，其他代码有责任确保其指针已消失。这便是所有权的示例，拥有者决定被拥有者的生命周期，其他所有人都必须尊重其决定。</p> 然而，在 Rust 中，所有权这个概念内置于语言本身，并通过编译期检查强制执行。每个值都有决定其生命周期的唯一拥有者。当游泳者被释放时，它拥有的值也会同时被释放，在 Rust 术语中，释放的行为被称为丢弃</strong>（drop）。</p> Rust 的 Box 类型是所有权的另一个例子。Box<T></code> 是指向在堆上的 T</code> 类型值的指针。因为 Box 拥有它所指向的空间，所以当丢弃 Box 时，也会释放此空间。</p> let</span> point</span> =</span> Box</span>::</span>new</span>((</span>0</span>.</span>625</span>,</span> 0</span>.</span>5</span>));</span></span> let</span> label</span> =</span> format!</span>(</span>"</span>{</span>:?</span>}</span>"</span>,</span> point</span>);</span></span> println!</span>(</span>"Point </span>{}</span>"</span>,</span> label</span>);</span></span></code></pre> 就像变量拥有自己的值一样，结构体拥有自己的字段，元组、数组和向量拥有自己的元素。</p> struct</span> Person</span> {</span></span> name</span>:</span> String</span>,</span></span> age</span>:</span> u32</span>,</span></span> }</span></span> </span> let</span> composers</span> =</span> vec!</span>[</span></span> Person</span> {</span></span> name</span>:</span> "xfy"</span>.</span>to_string</span>(),</span></span> age</span>:</span> 18</span>,</span></span> },</span></span> Person</span> {</span></span> name</span>:</span> "dfy"</span>.</span>to_string</span>(),</span></span> age</span>:</span> 18</span>,</span></span> },</span></span> Person</span> {</span></span> name</span>:</span> "Sonetto"</span>.</span>to_string</span>(),</span></span> age</span>:</span> 18</span>,</span></span> },</span></span> ];</span></span> </span> composers</span>.</span>iter</span>()</span>.</span>for_each</span>(</span>\|</span>composer</span>\|</span> {</span></span> println!</span>(</span>"</span>{}</span>, age </span>{}</span>"</span>,</span> composer</span>.</span>name</span>,</span> composer</span>.</span>age</span>);</span></span> });</span></span></code></pre> 这里有很多所有权关系，但每个都一目了然：composers</code> 变量拥有一个向量，向量拥有自己的元素，每个元素都是一个 Person</code> 结构体，每个结构体都拥有自己的字段，并且字符串拥有自己的文本。当控制流离开声明 composers</code> 的作用域时，程序会丢弃自己的值并将整棵所有权树一起丢弃。</p> 所有权关系的重要性：每个值都有一个唯一的拥有者，因此很容易决定何时丢弃它。但是每个值可能会拥有许多其他值，这些值还可能拥有其他值。</p> 由此可见，拥有者及其拥有那些值形成了一棵树：值的拥有者时值的父节点，值拥有的值时值的字节点。每棵树的总根都是一个变量，当该变量超出作用域时，整棵树都将随之消失。</p> 从某种意义上来说，Rust 确实不如其他语言强大：其他所有使用的编程语言都允许你构建出任意复杂的对象图，这些对象可以以我们认为合适的方式相互引用。</p> 解决问题的方式通常时灵活多样的，因此总是会有一些完美的解决方案能同时满足它所施加的限制。</p> </blockquote> 单一所有权的概念仍然过于严格，还处理不了某些场景。Rust 从几个方面拓展了这种简单的思想。</p> 可以将值从一个拥有者转移给另一个拥有者。这允许我们构建、重新排列和拆除树形结构。</li> 像整数、浮点数和字符这样的非常简单的类型，不受所有权规则的约束。这些称之为 Copy 类型。（通常是存在栈上可复制的类型）</li> 标准库提供了引用计数指针类型 Rc 和 Arc，它们允许值在某些限制下有多个拥有者。</li> 可以对值进行”借用“（borrow），以获得值的引用。这种引用是非拥有型指针，有着受限的生命周期。</li> </ul> 移动</a></h2> 在 Rust 中，对大多数类型来说（没有实现 Copy 的值），像为变量赋值、将其传递给函数或从函数返回这样的操作都不会复制，而是会移动</strong>值。源会把值的所有权转移给目标并变回未初始化状态，改由目标变量来控制值的生命周期。Rust 程序以每次指移动一个值的方式建立和拆除复杂的结构。</p> 历史发展到今天，赋值应该已经是含义最明确的操作了。但是，如果仔细观察不同的语言处理赋值的操作方式，你会发现不同的编程流派之间实际上存在着相当明显的差异。</p> 例如如下 Python 代码：</p> arr</span> =</span> [</span>'udon'</span>,</span> 'ramen'</span>,</span> 'soba'</span>]</span></span> trr</span> =</span> arr</span></span> urr</span> =</span> arr</span></span> </span> print</span>(</span>"Address of arr"</span>,</span> hex</span>(</span>id</span>(</span>arr</span>)))</span></span> print</span>(</span>"Address of trr"</span>,</span> hex</span>(</span>id</span>(</span>trr</span>)))</span></span> print</span>(</span>"Address of urr"</span>,</span> hex</span>(</span>id</span>(</span>urr</span>)))</span></span></code></pre> 每个 Python 对象都有一个引用计数，以用于跟踪当前正引用着此值的数量。因此对于一个引用值数组来说，只有 arr</code> 变量指向列表，当程序对 trr</code> 和 urr</code> 赋值时，Python 会直接让目标指向与源相同的对象，并增加引用计数来实现赋值。这和我们的老朋友 JavaScript 是类似的。</p> 而在 C++ 中：</p> // Include the necessary header files</span></span> #include</span> <iostream></span></span> #include</span> <vector></span></span> #include</span> <string></span></span> </span> // Declare the namespace</span></span> using namespace</span> std</span>;</span></span> </span> // Write a main function</span></span> int</span> main</span>() {</span></span> // Create three vectors of strings</span></span> vector </span><</span>string</span>></span> arr </span>=</span> {</span>"udon"</span>,</span> "ramen"</span>,</span> "soba"</span>};</span></span> vector </span><</span>string</span>></span> trr </span>=</span> arr</span>;</span></span> vector </span><</span>string</span>></span> urr </span>=</span> arr</span>;</span></span> </span> cout </span><< &</span>arr </span><<</span> endl</span>;</span></span> cout </span><< &</span>trr </span><<</span> endl</span>;</span></span> cout </span><< &</span>urr </span><<</span> endl</span>;</span></span> </span> // Return 0 to indicate success</span></span> return</span> 0</span>;</span></span> }</span></span></code></pre> 赋值向量时则会深拷贝所有对象，从而选择让全部内存的所有权保持清晰。</p> 而在 Rust 中，同样的的代码在默认情况下则无法通过编译：</p> fn</span> main</span>() {</span></span> let</span> arr</span> =</span> vec!</span>[</span>"udon"</span>,</span> "ramen"</span>,</span> "soba"</span>];</span></span> let</span> trr</span> =</span> arr</span>;</span></span> let</span> urr</span> =</span> arr</span>;</span></span> </span> println!</span>(</span>"Address of arr </span>{</span>:?</span>}</span>"</span>,</span> &</span>arr</span> as</span> </span>const</span> Vec</span><</span>&</span>str</span>></span>);</span></span> println!</span>(</span>"Address of trr </span>{</span>:?</span>}</span>"</span>,</span> &</span>trr</span> as</span> </span>const</span> Vec</span><</span>&</span>str</span>></span>);</span></span> println!</span>(</span>"Address of urr </span>{</span>:?</span>}</span>"</span>,</span> &</span>urr</span> as</span> </span>const</span> Vec</span><</span>&</span>str</span>></span>);</span></span> }</span></span></code></pre> 这是因为 Rust 的赋值操作会移动</strong>而不是复制或共享值。当我们将 arr</code> 赋给 trr</code> 时，arr</code> 的所有权被转移给了 trr</code>，而 arr</code> 变成了未初始化状态。这意味着我们不能再使用 arr</code> 来访问或修改向量。同样地，当我们将 trr</code> 赋给 urr</code> 时，trr</code> 的所有权也被转移给了 urr</code>，而 trr</code> 也变成了未初始化状态。因此，我们只能使用 urr</code> 来操作向量。</p> 当然，如果我们需要达到与 C++ 同样的效果，则可以显式的深克隆目标对象：</p> fn</span> main</span>() {</span></span> let</span> arr</span> =</span> vec!</span>[</span>"udon"</span>,</span> "ramen"</span>,</span> "soba"</span>];</span></span> let</span> trr</span> =</span> arr</span>.</span>clone</span>();</span></span> let</span> urr</span> =</span> arr</span>.</span>clone</span>();</span></span> </span> println!</span>(</span>"Address of arr </span>{</span>:?</span>}</span>"</span>,</span> &</span>arr</span> as</span> </span>const</span> Vec</span><</span>&</span>str</span>></span>);</span></span> println!</span>(</span>"Address of trr </span>{</span>:?</span>}</span>"</span>,</span> &</span>trr</span> as</span> </span>const</span> Vec</span><</span>&</span>str</span>></span>);</span></span> println!</span>(</span>"Address of urr </span>{</span>:?</span>}</span>"</span>,</span> &</span>urr</span> as</span> </span>const</span> Vec</span><</span>&</span>str</span>></span>);</span></span> }</span></span></code></pre>值的移动</a></h3> 在一个常见的 Rust 赋值操作中，通常可能会涉及到很多移动操作（只要没有实现 Copy trait 的值，默认则都是移动）。像这样移动值乍一看可能效率低下，但有两点需要牢记。首先，移动的永远时值本身，而不是这些值拥有的堆存储。对象向量和字符串，值本身</strong>就是指单独的“三字标头”，幕后的大型元素数组和文本缓冲区仍然处于它们在堆中的位置。</p> 移动与控制流</a></h3> 如果一个变量在执行了 if</code> 表达式中的条件后仍然有值，那么就可以在这两个分支中使用它：</p> let</span> x</span> =</span> vec!</span>[</span>1</span>,</span> 2</span>,</span> 3</span>];</span></span> if</span> c</span> {</span></span> f</span>(</span>x</span>);</span> // Using 'x' here is allowed</span></span> }</span> else</span> {</span></span> g</span>(</span>x</span>);</span> // Using 'x' here is allowed</span></span> }</span></span> h</span>(</span>x</span>);</span> // Using 'x' here is not allowed, 'x' has been moved</span></span></code></pre> 出于类似的原因，禁止在循环中进行变量移动：</p> let</span> x</span> =</span> vec!</span>[</span>1</span>,</span> 2</span>,</span> 3</span>];</span></span> while</span> f</span>() {</span></span> g</span>(</span>x</span>);</span> // Moving 'x' in a loop is not allowed</span></span> }</span></span> </span></code></pre> 同理，如果要从 Vec 中移动出一个元素，则会令其来源变为未初始化的状态，因为目标将获得该值的所有权，但并非值的每种拥有者都能变成未初始化的状态：</p> let</span> v</span> =</span> vec!</span>[</span>"Hello"</span>.</span>to_string</span>(),</span> "World"</span>.</span>to_string</span>()];</span></span> let</span> second</span> =</span> v</span>[</span>1</span>];</span> // 'second' takes ownership, leaving 'v' in an undefined state</span></span></code></pre> 所以要从 Vec 中移动出某个元素，需要使用一些特定的方法：</p> // Create a vector of strings</span></span> let mut</span> vec</span> =</span> vec!</span>[</span>"apple"</span>,</span> "banana"</span>,</span> "cherry"</span>,</span> "date"</span>,</span> "elderberry"</span>];</span></span> </span> // Remove and return the element at index 2</span></span> let</span> fruit</span> =</span> vec</span>.</span>remove</span>(</span>2</span>);</span></span> println!</span>(</span>"Removed </span>{}</span>"</span>,</span> fruit</span>);</span> // cherry</span></span> println!</span>(</span>"Vector is now </span>{</span>:?</span>}</span>"</span>,</span> vec</span>);</span> // ["apple", "banana", "date", "elderberry"]</span></span> </span> // Remove and return the element at index 1, replacing it with the last element</span></span> let</span> fruit</span> =</span> vec</span>.</span>swap_remove</span>(</span>1</span>);</span></span> println!</span>(</span>"Removed </span>{}</span>"</span>,</span> fruit</span>);</span> // banana</span></span> println!</span>(</span>"Vector is now </span>{</span>:?</span>}</span>"</span>,</span> vec</span>);</span> // ["apple", "elderberry", "date"]</span></span> </span> // Remove and return the last element</span></span> let</span> fruit</span> =</span> vec</span>.</span>pop</span>();</span></span> println!</span>(</span>"Removed </span>{</span>:?</span>}</span>"</span>,</span> fruit</span>);</span> // Some("date")</span></span> println!</span>(</span>"Vector is now </span>{</span>:?</span>}</span>"</span>,</span> vec</span>);</span> // ["apple", "elderberry"]</span></span> </span> // Consume the vector and move its elements into a new vector</span></span> let mut</span> new_vec</span>:</span> Vec</span><</span>String</span>></span> =</span> vec!</span>[];</span></span> for</span> fruit</span> in</span> vec</span>.</span>into_iter</span>() {</span></span> new_vec</span>.</span>push</span>(</span>fruit</span>);</span></span> }</span></span> println!</span>(</span>"New vector is </span>{</span>:?</span>}</span>"</span>,</span> new_vec</span>);</span> // ["apple", "elderberry"]</span></span> </span> // Create another vector of strings</span></span> let mut</span> vec</span> =</span> vec!</span>[</span>"fig"</span>,</span> "grape"</span>,</span> "honeydew"</span>,</span> "kiwi"</span>,</span> "lime"</span>];</span></span> </span> // Create a draining iterator that removes and yields elements from index 1 to 3 (exclusive)</span></span> let mut</span> iter</span> =</span> vec</span>.</span>drain</span>(</span>1</span>..</span>3</span>);</span></span> println!</span>(</span>"Drained </span>{</span>:?</span>}</span>"</span>,</span> iter</span>.</span>next</span>());</span> // Some("grape")</span></span> println!</span>(</span>"Drained </span>{</span>:?</span>}</span>"</span>,</span> iter</span>.</span>next</span>());</span> // Some("honeydew")</span></span> println!</span>(</span>"Drained </span>{</span>:?</span>}</span>"</span>,</span> iter</span>.</span>next</span>());</span> // None</span></span> println!</span>(</span>"Vector is now </span>{</span>:?</span>}</span>"</span>,</span> vec</span>);</span> // ["fig", "kiwi", "lime"]</span></span></code></pre>Copy 类型：关于移动的例外情况</a></h2> 移动一个值会使移动的源变成未初始化的状态。大多数类型会被移动，而也是有例外的情况，即那些被 Rust 指定成 Copy 类型的类型。对 Copy 类型进行赋值会复制这个值，而不会移动它。赋值的源仍会保持已初始化和可用状态。</p> 标准的 Copy 类型包括所有机器整数类型和浮点数类型、char 类型和 bool 类型，以及某些其他类型。Copy 类型的元组或固定大小的数组本身也是 Copy 类型。</p> 根据经验，任何在丢弃值时需要做一些特殊操作的都不能是 Copy 类型：Vec 需要释放自身元素、File 需要关闭自身文件句柄、MutexGuard 需要解锁自身互斥锁，等等。对这些类型进行逐位复制会让我们无法弄清哪个值该对原始资源负责。</p> 结构体只是默认情况下不是 Copy 类型。如果一个结构体的所有字段都是 Copy 类型，那么也可以通过属性 #[derive(Copy, Clone)]</code> 放置在此定义之上来创建 Copy 类型。</p> Copy 类型更灵活，因为赋值和相关操作不会把原始值变成未初始化状态。但对类型实现者而言，情况恰恰相反：Copy 类型可以包含的类型非常有限，而非 Copy 类型可以在堆上分配内存并拥有其他种类的资源。</p> 异步 Rust 2024-03-27T00:00:00+00:00 async</code> 是 Rust 选择的异步模型。</p> 并发在现代社会非常重要，多数主流语言都有对自己并发模型的设计以及取舍。</p> OS 线程</strong>, 它最简单，也无需改变任何编程模型(业务/代码逻辑)，因此非常适合作为语言的原生并发模型，在多线程章节</a>也提到过，Rust 就选择了原生支持线程级的并发编程。但是，这种模型也有缺点，例如线程间的同步将变得更加困难，线程间的上下文切换损耗较大。使用线程池在一定程度上可以提升性能，但是对于 IO 密集的场景来说，线程池还是不够。</li> 事件驱动（Event driven）</strong>, 这个名词你可能比较陌生，如果说事件驱动常常跟回调（Callback）一起使用，相信大家就恍然大悟了。这种模型性能相当的好，但最大的问题就是存在回调地狱的风险：非线性的控制流和结果处理导致了数据流向和错误传播变得难以掌控，还会导致代码可维护性和可读性的大幅降低，大名鼎鼎的 JavaScript</code> 曾经就存在回调地狱。</li> 协程（Coroutines）</strong> 可能是目前最火的并发模型，Go</code> 语言的协程设计就非常优秀，这也是 Go</code> 语言能够迅速火遍全球的杀手锏之一。协程跟线程类似，无需改变编程模型，同时，它也跟 async</code> 类似，可以支持大量的任务并发运行。但协程抽象层次过高，导致用户无法接触到底层的细节，这对于系统编程语言和自定义异步运行时是难以接受的</li> actor 模型</strong>是 erlang 的杀手锏之一，它将所有并发计算分割成一个一个单元，这些单元被称为 actor</code> , 单元之间通过消息传递的方式进行通信和数据传递，跟分布式系统的设计理念非常相像。由于 actor</code> 模型跟现实很贴近，因此它相对来说更容易实现，但是一旦遇到流控制、失败重试等场景时，就会变得不太好用</li> async/await</strong>，该模型性能高，还能支持底层编程，同时又像线程和协程那样无需过多的改变编程模型，但有得必有失，async</code> 模型的问题就是内部实现机制过于复杂，对于用户来说，理解和使用起来也没有线程和协程简单，好在前者的复杂性开发者们已经帮我们封装好，而理解和使用起来不够简单，正是本章试图解决的问题。</li> </ul> Rust 选择的取舍是，同时支持系统 OS 线程和 async 异步：</p> 系统线程通过标准库实现，应对不是非常的并发，而需要并行计算时。优点是线程内的代码执行效率更高、实现更直观更简单。</li> 异步通过语言特性 + 标准库 + 三方库的方式实现。并发性能会更好，但也需要额外的运行时支持。</li> </ul> Rust 中异步的特点：</p> Future 在 Rust 中是惰性的</strong>，只有在被轮询(poll</code>)时才会运行，因此丢弃一个 future</code> 会阻止它未来再被运行, 你可以将 Future</code> 理解为一个在未来某个时间点被调度执行的任务。</li> Async 在 Rust 中使用开销是零</strong>，意味着只有你能看到的代码(自己的代码)才有性能损耗，你看不到的(async</code> 内部实现)都没有性能损耗，例如，你可以无需分配任何堆内存、也无需任何动态分发来使用 async</code> ，这对于热点路径的性能有非常大的好处，正是得益于此，Rust 的异步编程性能才会这么高。</li> Rust 没有内置异步调用所必需的运行时</strong>，但是无需担心，Rust 社区生态中已经提供了非常优异的运行时实现，例如大明星 tokio</code></a>。</li> 运行时同时支持单线程和多线程</strong>。</li> </ul> 异步函数</a></h2> 一个普通函数会在调用时会立即执行，而一个异步函数的行为并非如此。</p> fn</span> main</span>() {</span></span> normal_fool</span>();</span> // print right now.</span></span> }</span></span> </span> fn</span> normal_fool</span>() {</span></span> println!</span>(</span>"normal_fool"</span>);</span></span> }</span></span></code></pre> 异步函数的情况：</p> #!</span>[</span>allow</span>(</span>dead_code</span>,</span> unused_variables</span>)]</span></span> </span> fn</span> main</span>() {</span></span> normal_fool</span>();</span></span> </span> let</span> foo1</span> =</span> foo1</span>();</span> // -> impl Future<Output = ()></span></span> }</span></span> </span> fn</span> normal_fool</span>() {</span></span> println!</span>(</span>"normal_fool"</span>);</span></span> }</span></span> </span> async fn</span> foo1</span>() {</span></span> println!</span>(</span>"foo1"</span>);</span></span> }</span></span></code></pre> 异步函数 foo1()</code> 并不会理解执行，而是返回一个 Future</code>。将一个函数标记为 async fn</code> 时也表明改函数会被转换成一个返回一个实现了 Future</code> 的值。</p> 也就是说 foo1()</code> 与 foo2()</code> 是相同的：</p> async fn</span> foo1</span>() {</span></span> println!</span>(</span>"foo1"</span>);</span></span> }</span></span> </span> fn</span> foo2</span>()</span> -></span> impl</span> Future</span><</span>Output</span> =</span> ()</span>></span> {</span></span> async</span> {</span></span> println!</span>(</span>"foo1"</span>);</span></span> }</span></span> }</span></span></code></pre>与 JavaScript 相比</a></h2> 与老朋友 JavaScript 不同的时，Future 在 Rust 中是惰性的</strong>。在 JavaScript 中，创建一个异步的任务，无论是任务队列，还是 Promise，它都会立即执行。而且 JavaScript 自带异步运行时。</p> JavaScript 中的异步任务会立即被添加到任务队列中；</li> JavaScript 自带异步运行时；</li> JavaScript 中 async/await</code> 语法只是 Promise 到语法糖；</li> </ul> 在 JavaScript 中，一个异步任务会被立即添加到任务队列中的末尾。如果不做任何处理，则该异步任务会立即脱离当前环境。</p> const</span> sleep</span> =</span> async</span> (</span>duration</span>)</span> =></span> {</span></span> return</span> new</span> Promise</span>(</span>(</span>resolve</span>)</span> =></span> {</span></span> setTimeout</span>(</span>()</span> =></span> {</span></span> resolve</span>()</span>;</span></span> },</span> duration)</span>;</span></span> }</span>)</span>;</span></span> };</span></span> </span> const</span> main</span> =</span> async</span> ()</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"hello"</span>)</span>;</span></span> sleep</span>(</span>1000</span>)</span>;</span></span> console</span>.</span>log</span>(</span>"world"</span>)</span>;</span></span> };</span></span> </span> main</span>()</span>;</span></span></code></pre> 此处的 sleep</code> 函数则会在之前到当前行时立即被添加到任务队列的末尾。等到 main</code> 函数其他同步代码都执行完成后，才会在等待 1000ms 并结束 main</code> 函数。这是 JavaScript 最基本的异步运行方式。</p> Future</a></h2> 但 Rust 首当其冲不同的就是，Future 是惰性的。一个 async 函数会返回一个 Future</code>，若直接调用该函数，不会发生任何事，因为 Future 还没有被执行。</p> Future 人如其名，可以理解为它是一个定义在未来被执行的任务，若不触发它则不会执行。使用一个 Future 需要使用一个执行器。</p> futures</code> 包为我们提供了一个最简单粗暴的执行器：block_on</code>。它会阻塞当前线程以等待任务完成。</p> use</span> futures</span>::</span>executor</span>::</span>block_on</span>;</span></span> </span> fn</span> main</span>() {</span></span> let</span> future</span> =</span> sleep</span>();</span></span> </span> block_on</span>(</span>future</span>);</span></span> }</span></span> </span> async fn</span> sleep</span>() {</span></span> println!</span>(</span>"Try to sleep."</span>)</span></span> }</span></span></code></pre>await</a></h3> 既然一个函数被标记为了 async 函数，那肯定少不了它的搭档 await。在一个 async 函数执行另一个 async 函数的方法就是使用 await。不过与 JavaScript 或 C# 等语言不同的是，在 Rust 中使用 await 看上去更像是一个方法的调用：</p> use</span> futures</span>::</span>executor</span>::</span>block_on</span>;</span></span> </span> fn</span> main</span>() {</span></span> let</span> future</span> =</span> sleep</span>();</span></span> </span> block_on</span>(</span>future</span>);</span></span> }</span></span> </span> async fn</span> sleep</span>() {</span></span> hello_cat</span>()</span>.</span>await</span>;</span></span> println!</span>(</span>"Try to sleep."</span>)</span></span> }</span></span> </span> async fn</span> hello_cat</span>() {</span></span> println!</span>(</span>"Hello kitty."</span>)</span></span> }</span></span></code></pre> 如果移除 await 字段，则编译器会给我们 futures do nothing unless you .await or poll them</code> 的提示。出了 await 的方式运行 async 函数，还有个就是使用轮询。</p> 与 block_on</code> 不同的时，await 不会阻塞当前的线程。而是异步的等待 Future 的完成，在等待的过程中，该线程还可以继续执行其他的任务，从而实现了并发处理的效果。</p> #!</span>[</span>feature</span>(</span>future_join</span>)]</span></span> use</span> async_std</span>::</span>task</span>::</span>sleep</span>;</span></span> use</span> futures</span>::</span>executor</span>::</span>block_on</span>;</span></span> use</span> std</span>::</span>future</span>::</span>join</span>;</span></span> use</span> std</span>::</span>time</span>::</span>Duration</span>;</span></span> </span> fn</span> main</span>() {</span></span> let</span> f1</span> =</span> try_sleep</span>();</span></span> let</span> f2</span> =</span> hello_dog</span>();</span></span> </span> block_on</span>(</span>join!</span>(</span>f1</span>,</span> f2</span>));</span></span> }</span></span> </span> async fn</span> try_sleep</span>() {</span></span> hello_cat</span>()</span>.</span>await</span>;</span></span> sleep</span>(</span>Duration</span>::</span>from_secs</span>(</span>3</span>))</span>.</span>await</span>;</span></span> println!</span>(</span>"Try to sleep."</span>)</span></span> }</span></span> </span> async fn</span> hello_cat</span>() {</span></span> println!</span>(</span>"Hello kitty."</span>)</span></span> }</span></span> </span> async fn</span> hello_dog</span>() {</span></span> println!</span>(</span>"Hello puppy"</span>);</span></span> }</span></span></code></pre> join!</code> 宏可以并发的处理和等待多个 Future，当 try_sleep</code> 被阻塞时，则 hello_dog</code> 可以拿过线程的所有权继续执行。通过这种方式实现了使用同步的代码顺序实现了异步的执行效果</strong>。</p> Future 特征</a></h2> 与 JavaScript 将异步任务放到任务队列尾端不同的时，Rust 的 Future 特征恰恰是异步函数的返回值和被执行的关键。</p> trait</span> SimpleFuture</span> {</span></span> type</span> Output</span>;</span></span> fn</span> poll</span>(</span>&</span>mut</span> self</span>,</span> wake</span>:</span> fn</span>())</span> -></span> Poll</span><</span>Self</span>::</span>Output</span>></span>;</span></span> }</span></span> </span> #</span>[</span>derive</span>(</span>Debug</span>)]</span></span> enum</span> Poll</span><</span>T</span>></span> {</span></span> Ready</span>(</span>T</span>),</span></span> Pending</span>,</span></span> }</span></span></code></pre> 这里模拟真正的 Future 实现一个简易版的 SimpleFuture</code>。一个 Future 需要被执行器 poll</code> 轮询后才能执行，通过调用该方法，可以推进 Future 的进一步执行，直到被阻塞将运行权转移给其他 Future。</p> 若在当前 poll</code> 中，Future 可以被完成，则会返回 Poll::Ready(result)</code>，反之则返回 Poll::Pending</code>。并安排一个 wake</code> 函数，当未来 Future 准备好被切回来继续执行时，该函数就会被调用。然后继续刚开始的步骤，该 Future 的执行器会再次调用 poll</code> 方法，此时 Future 就可以继续执行了。</p> 再来模拟一个简单的 Socket，并从一个 socket 中异步读取数据。当该 socket 中有数据时，就直接读取数据并返回 Poll::Ready(data)</code>；如果数据还没准备好，Future 会被阻塞且不再继续执行，并注册一个 wake</code> 函数，当 socket 数据准备好的时候，该函数将被调用以通知执行器继续执行。</p> use</span> std</span>::</span>{</span>thread</span>::</span>sleep</span>,</span> time</span>::</span>Duration</span>};</span></span> </span> pub struct</span> Socket</span> {</span></span> pub</span> test</span>:</span> u8</span>,</span></span> }</span></span> </span> impl</span> Socket</span> {</span></span> pub fn</span> has_data_to_read</span>(</span>&</span>self</span>)</span> -></span> bool</span> {</span></span> return</span> false</span>;</span></span> }</span></span> </span> pub fn</span> read_buf</span>(</span>&</span>self</span>)</span> -></span> Vec</span><</span>u8</span>></span> {</span></span> return</span> vec!</span>[];</span></span> }</span></span> </span> pub fn</span> set_readable_callback</span>(</span>&</span>self</span>,</span> wake</span>:</span> fn</span>()) {</span></span> sleep</span>(</span>Duration</span>::</span>from_secs</span>(</span>3</span>));</span></span> wake</span>();</span></span> }</span></span> }</span></span></code></pre> Future</code> 本身是一个 trait，除了 async 函数会自动实现这个 trait，我们还可以手动为结构体去实现它。其中 poll</code> 方法就是执行异步函数的主要部分，它配合惰性的特性，在执行器的驱动下实现了异步的主要功能：待会再执行。</p> pub struct</span> SocketRead</span><</span>'</span>a</span>></span> {</span></span> socket</span>: &</span>'</span>a</span> Socket</span>,</span></span> }</span></span> </span> impl</span> SimpleFuture</span> for</span> SocketRead</span><</span>'</span>_</span>></span> {</span></span> type</span> Output</span> =</span> Vec</span><</span>u8</span>></span>;</span></span> </span> fn</span> poll</span>(</span>&</span>mut</span> self</span>,</span> wake</span>:</span> fn</span>())</span> -></span> Poll</span><</span>Self</span>::</span>Output</span>></span> {</span></span> if</span> self</span>.</span>socket</span>.</span>has_data_to_read</span>() {</span></span> // socket 有数据，写入 buffer 并返回</span></span> Poll</span>::</span>Ready</span>(</span>self</span>.</span>socket</span>.</span>read_buf</span>())</span></span> }</span> else</span> {</span></span> // socket 中还没数据</span></span> //</span></span> // 注册一个 `wake` 函数，当数据可用时，该函数会被调用，</span></span> // 然后当前 Future 的执行器会再次调用 `poll` 方法，此时就可以读取到数据。</span></span> self</span>.</span>socket</span>.</span>set_readable_callback</span>(</span>wake</span>);</span></span> Poll</span>::</span>Pending</span></span> }</span></span> }</span></span> }</span></span></code></pre>构建自己的异步运行时</a></h2> Future 的实现略微复杂，不是一个 SimpleFuture 就能够解决的。要想完全了解 Rust 异步在背后是如何运行的，就需要手动来构建一个简化版的 Future。</p> 使用 Waker 来唤醒任务</a></h3> Future 的 poll</code> 方法决定了异步的特性，对于 Future 来说，第一次执行 poll</code> 方法无法执行完成是正常的。当其阻塞时，需要将执行的优先权让给其他 Future。并且需要确保在未来一旦准备好时，可以继续执行 poll</code> 方法。而通知可以继续执行 poll</code> 方法就是通过 Waker 来完成的。</p> Waker 提供了一个 wake</code> 方法用于告诉执行器（后续创建），相关的任务可以继续执行了，此时执行器就可以对对应的 Future 再次执行 poll</code> 方法。</p> 构建定时器</a></h3> 构建定时器之前我们需要一个 Future，因此需要使用到标准库中的 future</code>。</p> 但实现一个真正的异步运行时非常复杂的，不仅仅是 Future 本身，还有其他 API 的异步操作。所以这里使用标准库中的 Future 来创建一个简单的定时 Future：TimeFuture。它的特点就是在第一次 poll</code> 时会创建一个定时器来模拟需要被等待的任务，当定时器结束后，使用 Waker 通知 Executor 来再次执行 poll</code>。</p> 非常的简单易懂，通过这个简单的 Future 就能够大致的了解了 Future 是如何执行与调度任务了。</p> pub struct</span> TimerFuture</span> {</span></span> shared_state</span>:</span> Arc</span><</span>Mutex</span><</span>SharedState</span>>></span>,</span></span> }</span></span> </span> /// 在 Future 和等待的线程间共享状态</span></span> struct</span> SharedState</span> {</span></span> /// 是否已经开始过第一次 `poll`</span></span> started</span>:</span> bool</span>,</span></span> </span> /// 定时（睡眠）是否结束</span></span> completed</span>:</span> bool</span>,</span></span> </span> /// 定时时长</span></span> duration</span>:</span> Duration</span>,</span></span> </span> /// 当睡眠结束后，线程可以用 `waker` 通知 `TimerFuture` 来唤醒任务</span></span> waker</span>:</span> Option</span><</span>Waker</span>></span>,</span></span> }</span></span></code></pre> 我们的 Future 非常简单，结构体中只保存了一个用于共享的状态。其中状态中包含一个 waker</code>，当线程睡眠结束后可以使用它来通知我们的 TimeFuture 来唤醒任务再次执行。</p> 为什么需要 started</code> 状态？这里是为了模拟真正的 Future 的惰性，将实际的工作代码放在 poll</code> 方法内，只有在第一次被 poll</code> 时（也就是 .await</code> 时）才会真正的执行。后续则根据 completed</code> 来决定返回的 Poll 状态。</p> </blockquote> 当然到这里 TimeFuture 还不是一个真正的 Future，它还需要实现 Future 这个 trait。这里的 poll</code> 方法非常简单，根据共享状态，如果该方法是第一次执行，则创建一个新的线程来执行真正的任务。然后继续向下执行，判断状态中 completed</code> 是否完成，如果未完成则返回 Poll::Pending</code> 表示该异步任务放到后面还要执行。如果完成则返回 Poll::Ready(())</code> 表示该任务已经执行完成。</p> 而刚刚创建用来执行真正任务的线程，则会休眠指定的时间。当休眠结束后，其线程会继续执行它的代码，也就是标记 completed</code> 为完成，同时调用共享状态中的 waker.wake()</code> 方法来通知执行器可以继续 poll</code> 了。</p> impl</span> Future</span> for</span> TimerFuture</span> {</span></span> type</span> Output</span> =</span> ();</span></span> fn</span> poll</span>(</span>self</span>:</span> Pin</span><</span>&</span>mut</span> Self</span>></span>,</span> cx</span>: &</span>mut</span> Context</span><</span>'</span>_</span>></span>)</span> -></span> Poll</span><</span>Self</span>::</span>Output</span>></span> {</span></span> // 通过检查共享状态，来确定定时器是否已经完成</span></span> let mut</span> shared_state</span> =</span> self</span>.</span>shared_state</span>.</span>lock</span>()</span>.</span>unwrap</span>();</span></span> if</span> !</span>shared_state</span>.</span>started </span>{</span></span> let</span> thread_shared_state</span> =</span> self</span>.</span>shared_state</span>.</span>clone</span>();</span></span> thread</span>::</span>spawn</span>(</span>move</span> \|\|</span> {</span></span> let mut</span> shared_state</span> =</span> thread_shared_state</span>.</span>lock</span>()</span>.</span>unwrap</span>();</span></span> println!</span>(</span>"start first execute"</span>);</span></span> shared_state</span>.</span>started </span>=</span> true</span>;</span></span> thread</span>::</span>sleep</span>(</span>shared_state</span>.</span>duration</span>);</span></span> // 通知执行器定时器已经完成，可以继续`poll`对应的`Future`了</span></span> shared_state</span>.</span>completed </span>=</span> true</span>;</span></span> if let</span> Some</span>(</span>waker</span>)</span> =</span> shared_state</span>.</span>waker</span>.</span>take</span>() {</span></span> waker</span>.</span>wake</span>()</span></span> }</span></span> });</span></span> }</span></span> if</span> shared_state</span>.</span>completed </span>{</span></span> Poll</span>::</span>Ready</span>(())</span></span> }</span> else</span> {</span></span> // 设置 `wkaer`，这样新线程在睡眠结束后可以唤醒当前的任务，接着再次对 `Furture` 进行</span></span> // `poll` 操作</span></span> //</span></span> // 下面的`clone`每次被`poll`时都会发生一次，实际上，应该是只`clone`一次更加合理。</span></span> // 选择每次都`clone`的原因是： `TimerFuture`可以在执行器的不同任务间移动，如果只克隆一次，</span></span> // 那么获取到的`waker`可能已经被篡改并指向了其它任务，最终导致执行器运行了错误的任务</span></span> shared_state</span>.</span>waker </span>=</span> Some</span>(</span>cx</span>.</span>waker</span>()</span>.</span>clone</span>());</span></span> Poll</span>::</span>Pending</span></span> }</span></span> }</span></span> }</span></span></code></pre> 而该结构体的创建则非常简单，创建一个可线程间共享的状态即可。重点的 waker</code> 现在还是 None</code>，是因为它会在第一次 poll</code> 时由 Executor 来创建并当作 context 来传递给 poll</code> 方法。也就是 cx: &mut Context<'_></code>。至于为什么签名是 Context</code> 会在后面的构建 Executor 中看到。</p> impl</span> TimerFuture</span> {</span></span> /// 创建一个新的`TimerFuture`，在指定的时间结束后，该`Future`可以完成</span></span> pub fn</span> new</span>(</span>duration</span>:</span> Duration</span>)</span> -></span> Self</span> {</span></span> let</span> shared_state</span> =</span> Arc</span>::</span>new</span>(</span>Mutex</span>::</span>new</span>(</span>SharedState</span> {</span></span> started</span>:</span> false</span>,</span></span> completed</span>:</span> false</span>,</span></span> duration</span>,</span></span> waker</span>:</span> None</span>,</span></span> }));</span></span> </span> TimerFuture</span> {</span> shared_state</span> }</span></span> }</span></span> }</span></span></code></pre>执行器 Executor</a></h3> Rust 的 Future 是惰性的，默认情况下不会去主动的执行。在 async</code> 函数中使用 .await</code> 能调用另一个 async</code> 函数。.await</code> 总是需要 async</code> 的存在，那最外层的 Future 该怎么才能执行呢？没错，就是执行器 Executor。</p> 执行器会管理一批 Future</code> (最外层的 async</code> 函数)，然后通过不停地 poll</code> 推动它们直到完成。最开始它会主动调用一次 poll</code> 方法，并传递响应的 Context</code>，后续就不会再主动的执行 poll</code> 方法了，而是等待 Future 的 wake 函数通知它继续执行。这种 wake 通知然后 poll</strong> 的方式会不断重复，直到 Future</code> 完成。</p> 构建执行器</a></h3> 终于到了构建执行器这一步。</p> Rust 的 Future</code> 是惰性的，只有主动进行 poll</code> 之后才会开始执行。其中一个主动 poll</code> 的方式就是在 async</code> 函数中使用 await</code> 来调用另一个 async</code> 函数。但这只能解决在 async</code> 函数中的 Future</code>。再最外层的 async</code> 函数终究需要一个主动运行的办法。这就是执行器 executor</code> 的重要工作。</p> 执行器负责管理最外层的 async</code> 函数，通过不停的 poll</code> 来执行所有的异步函数。不过执行器只会主动 poll</code> 一次 Future，后续则不会在进行主动 poll</code> 操作。而是等待 Future 调用 wake</code> 函数来通知它可以继续执行，它才会继续 poll</code>。这种 wake</code> 然后 poll</code> 的方式会不断重复，直到 Future 完成。</p> 构建一个属于我们自己的迷你执行器，需要用到 futures</code> 包中的 ArcWake</code> 特征，它可以帮助我们去构建 Waker。</p> cargo add futures</span></span></code></pre> 首先我们需要创建一个执行器的结构体，结构体中有一个 ready_queue</code> 字段，用于存放 sync_channel</code> 发送过来的 Task。Task 就是执行任务的关键。</p> /// 任务执行器，负责从通道中接收任务然后执行</span></span> pub struct</span> Executor</span> {</span></span> pub</span> ready_queue</span>:</span> Receiver</span><</span>Arc</span><</span>Task</span>>></span>,</span></span> }</span></span></code></pre> 随后就需要一个创建异步任务的 Spawner 和执行器的 ready_queue</code> 字段类似，它的 task_sender</code> 就是用于发送 Task 给执行器的。</p> #</span>[</span>derive</span>(</span>Clone</span>)]</span></span> pub struct</span> Spawner</span> {</span></span> pub</span> task_sender</span>:</span> SyncSender</span><</span>Arc</span><</span>Task</span>>></span>,</span></span> }</span></span></code></pre> 接下来则是最重要的部分 Task，根据上述 Executor</code> 和 Spawner</code> 的字段签名就能看出来，他们发送和接受的分别就是 Task 结构体。Task 结构体中有两个重要的部分，分别是 future</code> 本身和与 Spawner</code> 一样的 task_sender</code> 用于将 Future 放回通道中，等待执行器 poll。</p> /// 一个Future，它可以调度自己(将自己放入任务通道中)，然后等待执行器去`poll`</span></span> pub struct</span> Task</span> {</span></span> /// 进行中的Future，在未来的某个时间点会被完成</span></span> ///</span></span> /// 按理来说`Mutex`在这里是多余的，因为我们只有一个线程来执行任务。但是由于</span></span> /// Rust并不聪明，它无法知道`Future`只会在一个线程内被修改，并不会被跨线程修改。因此</span></span> /// 我们需要使用`Mutex`来满足这个笨笨的编译器对线程安全的执着。</span></span> ///</span></span> /// 如果是生产级的执行器实现，不会使用`Mutex`，因为会带来性能上的开销，取而代之的是使用`UnsafeCell`</span></span> pub</span> future</span>:</span> Mutex</span><</span>Option</span><</span>BoxFuture</span><</span>'</span>static</span>, ()</span>>>></span>,</span></span> </span> /// 可以将该任务自身放回到任务通道中，等待执行器的poll</span></span> pub</span> task_sender</span>:</span> SyncSender</span><</span>Arc</span><</span>Task</span>>></span>,</span></span> }</span></span></code></pre> 其中 pub future: Mutex<Option<BoxFuture<'static, ()>>></code> 的这个签名才是重要所在。首先第一个 Mutex 的作用主要是告诉编译器我们的 future 是线程安全的，虽然我们只有一个线程来执行任务，但编译器无从得知。</p> 其次就是 BoxFuture<'a, T></code>，这是个类型别名：</p> type</span> BoxFuture</span><</span>'</span>a</span>,</span> T</span>></span> =</span> Pin</span><</span>Box</span><</span>dyn</span> Future</span><</span>Output</span> =</span> T</span>></span> +</span> Send</span> +</span> '</span>static</span>>></span>;</span></span></code></pre> 由于 Future 的特性，需要使用 Pin<T></code> 来保证其在内存中固定的位置，不会移动。后续的特征对象表示我们的 Future 可以在线程中安全的移动。</p> 到此我们的 Task 才完成了一半，还需要将其实现 ArcWake 特征才能在执行器中将其变成 wake</code>，用于后续通知执行器继续 poll</code> 。</p> 不过在此之前，我们先来实现一下 Spawner</code> 的 spawn</code> 方法，它负责创建新的 Future，并将其放到任务通道中。</p> /// `Spawner`负责创建新的`Future`然后将它发送到任务通道中</span></span> impl</span> Spawner</span> {</span></span> pub fn</span> spawn</span>(</span>&</span>self</span>,</span> future</span>:</span> impl</span> Future</span><</span>Output</span> =</span> ()</span>></span> +</span> '</span>static</span> +</span> Send</span>) {</span></span> let</span> future</span> =</span> Box</span>::</span>pin</span>(</span>future</span>);</span></span> let</span> task</span> =</span> Arc</span>::</span>new</span>(</span>Task</span> {</span></span> future</span>:</span> Mutex</span>::</span>new</span>(</span>Some</span>(</span>future</span>)),</span></span> task_sender</span>:</span> self</span>.</span>task_sender</span>.</span>clone</span>(),</span></span> });</span></span> self</span>.</span>task_sender</span>.</span>send</span>(</span>task</span>)</span>.</span>expect</span>(</span>"任务队列已满"</span>);</span></span> }</span></span> }</span></span></code></pre> 在创建新的 Task 时，我们将 Spawner</code> 自身的 task_sender</code> 保存给了 Task，其作用就是用于将 Task 自身发送到任务通道中。在 spawn</code> 执行时我们将直接 Task 发送到执行器。</p> 随后就是给 Task 实现 ArcWake 了，我们只需要实现一个方法 wake_by_ref</code>，它就是 wake</code> 的核心所在。当调用 wake</code> 时，它将 clone 自身的 Arc 并发送到任务通道。</p> impl</span> ArcWake</span> for</span> Task</span> {</span></span> fn</span> wake_by_ref</span>(</span>arc_self</span>: &</span>Arc</span><</span>Self</span>></span>) {</span></span> let</span> cloned</span> =</span> arc_self</span>.</span>clone</span>();</span></span> arc_self</span>.</span>task_sender</span>.</span>send</span>(</span>cloned</span>)</span>.</span>expect</span>(</span>"任务队列已满"</span>);</span></span> }</span></span> }</span></span></code></pre> Spawner</code> 和 Task</code> 主要是将 Future 发送到任务通道中，而我们最后一个实现的方法就是接受并执行通过任务通道发送过来的任务。在上述 Spawner</code> 第一次 spawn</code> 的时候，就会立即发送到任务通道。这就是 Future 的第一次执行，也就是执行器的主动 poll</code>，后续则根据传递过去的 wake</code> 方法来通知（发送 Task 到任务通道）执行器继续 poll</code> 。</p> impl</span> Executor</span> {</span></span> pub fn</span> run</span>(</span>&</span>self</span>) {</span></span> while let</span> Ok</span>(</span>task</span>)</span> =</span> self</span>.</span>ready_queue</span>.</span>recv</span>() {</span></span> // 获取一个future，若它还没有完成(仍然是Some，不是None)，则对它进行一次poll并尝试完成它</span></span> let mut</span> future_slot</span> =</span> task</span>.</span>future</span>.</span>lock</span>()</span>.</span>unwrap</span>();</span></span> if let</span> Some</span>(</span>mut</span> future</span>)</span> =</span> future_slot</span>.</span>take</span>() {</span></span> // 基于任务自身创建一个 `LocalWaker`</span></span> let</span> waker</span> =</span> waker_ref</span>(</span>&</span>task</span>);</span></span> let</span> context</span> = &</span>mut</span> Context</span>::</span>from_waker</span>(</span>&</span>waker</span>);</span></span> // `BoxFuture<T>`是`Pin<Box<dyn Future<Output = T> + Send + 'static>>`的类型别名</span></span> // 通过调用`as_mut`方法，可以将上面的类型转换成`Pin<&mut dyn Future + Send + 'static>`</span></span> if</span> future</span>.</span>as_mut</span>()</span>.</span>poll</span>(</span>context</span>)</span>.</span>is_pending</span>() {</span></span> // Future还没执行完，因此将它放回任务中，等待下次被poll</span></span> </span>future_slot</span> =</span> Some</span>(</span>future</span>)</span></span> }</span></span> }</span></span> }</span></span> }</span></span> }</span></span></code></pre> 所以我们为 Executor</code> 实现的 run</code> 方法就是循环任务通道，当接受到任务时，首先将取出 Option</code> 中的 Task。并基于任务自身创建一个 waker，这就是上述为 Task 实现 ArcWake 的作用：</p> let</span> waker</span> =</span> waker_ref</span>(</span>&</span>task</span>);</span></span> let</span> context</span> = &</span>mut</span> Context</span>::</span>from_waker</span>(</span>&</span>waker</span>);</span></span></code></pre> 通过这两个方法，就能将任务自身创建成一个在 Future 中传递的上下文，也就是 fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>)</code> 中的 cx</code>，用于通知执行器可以再次 poll</code> 了。</p> if let</span> Some</span>(</span>waker</span>)</span> =</span> shared_state</span>.</span>waker</span>.</span>take</span>() {</span></span> waker</span>.</span>wake</span>()</span></span> }</span></span></code></pre> 最后一句即是执行 Future 的 poll</code> 方法，并传递 waker。同时根据其返回值判断是否时 pending</code> 状态。如果是，则将 Future 在放回起初的 Option</code> 中，等待其调用 wake</code> 方法。</p> if</span> future</span>.</span>as_mut</span>()</span>.</span>poll</span>(</span>context</span>)</span>.</span>is_pending</span>() {</span></span> // Future还没执行完，因此将它放回任务中，等待下次被poll</span></span> </span>future_slot</span> =</span> Some</span>(</span>future</span>)</span></span> }</span></span></code></pre> 到此，属于我们自己的迷你 Executor 就创建完成了。可以通过 Spawner 创建一个真正的 Future 测试了：</p> pub fn</span> new_executor_and_spawner</span>()</span> -></span> (</span>Executor</span>,</span> Spawner</span>) {</span></span> // 任务通道允许的最大缓冲数(任务队列的最大长度)</span></span> // 当前的实现仅仅是为了简单，在实际的执行中，并不会这么使用</span></span> const</span> MAX_QUEUED_TAKSS</span>:</span> usize</span> =</span> 10_000</span>;</span></span> let</span> (</span>task_sender</span>,</span> ready_queue</span>)</span> =</span> sync_channel</span>(</span>MAX_QUEUED_TAKSS</span>);</span></span> (</span>Executor</span> {</span> ready_queue</span> },</span> Spawner</span> {</span> task_sender</span> })</span></span> }</span></span></code></pre>#</span>[</span>cfg</span>(</span>test</span>)]</span></span> mod</span> tests</span> {</span></span> use</span> std</span>::</span>time</span>::</span>Duration</span>;</span></span> </span> use crate</span>::</span>{</span>executor</span>::</span>new_executor_and_spawner</span>,</span> waker</span>::</span>TimerFuture</span>};</span></span> </span> #</span>[</span>test</span>]</span></span> fn</span> it_works</span>() {</span></span> let</span> (</span>exec</span>,</span> spawner</span>)</span> =</span> new_executor_and_spawner</span>();</span></span> </span> spawner</span>.</span>spawn</span>(</span>async</span> {</span></span> println!</span>(</span>"howdy!"</span>);</span></span> TimerFuture</span>::</span>new</span>(</span>Duration</span>::</span>new</span>(</span>2</span>,</span> 0</span>))</span>.</span>await</span>;</span></span> println!</span>(</span>"done!"</span>)</span></span> });</span></span> </span> drop</span>(</span>spawner</span>);</span></span> </span> exec</span>.</span>run</span>();</span></span> }</span></span> }</span></span></code></pre> 要在 test 中输出到 std，则需要使用：</p> cargo</span> test -- --nocapture</span></span></code></pre> Gentoo 指北 2024-03-23T00:00:00+00:00 Binary!</a></h2> Gentoo gose Binary!</a> 在一月的倒数前两天，Gentoo 整了个新活。不再像以前只有过于复杂的软件提供了二进制文件（例如 linux 内核和 firefox），现在整个包管理器 Portage 都提供了二进制的选择。</p> You probably all know Gentoo Linux as your favourite source-based distribution. Did you know that our package manager, Portage, already for years also has support for binary packages</p> </blockquote> 终究还是变成了当初自己最讨厌的那个自己。</p> 要用上最新的二进制软件分发，第一步就是确认镜像源。</p> sudo</span> vim /etc/portage/binrepos.conf/gentoobinhost.conf</span></span></code></pre> 在 /etc/portage/</code> 中新增的 binrepos.conf</code> 文件夹中就是新的二进制文件的镜像。</p> # These settings were set by the catalyst build script that automatically</span></span> # built this stage.</span></span> # Please consider using a local mirror.</span></span> </span> [gentoobinhost]</span></span> priority = 1</span></span> # sync-uri = https://gentoo.osuosl.org/releases/amd64/binpackages/17.1/x86-64</span></span> sync-uri = https://mirrors.tuna.tsinghua.edu.cn/gentoo/releases/amd64/binpackages/17.1/x86-64/</span></span></code></pre> 在 make.conf</code> 中，可以通过 EMERGE_DEFAULT_OPTS</code> 为 emerge 设置新的默认使用二进制的选项。</p> # Binary packages</span></span> BINPKG_FORMAT="gpkg"</span></span> EMERGE_DEFAULT_OPTS="${EMERGE_DEFAULT_OPTS} --getbinpkg --binpkg-respect-use=n"</span></span> FEATURES="getbinpkg"</span></span></code></pre> --binpkg-respect-use=n</code> 的设置会使得当 gentoo 分发的二进制软件不符合当前的 USE flags 时，仍然考虑安装。将其设置到 make.conf</code> 中可能会出事。</p> 磁盘与分区</a></h2> 根据手册中描述的对应磁盘类型的设备名称，可以更方便的找到对应的设备。</p> Type of device</th> Default device handle</th> Editorial notes and considerations</th></tr></thead> IDE, SATA, SAS, SCSI, or USB flash</td> /dev/sda</td> Found on hardware from roughly 2007 until the present, this device handle is perhaps the most commonly used in Linux. These types of devices can be connected via the SATA bus</a>, SCSI</a>, USB</a> bus as block storage. As example, the first partition on the first SATA device is called /dev/sda1.</td></tr> NVM Express (NVMe)</td> /dev/nvme0n1</td> The latest in solid state technology, NVMe</a> drives are connected to the PCI Express bus and have the fastest transfer block speeds on the market. Systems from around 2014 and newer may have support for NVMe hardware. The first partition on the first NVMe device is called /dev/nvme0n1p1.</td></tr> MMC, eMMC, and SD</td> /dev/mmcblk0</td> embedded MMC</a> devices, SD cards, and other types of memory cards can be useful for data storage. That said, many systems may not permit booting from these types of devices. It is suggested to not</strong> use these devices for active Linux installations; rather consider using them to transfer files, which is their typical design intention. Alternatively this storage type could be useful for short-term file backups or snapshots.</td></tr> </tbody></table> 磁盘的分区是一个老生常谈的问题了，分区的主要痛点不是在于给哪个区分多大的空间，而是要注意对应当前设备的启动方式选择好合适的分区表以及分区格式。毕竟当所有东西都编译完成之后发现分区表错了才是最痛苦的。</p> 常见的分区表选择有：</p> GPT（GUID Partition Table）：GPT 是可以为传统 BIOS 启动做分区表的，但是就无法与 Windows 做多个系统了。</li> MBR（Master boot record）：传统的分区表，支持 BIOS，但对最大硬盘只能支持到 2 TiB。</li> </ul> EFI 的配置会稍微多一点，BIOS 启动则会简单一点。SWAP 则看个人喜好。</p> GPT for UEFI 的常见分区：</p> Device path (sysfs)</th> Mount point</th> File system</th> DPS UUID (PARTUUID)</th> Description</th></tr></thead> /dev/sda1</td> /efi</td> vfat</td> c12a7328-f81f-11d2-ba4b-00a0c93ec93b</td> EFI system partition (ESP) details.</td></tr> /dev/sda2</td> N/A. Swap is not mounted to the filesystem like a device file.</td> swap</td> 0657fd6d-a4ab-43c4-84e5-0933c84b4f4f</td> Swap partition details.</td></tr> /dev/sda3</td> /</td> xfs</td> 4f68bce3-e8cd-4db1-96e7-fbcaf984b709</td> Root partition details.</td></tr> </tbody></table> MBR for BIOS 的常见分区</p> Device path (sysfs)</th> Mount point</th> File system</th> DPS UUID (PARTUUID)</th> Description</th></tr></thead> /dev/sda1</td> /boot</td> xfs</td> N/A</td> MBR DOS / legacy BIOS boot partition details.</td></tr> /dev/sda2</td> N/A. Swap is not mounted to the filesystem like a device file.</td> swap</td> 0657fd6d-a4ab-43c4-84e5-0933c84b4f4f</td> Swap partition details.</td></tr> /dev/sda3</td> /</td> xfs</td> 4f68bce3-e8cd-4db1-96e7-fbcaf984b709</td> Root partition details.</td></tr> </tbody></table> 安装前的其他准备</a></h2> 在分区完成，并挂载到 /mnt/gentoo</code> 后，可以先做点准备工作。例如启动 ssh</code> 实例，方便后续的一些复制粘贴操作。</p> rc-service</span> start sshd</span></span></code></pre>时间</a></h3> 安装时的系统时间非常重要，C 的某些编译环节会需要正确的系统时间。如果在安装时没有设置好时间，则会导致进入系统后某些文件的创建时间不正确，可能会遇到例如：</p> ninja: error: manifest 'build.ninja' still dirty after 100 tries</span></span></code></pre>Kernel</a></h2> Gentoo 为我们提供了三种内核的选择：</p> Distribution Kernels：与其他多数发行版类似，Distribution Kernel 是已经配置过的，直接编译即可。除此之外还能够选择已经编译好的 sys-kernel/gentoo-kernel-bin</code>。</li> Genkernel：Gentoo 提供的一种配置内核的方式，能够提供比完全手动配置更方便的选择。</li> Manual configuration：完全的手动配置。</li> </ul> Manual configuration</a></h3> 整个 Linux 内核的可配置项目比较多，也不是一次性就能全部了解完的。当然也不用每个地方都需要修改。手动配置内核的主要目的还是在了解自身硬件的前提下，尽可能的调整到适合自己的硬件。同时也能关掉一些不用的功能，从而保证内核的精简。</p> 配置</a></h2> 不同于其他的多数发型版，Gentoo 需要手动配置一些常见的项目。正因如此，Gentoo 给人一种仅次于 LFS 的感觉。</p> tmpfs</a></h3> /tmp</code> 分区默认是一个普通的文件夹，我们可以手动的将其挂载为 tmpfs</a>。</p> tmpfs /tmp tmpfs rw,nosuid,nodev,size=4G,mode=1777 0 0</span></span></code></pre>Emerge</a></h2> Emerge 不同于其他发型版提供的包管理器，是 Gentoo 提供的一种从源码编译软件的主要方式之一。也是使用 Gentoo 的特性之一的最佳方式：USE flags</code>。</p> 不同于二进制直接发行，emerge 从源码编译时支持使用 USE flags</code> 来支持对软件的自定义。</p> 例如安装 kitty 时只需要支持 wayland，不需要传统的 X 的支持。直接将其使用 flags -X</code> 标记为不需要即可，在编译时就不会编译对应的支持。</p> [</span>ebuild R </span>]</span> x11-terms/kitty-0.31.0::gentoo USE</span>=</span>"wayland -X -test -verify-sig"</span> PYTHON_SINGLE_TARGET</span>=</span>"python3_11 -python3_10 (-python3_12)"</span> 0</span> KiB</span></span></code></pre> 对软件精细的控制是 Gentoo 的特点之一，同时代价就是安装软件时的编译时间。对于本地编译从而提升对本机 CPU 的优化在编译时间面前可能显得一文不值。</p> Portage</a></h3> 说是 emerge 是类似包管理器，在官方 wiki Portage 页面</a> 中 Portage 才被称之为包管理器和分发系统，emerge 可以说是它的工具之一。出了包管理器之外，还有对整个系统的管理，例如设置 profile 等。</p> 对 Portage 对设置文件都保存在 /etc/portage</code>，包括最熟悉的 make.conf</code>。</p> # /etc/portage</span></span> drwxr-xr-x</span> 3</span> root root</span> 31</span> Nov</span> 27 2022</span> profile</span></span> drwxr-xr-x</span> 3</span> root root</span> 24</span> Nov</span> 26</span> 08:53 savedconfig</span></span> drwxr-xr-x</span> 2</span> root root</span> 6</span> Dec</span> 2</span> 03:49 package.mask</span></span> drwxr-xr-x</span> 2</span> root root</span> 41</span> Dec</span> 5</span> 21:29 package.accept_keywords</span></span> -rw-r--r--</span> 1</span> root root</span> 77</span> Dec</span> 6</span> 06:14 package.license</span></span> -rw-r--r--</span> 1</span> root root</span> 865</span> Dec</span> 12</span> 05:41 make.conf.euse_backup</span></span> lrwxrwxrwx</span> 1</span> root root</span> 67</span> Dec</span> 12</span> 06:33 make.profile</span> -</span>></span> ../../var/db/repos/gentoo/profiles/default/linux/amd64/17.1/desktop</span></span> -rw-r--r--</span> 1</span> root root 1.1K Jan</span> 4</span> 09:05 make.conf</span></span> drwxr-xr-x</span> 2</span> root root</span> 76</span> Jan</span> 4</span> 09:26 repos.conf</span></span> drwxr-xr-x</span> 2</span> root root</span> 32</span> Jan</span> 4</span> 09:36 binrepos.conf</span></span> drwxr-xr-x</span> 5</span> root root</span> 154</span> Jan</span> 4</span> 21:18 gnupg</span></span> drwxr-xr-x</span> 2</span> root root</span> 38</span> Jan</span> 9</span> 11:44 package.use</span></span></code></pre> 常用的或者说后续在使用系统时大概率是需要了解的：</p> packge.mask</code>:</li> </ul> Flags 的设置</a></h3> 在 /etc/portage/make.conf</code> 中设置的是全局生效的 flags，也就是安装任何软件软件时，只要有对应的 flags 就会应用。</p> USE</span>=</span>"wayland qsv jpegxl opengl vulkan drm icons pulseaudio videocodecs </span>\</span></span> audiocodecs web alsa gles2 </span>\</span></span> -gtk -plasma -gnome -kde -dvd -systemd -nvidia -bluetooth </span>\</span></span> -qtwebengine -nouveau -thunderbolt -dri -accessibility -X"</span></span></code></pre> 如果要对单独某个软件设置 flags，则需要在 /etc/portage/package.use</code> 中为指定的软件设置。package.use</code> 可以是一个文件，也可以是一个文件夹。在新安装的系统中大概率是一个已经存在的文件夹，当是一个文件夹时，其下的所有文件中的 flags 都会被应用。</p> 其写法与 make.conf</code> 中的 USE</code> 字段略微有点不同。/etc/portage/package.use/tmux</code></p> # tmux vim syntax</span></span> >=app-misc/tmux-3.3a-r1 vim-syntax</span></span></code></pre>Hyprland</a></h2> 作为新时代的系统窗口协议，Wayland 是良好的 X11 替代品。</p> Wayland is a replacement for the X11 window system protocol and architecture with the aim to be easier to develop, extend, and maintain.</p> </blockquote> 不同于 Sway 的目标是代替在 X11 上的 i3，Hyprland 则完全是全新的体验。得益于 GPU 的渲染，使得其能够拥有流畅的动画。</p> OpenRC</a></h3> 对于在 OpenRC 上运行，必不可少的：</p> dbus</li> seatd</li> hyrpland</li> waybar</li> </ul> 如果没有使用 systemd</code> 可以使用 seatd</code> 的 server</code> flag 来以服务的方式运行 seatd</code> 从而代替 logind</code>。</p> Dbus</a></h3> 如果是没有选择 desktop</code> profile 安装的最小化环境，可能没有 XDG 的一些环境变量和需要的一些目录。</p> 为其他机器编译内核</a></h2> 参考这个帖子：Compiling kernel from another pc can I use it to my pc?</a>。在为其他硬件编译内核只需要选择好目标所需要的驱动，并且别一不小心安装到当前机器上就行了。</p> 配置完后，编译的步骤还是和以前一样：</p> sudo</span> make -j16 -l16</span></span></code></pre> 不同的是，modules_install</code> 可以通过指定环境变量来将所有的 modules 安装到指定位置，方便待会拷贝到指定的机器上。</p> sudo</span> make modules_install INSTALL_MOD_PATH=/home/xfy/gentoo-mini</span></span></code></pre> 同理，整个内核也是可以通过环境变量来指定安装的位置。</p> sudo</span> make install INSTALL_PATH=/home/xfy/gentoo-mini/</span></span></code></pre> 之后整个目录看起来就应该类似于</p> .</span></span> \|-- lib</span></span> \|-- config-6.1.57-gentoo-gentoo-xfy</span></span> \|-- System.map-6.1.57-gentoo-gentoo-xfy</span></span> `-- vmlinuz-6.1.57-gentoo-gentoo-xfy</span></span></code></pre> 拷贝到目标机器之后，只需要删除旧的 modules（留着也可以），并将内核复制到 /boot</code>。再更新下启动配置即可。</p> sudo</span> cp -aR lib/modules/6.1.57-gentoo-gentoo-xfy/ /lib/modules/</span></span> sudo</span> cp config-6.1.57-gentoo-gentoo-xfy /boot/</span></span> sudo</span> cp System.map-6.1.57-gentoo-gentoo-xfy /boot/</span></span> sudo</span> cp vmlinuz-6.1.57-gentoo-gentoo-xfy /boot/</span></span></code></pre>sudo</span> grub-mkconfig -o /boot/grub/grub.cfg</span></span></code></pre>系统的更新</a></h2> 在合并整个系统的包之前，首先要做的就是先同步下镜像。</p> sudo</span> emerge-webrsync</span></span></code></pre> 然后便是直接合并，并重新编译。</p> sudo</span> emerge -avuDU @world</span></span></code></pre> 对于新活</p> sudo</span> emerge -avuDUg @world</span></span></code></pre>一些 emerge 的缩写</a></h2> Auto mask</a></h3> sudo</span> emerge -av --autounmask=y --autounmask-write</span></span></code></pre>Update world</a></h3> sudo</span> emerge -avuDN @world</span></span> sudo</span> emerge --ask --verbose --update --deep --newuse @world</span></span></code></pre> or</p> sudo</span> emerge -avuDU @world</span></span> sudo</span> emerge --ask --verbose --update --deep --changed-use @world'</span></span></code></pre> 大写的 N</code> 代表 --newuse</code>，大写的 U</code> 代表 --changed-use</code>。当已经被禁用的 USE flags 被添加或移除时，使用 --changed-use</code> 不会触发重新安装。</p> Deselect and clean dep</a></h3> sudo</span> emerge -av -W app-editors/nano</span></span> sudo</span> emerge -av --depclean app-editors/nano</span></span></code></pre> 疑难杂症 2024-03-23T00:00:00+00:00 在 tauri 中为 command 使用自定义错误</a></h2> 在 tauri 的 command 中返回的任何值都必须要是可以 Serialize</code> 的，包括错误：Everything you return from commands must implement Serialize</code></p> use</span> base64</span>::</span>DecodeError</span>;</span></span> use</span> serde</span>::</span>{</span>Serialize</span>,</span> Serializer</span>};</span></span> use</span> thiserror</span>::</span>Error</span>;</span></span> </span> #</span>[</span>derive</span>(</span>Error</span>,</span> Debug</span>)]</span></span> pub enum</span> VError</span> {</span></span> #</span>[</span>error</span>(</span>"Request error: </span>{</span>0</span>}</span>"</span>)]</span></span> RequestFaild</span>(</span>#</span>[</span>from</span>]</span> reqwest</span>::</span>Error</span>),</span></span> </span> #</span>[</span>error</span>(</span>"Decode error: </span>{</span>0</span>}</span>"</span>)]</span></span> DecodeError</span>(</span>#</span>[</span>from</span>]</span> DecodeError</span>),</span></span> }</span></span> </span> // https://github.com/tauri-apps/tauri/discussions/3913</span></span> impl</span> Serialize</span> for</span> VError</span> {</span></span> fn</span> serialize</span><</span>S</span>></span>(</span>&</span>self</span>,</span> serializer</span>:</span> S</span>)</span> -></span> Result</span><</span>S</span>::</span>Ok</span>,</span> S</span>::</span>Error</span>></span></span> where</span></span> S</span>:</span> Serializer</span>,</span></span> {</span></span> serializer</span>.</span>serialize_str</span>(</span>self</span>.</span>to_string</span>()</span>.</span>as_ref</span>())</span></span> }</span></span> }</span></span> </span> pub type</span> VResult</span><</span>T</span>,</span> E</span> =</span> VError</span>></span> =</span> anyhow</span>::</span>Result</span><</span>T</span>,</span> E</span>></span>;</span></span></code></pre>async 语句中使用 ?</code></a></h2> async 语句块与 async fn 最大的不同就是前者无法显式的声明返回值，当配合 ?</code> 使用的时候编译器就无法得知 Result<T, E></code> 中 E 的类型。</p> async fn</span> foo</span>()</span> -></span> Result</span><</span>u8</span>,</span> String</span>></span> {</span></span> Ok</span>(</span>1</span>)</span></span> }</span></span> async fn</span> bar</span>()</span> -></span> Result</span><</span>u8</span>,</span> String</span>></span> {</span></span> Ok</span>(</span>1</span>)</span></span> }</span></span> pub fn</span> main</span>() {</span></span> let</span> fut</span> =</span> async</span> {</span></span> foo</span>()</span>.</span>await</span>?</span>;</span></span> bar</span>()</span>.</span>await</span>?</span>;</span></span> Ok</span>(())</span></span> };</span></span> }</span></span></code></pre> 这段代码会得到编译器 cannot infer type for type parameter E declared on the enum Result</code> 的提示。原因在于编译器无法推断出 Result<T, E></code> 中的 E</code> 的类型。</p> 目前的解决办法就是使用 ::<...></code> 显式的添加类型注解，给予类型注释后此时编译器就知道 Result<T, E></code> 中的 E</code> 的类型是 String</code>，进而成功通过编译。</p> let</span> fut</span> =</span> async</span> {</span></span> foo</span>()</span>.</span>await</span>?</span>;</span></span> bar</span>()</span>.</span>await</span>?</span>;</span></span> Ok</span>::</span><</span>(),</span> String</span>></span>(())</span> // 在这一行进行显式的类型注释</span></span> };</span></span></code></pre>数组元素非基础类型</a></h2> Rust 的数组类型是存储在栈内存中的，但是它也是可以存储非基础类型的值。不过它不可以使用这样的数组初始化语法：</p> let</span> a</span> =</span> [</span>3</span>;</span> 5</span>];</span></span></code></pre> let a = [3; 5];</code> 的本质是 Rust 不断的 Copy 出来的，而非基本类型是无法深拷贝的。</p> 正确的做法应该是使用 std::array::from_fn</code> 。</p> fn</span> main</span>() {</span></span> let</span> arr</span>:</span> [</span>String</span>;</span> 6</span>]</span> =</span> core</span>::</span>array</span>::</span>from_fn</span>(</span>\|</span>i</span>\|</span> format!</span>(</span>"Arr </span>{}</span>"</span>,</span> i</span>));</span></span> println!</span>(</span>"</span>{</span>:?</span>}</span>"</span>,</span> arr</span>);</span></span> }</span></span></code></pre>在 map 方法中使用 ?</code></a></h2> 在 map 方法中使用 Question mark 需要在 collect::<>()</code> 方法中显示注解 Result<T, E></code></p> let</span> subscripition</span> =</span> subscripition</span></span> .</span>split</span>('</span>\n</span>')</span></span> .</span>filter</span>(</span>\|</span>line</span>\| !</span>line</span>.</span>is_empty</span>())</span></span> .</span>map</span>(</span>\|</span>line</span>\|</span> {</span></span> let</span> line</span> =</span> line</span>.</span>replace</span>(</span>"vmess://"</span>,</span> ""</span>);</span></span> let</span> line</span> =</span> general_purpose</span>::</span>STANDARD</span>.</span>decode</span>(</span>line</span>)</span>?</span>;</span></span> let</span> line</span> =</span> String</span>::</span>from_utf8_lossy</span>(</span>&</span>line</span>)</span>.</span>to_string</span>();</span></span> Ok</span>(</span>serde_json</span>::</span>from_str</span>::</span><</span>Node</span>></span>(</span>&</span>line</span>)</span>?</span>)</span></span> })</span></span> .</span>collect</span>::</span><</span>VResult</span><</span>Vec</span><</span>_</span>>>></span>()</span>?</span>;</span></span></code></pre>优雅的修改 Option 的内容</a></h2> 为 enum</code> 实现静态字符串</a></h2> #</span>[</span>derive</span>(</span>Debug</span>,</span> Serialize</span>,</span> Deserialize</span>)]</span></span> pub enum</span> CoreStatus</span> {</span></span> Started</span>,</span></span> Restarting</span>,</span></span> Stopped</span>,</span></span> }</span></span> </span> impl</span> CoreStatus</span> {</span></span> fn</span> as_str</span>(</span>&</span>self</span>)</span> -> &</span>'</span>static</span> str</span> {</span></span> match</span> self</span> {</span></span> CoreStatus</span>::</span>Started</span> =></span> "Started"</span>,</span></span> CoreStatus</span>::</span>Restarting</span> =></span> "Restarting"</span>,</span></span> CoreStatus</span>::</span>Stopped</span> =></span> "Stopped"</span>,</span></span> }</span></span> }</span></span> }</span></span></code></pre>serde-rs deserialize string in json to number</a></h2> use</span> std</span>::</span>fmt</span>::</span>Display</span>;</span></span> use</span> std</span>::</span>str</span>::</span>FromStr</span>;</span></span> </span> use</span> serde</span>::</span>de</span>::</span>{</span>self</span>,</span> Deserialize</span>,</span> Deserializer</span>};</span></span> </span> #</span>[</span>derive</span>(</span>Deserialize</span>,</span> Eq</span>,</span> PartialEq</span>,</span> Debug</span>)]</span></span> struct</span> Test</span> {</span></span> #</span>[</span>serde</span>(</span>deserialize_with </span>=</span> "from_str"</span>)]</span></span> test</span>:</span> u16</span></span> }</span></span> </span> fn</span> from_str</span><</span>'</span>de</span>,</span> T</span>,</span> D</span>></span>(</span>deserializer</span>:</span> D</span>)</span> -></span> Result</span><</span>T</span>,</span> D</span>::</span>Error</span>></span></span> where</span> T</span>:</span> FromStr</span>,</span></span> T</span>::</span>Err</span>:</span> Display</span>,</span></span> D</span>:</span> Deserializer</span><</span>'</span>de</span>></span></span> {</span></span> let</span> s</span> =</span> String</span>::</span>deserialize</span>(</span>deserializer</span>)</span>?</span>;</span></span> T</span>::</span>from_str</span>(</span>&</span>s</span>)</span>.</span>map_err</span>(</span>de</span>::</span>Error</span>::</span>custom</span>)</span></span> }</span></span></code></pre>serde deserialize multiple type</a></h2> https://www.reddit.com/r/rust/comments/fcz4yb/how_do_you_deserialize_strings_integers_to_float/</p> fn</span> de_str</span><</span>'</span>de</span>,</span> D</span>></span>(</span>deserializer</span>:</span> D</span>)</span> -></span> Result</span><</span>i64</span>,</span> D</span>::</span>Error</span>></span></span> where</span></span> D</span>:</span> serde</span>::</span>de</span>::</span>Deserializer</span><</span>'</span>de</span>></span>,</span></span> {</span></span> Ok</span>(</span>match</span> Value</span>::</span>deserialize</span>(</span>deserializer</span>)</span>?</span> {</span></span> Value</span>::</span>String</span>(</span>s</span>)</span> =></span> s</span>.</span>parse</span>()</span>.</span>map_err</span>(</span>de</span>::</span>Error</span>::</span>custom</span>)</span>?</span>,</span></span> Value</span>::</span>Number</span>(</span>num</span>)</span> =></span> num</span>.</span>as_i64</span>()</span>.</span>ok_or</span>(</span>de</span>::</span>Error</span>::</span>custom</span>(</span>"Invalide number"</span>))</span>?</span>,</span></span> _</span> =></span> return</span> Err</span>(</span>de</span>::</span>Error</span>::</span>custom</span>(</span>"wrong type"</span>)),</span></span> })</span></span> }</span></span> fn</span> de_str_option</span><</span>'</span>de</span>,</span> D</span>></span>(</span>deserializer</span>:</span> D</span>)</span> -></span> Result</span><</span>Option</span><</span>i64</span>></span>,</span> D</span>::</span>Error</span>></span></span> where</span></span> D</span>:</span> serde</span>::</span>de</span>::</span>Deserializer</span><</span>'</span>de</span>></span>,</span></span> {</span></span> Ok</span>(</span>match</span> Value</span>::</span>deserialize</span>(</span>deserializer</span>)</span>?</span> {</span></span> Value</span>::</span>String</span>(</span>s</span>)</span> =></span> s</span>.</span>parse</span>()</span>.</span>map</span>(</span>Some</span>)</span>.</span>map_err</span>(</span>de</span>::</span>Error</span>::</span>custom</span>)</span>?</span>,</span></span> Value</span>::</span>Number</span>(</span>num</span>)</span> =></span> num</span>.</span>as_i64</span>(),</span></span> _</span> =></span> return</span> Err</span>(</span>de</span>::</span>Error</span>::</span>custom</span>(</span>"wrong type"</span>)),</span></span> })</span></span> }</span></span></code></pre>DerefMut 获取结构体多个字段 mut</a></h2> 在使用诸如 Arc<Mutex<T>></code> 的数据时，当获取到了锁的引用后，实际修改数据时，修改的是通过锁的 DerefMut</code> 来修改其数据的。</p> let mut</span> config</span> =</span> config</span>.</span>lock</span>()</span>.</span>await</span>;</span></span> config</span>.</span>rua </span>=</span> "test"</span>;</span></span></code></pre> 而当数据中有多个字段需要分别获取为 mut</code> 时，则编译器可能无法正确的认识到实际获取的是不同的字段，而非将目标数据获取了多次 mut</code>。</p> let mut</span> config</span> =</span> config</span>.</span>lock</span>()</span>.</span>await</span>;</span></span> </span> let mut</span> rua</span> = &</span>mut</span> config</span>.</span>rua</span>;</span></span> let mut</span> core</span> =</span> config</span>.</span>core</span>.</span>as_mut</span>()</span>.</span>unwrap</span>();</span></span> // cannot borrow `config` as mutable more than once at a time</span></span></code></pre> 这是因为 DerefMut</code> 让编译器认为我们获取了两次 config</code> 结构体为 mut</code>，而非它的两个不同的字段。最佳解决办法就是通过手动解引用来获取到实际的结构体，从而使得编译器能够正确的认识到引用到字段。</p> let mut</span> config</span> =</span> config</span>.</span>lock</span>()</span>.</span>await</span>;</span></span> let</span> config</span> = &</span>mut</span> </span>config</span>;</span></span> </span> let mut</span> rua</span> = &</span>mut</span> config</span>.</span>rua</span>;</span></span> let mut</span> core</span> =</span> config</span>.</span>core</span>.</span>as_mut</span>()</span>.</span>unwrap</span>();</span></span></code></pre> 虽然自动解引用看上去获取的字段都是正确解引用的，但是编译器可能无法正确的识别到这两个字段是不同的。</p> ![[Pasted image 20230730004909.png]]</p> 这可能是因为 Mutex</code> 使用的是 UnsafeCell<T></code> 来获取实际值的可修改引用。</p> pub struct</span> Mutex</span><</span>T</span>: ?</span>Sized</span>></span> {</span></span> #</span>[</span>cfg</span>(</span>all</span>(</span>tokio_unstable</span>,</span> feature </span>=</span> "tracing"</span>))]</span></span> resource_span</span>:</span> tracing</span>::</span>Span</span>,</span></span> s</span>:</span> semaphore</span>::</span>Semaphore</span>,</span></span> c</span>:</span> UnsafeCell</span><</span>T</span>></span>,</span></span> }</span></span> </span> impl</span><</span>T</span>: ?</span>Sized</span>></span> DerefMut</span> for</span> MutexGuard</span><</span>'</span>_</span>,</span> T</span>></span> {</span></span> fn</span> deref_mut</span>(</span>&</span>mut</span> self</span>)</span> -> &</span>mut</span> Self</span>::</span>Target</span> {</span></span> unsafe</span> {</span> &</span>mut</span> </span>self</span>.</span>lock</span>.</span>c</span>.</span>get</span>() }</span></span> }</span></span> }</span></span></code></pre>异步递归</a></h2> 在内部，async fn</code> 创建了一个包含了要 .await</code> 的子 Future</code> 的状态机。这样递归的 async fn</code> 有点诡异，因为结果的状态机必须包含它自身：</p> #!</span>[</span>allow</span>(</span>unused</span>)]</span></span> fn</span> main</span>() {</span></span> async fn</span> step_one</span>() {</span> / ... /</span> }</span></span> async fn</span> step_two</span>() {</span> / ... /</span> }</span></span> </span> struct</span> StepOne</span>;</span></span> struct</span> StepTwo</span>;</span></span> </span> // This function:</span></span> async fn</span> foo</span>() {</span></span> step_one</span>()</span>.</span>await</span>;</span></span> step_two</span>()</span>.</span>await</span>;</span></span> }</span></span> // Generates a type like this:</span></span> enum</span> Foo</span> {</span></span> First</span>(</span>StepOne</span>),</span></span> Second</span>(</span>StepTwo</span>),</span></span> }</span></span> </span> // So this function:</span></span> async fn</span> recursive</span>() {</span></span> recursive</span>()</span>.</span>await</span>;</span></span> recursive</span>()</span>.</span>await</span>;</span></span> }</span></span> </span> // Generates a type like this:</span></span> enum</span> Recursive</span> {</span></span> First</span>(</span>Recursive</span>),</span></span> Second</span>(</span>Recursive</span>),</span></span> }</span></span> }</span></span></code></pre> 但是这将无法工作，因为我们创建了无限大小的类型</p> error[E0733]: recursion in an `async fn` requires boxing</span></span> --> src/lib.rs:1:22</span></span> \|</span></span> 1 \| async fn recursive() {</span></span> \| ^ an `async fn` cannot invoke itself directly</span></span> \|</span></span> = note: a recursive `async fn` must be rewritten to return a boxed future.</span></span></code></pre> 为了允许这种做法，我们需要用 Box</code> 来间接调用。而不幸的是，编译器限制意味着把 recursive()</code> 的调用包裹在 Box::pin</code> 并不够。为了让递归调用工作，我们必须把 recursive</code> 转换成非 async</code> 函数，然后返回一个 .boxed()</code> 的异步块</p> use</span> futures</span>::</span>future</span>::</span>{</span>BoxFuture</span>,</span> FutureExt</span>};</span></span> </span> fn</span> recursive</span>()</span> -></span> BoxFuture</span><</span>'</span>static</span>, ()</span>></span> {</span></span> async move</span> {</span></span> recursive</span>()</span>.</span>await</span>;</span></span> recursive</span>()</span>.</span>await</span>;</span></span> }</span>.</span>boxed</span>()</span></span> }</span></span></code></pre>消耗一个异步 map</a></h2> 当一个迭代器中产出异步值的时候，除了使用 for 循环来在外部函数中 await 它，还可以使用 futures</code> crate 中的 try_join_all</code>。</p> use</span> futures</span>::</span>future</span>::</span>try_join_all</span>;</span></span> </span> #</span>[</span>tokio</span>::</span>main</span>]</span></span> async fn</span> main</span>() {</span></span> let</span> urls</span> =</span> [</span>"https://www.google.com"</span>,</span> "https://rua.plus"</span>];</span></span> let</span> sites</span> =</span></span> try_join_all</span>(</span>urls</span>.</span>map</span>(</span>\|</span>url</span>\|</span> async move</span> {</span> reqwest</span>::</span>get</span>(</span>url</span>)</span>.</span>await</span>.</span>unwrap</span>()</span>.</span>text</span>()</span>.</span>await</span> }))</span></span> .</span>await</span></span> .</span>unwrap</span>();</span></span> sites</span>.</span>iter</span>()</span>.</span>for_each</span>(</span>\|</span>site</span>\|</span> {</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> site</span>.</span>len</span>());</span></span> });</span></span> }</span></span></code></pre>在 fold</code> 方法中使用 ?</code></a></h2> fold</code> 方法本身无法使用 ?</code>，但是 fold</code> 还有另一个变体，可以允许直接使用 ?</code>：try_fold</code>。</p> https://doc.rust-lang.org/std/ops/trait.Try.html</p> The ?</code> operator and try {}</code> blocks.</p> try_</code> methods typically involve a type implementing this trait. For example, the closures passed to Iterator::try_fold</code></a> and Iterator::try_for_each</code></a> must return such a type.</p> Try</code> types are typically those containing two or more categories of values, some subset of which are so commonly handled via early returns that it’s worth providing a terse (but still visible) syntax to make that easy.</p> This is most often seen for error handling with Result</code></a> and Option</code></a>. The quintessential implementation of this trait is on ControlFlow</code></a>.</p> pub async fn</span> regular_post</span>()</span> -></span> Result</span><</span>BaiduZZ</span>></span> {</span></span> let</span> site</span> =</span> env</span>::</span>var</span>(</span>"SPIO_SITE"</span>)</span>?</span>;</span></span> let</span> token</span> =</span> env</span>::</span>var</span>(</span>"SPIO_TOKEN"</span>)</span>?</span>;</span></span> let</span> url</span> =</span> format!</span>(</span>"</span>{}</span>?site=</span>{}</span>&token=</span>{}</span>"</span>,</span> BAIDU_URL</span>,</span> site</span>,</span> token</span>);</span></span> </span> let</span> now</span> =</span> Instant</span>::</span>now</span>();</span></span> info!</span>(</span>"starting get booths, request /admin/Apiview/sample_view"</span>);</span></span> let</span> params</span> =</span> ExampleParam</span>::</span>default</span>();</span></span> let</span> examples</span> =</span> get_examples</span>(</span>&</span>params</span>)</span>.</span>await</span>?</span>;</span></span> let</span> urls</span> =</span> examples</span></span> .</span>data</span></span> .</span>list</span></span> .</span>data</span></span> .</span>iter</span>()</span></span> .</span>try_fold</span>(</span>vec!</span>[],</span> build_booth_url</span>)</span>?</span></span> .</span>join</span>(</span>"</span>\n</span>"</span>);</span></span> info!</span>(</span>"parse booth's url done </span>{}</span>ms"</span>,</span> now</span>.</span>elapsed</span>()</span>.</span>as_millis</span>());</span></span> </span> let</span> res</span>:</span> BaiduZZ</span> =</span> reqwest</span>::</span>Client</span>::</span>new</span>()</span></span> .</span>post</span>(</span>url</span>)</span></span> .</span>header</span>(</span>reqwest</span>::</span>header</span>::</span>CONTENT_TYPE</span>,</span> "text/plain"</span>)</span></span> .</span>body</span>(</span>urls</span>)</span></span> .</span>send</span>()</span></span> .</span>await</span>?</span></span> .</span>json</span>()</span></span> .</span>await</span>?</span>;</span></span> Ok</span>(</span>res</span>)</span></span> }</span></span> </span> fn</span> build_booth_url</span>(</span>prev</span>:</span> Vec</span><</span>String</span>></span>,</span> cur</span>: &</span>BoothExamplesDatum</span>)</span> -></span> Result</span><</span>Vec</span><</span>String</span>>></span> {</span></span> let</span> url</span> =</span> Url</span>::</span>parse</span>(</span>cur</span>.</span>link</span>.</span>as_ref</span>()</span>.</span>unwrap_or</span>(</span>&</span>PRODUCTION_URL</span>.</span>to_owned</span>()));</span></span> let</span> host</span> =</span> url</span>?</span>;</span></span> let</span> host</span> =</span> host</span>.</span>host_str</span>()</span>.</span>ok_or</span>(</span>anyhow!</span>(</span>"parse url failed"</span>))</span>?</span>;</span></span> let</span> booth_url</span> =</span> if</span> host</span>.</span>contains</span>(</span>"aiyunhuizhan"</span>) {</span></span> format!</span>(</span></span> "https://</span>{}</span>/optimize/booth_id/</span>{}</span>"</span>,</span></span> host</span>,</span></span> cur</span>.</span>booth_id</span></span> .</span>as_ref</span>()</span></span> .</span>ok_or</span>(</span>anyhow!</span>(</span>"cannot read booth id"</span>))</span>?</span></span> )</span></span> }</span> else</span> {</span></span> cur</span>.</span>link</span>.</span>to_owned</span>()</span>.</span>expect</span>(</span>""</span>)</span></span> };</span></span> anyhow</span>::</span>Ok</span>([</span>prev</span>,</span> vec!</span>[</span>booth_url</span>.</span>to_string</span>()]]</span>.</span>concat</span>())</span></span> }</span></span></code></pre> 同理，返回 std::ops::Try</code> 的方法都能过使用 ?</code>。</p> use</span> anyhow</span>::</span>anyhow</span>;</span></span> </span> fn</span> main</span>()</span> -></span> anyhow</span>::</span>Result</span><</span>()</span>></span> {</span></span> let</span> data</span> =</span> [</span>Some</span>(</span>123</span>),</span> Some</span>(</span>444</span>),</span> None</span>];</span></span> </span> data</span>.</span>iter</span>()</span>.</span>try_for_each</span>(</span>\|</span>x</span>\|</span> {</span></span> let</span> real_x</span> =</span> x</span>.</span>ok_or</span>(</span>anyhow!</span>(</span>""</span>))</span>?</span>;</span></span> dbg!</span>(</span>real_x</span>);</span></span> anyhow</span>::</span>Ok</span>(())</span></span> })</span>?</span>;</span></span> </span> Ok</span>(())</span></span> }</span></span></code></pre>传递 async funcation as paramters</a></h2> use</span> futures</span>::</span>Future</span>;</span></span> </span> #</span>[</span>tokio</span>::</span>main</span>]</span></span> async fn</span> main</span>() {</span></span> let</span> num</span> =</span> test</span>(</span>calc</span>)</span>.</span>await</span>;</span></span> println!</span>(</span>"</span>{</span>num</span>}</span>"</span>);</span></span> }</span></span> </span> async fn</span> calc</span>()</span> -></span> i32</span> {</span></span> 40</span> +</span> 2</span></span> }</span></span> </span> async fn</span> test</span><</span>F</span>,</span> Fut</span>></span>(</span>f</span>:</span> F</span>)</span> -></span> i32</span></span> where</span></span> F</span>:</span> FnOnce</span>()</span> -></span> Fut</span>,</span></span> Fut</span>:</span> Future</span><</span>Output</span> =</span> i32</span>></span>,</span></span> {</span></span> f</span>()</span>.</span>await</span></span> }</span></span></code></pre>BoxedFuture</a></h2> pub type</span> Response</span> =</span> BoxFuture</span><</span>'</span>static</span>, (</span>Status</span>,</span> Bytes</span>)</span>></span>;</span></span> type</span> Job</span> =</span> fn</span>(</span>Request</span>)</span> -></span> Response</span>;</span></span> type</span> Routes</span> =</span> Arc</span><</span>RwLock</span><</span>HashMap</span><</span>&</span>'</span>static</span> str</span>,</span> HashMap</span><</span>&</span>'</span>static</span> str</span>,</span> Job</span>>>>></span>;</span></span></code></pre>Axum trailing slashes in route path</a></h2> https://github.com/tokio-rs/axum/discussions/2377</p> use</span> axum</span>::</span>{</span>extract</span>::</span>Request</span>,</span> Router</span>,</span> ServiceExt</span>};</span></span> use</span> tower</span>::</span>Layer</span>;</span></span> use</span> tower_http</span>::</span>normalize_path</span>::</span>NormalizePathLayer</span>;</span></span> </span> #</span>[</span>tokio</span>::</span>main</span>]</span></span> async fn</span> main</span>() {</span></span> let</span> app</span> =</span> Router</span>::</span>new</span>();</span></span> </span> let</span> app</span> =</span> NormalizePathLayer</span>::</span>trim_trailing_slash</span>()</span>.</span>layer</span>(</span>app</span>);</span></span> </span> let</span> listener</span> =</span> tokio</span>::</span>net</span>::</span>TcpListener</span>::</span>bind</span>(</span>"127.0.0.1:3000"</span>)</span></span> .</span>await</span></span> .</span>unwrap</span>();</span></span> </span> axum</span>::</span>serve</span>(</span>listener</span>,</span> ServiceExt</span>::</span><</span>Request</span>></span>::</span>into_make_service</span>(</span>app</span>))</span> // <-- this</span></span> .</span>await</span></span> .</span>unwrap</span>();</span></span> }</span></span></code></pre> 跨平台的静态链接构建 2023-12-26T00:00:00+00:00 大多数 Linux 软件都是动态链接的，动态链接可以使我们的程序不需要将所有所需要的库都打包到自身当中去。不过这样也有弊处，当目标系统比较旧，或者压根就没有我们需要的库的时候，我们的二进制文件就无法在目标系统中运行。</p> 安装交叉编译工具</a></h2> 不光光需要使用 rustup</code> 来安装对应的 target，还需要 linker 来帮助构建到目标平台。</p> macOS</p> brew tap SergioBenitez/osxct</span></span> brew install FiloSottile/musl-cross/musl-cross</span></span> brew install SergioBenitez/osxct/x86_64-unknown-linux-gnu</span></span> brew install mingw-w64</span></span></code></pre>rustup target add x86_64-unknown-linux-musl</span></span> rustup target add x86_64-unknown-linux-gnu</span></span> rustup target add x86_64-pc-windows-gnu</span></span></code></pre> Ubuntu</p> apt-get</span> install -y musl-tools libssl-dev pkg-config libudev-dev</span></span></code></pre> 在安装好 target 与 linker 之后，则需要在项目目录下的 .cargo/config</code> 中添加对应平台所需要使用的 linker。</p> [</span>target.x86_64-unknown-linux-gnu</span>]</span></span> linker</span> =</span> "x86_64-unknown-linux-gnu-gcc"</span></span> </span> [</span>target.x86_64-unknown-linux-musl</span>]</span></span> linker</span> =</span> "x86_64-linux-musl-gcc"</span></span> </span> [</span>target.x86_64-pc-windows-gnu</span>]</span></span> linker</span> =</span> "x86_64-w64-mingw32-gcc"</span></span></code></pre>动态链接</a></h2> TARGET_CC=x86_64-unknown-linux-gnu \</span></span> cargo build --release --target x86_64-unknown-linux-gnu</span></span></code></pre>静态链接</a></h2> TARGET_CC=x86_64-linux-musl-gcc \</span></span> RUSTFLAGS="-C linker=x86_64-linux-musl-gcc" \</span></span> cargo build --target=x86_64-unknown-linux-musl --release</span></span></code></pre>TARGET_CC=x86_64-linux-musl-gcc \</span></span> cargo build --target=x86_64-unknown-linux-musl --release</span></span></code></pre>Windows</a></h2> cargo build --target=x86_64-pc-windows-gnu --release</span></span></code></pre>Arm Linux</a></h2> 手上的树莓派 3B+ 的 A53 其实是 64 位的，很久之前官方的系统就支持 64 位了。到现在一直都没有好好的发光发热过，如果使用 A53 来编译岂不是暴殄天物。</p> 和编译到 x86 的 linux 一样，只要安装好对应的 target 和设置好对应的 CC 即可。</p> TARGET_CC</span>=</span>aarch64-linux-musl-cc</span> \</span></span> RUSTFLAGS=</span>"-C linker=aarch64-linux-musl-cc"</span> \</span></span> cargo</span> build --target=aarch64-unknown-linux-musl --release</span></span></code></pre>Should I rust or should I go?</a></h2> Golang 则更加的省心</p> GOOS</span>=</span>linux</span> GOARCH</span>=</span>arm64</span> go</span> build</span></span></code></pre>Openssl</a></h2> 在跨平台时，openssl 可能没有对应平台的链接库，而 openssl 提供了一个简单的解决方案：添加 vendored</code> features。</p> If the vendored</code> Cargo feature is enabled, the openssl-src</code> crate will be used to compile and statically link to a copy of OpenSSL. The build process requires a C compiler, perl (and perl-core), and make. The OpenSSL version will generally track the newest OpenSSL release, and changes to the version are not</em> considered breaking changes. https://docs.rs/openssl/latest/openssl/#vendored</a></p> </blockquote> openssl</span> =</span> {</span> version</span> =</span> "0.10.61"</span>,</span> features</span> =</span> [</span>"vendored"</span>] }</span></span></code></pre> 如果没有直接直接使用openssl 作为依赖，可以单独为其指定 features 而不作为依赖，也不用指定版本。</p> [</span>dependencies.openssl</span>]</span></span> features</span> =</span> [</span>"vendored"</span>]</span></span> [</span>dependencies.openssl-sys</span>]</span></span> features</span> =</span> [</span>"vendored"</span>]</span></span></code></pre> 需要注意的是，在某些镜像中（例如 rust:latest</code>），还需要一些额外的依赖</p> apt-get</span> install -y musl-tools libssl-dev pkg-config libudev-dev</span></span></code></pre>GitLab CI</a></h2> 相对于其他提供 SaaS 的 CI 来说，Gitlab 最大的好处就是可以安装 gitlab-runner 来使用自己的机器作为 runner，从而不用再额外购买 CI 的执行时长。</p> Compose</a></h3> version</span>:</span> "3.6"</span></span> services</span>:</span></span> runner</span>:</span></span> container_name</span>:</span> gitlab-runner-1</span></span> image</span>:</span> "gitlab/gitlab-runner:latest"</span></span> restart</span>:</span> unless-stopped</span></span> volumes</span>:</span></span> -</span> /var/run/docker.sock:/var/run/docker.sock</span></span> -</span> ./runner-1:/etc/gitlab</span></span> </span> runner-2</span>:</span></span> container_name</span>:</span> gitlab-runner-2</span></span> image</span>:</span> "gitlab/gitlab-runner:latest"</span></span> restart</span>:</span> unless-stopped</span></span> volumes</span>:</span></span> -</span> /var/run/docker.sock:/var/run/docker.sock</span></span> -</span> ./runner-2:/etc/gitlab</span></span></code></pre> 使用 compose 来运行多个 runner 是最好不过的选择了。compose file 本身与运行其他服务没有什么区别，唯一需要注意的就是注册 runner 了。</p> 在 compose 启动所有的 runner 后，可以使用 docker exec</code> 来为运行中的容器执行命令，从而执行 runner 中的 gitlab-runner</code> 命令来注册 runner。其注册命令为 gitlab-runner register</code>。</p> docker</span> exec -it gitlab-runner-1 gitlab-runner register</span></span></code></pre> 这里是映射了容器中的 /etc/gitlab</code> 目录到本地，runner 注册的配置文件就在该目录。所有除了直接执行容器命令，还可以单独运行一个实例，挂载 ./runner-1</code> 目录来注册。注册完成后配置文件就在该目录下，随后再启动 compose，新启动的 runner 就能读取到刚刚注册的配置文件，从而变成它了。</p> 静态链接的配置文件</a></h2> 较为通用的只用到了 rust 官方镜像的跨平台配置。如果使用了 openssl，则需要添加 vendored</code> features。</p> Locally test</a></h3> docker</span> run --entrypoint bash --rm -w</span> $PWD</span> -v</span> $PWD</span>:</span>$PWD</span> -v /var/run/docker.sock:/var/run/docker.sock gitlab/gitlab-runner:latest -c 'git config --global --add safe.directory "";gitlab-runner exec docker build:linux-musl-amd64'</span></span></code></pre> 在本地运行并测试刚修改的 .gitlab-ci.yml</code> 是必不可少的，不能每次的修改都需要 push 以后再交给 runner 运行。这样不仅麻烦，还会导致 commit 的杂乱无章。</p> 而通过启动一个新的 runner 实例，可以直接将项目挂载到 runner 的容器中来本地执行当前的 .gitlab-ci.yml</code>。本地执行的 runner 是不需要注册的。</p> 细颗粒度更新与自动依赖收集 2023-11-09T00:00:00+00:00 众所周知，React 并没有实现细颗粒度的状态更新。同时在副作用中也需要我们手动去管理对应依赖。如常见的 useEffect</code> 和 useMemo</code> 等：</p> const</span> [</span>count</span>,</span> setCount</span>]</span> =</span> useState</span>(</span>0</span>)</span>;</span></span> useEffect</span>(</span>()</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"count updated "</span>,</span> count)</span>;</span></span> },</span> [count])</span>;</span></span></code></pre> 这里就需要我们手动的去管理 useEffect</code> 的依赖，否则 useEffect</code> 则只会执行一次。而在 Vue 等框架中，则可以自动追踪其依赖：</p> const</span> y</span> =</span> coumputed</span>(</span>()</span> =></span> x</span>.</span>value</span> </span> 2</span> +</span> 1</span>)</span>;</span></span></code></pre> 在 Vue 和 Mobx 等框架中使用的“能自动追踪依赖的技术”被称为“细颗粒度更新”（Fine-Grained Reactivity），这也是许多前端框架响应式的原理。</p> 实现一个细颗粒度更新</a></h2> 我们希望为 React 实现一个简易的细颗粒度更新的状态，使我们在使用副作用时不需要手动管理其依赖的 hooks。</p> 其设想的效果应如下：</p> const</span> [</span>count</span>,</span> setCount</span>]</span> =</span> useState</span>(</span>0</span>)</span>;</span></span> useEffect</span>(</span>()</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"count is "</span>,</span> count</span>())</span>;</span></span> }</span>)</span>;</span></span> useEffect</span>(</span>()</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"only print once"</span>)</span>;</span></span> }</span>)</span>;</span></span> </span> // Trigger effect</span></span> setCount</span>(</span>1</span>)</span>;</span></span></code></pre> useEffect</code> 不再需要为其手动管理状态，而是自动追踪依赖。当我们更新状态 count</code> 时，自动触发 useEffect</code> 的回调。</p> useState</a></h3> 第一步就是现实一个简易的状态，这里模仿 React 官方 useState</code> 的签名，我们也返回一个元组，分别是状态和更新其方法。</p> export type</span> Getter</span><</span>T</span>></span> =</span> ()</span> =></span> T</span>;</span></span> export type</span> Setter</span><</span>T</span>></span> =</span> (</span>newValue</span>:</span> T</span> \|</span> (</span>(</span>oldValue</span>:</span> T</span>)</span> =></span> T)</span>)</span> =></span> void</span>;</span></span> export type</span> UseState</span> =</span> <</span>T</span>></span>(</span>value</span>:</span> T</span>)</span> =></span> [Getter</span><</span>T</span>></span>,</span> Setter</span><</span>T</span>></span>]</span>;</span></span> </span> const</span> useState</span>:</span> UseState</span> =</span> (</span>value</span>)</span> =></span> {</span></span> const</span> getter</span>:</span> Getter</span><</span>typeof</span> value</span>></span> =</span> ()</span> =></span> {</span></span> return</span> value</span>;</span></span> };</span></span> </span> const</span> setter</span>:</span> Setter</span><</span>typeof</span> value</span>></span> =</span> (</span>updater</span>)</span> =></span> {</span></span> const</span> newState</span> =</span> updater</span> instanceof</span> Function</span> ?</span> updater</span>(value)</span> :</span> updater</span>;</span></span> if</span> (value</span> ===</span> newState)</span> return</span>;</span></span> value</span> =</span> newState</span>;</span></span> };</span></span> </span> return</span> [getter</span>,</span> setter]</span>;</span></span> };</span></span> </span> export</span> {</span> useState</span> };</span></span></code></pre> 这样看似很美好，我们利用函数的参数和闭包实现了一个状态，并在调用设置状态函数时，更新该状态。在调用 getter()</code> 时返回该状态。但是它无法和 React 一起使用，因为 React 的 useState</code> 重点不仅仅是对一个值的设置，而是在状态更新时更新 React 组件。我们的 useState</code> 只实现了一个功能，对状态的管理，我们还需要实现更新 React 组件才能和 React 一起使用。</p> 我们的重点不是在如何实现一个 React，所以更新组件就交给真正的 useState</code> 来做。我们通过在我们自己状态更新时，调用 React 的 useState</code> 来更新组件。这样就通过借用官方的 useState</code> 来帮助我们更新组件，从而实现一个简易的状态。</p> const</span> useState</span>:</span> UseState</span> =</span> (</span>value</span>)</span> =></span> {</span></span> const</span> state</span> =</span> useRef</span>(value)</span>;</span></span> // eslint-disable-next-line @typescript-eslint/no-unused-vars</span></span> const</span> [</span>_</span>,</span> update</span>]</span> =</span> useUpdate</span>(</span>{}</span>)</span>;</span></span> </span> const</span> getter</span>:</span> Getter</span><</span>typeof</span> value</span>></span> =</span> ()</span> =></span> {</span></span> return</span> state</span>.</span>current</span>;</span></span> };</span></span> </span> const</span> setter</span>:</span> Setter</span><</span>typeof</span> value</span>></span> =</span> (</span>updater</span>)</span> =></span> {</span></span> const</span> newState</span> =</span></span> updater</span> instanceof</span> Function</span> ?</span> updater</span>(state</span>.</span>current)</span> :</span> updater</span>;</span></span> if</span> (state</span>.</span>current</span> ===</span> newState)</span> return</span>;</span></span> state</span>.</span>current</span> =</span> newState</span>;</span></span> update</span>(</span>{}</span>)</span>;</span></span> };</span></span> </span> return</span> [getter</span>,</span> setter]</span>;</span></span> };</span></span></code></pre> 使用它的方式和官方 hooks 没有区别：</p> useEffect</a></h3> 有了状态之后，接下来就是副作用了。Effect 主要需要解决的问题就是如何自动收集依赖，例如：</p> useEffect</span>(</span>()</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"count is "</span>,</span> count</span>())</span>;</span></span> }</span>)</span>;</span></span></code></pre> 在用户提供的回调函数中，我们无法直接了当的去知道其中是否有状态需要的依赖，也无法知道有哪些状态在其中。这就是为什么我们将获取状态的 getter</code> 设计成了一个函数，通过在 effect 中调用的 getter</code> ，我们就能为 setter</code> 和 effect 之间建立一个订阅关系，从而实现调用 setter</code> 时调用 effect 的回调方法。</p> 首要方法就是订阅发布模型，首先我们需要为 effect 创建一个用于回调调用栈，当 useEffect</code> 第一次调用时，我们将该 effect 对应的信息保存到栈中。随后如果在回调函数中有状态的 getter</code> 该 getter</code> 则会收集栈中的 effect 并创建对应的订阅。</p> 第一步就是创建保存到栈中的数据结构与一个全局的用于保存 effect 的栈：</p> export type</span> Effect</span> =</span> {</span></span> // 用于执行 useEffect 回调函数</span></span> execute</span>:</span> ()</span> =></span> void</span>;</span></span> // 保存该 useEffect 依赖的 state 对应的 subs 集合</span></span> deps</span>:</span> Set</span><</span>unknown</span>></span>;</span></span> };</span></span> const</span> effectStack</span>:</span> Effect[]</span> =</span> []</span>;</span></span></code></pre> 随后来定义我们的 useEffect</code>：</p> const</span> useEffect</span> =</span> (</span>callback</span>:</span> ()</span> =></span> void</span>)</span> =></span> {</span></span> const</span> execute</span> =</span> ()</span> =></span> {</span></span> effectStack</span>.</span>push</span>(effect)</span>;</span></span> try</span> {</span></span> callback</span>()</span>;</span></span> }</span> finally</span> {</span></span> effectStack</span>.</span>pop</span>()</span>;</span></span> }</span></span> };</span></span> const</span> effect</span>:</span> Effect</span> =</span> {</span></span> execute</span>,</span></span> deps</span>:</span> new</span> Set</span>()</span>,</span></span> };</span></span> </span> // 调用时执行</span></span> execute</span>()</span>;</span></span> };</span></span></code></pre> execute</code> 用于将当前的 effect 推入栈中保存，随后执行用户的回调函数。我们的依赖收集重点就是在这里，如果回调函数 callback</code> 中有我们状态的 getter</code>，那么 getter</code> 将会收集刚刚推入栈中的 effect 并建立订阅管理，从而实现自动收集依赖。</p> 所以这里的 getter</code> 需要小小的更新下：</p> const</span> subscribe</span> =</span> (</span>effect</span>:</span> Effect</span>,</span> subs</span>:</span> Subs</span>)</span> =></span> {</span></span> // 建立订阅关系</span></span> subs</span>.</span>add</span>(effect)</span>;</span></span> // 建立依赖关系</span></span> effect</span>.</span>deps</span>.</span>add</span>(effect)</span>;</span></span> };</span></span> const</span> useState</span>:</span> UseState</span> =</span> (</span>value</span>)</span> =></span> {</span></span> const</span> state</span> =</span> useRef</span>(value)</span>;</span></span> // eslint-disable-next-line @typescript-eslint/no-unused-vars</span></span> const</span> [</span>_</span>,</span> update</span>]</span> =</span> useUpdate</span>(</span>{}</span>)</span>;</span></span> </span> const</span> subs</span> =</span> useRef</span>(</span>new</span> Set</span><</span>Effect</span>></span>())</span>;</span></span> </span> const</span> getter</span>:</span> Getter</span><</span>typeof</span> value</span>></span> =</span> ()</span> =></span> {</span></span> // 获取刚刚送入栈中的 effect</span></span> const</span> effect</span> =</span> effectStack[effectStack</span>.</span>length</span> -</span> 1</span>]</span>;</span></span> if</span> (effect)</span> {</span></span> // 建立订阅发布关系</span></span> subscribe</span>(effect</span>,</span> subs</span>.</span>current)</span>;</span></span> }</span></span> return</span> state</span>.</span>current</span>;</span></span> };</span></span> </span> const</span> setter</span>:</span> Setter</span><</span>typeof</span> value</span>></span> =</span> (</span>updater</span>)</span> =></span> {</span></span> const</span> newState</span> =</span></span> updater</span> instanceof</span> Function</span> ?</span> updater</span>(state</span>.</span>current)</span> :</span> updater</span>;</span></span> if</span> (state</span>.</span>current</span> ===</span> newState)</span> return</span>;</span></span> state</span>.</span>current</span> =</span> newState</span>;</span></span> update</span>(</span>{}</span>)</span>;</span></span> };</span></span> </span> return</span> [getter</span>,</span> setter]</span>;</span></span> };</span></span></code></pre> 这里通过给 getter</code> 添加一个在执行时检查 effectStack</code>，如果能够取到栈尾的 effect 则添加到 useState</code> 的订阅列表 subs</code> 中。</p> 接下来就是更新 setter</code>，使其在更新状态时检查订阅列表 subs</code> 并遍历执行列表中所有副状态：</p> const</span> setter</span>:</span> Setter</span><</span>typeof</span> value</span>></span> =</span> (</span>updater</span>)</span> =></span> {</span></span> const</span> newState</span> =</span></span> updater</span> instanceof</span> Function</span> ?</span> updater</span>(state</span>.</span>current)</span> :</span> updater</span>;</span></span> if</span> (state</span>.</span>current</span> ===</span> newState)</span> return</span>;</span></span> </span> state</span>.</span>current</span> =</span> newState</span>;</span></span> update</span>(</span>{}</span>)</span>;</span></span> for</span> (</span>const</span> sub</span> of</span> [</span>...</span>subs</span>.</span>current])</span> {</span></span> sub</span>.</span>execute</span>()</span>;</span></span> }</span></span> };</span></span></code></pre> 除此之外，和 useEffect</code> 同理，我们需要放到 React 组件中使用，而我们刚刚设计的状态也会真正的更新一个函数式组件。由于函数式组件的特殊性，每次组件更新时所有的 hook 都会执行，所以我们的 useEffect</code> 还需要 React 的真正的 useEffect</code> 一点小小的帮助。</p> const</span> useEffect</span> =</span> (</span>callback</span>:</span> ()</span> =></span> void</span>)</span> =></span> {</span></span> const</span> execute</span> =</span> ()</span> =></span> {</span></span> // 重制依赖</span></span> cleanup</span>(effect)</span>;</span></span> // 添加到副作用列表</span></span> effectStack</span>.</span>push</span>(effect)</span>;</span></span> try</span> {</span></span> callback</span>()</span>;</span></span> }</span> finally</span> {</span></span> effectStack</span>.</span>pop</span>()</span>;</span></span> }</span></span> };</span></span> const</span> effect</span>:</span> Effect</span> =</span> {</span></span> execute</span>,</span></span> deps</span>:</span> new</span> Set</span>()</span>,</span></span> };</span></span> </span> useMounted</span>(</span>()</span> =></span> {</span></span> // 调用时执行</span></span> execute</span>()</span>;</span></span> },</span> [])</span>;</span></span> };</span></span></code></pre>useMemo</a></h3> 通过 useEffect</code> 实现的自动依赖追踪，我们就可以轻松的实现一个自动追踪依赖的 useMemo</code>：</p> const</span> useMemo</span> =</span> <</span>T</span>></span>(</span>callback</span>:</span> ()</span> =></span> T</span>)</span> =></span> {</span></span> const</span> [</span>s</span>,</span> set</span>]</span> =</span> useState</span>(</span>callback</span>())</span>;</span></span> useEffect</span>(</span>()</span> =></span> set</span>(</span>callback</span>()))</span>;</span></span> return</span> s</span>;</span></span> };</span></span></code></pre> Rust Box 与对象 2023-02-09T00:00:00+00:00 对于多数高级语言往往会弱化堆栈的概念，它们通常由 GC 等方式来管理内存。而对于像 Rust 这类的低级语言来说，则需要更深入的了解堆栈的概念。</p> 栈内存从高位地址向下增长，且栈内存是连续分配的，一般来说操作系统对栈内存的大小都有限制。这也是为什么 C 语言中无法创建任意长度的数组。在 Rust 中，main</code> 线程的栈大小是 8MB，普通线程是 2MB。在函数调用时会在其中创建一个临时的栈空间，调用结束后 Rust 会让这个栈空间里的对象自动进入 Drop 流程，最后栈顶指针自动移动到上一个调用栈顶，无需程序员手动干预。因而栈内存申请和释放是非常高效的。</p> 与栈相反，堆上的内存是从低位地址向上增长，堆内存通常只受物理内存限制，而且通常不是连续的。因而从性能的角度看，栈内存往往更高。</p> 除此之外，Rust 堆上的对象还有一个特殊之处，它们都拥有一个所有者。因此受所有权规则的限制：当赋值时，发生的是所有权的转移（只需浅拷贝栈上的引用或智能指针即可）。</p> fn</span> main</span>()</span> -></span> Result</span><</span>()</span>></span> {</span></span> let</span> str</span> =</span> String</span>::</span>from</span>(</span>"Hello world"</span>);</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> str</span>);</span></span> let</span> str2</span> =</span> str</span>;</span></span> // --- value moved here</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> str</span>);</span></span> // ^^^ value borrowed here after move</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> str2</span>);</span></span> </span> Ok</span>(())</span></span> }</span></span></code></pre> 在所有权的规则中，堆内存上的对象默认会转移所有权，str</code> 的指针引用转移给了 str2</code>，所以无法再访问 str</code>，它已经不再和指针绑定了。</p> 不同于我们熟悉的那个语言来，它默认会复制一份引用。由于它们都持有同一个引用，所以通过任何一个变量都可以修改引用的实际值。对于什么时候释放这个引用这种问题，就交给 GC 去思考吧。</p> const</span> str</span> =</span> {</span></span> content</span>:</span> "Hello world"</span>,</span></span> };</span></span> const</span> str2</span> =</span> str</span>;</span></span> console</span>.</span>log</span>(str</span>,</span> str2)</span>;</span></span> str2</span>.</span>content</span> =</span> "world"</span>;</span></span> console</span>.</span>log</span>(str</span>,</span> str2)</span>;</span></span></code></pre>堆栈的性能</a></h2> 通常栈的性能会比堆高，但其实未必。对于不同类型的数据，它们的性能也是不同的：</p> 小型数据，在栈上的分配性能和读取性能都比堆上高；</li> 中型数据，栈上分配性能高，但是读取性能和堆上并无区别，因为无法利用寄存器或 CPU 高速缓存，最终还是要经过一次内存寻址；</li> 大型数据，只建议在堆上分配和使用；</li> </ul> 总之，栈的分配速度肯定比堆上快，但是读取速度往往取决于数据能不能放入寄存器或 CPU 高速缓存。</p> Box 的使用场景</a></h2> Box<T></code> 只是对数据的简单封装，它除了将值存储在堆上之外，并没有其他性能上的损耗。因此 Box</code> 相比较与其他智能指针，功能较为单一。</p> 特意将数据分配在堆上；</li> 数据较大时；又不想在转移所有权时拷贝数据；</li> 类型的大小在编译器无法确定，但是我们又需要固定大小的类型时；</li> 特征对象，用于说明对象实现了一个特征，而不是某个特定的类型；</li> </ul> 将数据存储在堆上</a></h3> 如果将一个数值分配给一个变量，那么这个变量必然是存储在栈上的。如果我们想要它存储在堆上可以使用 Box<T></code>：</p> fn</span> main</span>()</span> -></span> Result</span><</span>()</span>></span> {</span></span> let</span> n</span> =</span> 3</span>;</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> n</span>);</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> n</span> +</span> 1</span>);</span></span> let</span> n</span> =</span> Box</span>::</span>new</span>(</span>3</span>);</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> n</span>);</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> </span>n</span> +</span> 1</span>);</span></span> </span> Ok</span>(())</span></span> }</span></span></code></pre> 这样就可以创建了一个智能指针指向存储在堆上的 3，并且变量 n</code> 持有了该指针。大部分智能指针都实现了 Deref</code> 和 Drop</code> 指针，因此：</p> println!</code> 可以正常打印出值，是因为它隐式地调用了 Deref</code> 对智能指针进行了解引用；</li> 在表达式中，无法自动隐式地执行 Deref</code> 解引用操作，需要手动使用 </code> 操作符来显式的解引用；</li> 变量 n</code> 持有的智能指针将在作用域结束时，被释放掉，这是因为 Box<T></code> 实现了 Drop</code> 特征；</li> </ul> 上述的例子在实际代码中会很少存在，因为将一个简单的值分配到堆上并没有太大的意义。将其分配在栈上，由于寄存器、CPU 缓存等原因，它的性能将更好，而且代码可读性也更好。</p> 避免栈上数据的拷贝</a></h3> 当栈上数据转移所有权时，实际上是把数据拷贝了一份，最终新旧变量各自拥有不同的数据，因此所有权并未转移。</p> 而堆上则不然，底层数据并不会被拷贝，转移所有权仅仅只是赋值一份栈中的指针，再将新的指针赋予新的变量，然后让拥有旧指针的变量失效，最终完成了所有权的转移：</p> fn</span> main</span>()</span> -></span> Result</span><</span>()</span>></span> {</span></span> let</span> arr</span> =</span> [</span>0</span>;</span> 1000</span>];</span></span> let</span> arr1</span> =</span> arr</span>;</span></span> println!</span>(</span>"arr: </span>{}</span>"</span>,</span> arr</span>.</span>len</span>());</span></span> println!</span>(</span>"arr1: </span>{}</span>"</span>,</span> arr1</span>.</span>len</span>());</span></span> </span> let</span> arr</span> =</span> Box</span>::</span>new</span>([</span>0</span>;</span> 1000</span>]);</span></span> let</span> arr1</span> =</span> arr</span>;</span></span> println!</span>(</span>"arr: </span>{}</span>"</span>,</span> arr</span>.</span>len</span>());</span></span> // ^^^^^^^^^ value borrowed here after move</span></span> println!</span>(</span>"arr1: </span>{}</span>"</span>,</span> arr1</span>.</span>len</span>());</span></span> </span> Ok</span>(())</span></span> }</span></span></code></pre>将动态大小类型变为固定大小类型</a></h3> Rust 需要在编译时就知道类型占用多少空间，无法在编译时知道具体大小的类型被称之为动态大小类型 DST。</p> 其中一种无法在编译时就知道大小的类型是递归类型：在类型定义时用到了自身，或者说该类型的值的一部分是相同类型的其他值，这种值的嵌套理论上可以无限的进行下午，所以 Rust 无法在编译时知道递归类型所需要的空间：</p> enum</span> List</span> {</span></span> Cons</span>(</span>i32</span>,</span> List</span>),</span></span> Nil</span>,</span></span> }</span></span></code></pre> 以上就是函数式语言中常见的 Cons List</code>，它的每个节点包含一个 i32</code> 的值，还包含一个新的 List</code>，因此这种嵌套可以无限进行下去，Rust 认为该类型是一个 DST 类型，并给予报错：</p> error[E0072]: recursive type `List` has infinite size</span></span> --> src\main.rs:3:1</span></span> \|</span></span> 3 \| enum List {</span></span> \| ^^^^^^^^^</span></span> 4 \| Cons(i32, List),</span></span> \| ---- recursive without indirection</span></span> \|</span></span> help: insert some indirection (e.g., a `Box`, `Rc`, or `&`) to break the cycle</span></span> \|</span></span> 4 \| Cons(i32, Box<List>),</span></span> \| ++++ +</span></span></code></pre> 编译器也贴心的给了我们一些解决方案，将其转换为一个指针。其中一个方法就是利用 Box<T></code>。</p> enum</span> List</span> {</span></span> Cons</span>(</span>i32</span>,</span> Box</span><</span>List</span>></span>),</span></span> Nil</span>,</span></span> }</span></span></code></pre> 只需要将 List</code> 存储到堆上，然后是使用一个智能指针指向它，即可完成从 DST 到 Sized 类型的华丽转变。</p> 特征对象</a></h3> 在 Rust 中，想实现不同类型组成的数组或接受实现了某种方法的不同类型的参数，只有两种办法：枚举和特征对象。枚举的限制较多，因此特征对象往往是最常用的解决办法。</p> use</span> ::</span>anyhow</span>::</span>Result</span>;</span></span> </span> trait</span> Draw</span> {</span></span> fn</span> darw</span>(</span>&</span>self</span>);</span></span> }</span></span> </span> struct</span> Button</span> {}</span></span> </span> impl</span> Draw</span> for</span> Button</span> {</span></span> fn</span> darw</span>(</span>&</span>self</span>) {</span></span> println!</span>(</span>"Button"</span>);</span></span> }</span></span> }</span></span> </span> struct</span> Input</span> {}</span></span> </span> impl</span> Draw</span> for</span> Input</span> {</span></span> fn</span> darw</span>(</span>&</span>self</span>) {</span></span> println!</span>(</span>"Input"</span>);</span></span> }</span></span> }</span></span> </span> fn</span> test</span><</span>T</span>></span>(</span>component</span>: &</span>T</span>)</span></span> where</span></span> T</span>:</span> Draw</span>,</span></span> {</span></span> component</span>.</span>darw</span>();</span></span> }</span></span> fn</span> test2</span>(</span>component</span>: &</span>dyn</span> Draw</span>) {</span></span> component</span>.</span>darw</span>();</span></span> }</span></span> </span> fn</span> main</span>()</span> -></span> Result</span><</span>()</span>></span> {</span></span> let</span> components</span>:</span> Vec</span><</span>Box</span><</span>dyn</span> Draw</span>>></span> =</span> vec!</span>[</span>Box</span>::</span>new</span>(</span>Button</span> {}),</span> Box</span>::</span>new</span>(</span>Input</span> {})];</span></span> components</span>.</span>iter</span>()</span>.</span>for_each</span>(</span>\|</span>c</span>\|</span> test2</span>(</span>&</span>c</span>));</span></span> </span> Ok</span>(())</span></span> }</span></span></code></pre> 上述代码实现在一个数组中存储实现了 Draw</code> 这个 Trait 但是类型却不同的数据，就是将 Button</code> 和 Input</code> 包装成 Draw</code> 特征的特征对象，再放入到数组中。Box<dyn Draw></code> 就是特征对象。</p> 而在函数 test2</code> 中，其参数可以写成 &Box<dyn Draw></code> 也可以写成 &dyn Draw</code> 这两种都是特征对象作为参数的写法。但需要注意的是，如果写成 &dyn Draw</code> 的格式，则不能直接将 &Box<T></code> 传入，或者说，编译器无法完全为我们隐式解引用。需要手动为其解引用 &c</code>。</p> 其实，特征也是 DST 类型，而特征对象在做的就是将 DST 类型转换为固定大小类型。</p> 内存布局</a></h2> 这是一个标准的 Vec<i32></code> 的 Vec 内存布局：</p> let</span> arr</span> =</span> vec!</span>[</span>1</span>,</span> 2</span>,</span> 3</span>,</span> 4</span>];</span></span></code></pre> </p> 与 Box 类似， Vec 和 String 都是智能指针，从上图可以看出，该智能指针存储在栈中，然后指向堆上的数组数据。</p> 那如果数组中每个元素都是一个 Box 对象呢？这就是 Vec<Box<i32>></code> 的内存布局：</p> </p> 可以看出智能指针 Vec 依然是存储在栈上，然后指针指向一个堆上的数组，该数组中每个元素都是一个 Box 智能指针，最终 Box 智能指针又指向存储堆上的实际值。</p> 所以当我们从数组中取出某个元素时，取到的时对应的智能指针 Box，需要对该智能指针进行解引用才能取出该值。</p> fn</span> main</span>() {</span></span> let</span> arr</span> =</span> [</span>Box</span>::</span>new</span>(</span>1</span>),</span> Box</span>::</span>new</span>(</span>2</span>),</span> Box</span>::</span>new</span>(</span>3</span>),</span> Box</span>::</span>new</span>(</span>4</span>)];</span></span> let</span> (</span>first</span>,</span> second</span>)</span> =</span> (</span>&</span>arr</span>[</span>0</span>],</span> &</span>arr</span>[</span>1</span>]);</span></span> let</span> sum</span> = </span>first</span> + </span>second</span>;</span></span> println!</span>(</span>"</span>{}</span>"</span>,</span> sum</span>);</span></span> }</span></span></code></pre> 以上代码有几个指的注意的点：</p> 使用 &</code> 借用数组中的元素，否则会报所有权错误；</li> 表达式不能隐式解引用，因此必须使用 *</code> 做两次解引用，第一次将 &Box<i32></code> 解引用为 Box<i32></code>，第二次将 Box<i32></code> 解引用成 i32</code>；</li> </ul> Box::leak</a></h2> Box 中还提供了一个非常有用的关联函数：Box::leak</code>，它可以消费掉 Box 并强制目标从内存中泄露。</p> fn</span> main</span>() {</span></span> let</span> static_str</span> =</span> gen_static_str</span>();</span></span> dbg!</span>(</span>&</span>static_str</span>.</span>as_ptr</span>());</span></span> }</span></span> </span> fn</span> gen_static_str</span>()</span> -> &</span>'</span>static</span> str</span> {</span></span> let mut</span> str</span> =</span> String</span>::</span>from</span>(</span>"Hello "</span>);</span></span> str</span>.</span>push_str</span>(</span>"world"</span>);</span></span> dbg!</span>(</span>&</span>str</span>.</span>as_ptr</span>());</span></span> Box</span>::</span>leak</span>(</span>str</span>.</span>into_boxed_str</span>())</span></span> }</span></span></code></pre> Rust 模式匹配 2023-02-07T00:00:00+00:00 match</a></h2> match</code> 是一个极为强大的控制流运算符，它允许我们将一个值与一系列的模式相比较，并根据相匹配的模式执行相应代码。模式可由字面值、变量、通配符和许多其他内容构成。</p> fn</span> value_in_cents</span>(</span>coin</span>:</span> Coin</span>)</span> -></span> u8</span> {</span></span> match</span> coin</span> {</span></span> Coin</span>::</span>Penny</span> =></span> {</span></span> println!</span>(</span>"Lucky penny!"</span>);</span></span> 1</span></span> }</span></span> Coin</span>::</span>Nickel</span> =></span> 5</span>,</span></span> Coin</span>::</span>Dime</span> =></span> 10</span>,</span></span> Coin</span>::</span>Quarter</span> =></span> 25</span>,</span></span> }</span></span> }</span></span></code></pre>绑定值的模式</a></h3> 在匹配到绑定值的模式后，可以增加一个变量用来表示所匹配到的值。</p> #</span>[</span>derive</span>(</span>Debug</span>)]</span> // 这样可以立刻看到州的名称</span></span> enum</span> UsState</span> {</span></span> Alabama</span>,</span></span> Alaska</span>,</span></span> // --snip--</span></span> }</span></span> </span> enum</span> Coin</span> {</span></span> Penny</span>,</span></span> Nickel</span>,</span></span> Dime</span>,</span></span> Quarter</span>(</span>UsState</span>),</span></span> }</span></span> </span> fn</span> value_in_cents</span>(</span>coin</span>:</span> Coin</span>)</span> -></span> u8</span> {</span></span> match</span> coin</span> {</span></span> Coin</span>::</span>Penny</span> =></span> 1</span>,</span></span> Coin</span>::</span>Nickel</span> =></span> 5</span>,</span></span> Coin</span>::</span>Dime</span> =></span> 10</span>,</span></span> Coin</span>::</span>Quarter</span>(</span>state</span>)</span> =></span> {</span></span> println!</span>(</span>"State quarter from </span>{</span>:?</span>}</span>!"</span>,</span> state</span>);</span></span> 25</span></span> }</span></span> }</span></span> }</span></span></code></pre> 这里的 Coin::Quarter(state)</code> 就是匹配到的对应的 UsState</code> 的值。</p> 匹配 Option</a></h3> fn</span> plus_one</span>(</span>target</span>:</span> Option</span><</span>i32</span>></span>)</span> -></span> Option</span><</span>i32</span>></span> {</span></span> match</span> target</span> {</span></span> Some</span>(</span>x</span>)</span> =></span> Some</span>(</span>x</span> +</span> 1</span>),</span></span> None</span> =></span> None</span>,</span></span> }</span></span> }</span></span> </span> fn</span> main</span>() {</span></span> let</span> my_num</span> =</span> Some</span>(</span>41</span>);</span></span> let</span> my_num</span> =</span> plus_one</span>(</span>my_num</span>);</span></span> println!</span>(</span>"My number: </span>{</span>:?</span>}</span>"</span>,</span> my_num</span>);</span></span> }</span></span></code></pre> 这里 Clippy 可能会提示我们有更好的写法：</p> fn</span> plus_one</span>(</span>target</span>:</span> Option</span><</span>i32</span>></span>)</span> -></span> Option</span><</span>i32</span>></span> {</span></span> target</span>.</span>map</span>(</span>\|</span>x</span>\|</span> x</span> +</span> 1</span>);</span></span> target</span></span> }</span></span> </span> fn</span> main</span>() {</span></span> let</span> my_num</span> =</span> Some</span>(</span>41</span>);</span></span> let</span> my_num</span> =</span> plus_one</span>(</span>my_num</span>);</span></span> println!</span>(</span>"My number: </span>{</span>:?</span>}</span>"</span>,</span> my_num</span>);</span></span> }</span></span></code></pre> Option<T></code> 上有个 map()</code> 方法，可以更好的代替 match Option</code> 来做匹配。</p> 穷尽的匹配</a></h3> match</code> 的匹配是穷尽的，必须穷举到最后的可能性来使代码有效。</p> 但可以使用一个特定值来采取默认操作，有点类似于 switch</code> 语句中的 default</code> 。</p> let</span> dice_roll</span> =</span> 9</span>;</span></span> match</span> dice_roll</span> {</span></span> 3</span> =></span> add_fancy_hat</span>(),</span></span> 7</span> =></span> remove_fancy_hat</span>(),</span></span> _</span> =></span> (),</span></span> }</span></span></code></pre> 这个例子也满足穷举性要求，因为我们在最后一个分支中明确地忽略了其他的值。我们没有忘记处理任何东西。</p> if let</a></h2> 为了满足 match</code> 的穷尽性的要求，必须穷举到所有的可能性。尽管可以使用默认操作，但是最少也需要两行语句。</p> fn</span> main</span>() {</span></span> let</span> config_max</span> =</span> Some</span>(</span>3</span>u8</span>);</span></span> match</span> config_max</span> {</span></span> Some</span>(</span>config</span>)</span> =></span> println!</span>(</span>"The maximum is configured to be </span>{}</span>"</span>,</span> config</span>),</span></span> _</span> =></span> (),</span></span> }</span></span> }</span></span></code></pre> 不过我们可以使用 if let</code> 这种更短的方式编写。</p> fn</span> main</span>() {</span></span> let</span> config_max</span> =</span> Some</span>(</span>3</span>u8</span>);</span></span> </span> if let</span> Some</span>(</span>config</span>)</span> =</span> config_max</span> {</span></span> println!</span>(</span>"The maximum is configured to be </span>{}</span>"</span>,</span> config</span>);</span></span> }</span></span> }</span></span></code></pre> 如果使用了 Clippy 这里也会提示我们可以使用更短的写法。</p> if let</code> 语法获取通过等号分割的一个模式和一个表达式。它的工作方式与 match</code> 相同。这里等号右边的表达式对应着 match</code> ，而左边的模式对应着 match</code> 的第一个分支。</p> 在这个例子中，模式是 Some(max)</code>，max</code> 绑定为 Some</code> 中的值。接着可以在 if let</code> 代码块中使用 max</code> 了，就跟在对应的 match</code> 分支中一样。模式不匹配时 if let</code> 块中的代码不会执行。</p> 换句话说，可以认为 if let</code> 是 match</code> 的一个语法糖，它当值匹配某一模式时执行代码而忽略所有其他值。</p> 公开密钥密码学-非对称加密 🔑 2022-10-24T00:00:00+00:00 GPG/PGP 赛高！</p> 什么是非对称加密？</a></h2> 人类的历史上加密走了很长的一段路程。想尽了各种办法来保护自己那不想让不该知道的人知道的东西。加密这东西，在密码学中最直白的解释就是将一般的明文信息改变为难以读取的内容，使其不可读的过程只有拥有解密方法的对象，经由解密过程，才能将密文还原为正常可读的内容。</p> 大概在 1970 年代中期，所谓的“强加密”的使用开始从政府保密机构延申至公共的领域了，也就是说开始到我们大众都开始接触了。当今世界，加密已经是我们的日常生活中常常见到的东西了。</p> 例如我们常常访问的带有 SSL/TLS 的网站，这也是非对称加密的一种。所谓的对称加密，它也是密码学中的一种。但他与对称加密不同的是，它需要两个密钥，一个是公开密钥，另一个是私有密钥；一个用作加密，另一个则用作解密。使用其中一个密钥把明文加密后所得的密文，只能用相对应的另一个密钥才能解密得到原本的明文；甚至连最初用来加密的密钥也不能用作解密。</p> 由于加密和解密需要两个不同的密钥，故被称为非对称加密；不同于加密和解密都使用同一个密钥的对称加密。虽然两个密钥在数学上相关，但如果知道了中一个，并不能凭此计算出另外一个；因此其中一个可以公开，称为公钥，任意向外发布；不公开的密钥为私钥，必须由用户自行严格秘密保管，绝不透过任途径向任何人提供，也不会透露给被信任的要通信的另一方。</p> 加密</a></h3> 如果任何人使用公钥加密明文，得到的密文可以透过不安全的途径（如网络）发送，只有对应的私钥持有者才可以解密得到明文；其他人即使从网络上窃取到密文及加密公钥，也无法（在数以年计的合理时间内）解密得出明文。</p> 典型例子是在网络银行或购物网站上，因为客户需要输入敏感消息，浏览器连接时使用网站服务器提供的公钥加密并上传数据，可保证只有信任的网站服务器才能解密得知消息，不必担心敏感个人信息因为在网络上传送而被窃取。</p> 在现实世界上可作比拟的例子是，一个传统保管箱，开门和关门都是使用同一条钥匙，这是对称加密；而一个公开的邮箱，投递口是任何人都可以寄信进去的，这可视为公钥；而只有信箱主人拥有钥匙可以打开信箱，这就视为私钥。</p> 常见的公钥加密算法有：RSA、ElGamal、背包算法、Rabin（RSA 的特例）、迪菲－赫尔曼密钥交换协议中的公钥加密算法、椭圆曲线加密算法（英语：Elliptic Curve Cryptography, ECC）。使用最广泛的是 RSA 算法（由发明者 Rivest、Shmir 和 Adleman 姓氏首字母缩写而来）是著名的公开秘钥加密算法，ElGamal 是另一种常用的非对称加密算法。</p> 加密过程</a></h4> 直白的解释：Tom 和 Jerry 想发送一些消息/文件，而不被隔壁的 Spike 知道文件的内容。于是它们机智的采用了非对称加密来保证内容的安全性。</p> Tom 先生成非对称的两个密钥，分别为公钥 A，私钥 B</li> 为了能让 Jerry 发过来的消息被加密了，Tom 先将可公开的公钥 A 发给 Jerry</li> 因为公钥 A 是完全可公开的，所以 Spike 知道也没关系</li> Jerry 收到 Tom 发的公钥 A，并将自己的文件 X 使用公钥 A 进行加密</li> 随后 Jerry 就可以将加密的文件 A(X) 正大光明的发送给 Tom 了</li> 此时的 Spike 就算截取到加密过的文件 A(X) 也没有用</li> 因为 Tom 收到的加密文件 A(X) 只有它自己的私钥 B 能够解密，于是它收到后可以使用私钥 B 正常解密</li> 所以如果 Tom 丢失了它的私钥 B，那么 Tom and Jerry 都无法读取加密的文件 A(X) 了</li> （没有私钥就无法解开公钥加密过的信息）</li> 相反，Jerry 也可以将自己的公钥发给 Tom，使其加密要发给自己的信息。</li> </ol> 数字签名</a></h4> 如果某一用户使用他的私钥加密明文，任何人都可以用该用户的公钥解密密文；由于私钥只由该用户自己持有，故可以肯定该文件必定出自于该用户。</p> 公众可以验证该用户发布的数据或文件是否完整、中途有否曾被篡改，接收者可信赖这条信息确实来自于该用户，该用户亦无法抵赖，这被称作数字签名。所以我们常常见到提示一定要保护好自己的私钥，因为不仅仅会使得加密失效，还会直接影响签名验证。</p> 非对称加密的软件</a></h2> 对于软件来说，我们可能经常听说到 GPG 这一词。GPG 的全称是 GNU Privacy Guard（GnuPG 或 GPG）。它是一款非对称加密的软件，是 PGP 加密软件的满足 GPL 的替代物。也就是说它相对于 PGP 加密来说，它是一款开源软件。</p> 因为 PGP 的非对称的算法是开源的，所以 GPG 和 PGP 原理是完全一样的。通常我们会见到 GPG/PGP。所以 PGP 就可以简单了解到它是一款非开源的非对称加密软件了。 PGP（英语：Pretty Good Privacy，中文翻译“优良保密协议”）是一套用于讯息加密、验证的应用程序，采用 IDEA 的散列算法作为加密和验证之用。</p> 多平台的安装与使用</a></h3> 既然上述已经介绍了它是自由软件，那么它跨平台的几率就很大了，支持的平台也非常的多。在官方网站里，我们可以看到它支持很多平台。</p> Windows GPG4win</a></h4> 安装就不再多说，GPG4win 的官网有打包好的 exe 可执行程序，我们直接下载双击安装就好，安装过程也非常的简单，不需要进行任何配置。也就是常说的“无脑 next☀”。</p> Download</a></p> GPG4win 是 GPG 在 Windows 平台的一款可视化的非对称加密软件。对于可视化的软件来说，使用也非常的简单明了。几乎常用的一些功能都非常直白的写在了开打的页面中。基本上只要使用者了解大概的非对称加密的运作原理，就可以很轻松的使用该软件了。</p> Ubuntu & CentOS</a></h4> 目前最新的 Ubuntu 与 CentOS 的发行版中都带有 GnuPrivacyGuard。也就是 GPG 的一种，所以使用的方法也是大同小异了。以 Ubuntu 为例：创建密钥</p> gpg --gen-key</span></span></code></pre> 不知道为啥我的机器在生成密钥的时候会卡住很长时间，导致我没有生成出来。等以后再考虑填这个坑吧。</p> 查看秘钥</li> </ul> 查看公钥：gpg --list-key</span></span> 查看私钥：gpg --list-secret-keys</span></span></code></pre> 提取秘钥</li> </ul> 提取公钥：gpg -a --export newkey > newkey.asc</span></span> 提取私钥：gpg -a --export-secret-keys newkey > newkey_pirv.asc</span></span></code></pre> 导入秘钥</li> </ul> 导入公钥或私钥：gpg --import newkey</span></span></code></pre> 使用公钥加密</li> </ul> gpg -ea -r newkey filename</span></span></code></pre> 解密并导出为文件</li> </ul> gpg -d test.asc > test</span></span></code></pre> 设置密钥信任程度</li> </ul> gpg --edit-key [导入的密钥ID]</span></span> trust</span></span> 您是否相信这位用户有能力验证其他用户密钥的有效性(查对身份证、通过不同的渠道检查</span></span> 指纹等)？</span></span> 1 = 我不知道或我不作答</span></span> 2 = 我不相信</span></span> 3 = 我勉强相信</span></span> 4 = 我完全相信</span></span> 5 = 我绝对相信</span></span> m = 回到主菜单</span></span></code></pre>我的公钥</a></h2> 如果有小伙伴想和我扮演 Tom and Jerry 的话，或者想校验我的签名的文件的话。欢迎使用下述公钥</p> 参考</a></h2> 传输层安全性协议</a></li> 对称密钥加密</a></li> 公开密钥加密</a></li> GnuPG</a></li> PGP</a></li> GnuPrivacyGuardHowto</a></li> </ul> 使用 useSyncExternalStore 构建属于自己的全局状态 2022-10-14T00:00:00+00:00 在 React18 new hooks</a> 中简单了解过并作过一个简单的全局状态，它的参数只有三个：</p> subscribe</code>: 一个当状态更新后可执行的回调函数。该函数会收到一个回调函数，这个回调函数就是当状态后执行，React 用来对比是否需要重新渲染组件。</li> getSnapshot</code>: 返回当前状态的函数。</li> getServerSnapshot</code>: 在服务端渲染时返回当前状态的函数，可选。</li> </ul> 配合上 useSyncExternalStore</code> 就可以非常方便的对接外部状态，了解了这个 hook 之后，对自定义的全局状态也有更深的了解。</p> 简单来说，JavaScript 的变量是没有任何相应式的。也就是说，通常情况下，当我们修改了一个变量，是无法被动的感知到它的变化的。但是也是有办法去实现这一功能的，例如 Vue 2 使用 Object.defineProperty()</code> 和 Vue 3 使用的 Proxy</code> 来实现的相应式。</p> 而 React 走了另一条道路，数据不可变。它通过 setState</code> 来感知状态的变化，再利用 diff 等方法实现更新。这也就是为什么我们可以利用 setState({})</code> 可以强制更新组件。</p> 正因如此，配合上 useSyncExternalStore</code> 我们的外部状态也就可以是一个普通的变量（PlainObject）。在我们更新我们的状态时，利用 subscribe</code> 参数接受到的回调（listener）来通知组件状态更新了。最后在使用 getSnapshot</code> 来返回新的状态，这就是 useSyncExternalStore</code> 大致的工作流程。</p> 实现一个全局状态</a></h2> 先来一个最简单的，利用 useSyncExternalStore</code> 实现一个全局状态。首先我们需要创建一个普通对象，它主要用于存储状态，并配合 subscribe</code> 和 getSnapshot</code> 等方法来实现状态的更新。</p> const</span> store</span>:</span> Store</span> =</span> {</span></span> // 全局状态</span></span> state</span>:</span> {</span></span> count</span>:</span> 0</span>,</span></span> info</span>:</span> "Hello"</span>,</span></span> },</span></span> </span> /*</span></span> 设置新的状态</span></span> * </span>@</span>param</span> stateOrFn</span> 新状态或设置状态的回调函数</span></span> /</span></span> setState</span>(</span>stateOrFn</span>) {</span></span> const</span> newState</span> =</span></span> typeof</span> stateOrFn</span> ===</span> "function"</span> ?</span> stateOrFn</span>(store</span>.</span>state)</span> :</span> stateOrFn</span>;</span></span> store</span>.</span>state</span> =</span> {</span></span> ...</span>store</span>.</span>state</span>,</span></span> ...</span>newState</span>,</span></span> };</span></span> store</span>.</span>listeners</span>.</span>forEach</span>(</span>(</span>listener</span>)</span> =></span> listener</span>())</span>;</span></span> },</span></span> </span> /</span></span> 保存 useSyncExternalStore 回调的 listener</span></span> * 在 setState 中设置过状态后会进行调用</span></span> /</span></span> listeners</span>:</span> new</span> Set</span>()</span>,</span></span> </span> /</span></span> 传递给 useSyncExternalStore 的 subscriber</span></span> * 负责收集 listener 并返回注销 listener 的方法</span></span> * </span>@</span>param</span> listener</span></span> * </span>@</span>returns</span></span> /</span></span> subscribe</span>(</span>listener</span>) {</span></span> store</span>.</span>listeners</span>.</span>add</span>(listener)</span>;</span></span> return</span> ()</span> =></span> {</span></span> store</span>.</span>listeners</span>.</span>delete</span>(listener)</span>;</span></span> };</span></span> },</span></span> </span> /</span></span> 返回当前的状态</span></span> * </span>@</span>returns</span></span> /</span></span> getSnapshot</span>() {</span></span> return</span> store</span>.</span>state</span>;</span></span> },</span></span> };</span></span></code></pre> 在我们的 store 中：</p> state</code> ：一个普通的对象，它就是我们用于存储全局状态的地方。</li> setState</code> ：提供一个类似于 useState</code> 的设置状态的方法。</li> listeners</code> ：保存 useSyncExternalStore</code> 回调的 listener。</li> subscribe</code> ：传递给 useSyncExternalStore</code> 的 subscriber。</li> getSnapshot</code> ：返回当前的状态。</li> </ul> 需要注意的是，useSyncExternalStore</code> 会立即调用 subscribe</code> 和 getSnapshot</code> ，这就导致了我们不能在这些方法中使用 this.store</code> ，此时的 this</code> 还未准备好。</p> 最后的签名也是比较重要的，setState</code> 就参照 useState</code> 。接受完整的 state 为参数，并将其设置到我们的状态中。</p> 而 useSyncExternalStore</code> 给我们的 listener 签名就简单多了 () => void</code> 。</p> export type</span> State</span> =</span> {</span></span> count</span>:</span> number</span>;</span></span> info</span>:</span> string</span>;</span></span> };</span></span> export type</span> Store</span> =</span> {</span></span> state</span>:</span> State</span>;</span></span> setState</span>:</span> (</span>stateOrFn</span>:</span> State</span> \|</span> (</span>(</span>state</span>:</span> State</span>)</span> =></span> State)</span>)</span> => void</span>;</span></span> subscribe</span>:</span> (</span>listener</span>:</span> ()</span> => void</span>)</span> =></span> ()</span> => void</span>;</span></span> listeners</span>:</span> Set</span><</span>()</span> => void</span>></span>;</span></span> getSnapshot</span>:</span> ()</span> =></span> State</span>;</span></span> };</span></span></code></pre>使用全局状态</a></h3> 到目前为止还只是创建了一个用于存储和更新状态的对象，在使用上我们直接在组件中配合 useSyncExternalStore</code> 来创建我们的状态。这一步就非常的简单，后续的使用就和在使用其他的状态一样。</p> const</span> Couter</span> =</span> ()</span> =></span> {</span></span> const</span> {</span> count</span>,</span> info</span> }</span> =</span> useSyncExternalStore</span>(</span></span> store</span>.</span>subscribe</span>,</span></span> store</span>.</span>getSnapshot</span>,</span></span> )</span>;</span></span> </span> return</span> (</span></span> <></span></span> <</span>div</span>></span></span> <</span>div</span>></span></span> Count: </span><</span>span</span>></span>{</span>count</span>}</span></</span>span</span>></span></span> </</span>div</span>></span></span> <</span>div</span>></span></span> Info: </span><</span>span</span>></span>{</span>info</span>}</span></</span>span</span>></span></span> </</span>div</span>></span></span> </span> <</span>div</span>></span></span> <</span>Button</span></span> onClick</span>=</span>{()</span> =></span> store</span>.</span>setState</span>(</span>(</span>d</span>)</span> =></span> (</span>{</span> count</span>:</span> d</span>.</span>count</span> +</span> 1</span> }</span>))</span>}</span></span> ></span></span> Add</span></span> </</span>Button</span>></span></span> </</span>div</span>></span></span> </</span>div</span>></span></span> </></span></span> )</span>;</span></span> };</span></span></code></pre>多个 Store</a></h2> 上面的实现是直接针对单一的 store 来实现的，直接将 state 和其方法封装在一个对象中。日常的项目中通常会根据功能来创建多个全局状态，避免混乱。</p> 为了避免每创建一个 store 都要重新写一次同样的方法，我们可以将其封装为一个创建 store 的函数。整体实现都还是一样的，只不过后续我们可以利用这个方法来创建多个 store。</p> export const</span> createStore</span>:</span> CreateStore</span> =</span> <</span></span> T</span> extends</span> Record</span><</span>string</span>,</span> unknown</span>></span> \|</span> unknown</span>[]</span>,</span></span> ></span>(</span></span> initialState</span>:</span> T</span>,</span></span> )</span> =></span> {</span></span> let</span> state</span> =</span> initialState</span>;</span></span> </span> const</span> listeners</span> =</span> new</span> Set</span><</span>()</span> => void</span>></span>()</span>;</span></span> const</span> getSnapshot</span> =</span> ()</span> =></span> state</span>;</span></span> const</span> setState</span>:</span> SetState</span><</span>T</span>></span> =</span> (</span>stateOrFn</span>)</span> =></span> {</span></span> state</span> = typeof</span> stateOrFn</span> ===</span> "function"</span> ?</span> stateOrFn</span>(state)</span> :</span> stateOrFn</span>;</span></span> listeners</span>.</span>forEach</span>(</span>(</span>listener</span>)</span> =></span> listener</span>())</span>;</span></span> };</span></span> const</span> subscribe</span> =</span> (</span>listener</span>:</span> ()</span> => void</span>)</span> =></span> {</span></span> listeners</span>.</span>add</span>(listener)</span>;</span></span> </span> return</span> ()</span> =></span> {</span></span> listeners</span>.</span>delete</span>(listener)</span>;</span></span> };</span></span> };</span></span> </span> return</span> {</span></span> getSnapshot</span>,</span></span> setState</span>,</span></span> subscribe</span>,</span></span> };</span></span> };</span></span></code></pre> 对于其方法的签名还是和之前一样，只不过函数还是需要显式注解，因为在创建时我们还需要访问其范型 T</code> 。</p> export type</span> SetState</span><</span>S</span>></span> =</span> (</span>stateOrFn</span>:</span> S</span> \|</span> (</span>(</span>state</span>:</span> S</span>)</span> =></span> S)</span>)</span> => void</span>;</span></span> export type</span> GetSnapshot</span><</span>S</span>></span> =</span> ()</span> =></span> S</span>;</span></span> export type</span> Subscribe</span> =</span> (</span>listener</span>:</span> ()</span> => void</span>)</span> =></span> ()</span> => void</span>;</span></span> export type</span> CreateStore</span> =</span> <</span>T</span> extends</span> Record</span><</span>string</span>,</span> unknown</span>></span> \|</span> unknown</span>[]</span>></span>(</span></span> initialState</span>:</span> T</span>,</span></span> )</span> =></span> {</span></span> getSnapshot</span>:</span> GetSnapshot</span><</span>T</span>></span>;</span></span> setState</span>:</span> SetState</span><</span>T</span>></span>;</span></span> subscribe</span>:</span> Subscribe</span>;</span></span> };</span></span></code></pre> 将对应需要的方法在函数中创建，并返回为一个对象。但这里没有将 state 直接返回出去，和上述不同，我们将不再直接访问原始 state，而是配合 useSyncExternalStore</code> 封装一个自定义 hook 来返回我们的全局状态。</p> export type</span> Todo</span> =</span> {</span></span> id</span>:</span> number</span>;</span></span> content</span>:</span> string</span>;</span></span> }</span>[]</span>;</span></span> const</span> initialTodo</span>:</span> Todo</span> =</span> [</span></span> {</span> id</span>:</span> 0</span>,</span> content</span>:</span> "React"</span> },</span></span> {</span> id</span>:</span> 1</span>,</span> content</span>:</span> "Vue"</span> },</span></span> ]</span>;</span></span> const</span> todoStore</span> =</span> createStore</span>(initialTodo)</span>;</span></span> export const</span> useTodoStore</span> =</span> ()</span>:</span> [Todo</span>,</span> SetState</span><</span>Todo</span>></span>]</span> =></span> [</span></span> useSyncExternalStore</span>(todoStore</span>.</span>subscribe</span>,</span> todoStore</span>.</span>getSnapshot)</span>,</span></span> todoStore</span>.</span>setState</span>,</span></span> ]</span>;</span></span></code></pre> 这里的 useTodoStore</code> 将其显式的注解了其返回值，因为返回的是和 useState</code> 类似的元组，而默认 TypeScript 推断的类型比较宽松，会推断为 (Todo \| SetState<Todo>)[]</code> 的数组。</p> 由于封装了新的 hook，在组件中的使用也就更方便了。在需要不同 store 的组件中直接使用不同的 hook 就能访问到对应的全局状态了。</p> const</span> Todo</span> =</span> ()</span> =></span> {</span></span> const</span> [</span>todos</span>,</span> setTodo</span>]</span> =</span> useTodoStore</span>()</span>;</span></span> const</span> [</span>value</span>,</span> setValue</span>]</span> =</span> useState</span>(</span>""</span>)</span>;</span></span> };</span></span> </span> const</span> Count</span> =</span> ()</span> =></span> {</span></span> const</span> [{</span> count</span>,</span> info</span> },</span> setState</span>]</span> =</span> useCountStore</span>()</span>;</span></span> };</span></span></code></pre>Mini Redux</a></h2> 在模仿 Reudx 之前，应该再熟悉一下 Redux 的工作流程。在 Redux 中，和我们上述的状态一样，状态都是普通对象，且是不可变的数据（只读）。此外，我们的 reducer 也应该保持是纯函数。</p> Redux 通过我们创建的 Action 来决定如何更新状态，再通过 reducer 来实际更新状态。reducer 更新状态也非常简单，和 React 的状态类似，我们的状态也是保持不可变的。所以 reducer 会返回整个状态。</p> 也就是类似于：</p> export type</span> RUAReducer</span><</span>S</span> extends</span> RUAState</span>,</span> A</span> extends</span> RUAAction</span>></span> =</span> (</span></span> state</span>:</span> S</span>,</span></span> action</span>:</span> A</span>,</span></span> )</span> =></span> S</span>;</span></span></code></pre> 上述的 setState</code> 方法也需要简单调整一下，由于 reducer 是返回整个状态，所以可以直接将返回的新状态赋值给全局状态。</p> const</span> dispatch</span>:</span> RUADispatch</span><</span>A</span>></span> =</span> (</span>action</span>)</span> =></span> {</span></span> state</span> =</span> reducer</span>(state</span>,</span> action)</span>;</span></span> listeners</span>.</span>forEach</span>(</span>(</span>listener</span>)</span> =></span> listener</span>())</span>;</span></span> };</span></span></code></pre> 除此之外，其他配合 useSyncExternalStore</code> 的用法没有多大变化。</p> export const</span> createStore</span> =</span> <</span>S</span> extends</span> RUAState</span>,</span> A</span> extends</span> RUAAction</span>></span>(</span></span> reducer</span>:</span> RUAReducer</span><</span>S</span>,</span> A</span>></span>,</span></span> initialState</span>:</span> S</span>,</span></span> )</span> =></span> {</span></span> let</span> state</span> =</span> initialState</span>;</span></span> </span> const</span> listeners</span> =</span> new</span> Set</span><</span>()</span> => void</span>></span>()</span>;</span></span> const</span> getSnapshot</span> =</span> ()</span> =></span> state</span>;</span></span> const</span> dispatch</span>:</span> RUADispatch</span><</span>A</span>></span> =</span> (</span>action</span>)</span> =></span> {</span></span> state</span> =</span> reducer</span>(state</span>,</span> action)</span>;</span></span> listeners</span>.</span>forEach</span>(</span>(</span>listener</span>)</span> =></span> listener</span>())</span>;</span></span> };</span></span> const</span> subscribe</span> =</span> (</span>listener</span>:</span> ()</span> => void</span>)</span> =></span> {</span></span> listeners</span>.</span>add</span>(listener)</span>;</span></span> return</span> ()</span> =></span> {</span></span> listeners</span>.</span>delete</span>(listener)</span>;</span></span> };</span></span> };</span></span> </span> return</span> {</span></span> subscribe</span>,</span></span> getSnapshot</span>,</span></span> dispatch</span>,</span></span> };</span></span> };</span></span></code></pre> 在 reducer 方面，也没有什么黑魔法，设置状态后将其返回即可。剩下的就交给 React 了。</p> const</span> reducer</span>:</span> RUAReducer</span><</span>Todo</span>,</span> TodoAction</span>></span> =</span> (</span>state</span>,</span> action</span>)</span> =></span> {</span></span> switch</span> (action</span>.</span>type)</span> {</span></span> case</span> "add"</span>: {</span></span> if</span> (action</span>.</span>payload</span> ==</span> null</span>)</span> throw</span> new</span> Error</span>(</span>"Add todo without payload!"</span>)</span>;</span></span> return</span> [</span></span> ...</span>state</span>,</span></span> {</span></span> id</span>:</span> state[state</span>.</span>length</span> -</span> 1</span>]</span>.</span>id</span> +</span> 1</span>,</span></span> content</span>:</span> action</span>.</span>payload</span>.</span>toString</span>()</span>,</span></span> },</span></span> ]</span>;</span></span> }</span></span> case</span> "delete"</span>: {</span></span> if</span> (action</span>.</span>payload</span> ==</span> null</span>)</span></span> throw</span> new</span> Error</span>(</span>"Delete todo without payload!"</span>)</span>;</span></span> return</span> state</span>.</span>filter</span>(</span>(</span>todo</span>)</span> =></span> todo</span>.</span>id</span> !==</span> action</span>.</span>payload)</span>;</span></span> }</span></span> default</span>:</span></span> throw</span> new</span> Error</span>(</span>"Dispatch a reducer without action!"</span>)</span>;</span></span> }</span></span> };</span></span></code></pre> 签名方面，主要针对 action 做了一些调整，以确保创建 reducer 和 dispatch 时 action 的类型正确。</p> export type</span> RUAState</span> =</span> Record</span><</span>string</span>,</span> unknown</span>></span> \|</span> unknown</span>[]</span>;</span></span> export type</span> RUAAction</span><</span>P</span> =</span> unknown</span>,</span> T</span> extends string</span> =</span> string</span>></span> =</span> {</span></span> payload</span>:</span> P</span>;</span></span> type</span>:</span> T</span>;</span></span> };</span></span> export type</span> RUAReducer</span><</span>S</span> extends</span> RUAState</span>,</span> A</span> extends</span> RUAAction</span>></span> =</span> (</span></span> state</span>:</span> S</span>,</span></span> action</span>:</span> A</span>,</span></span> )</span> =></span> S</span>;</span></span> export type</span> RUADispatch</span><</span>A</span> extends</span> RUAAction</span>></span> =</span> (</span>action</span>:</span> A</span>)</span> => void</span>;</span></span> export type</span> GetSnapshot</span><</span>S</span>></span> =</span> ()</span> =></span> S</span>;</span></span> export type</span> Subscribe</span> =</span> (</span>listener</span>:</span> ()</span> => void</span>)</span> =></span> ()</span> => void</span>;</span></span></code></pre> 在封装 hook 上，和上述没有多少区别：</p> const</span> todoStore</span> =</span> createStore</span>(reducer</span>,</span> initialTodo)</span>;</span></span> export const</span> useTodoStore</span> =</span> ()</span>:</span> [Todo</span>,</span> RUADispatch</span><</span>TodoAction</span>></span>]</span> =></span> [</span></span> useSyncExternalStore</span>(todoStore</span>.</span>subscribe</span>,</span> todoStore</span>.</span>getSnapshot)</span>,</span></span> todoStore</span>.</span>dispatch</span>,</span></span> ]</span>;</span></span></code></pre> 只是在 Redux 的三个原则中：</p> Single source of truth</li> State is read-only</li> Changes are made with pure functions</li> </ul> 其中的 Single source of truth 没有完全遵守，我们的全局状态可以使用 createStore</code> 来创建多个 source，且多个 source 是完全分离的，无法一起访问到。</p> React 18 中的一些新 hooks 2022-10-11T00:00:00+00:00 useTransition</a></h2> 返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。它和 CSS 的过渡没有任何关系。useTransition 的主要目的是作用于在复杂的过渡任务时提供一个优先级较低的更新，过渡任务中触发的更新会让更紧急地更新先进行，比如点击。</p> 过渡任务中的更新将不会展示由于再次挂起而导致降级的内容。这个机制允许用户在 React 渲染更新的时候继续与当前内容进行交互。</p> 这里渲染一个长度为 10 万的列表和两个不同的按钮，第一个按钮会增加列表的长度并使第一个状态数值加一。第二个按钮只会增加自己的状态。</p> 如果在这里设置状态时不使用 setTransiton</code> ，那么在整个列表进行渲染时将无法处理其他任何操作。</p> 在使用了 setTransition</code> 后，整个列表进行渲染操作优先级将会比其他更紧急地操作低，从而可以响应第二个按钮点击。</p> useTransition</code> 返回的元组中包含两个值 [pending, setTransiton]</code> ，分别是 setTransiton</code> 方法和表示正在过渡的状态 pending</code> 。如果需要在过渡时展示特定的 UI 就可以使用 pending</code> 来控制状态。</p> <RUASandpack template="react-ts" files={{ '/Button.tsx': { code: sandpack.common.Button, hidden: true, }, '/App.tsx': sandpack['react18-new-hooks'].useTransition, }} /></p> useDeferredValue</a></h2> useDeferredValue</code> 接受一个状态值，并返回该的副本。返回的副本状态值将会在其他紧急更新后更新。它与 useTransition</code> 比较类似，二者可以搭配使用。</p> 因为函数的原子性，在整个组件更新（重新渲染）时，子组件也会随着一起更新。这里通过设置了状态 value</code> 来对整个组件重新渲染，即使下方的列表没有任何变化也会一起重新渲染。而重新渲染 UI 界面对我们来说就是紧急更新。</p> 将原本的状态值 value</code> 与 useDeferredValue</code> 返回的副本相比较就会发现 value</code> 会随着 UI 一起被更新，而被延迟的状态 deferred</code> 会等待 UI 更新结束后再做更新。</p> <RUASandpack template="react-ts" files={{ '/Button.tsx': { code: sandpack.common.Button, hidden: true, }, '/App.tsx': sandpack['react18-new-hooks'].useDeferredValue, }} /></p> useId</a></h2> useId</code> 与其他的都不同，从名字就能看出来它的作用，返回一个在整个 APP 中唯一的 ID。它能够保证每个组件调用它返回的 ID 都唯一，即使是同一个组件被父组件多次调用。</p> 通常的作用有：</p> 为页面中需要唯一 ID 元素提供 ID，例如 <label for="ID"></code> 。</li> SSR 到客户端注入时需要 ID 避免错误。</li> </ul> <RUASandpack template="react-ts" files={{ '/Input.tsx': { code: sandpack.common.Input, hidden: true, }, '/App.tsx': sandpack['react18-new-hooks'].useId, }} /></p> useSyncExternalStore</a></h2> useSyncExternalStore</code> 是目前最适合用来取代全局状态库的 hook，尤其是配合 redux 的思想后，简直就是手写的 mini redux。</p> 首先看下该钩子的前面，其实不是很复杂。它接受一个范型，用于推断返回的状态。剩下的三个参数分别是：</p> subscribe</code>: 一个当状态更新后可执行的回调函数。该函数会收到一个回调函数，这个回调函数就是当状态后执行，React 用来对比是否需要重新渲染组件。</li> getSnapshot</code>: 返回当前状态的函数。</li> getServerSnapshot</code>: 在服务端渲染时返回当前状态的函数，可选。</li> </ul> useSyncExternalStore</span><</span>State</span>></span>(subscribe:</span> (</span>onStoreChange</span>:</span> ()</span> => void</span>)</span> =></span> ()</span> =></span> void</span>,</span> getSnapshot:</span> ()</span> =></span> State</span>,</span> getServerSnapshot</span>?:</span> (</span>()</span> =></span> State)</span> \|</span> undefined</span>): State</span></span></code></pre> useSyncExternalStore</code> 在组件中使用与 useSelector</code> 很相似：</p> const</span> {</span> count</span>,</span> info</span> }</span> =</span> useSyncExternalStore</span>(</span></span> store</span>.</span>subscribe</span>,</span></span> store</span>.</span>getSnapshot</span>,</span></span> )</span>;</span></span></code></pre> 但它的重点还是在 store 上：</p> export type</span> State</span> =</span> {</span></span> count</span>:</span> number</span>;</span></span> info</span>:</span> string</span>;</span></span> };</span></span> export type</span> Store</span> =</span> {</span></span> state</span>:</span> State</span>;</span></span> setState</span>:</span> (</span></span> stateOrFn</span>:</span> Partial</span><</span>State</span>></span> \|</span> (</span>(</span>state</span>:</span> State</span>)</span> =></span> Partial</span><</span>State</span>></span>)</span>,</span></span> )</span> => void</span>;</span></span> subscribe</span>:</span> (</span>listener</span>:</span> ()</span> => void</span>)</span> =></span> ()</span> => void</span>;</span></span> listeners</span>:</span> Set</span><</span>()</span> => void</span>></span>;</span></span> getSnapshot</span>:</span> ()</span> =></span> State</span>;</span></span> };</span></span> </span> const</span> store</span>:</span> Store</span> =</span> {</span></span> state</span>:</span> {</span></span> count</span>:</span> 0</span>,</span></span> info</span>:</span> 'Hello'</span>,</span></span> },</span></span> setState</span>(</span>stateOrFn</span>) {</span></span> const</span> newState</span> =</span></span> typeof</span> stateOrFn</span> ===</span> 'function'</span> ?</span> stateOrFn</span>(store</span>.</span>state)</span> :</span> stateOrFn</span>;</span></span> store</span>.</span>state</span> =</span> {</span></span> ...</span>store</span>.</span>state</span>,</span></span> ...</span>newState</span>,</span></span> };</span></span> store</span>.</span>listeners</span>.</span>forEach</span>(</span>(</span>listener</span>)</span> =></span> listener</span>())</span>;</span></span> },</span></span> listeners</span>:</span> new</span> Set</span>()</span>,</span></span> subscribe</span>(</span>listener</span>) {</span></span> store</span>.</span>listeners</span>.</span>add</span>(listener)</span>;</span></span> return</span> ()</span> =></span> {</span></span> store</span>.</span>listeners</span>.</span>delete</span>(listener)</span>;</span></span> };</span></span> },</span></span> getSnapshot</span>() {</span></span> return</span> store</span>.</span>state</span>;</span></span> },</span></span> };</span></span> </span> export default</span> store</span>;</span></span></code></pre> 其中， listeners</code> 用于存放 subscribe</code> 的回调，在我们更新状态后需要通知 React 来更新组件。所以在 setState</code> 中遍历执行。之所以使用 Set()</code> 是因为 subscribe</code> 还需要返回一个函数用于注销 listener</code> 。</p> <RUASandpack template="react-ts" files={{ '/Input.tsx': { code: sandpack.common.Input, hidden: true, }, '/Button.tsx': { code: sandpack.common.Button, hidden: true, }, '/store.ts': sandpack['react18-new-hooks'].store, '/App.tsx': sandpack['react18-new-hooks'].useSyncExternalStore, }} /></p> useInsertionEffect</a></h2> useInsertionEffect</code> 在通常情况下都用不上，它的唯一目的是对 CSS-in-JS 库很重要。</p> CSS-in-JS 库通常需要在运行时插入或修改 <style></code> 标签等。当 CSS 规则被添加或删除时，浏览器必须检查这些规则是否适用于现有的 DOM 树。它必须重新计算所有的样式规则并重新应用它们--而不仅仅是改变了的那些。如果 React 发现另一个组件也产生了一个新的规则，同样的过程会再次发生。</p> 解决这个问题的最好办法就是所有东西呈现给浏览器绘制前就进行改变。没错 useInsertionEffect</code> 与 useEffect</code> 有着同样的签名，但它会同步的在所有 DOM 更改之前触发。比 useLayoutEffect</code> 还要早触发，这样就可以用于在重绘之前注入样式。</p> <RUASandpack template="react-ts" files={{ '/App.tsx': sandpack['react18-new-hooks'].useInsertionEffect, }} /></p> 自建简易 FaaS 2022-10-10T00:00:00+00:00 近些年来，传统的 IaaS、PaaS 已经无法满足人们对资源调度的需求了。各大云厂商相继开始推出自家的 Serverless 服务。Serverless 顾名思义，它是“无服务器”服务器。不过并不是本质上的不需要服务器，而是面向开发者（客户）无需关心底层服务器资源的调度。只需要利用本身业务代码即可完成服务的运行。</p> Serverless 是近些年的一个发展趋势，它的发展离不开 FaaS 与 BaaS。这里不是着重讨论 Serverless 架构的，而是尝试利用 Node.js 来实现一个最简易的 FaaS 平台。顺便还能对 JavaScript 语言本身做进一步更深的研究。</p> Serverless 平台是基于函数作为运行单位的，在不同的函数被调用时，为了确保各个函数的安全性，同时避免它们之间的互相干扰，平台需要具有良好的隔离性。这种隔离技术通常被称之为“沙箱”（Sandbox）。在 FaaS 服务器中，最普遍的隔离应该式基于 Docker 技术实现的容器级别隔离。它不同于传统虚拟机的完整虚拟化操作系统，而且也实现了安全性以及对系统资源的隔离。</p> 但在这我们尝试实现一个最简易的 FaaS 服务，不需要利用上 Docker。基于进程的隔离会更加的轻便、灵活，虽然与容器的隔离性有一定差距。</p> 环境搭建</a></h2> 这里利用 TypeScript 来对 JavaScript 做更严格的类型检查，并使用 ESlint + Prettier 等工具规范代码。</p> 初始化环境：</p> yarn</span> --init</span></span></code></pre> 添加一些开发必要工具：</p> yarn</span> add typescript ts-node nodemon -D</span></span></code></pre> 以及对代码的规范：</p> yarn add eslint prettier eslint</span>-</span>plugin</span>-</span>prettier eslint</span>-</span>config</span>-</span>prettier</span> @</span>typescript</span>-</span>eslint</span>/</span>parser</span> @</span>typescript</span>-</span>eslint</span>/</span>eslint</span>-</span>plugin</span> -</span>D</span></span></code></pre> 当然不能忘了 Node 本身的 TypeScript lib。</p> yarn</span> add @types/node -D</span></span></code></pre>基础能力</a></h2> 在 Nodejs 多进程 \| 🍭Defectink</a> 一篇中，我们大概的探讨了进程的使用。这里也是类似。在进程创建时，操作系统将给该进程分配对应的虚拟地址，再将虚拟地址映射到真正的物理地址上。因此，进程无法感知真实的物理地址，只能访问自身的虚拟地址。这样一来，就可以防止两个进程互相修改数据。</p> 所以，我们基于进程的隔离，就是让不同的函数运行再不同的进程中，从而保障各个函数的安全性和隔离性。具体的流程是：我们的主进程（master）来监听函数的调用请求，当请求被触发时，再启动子进程（child）执行函数，并将执行后的结果通过进程间的通信发送给主进程，最终返回到客户端中。</p> 基于进程隔离</a></h3> chlid_process</code>是 Node.js 中创建子进程的一个函数，它有多个方法，包括 exec、execFile 和 fork。实际上底层都是通过 spawn 来实现的。这里我们使用 fork 来创建子进程，创建完成后，fork 会在子进程与主进程之间建立一个通信管道，来实现进程间的通信（IPC，Inter-Process Communication）。</p> 其函数签名为：child_process.fork(modulePath[, args][, options])</code>。</p> 这里利用child.process.fork</code>创建一个子进程，并利用child.on</code>来监听 IPC 消息。</p> // master.ts</span></span> import</span> child_process</span> from</span> "child_process"</span>;</span></span> </span> const</span> child</span> =</span> child_process</span>.</span>fork</span>(</span>"./dist/child.js"</span>)</span>;</span></span> </span> // Use child.on listen a message</span></span> child</span>.</span>on</span>(</span>"message"</span>, (</span>message</span>:</span> string</span>)</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"MASTER get message:"</span>,</span> message)</span>;</span></span> }</span>)</span>;</span></span></code></pre> 在 Node.js 中，process 对象是一个内置模块。在每个进程启动后，它都可以获取当前进程信息以及对当前进程进行一些操作。例如，发送一条消息给主进程。</p> 子进程则利用 process 模块来和主进程进行通信</p> // child.ts</span></span> import</span> process</span> from</span> "process"</span>;</span></span> </span> process</span>.</span>send</span>?.</span>(</span>"this is a message from child process"</span>)</span>;</span></span></code></pre> 执行这段方法后，master 就会创建一个子进程，并接收到其发来的消息。</p> $</span> node master.js</span></span> MASTER</span> get message: this is a message from child process</span></span></code></pre> </p> 到此，我们就实现了主进程与子进程之间的互相通信。但是需要执行的函数通常来自于外部，所以我们需要从外部手动加载代码，再将代码放到子进程中执行，之后将执行完的结果再发送回主进程，最终返回给调用者。</p> 我们可以再创建一个func.js</code>来保存用户的代码片段，同时在主进程中读取这段代码，发送给子进程。而子进程中需要动态执行代码的能力。什么方式能在 JavaScript 中动态的执行一段代码呢？</p> Devil waiting outside your floor</a></h3> 没错，这里要用到万恶的 evil。在 JavaScript 中动态的加载代码，eval 函数是最简单方便，同时也是最危险和性能最低下的方式。以至于现代浏览器都不愿意让我们使用</p> console</span>.</span>log</span>(</span>eval</span>(</span>"2 + 2"</span>))</span>;</span></span> </span> // VM122:1 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem:".</span></span></code></pre> 执行来自用户的函数与普通函数略有一点区别，它与普通的函数不同，它需要利用 IPC 来返回值，而普通函数则之间 return 即可。我们不应该向用户暴露过度的内部细节，所以，用户的函数可以让他长这样：</p> // func.js</span></span> </span> (</span>event</span>,</span> context</span>)</span> =></span> {</span></span> return</span> {</span> message</span>:</span> "it works!"</span>,</span> status</span>:</span> "ok "</span> };</span></span> };</span></span></code></pre> eval 函数不仅可以执行一行代码片段，它还可以执行一个函数。在拿到用户的匿名函数后，我们可以将其包装成一个立即执行函数（IIFE）的字符串，然后交给 eval 函数进行执行。</p> const</span> fn</span> =</span> `() => (2 + 2)`</span>;</span></span> const</span> fnIIFE</span> =</span> `(</span>${</span>fn</span>}</span>)()`</span>;</span></span> console</span>.</span>log</span>(</span>eval</span>(fnIIFE))</span>;</span></span></code></pre> 不用担心，evil 会离我们而去的。</p> </blockquote> 这里我们使用主进程读取用户函数，并使用 IPC 发送给子进程；子进程利用 eval 函数来执行，随后再利用 IPC 将其结果返回给主进程。</p> // master.ts</span></span> import</span> child_process</span> from</span> "child_process"</span>;</span></span> import</span> fs</span> from</span> "fs"</span>;</span></span> </span> const</span> child</span> =</span> child_process</span>.</span>fork</span>(</span>"./dist/child.js"</span>)</span>;</span></span> </span> // Use child.on listen a message</span></span> child</span>.</span>on</span>(</span>"message"</span>, (</span>message</span>:</span> unknown</span>)</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"Function result:"</span>,</span> message)</span>;</span></span> }</span>)</span>;</span></span> </span> // Read the function from user</span></span> const</span> fn</span> =</span> fs</span>.</span>readFileSync</span>(</span>"./src/func.js"</span>, {</span> encoding</span>:</span> "utf-8"</span> }</span>)</span>;</span></span> // Sent to child process</span></span> child</span>.</span>send</span>(</span>{</span></span> action</span>:</span> "run"</span>,</span></span> fn</span>,</span></span> }</span>)</span>;</span></span></code></pre>// child.ts</span></span> import</span> process</span> from</span> "process"</span>;</span></span> </span> type</span> fnData</span> =</span> {</span></span> action</span>:</span> "</span>run</span>"</span>;</span></span> fn</span>:</span> ()</span> =></span> unknown</span>;</span></span> };</span></span> </span> // Listen function form master process</span></span> process</span>.</span>on</span>(</span>"message"</span>, (</span>data</span>:</span> fnData</span>)</span> =></span> {</span></span> // Convert user function to IIFE</span></span> const</span> fnIIFE</span> =</span> `(</span>${</span>data</span>.</span>fn</span>}</span>)()`</span>;</span></span> const</span> result</span> =</span> eval</span>(fnIIFE)</span>;</span></span> // Sent result to master process</span></span> process</span>.</span>send</span>?.</span>(</span>{</span> result</span> }</span>)</span>;</span></span> process</span>.</span>exit</span>()</span>;</span></span> }</span>)</span>;</span></span></code></pre> </p> Devil crawling along your floor</a></h3> 前面我们利用 eval 函数获得了执行动态代码的能力，但与 Devil 做交易是需要付出代价的。很明显，我们付出了不小的安全性以及性能的代价。</p> 甚至于用户代码能够直接修改 process，导致子进程无法退出等问题：</p> (</span>event</span>,</span> context</span>)</span> =></span> {</span></span> process</span>.</span>exit</span> =</span> ()</span> =></span> {</span></span> console</span>.</span>log</span>(</span>"process NOT exit!"</span>)</span>;</span></span> };</span></span> return</span> {</span> message</span>:</span> "function is running."</span>,</span> status</span>:</span> "ok"</span> };</span></span> };</span></span></code></pre> eval 函数能够访问全局变量的原因在于，它们由同一个执行其上下文创建。如果能让函数代码在单独的上下文中执行，那么就应该能够避免污染全局变量了。</p> 所以我们得换一个 Devil 做交易。在 Node.js 内置模块中，由一个名为 vm 的模块。从名字就可以得出，它是一个用于创建基于上下文的沙箱机制，可以创建一个与当前进程无关的上下文环境。</p> 具体方式是，将沙箱内需要使用的外部变量通过vm.createContext(sandbox)</code>包装，这样我们就能得到一个 contextify 化的 sandbox 对象，让函数片段在新的上下文中访问。然后，可执行对象的代码片段。在此处执行的代码的上下文与当前进程的上下文是互相隔离的，在其中对全局变量的任何修改，都不会反映到进程中。提高了函数运行环境的安全性。</p> const</span> vm</span> =</span> require</span>(</span>"vm"</span>)</span>;</span></span> </span> const</span> x</span> =</span> 1</span>;</span></span> </span> const</span> context</span> =</span> {</span> x</span>:</span> 2</span> };</span></span> vm</span>.</span>createContext</span>(context)</span>;</span> // Contextify the object.</span></span> </span> const</span> code</span> =</span> "x += 40; var y = 17;"</span>;</span></span> // `x` and `y` are global variables in the context.</span></span> // Initially, x has the value 2 because that is the value of context.x.</span></span> vm</span>.</span>runInContext</span>(code</span>,</span> context)</span>;</span></span></code></pre> 在我们的 FaaS 中，我们无须在外层访问新的上下文对象，只需要执行一段函数即可。因此可以通过vm.runInNewContext(code)</code>方法来快速创建一个无参数的新上下文，更快速创建新的 sandbox。</p> 我们只需要替换到 eval 函数即可：</p> // child.ts</span></span> import</span> process</span> from</span> "process"</span>;</span></span> import</span> vm</span> from</span> "vm"</span>;</span></span> </span> type</span> fnData</span> =</span> {</span></span> action</span>:</span> "</span>run</span>"</span>;</span></span> fn</span>:</span> ()</span> =></span> unknown</span>;</span></span> };</span></span> </span> // Listen function form master process</span></span> process</span>.</span>on</span>(</span>"message"</span>, (</span>data</span>:</span> fnData</span>)</span> =></span> {</span></span> // Convert user function to IIFE</span></span> const</span> fnIIFE</span> =</span> `(</span>${</span>data</span>.</span>fn</span>}</span>)()`</span>;</span></span> const</span> result</span> =</span> vm</span>.</span>runInNewContext</span>(fnIIFE)</span>;</span></span> // Sent result to master process</span></span> process</span>.</span>send</span>?.</span>(</span>{</span> result</span> }</span>)</span>;</span></span> process</span>.</span>exit</span>()</span>;</span></span> }</span>)</span>;</span></span></code></pre> 现在，我们实现了将函数隔离在沙箱中执行，流程如图：</p> </p> 但 vm 真的安全到可以随意执行来自用户的不信任代码吗？虽然相对于 eval 函数来，它隔离了上下文，提供了更加封闭的环境，但它也不是绝对安全的。</p> 根据 JavaScript 对象的实现机制，所有对象都是有原型链的（类似Object.crate(null)</code>除外）。因此 vm 创建的上下文中的 this 就指向是当前的 Context 对象。而 Context 对象是通过主进程创建的，其构造函数指向主进程的 Object。这样一来，通过原型链，用户代码就可以顺着原型链“爬”出沙箱：</p> import</span> vm</span> from</span> "vm"</span>;</span></span> (</span>event</span>,</span> context</span>)</span> =></span> {</span></span> vm</span>.</span>runInNewContext</span>(</span>'this.constructor.constructor("return process")().exit()'</span>)</span>;</span></span> return</span> {</span> message</span>:</span> "function is running."</span>,</span> status</span>:</span> "ok"</span> };</span></span> };</span></span></code></pre> 这种情况就会导致非信任的代码调用主程序的process.exit</code>方法，从而让整个程序退出。</p> 也许我们可以切断上下文的原型链，利用Object.create(null)</code>来为沙箱创建一个上下文。与任何 Devil 做交易都是需要付出代价的：</p> The vm</code> module is not a security mechanism. Do not use it to run untrusted code</strong>.</p> </blockquote> Devil lying by your side</a></h3> 好在开源社区有人尝试解决这个问题，其中一个方案就是 vm2 模块。vm2 模块是利用 Proxy 特性来对内部变量进行封装的。这使得隔离的沙箱环境可以运行不受信任的代码。</p> 当然，我们需要手动添加一下依赖：</p> yarn</span> add vm2</span></span></code></pre> 另一个值得庆幸的是，代码改动也很小。我们只需要对child.ts</code>简单修改即可：</p> import</span> process</span> from</span> "process"</span>;</span></span> import</span> {</span> VM</span> }</span> from</span> "vm2"</span>;</span></span> </span> type</span> fnData</span> =</span> {</span></span> action</span>:</span> "</span>run</span>"</span>;</span></span> fn</span>:</span> ()</span> =></span> unknown</span>;</span></span> };</span></span> </span> // Listen function form master process</span></span> process</span>.</span>on</span>(</span>"message"</span>, (</span>data</span>:</span> fnData</span>)</span> =></span> {</span></span> // Convert user function to IIFE</span></span> const</span> fnIIFE</span> =</span> `(</span>${</span>data</span>.</span>fn</span>}</span>)()`</span>;</span></span> const</span> result</span> =</span> new</span> VM</span>()</span>.</span>run</span>(fnIIFE)</span>;</span></span> // Sent result to master process</span></span> process</span>.</span>send</span>?.</span>(</span>{</span> result</span> }</span>)</span>;</span></span> process</span>.</span>exit</span>()</span>;</span></span> }</span>)</span>;</span></span></code></pre>HTTP 服务</a></h2> 在实现了动态执行代码片段的能力后，为了让函数能够对外提供服务，我们还需要添加一个 HTTP API。这个 API 使得用户可以根据不同的请求路径来动态的执行对应的代码，并将其结果返回给客户端。</p> 这里 HTTP 服务器选用的是 Koa。</p> yarn</span> add koa</span></span></code></pre> 当然还要有其类型</p> yarn</span> add @types/koa -D</span></span></code></pre> 为了响应 HTTP 请求并运行我们的函数，我们需要进一步的将运行子进行的方法封装为一个异步函数，并在接收到子进程的消息后，直接 resolve 给 Koa。</p> 将前面的子进程的创建、监听以及读取文件都封装进一个函数：</p> // master.ts</span></span> import</span> child_process</span> from</span> "child_process"</span>;</span></span> import</span> fs</span> from</span> "fs/promises"</span>;</span></span> import</span> Koa</span> from</span> "koa"</span>;</span></span> </span> const</span> app</span> =</span> new</span> Koa</span>()</span>;</span></span> </span> app</span>.</span>use</span>(</span>async</span> (</span>ctx</span>)</span> =></span> {</span></span> ctx</span>.</span>response</span>.</span>body</span> =</span> await</span> run</span>()</span>;</span></span> }</span>)</span>;</span></span> </span> const</span> run</span> =</span> async</span> ()</span> =></span> {</span></span> const</span> child</span> =</span> child_process</span>.</span>fork</span>(</span>"./dist/child.js"</span>)</span>;</span></span> // Read the function from user</span></span> const</span> fn</span> =</span> await</span> fs</span>.</span>readFile</span>(</span>"./src/func.js"</span>, {</span> encoding</span>:</span> "utf-8"</span> }</span>)</span>;</span></span> // Sent to child process</span></span> child</span>.</span>send</span>(</span>{</span></span> action</span>:</span> "run"</span>,</span></span> fn</span>,</span></span> }</span>)</span>;</span></span> </span> return</span> new</span> Promise</span>(</span>(</span>resolve</span>)</span> =></span> {</span></span> // Use child.on listen a message</span></span> child</span>.</span>on</span>(</span>"message"</span>,</span> resolve)</span>;</span></span> }</span>)</span>;</span></span> };</span></span> </span> app</span>.</span>listen</span>(</span>3000</span>)</span>;</span></span></code></pre> 现在我们的流程如下：</p> </p> 这样还不够，到目前为止，用户还只是请求的根路径，而我们响应的也只是同一个函数。因此我们还需要一个路由机制来支持不同的函数触发。</p> 使用ctx.request.path</code>就能获取到每次 GET 请求后的路径，所以这里也不用大费周章的去划分路由，直接把路径作为函数名，读取文件，执行即可。所以这里的改造就简单多了：</p> // master.ts</span></span> app</span>.</span>use</span>(</span>async</span> (</span>ctx</span>)</span> =></span> {</span></span> ctx</span>.</span>response</span>.</span>body</span> =</span> await</span> run</span>(ctx</span>.</span>request</span>.</span>path)</span>;</span></span> }</span>)</span>;</span></span> </span> const</span> run</span> =</span> async</span> (</span>path</span>:</span> string</span>)</span> =></span> {</span></span> const</span> child</span> =</span> child_process</span>.</span>fork</span>(</span>"./dist/child.js"</span>)</span>;</span></span> // Read the function from user</span></span> const</span> fn</span> =</span> await</span> fs</span>.</span>readFile</span>(</span>`./src/func/</span>${</span>path</span>}</span>.js`</span>, {</span> encoding</span>:</span> "utf-8"</span> }</span>)</span>;</span></span> // Sent to child process</span></span> child</span>.</span>send</span>(</span>{</span></span> action</span>:</span> "run"</span>,</span></span> fn</span>,</span></span> }</span>)</span>;</span></span> </span> return</span> new</span> Promise</span>(</span>(</span>resolve</span>)</span> =></span> {</span></span> // Use child.on listen a message</span></span> child</span>.</span>on</span>(</span>"message"</span>,</span> resolve)</span>;</span></span> }</span>)</span>;</span></span> };</span></span></code></pre> 至此，我们就实现了一个最简单的进程隔离 FaaS 方案，并提供了动态加载函数文件且执行的能力。</p> 但这还不是全部，还有很多方面的问题值得去优化。</p> 进阶优化</a></h2> FaaS 并不只是简单的拥有动态的执行函数的能力就可以了，面对我们的还有大量的待处理问题。</p> 进程管理</a></h3> 上述的方案看上去已经很理想了，利用子进程和沙箱防止污染主进程。但还有个主要的问题，用户的每一个请求都会创建一个新的子进程，并在执行完后再销毁。对系统来说，创建和销毁进程是一个不小的开销，且请求过多时，过多的进程也可能导致系统崩溃。</p> 所以最佳的办法是通过进程池来复用进程。如下图，进程池是一种可以复用进程的概念，通过事先初始化并维护一批进程，让这批进程运行相同的代码，等待着执行被分配的任务。执行完成后不会退出，而是继续等待新的任务。在调度时，通常还会通过某种算法来实现多个进程之间任务分配的负载均衡。</p> </p> 早在 Node.js v0.8 中就引入了 cluster 模块。cluster 是对child_process</code>模块的一层封装。通过它，我们可以创建共享服务器同一端口的子进程。</p> 这时候我们就需要对master.ts</code>进行大改造了。首先需要将child_process</code>更换为 cluster 来管理进程，我们根创建 CPU 超线程数量一半的子进程。这是为了留下多余的超线程给系统已经 Node 的事件循环来工作。顺便在每个子进程中监听对应的 HTTP 端口来启动 HTTP 服务。</p> // master.ts</span></span> import</span> cluster</span> from</span> "cluster"</span>;</span></span> import</span> os</span> from</span> "os"</span>;</span></span> </span> const</span> num</span> =</span> os</span>.</span>cpus</span>()</span>.</span>length</span>;</span></span> const</span> CPUs</span> =</span> num</span> ></span> 2</span> ?</span> num</span> /</span> 2</span> :</span> num</span>;</span></span> </span> if</span> (cluster</span>.</span>isMaster)</span> {</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> CPUs</span>;</span> i</span>++</span>)</span> {</span></span> cluster</span>.</span>fork</span>()</span>;</span></span> }</span></span> }</span> else</span> {</span></span> const</span> app</span> =</span> new</span> Koa</span>()</span>;</span></span> </span> app</span>.</span>use</span>(</span>async</span> (</span>ctx</span>)</span> =></span> {</span></span> ctx</span>.</span>response</span>.</span>body</span> =</span> await</span> run</span>(ctx</span>.</span>request</span>.</span>path)</span>;</span></span> }</span>)</span>;</span></span> </span> app</span>.</span>listen</span>(</span>3000</span>)</span>;</span></span> }</span></span></code></pre> 这里看上去有点匪夷所思，我们都知道，在操作系统中，是不允许多个进程监听同一个端口的。我们的多个子进程看上去监听的都是同一个端口！</p> 实际上，在 Node.js 的 net 模块中，当当前进程是 cluster 的子进程时，存在一个特殊的处理。</p> 简单来说就是，当调用 listen 方法监听端口后，它会判断是否处于 cluster 的子进程下。如果是子进程，则会向主进程发送消息，告诉主进程需要监听的端口。当主进程收到消息后，会判断指定端口是否已经被监听，如果没有，则通过端口绑定实现监听。随后，再将子进程加入一个 worker 队列，表明该子进程可以处理来自该端口的请求。</p> 这样一来，实际上监听的端口的依然是主进程，然后将请求分发给 worker 队列中子进程。分发算法采用了 Round Robin 算法，即轮流处理制。我们可以通过环境变量NODE_CLUSTER_SCHED_POLICY</code>或通过配置cluster.schedulingPolicy</code>来指定其他的负载均衡算法。</p> 总的来说，虽然我们的代码看上去是由子进程来多次监听端口，但实际上是由我们的主进程来进行监听。然后就指定的任务分发给子进程进行处理。</p> 回到我们的逻辑上，由于可以直接在当前代码中判断和创建进程，我们也就不再需要child.ts</code>了。子进程也可以直接在作用域中执行 run 函数了。</p> 所以我们将master.ts</code>完整的改造一下，最终我们就实现了基于 cluster 的多进程管理方案：</p> import</span> cluster</span> from</span> "cluster"</span>;</span></span> import</span> os</span> from</span> "os"</span>;</span></span> import</span> fs</span> from</span> "fs/promises"</span>;</span></span> import</span> Koa</span> from</span> "koa"</span>;</span></span> import</span> {</span> VM</span> }</span> from</span> "vm2"</span>;</span></span> </span> const</span> num</span> =</span> os</span>.</span>cpus</span>()</span>.</span>length</span>;</span></span> const</span> CPUs</span> =</span> num</span> ></span> 1</span> ?</span> Math</span>.</span>floor</span>(num</span> /</span> 2</span>)</span> :</span> num</span>;</span></span> </span> const</span> run</span> =</span> async</span> (</span>path</span>:</span> string</span>)</span> =></span> {</span></span> try</span> {</span></span> // Read the function from user</span></span> const</span> fn</span> =</span> await</span> fs</span>.</span>readFile</span>(</span>`./src/func/</span>${</span>path</span>}</span>.js`</span>, {</span></span> encoding</span>:</span> "utf-8"</span>,</span></span> }</span>)</span>;</span></span> // Use arrow function to handle semicolon</span></span> const</span> fnIIFE</span> =</span> `const func = </span>${</span>fn</span>}</span>`</span>;</span></span> return</span> new</span> VM</span>()</span>.</span>run</span>(</span>`</span>${</span>fnIIFE</span>}</span> func()`</span>)</span>;</span></span> }</span> catch</span> (e)</span> {</span></span> console</span>.</span>log</span>(e)</span>;</span></span> return</span> "Not Found Function"</span>;</span></span> }</span></span> };</span></span> </span> if</span> (cluster</span>.</span>isMaster)</span> {</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> CPUs</span>;</span> i</span>++</span>)</span> {</span></span> cluster</span>.</span>fork</span>()</span>;</span></span> }</span></span> }</span> else</span> {</span></span> const</span> app</span> =</span> new</span> Koa</span>()</span>;</span></span> </span> app</span>.</span>use</span>(</span>async</span> (</span>ctx</span>)</span> =></span> {</span></span> ctx</span>.</span>response</span>.</span>body</span> =</span> await</span> run</span>(ctx</span>.</span>request</span>.</span>path)</span>;</span></span> }</span>)</span>;</span></span> </span> app</span>.</span>listen</span>(</span>3000</span>)</span>;</span></span> }</span></span></code></pre>限制函数执行时间</a></h3> 上述，我们利用多进程方案来提高整体的安全性。但是，目前还没有考虑死循环的情况。当用户编写了一个这样的函数时：</p> const</span> loop</span> =</span> (</span>event</span>,</span> context</span>)</span> =></span> {</span></span> while</span> (</span>1</span>)</span> {}</span></span> return</span> {</span> message</span>:</span> "this is function2!!!"</span>,</span> status</span>:</span> "ok "</span> };</span></span> };</span></span></code></pre> 我们的进程会一直为其计算下去，无法正常退出，导致资源被占用。所以我们理想的情况下就是在沙箱外限制没个函数的执行时长，当超过限定时间时，之间结束该函数。</p> 好在，vm 模块赋予了我们这一强大的功能：</p> vm</span>.</span>runInNewContext</span>(</span>{</span></span> 'loop()'</span>,</span></span> {</span> loop</span>,</span> console</span> },</span></span> {</span> timeout</span>:</span> 5000</span> }</span></span> }</span>)</span></span></code></pre> 通过 timeout 参数，我们为函数的执行时间限制在 5000ms 内。当死循环的函数执行超 5s 后，随后会得到一个函数执行超时的错误信息。</p> 由于 vm2 也是基于 vm 进行封装的，因此我们可以在 vm2 中使用和 vm 相同的能力。只需要小小的改动就可以实现限制函数执行时长能力：</p> return</span> new</span> VM</span>(</span>{</span> timeout</span>:</span> 5000</span> }</span>)</span>.</span>run</span>(</span>`</span>${</span>fnIIFE</span>}</span> func()`</span>)</span>;</span></span></code></pre> 看上去不错！但 Devil 不会就这么轻易放过我们的。JavaScript 本身是单线程的语言，它通过出色的异步循环来解决同步阻塞的问题。异步能解决很多问题，但同时也能带来问题。事件循环机制目前管理着两个任务队列：事件循环队列（或者叫宏任务）与任务队列（常见的微任务）。</p> 我们可以把每次的事件循环队列内的每次任务执行看作一个 tick，而任务队列就是挂在每个 tick 之后运行的。也就是说微任务只要一直在运行，或者一直在添加，那么就永远进入不到下一次 tick 了。这和同步下死循环问题一样！</p> 事件循环通常包含：setTimout、setInterval 和 I/O 操作等，而任务队列通常为：process.nextTick</code>、Promise、MutationObserver 等。</p> VM2 也有类似 VM 的 timeout 设置，但是同样的是，它也是基于事件循环队列所设置的超时。根本来说，它无法限制任务队列中的死循环。</p> 面对这个难题，考虑了很久，也导致这个项目拖了挺长一段时间的。摸索中想到了大概两个方法能够解决这个问题：</p> 继续使用 cluster 模块，cluster 模块没有直接的 API 钩子给我们方便的在主进程中实现计时的逻辑。我们可以考虑重写任务分发算法，在 Round Robin 算法的的基础上实现计时的逻辑。从而控制子进程，当子进程超时时，直接结束子进程的声明周期。</li> 第二个方法是，放弃使用 cluster 模块，由我们亲自来管理进程的分发已经生命周期，从而达到对子进程设置执行超时时间的限制。</li> </ol> 这两个方法都不是什么简单省事的方法，好在我们有优秀的开源社区。正当我被子进程卡主时，得知了一个名为 Houfeng/safeify: 📦 Safe sandbox that can be used to execute untrusted code. (github.com)</a> 的项目。它属于第二种解决办法，对child_process</code>的手动管理，从而实现对子进程的完全控制，且设置超时时间。</p> 虽然上述写的 cluster 模块的代码需要重构，并且我们也不需要 cluster 模块了。利用 safeify 就可以进行对子进程的管理了。</p> 所以这里对 Koa 的主进程写法就是最常见的方式，将控制和执行函数的逻辑抽离为一个 middleware，交由路由进行匹配：</p> import</span> Koa</span> from</span> "koa"</span>;</span></span> import</span> runFaaS</span> from</span> "./middleware/faas"</span>;</span></span> import</span> logger</span> from</span> "koa-logger"</span>;</span></span> import</span> OPTION</span> from</span> "./option"</span>;</span></span> import</span> router</span> from</span> "./routers"</span>;</span></span> import</span> bodyParser</span> from</span> "koa-bodyparser"</span>;</span></span> import</span> cors</span> from</span> "./middleware/CORS"</span>;</span></span> </span> const</span> app</span> =</span> new</span> Koa</span>()</span>;</span></span> </span> app</span>.</span>use</span>(</span>logger</span>())</span>;</span></span> app</span>.</span>use</span>(</span>bodyParser</span>())</span>;</span></span> app</span>.</span>use</span>(cors)</span>;</span></span> // 先注册路由</span></span> app</span>.</span>use</span>(router</span>.</span>routes</span>())</span>;</span></span> app</span>.</span>use</span>(router</span>.</span>allowedMethods</span>())</span>;</span></span> // 路由未匹配到的则运行函数</span></span> app</span>.</span>use</span>(runFaaS)</span>;</span></span> </span> console</span>.</span>log</span>(</span>`⚡[Server]: running at http://</span>${</span>OPTION</span>.</span>host</span>}</span>:</span>${</span>OPTION</span>.</span>port</span>}</span> !`</span>)</span>;</span></span> </span> export default</span> app</span>.</span>listen</span>(</span>OPTION</span>.</span>port)</span>;</span></span></code></pre>总结</a></h2> 我的简易 FaaS 基本上到这里就告一段落了，对 Devil 的最后针扎就是限制函数的异步执行时间。实际上还有一些可以优化的点。例如对函数执行资源的限制，即便我们对函数的执行时间有了限制，但在函数死循环的几秒钟，它还是占有了我们 100% 的 CPU。如果多个进程的函数都会占满 CPU 的执行，那么到最后服务器的资源可能会被消耗殆尽。</p> 针对这个情况也有解决办法：在 Linux 系统上可以使用 CGroup 来对 CPU 和系统其他资源进程限制。其实 safeify 中也有了对 CGroup 的实现，但我最终没有采用作用这个方案，因为在 Docker 环境中，资源本身已经有了一定的限制，而且 Container 中大部分系统文件都是 readonly 的，CGroup 也不好设置。</p> 还有一个优化的地方就是可以给函数上下文提供一些内置的可以函数，模仿添加 BaaS 的实现，添加一个常用的服务。不过最终这个小功能也没有实现，因为（懒）这本来就是一个对 FaaS 的简单模拟，越是复杂安全性的问题也会随着增加。</p> 推荐</a></h2> 无利益相关推荐：</p> 目前市面上大部分对于 Serverless 的书籍都是研究其架构的，对于面向前端的 Serverless 书籍不是很常见。而《前端 Serverless：面向全栈的无服务器架构实战》就是这样一本针对我们前端工程师的书籍，从 Serverless 的介绍，到最后的上云实践，循序渐进。</p> 本篇也大量参考其中。</p> 把玩</a></h2> FaaS</a></del></p> 使用 Turborepo 和 rollup 构建 NPM 包 2022-10-10T00:00:00+00:00 对于 monorepo 我使用的是 turborepo</a>，创建一个新的项目非常简单：</p> npx create</span>-</span>turbo@latest</span></span></code></pre> 对于包管理器，这次尝鲜使用了 pnpm</a> 它在安装包到 workspace 中相对于其他两个来说要更加的方便。</p> pnpm add</span> --</span>filter rua</span>-</span>three react react</span>-</span>dom three stats</span>.</span>js</span> -</span>D</span></span></code></pre>Turborepo</a></h2> 对于 turborepo 来说没有什么需要过多配置的，比较需要注意的就是它的环境变量需要手动在 turbo.json</code> 配置文件中声明一次：</p> "globalEnv"</span>: [</span></span> "NODE_ENV"</span></span> ]</span>,</span></span></code></pre> 除此之外，在默认的 tsconfig 中，其 target</code> 是 es5</code> 如果需要一些比较先进的语法，例如在类体中实例化另一个类，则就需要将 target</code> 设置到 es6</code> 及以上。</p> "compilerOptions"</span>:</span> {</span></span> "target"</span>:</span> "es6"</span>,</span></span> },</span></span></code></pre>rollup</a></h2> 相比较与 turborepo 来说，rollup 需要注意的地方就多一些。对于 rollup 的安装来说，本身所需要的依赖不是很多，主要是部分插件。</p> "@rollup/plugin-commonjs"</span>: </span>"^22.0.2"</span>,</span></span> "@rollup/plugin-node-resolve"</span>: </span>"^14.1.0"</span>,</span></span> "rollup"</span>: </span>"^2.79.1"</span>,</span></span> "rollup-plugin-typescript2"</span>: </span>"^0.34.0"</span>,</span></span></code></pre> 对于一个小包来说，我的目录结构也非常的简单，核心部分就在 rollup.config.js</code> 和 package.json</code> 。</p> .</span></span> ├── lib</span></span> │ ├── cjs</span></span> │ └── esm</span></span> ├── package</span>.</span>json</span></span> ├── </span>README</span>.</span>md</span></span> ├── rollup</span>.</span>config</span>.</span>js</span></span> ├── src</span></span> │ ├── hooks</span></span> │ ├── index</span>.</span>ts</span></span> │ └── three</span></span> └── tsconfig</span>.</span>json</span></span></code></pre> 安装完了 rollup 之后，需要对其简单的进行一下配置。对于 input 和 output 是基本操作，没有什么值得注意的。而 external 字段决定了我们依赖是否是外部依赖，从而直接决定了 rollup 会不会将第三方的依赖打包到一起。</p> import</span> {</span> nodeResolve</span> }</span> from</span> '@rollup/plugin-node-resolve'</span>;</span></span> import</span> commonjs</span> from</span> '@rollup/plugin-commonjs'</span>;</span></span> import</span> typescript</span> from</span> 'rollup-plugin-typescript2'</span>;</span></span> </span> import</span> pkg</span> from</span> './package.json'</span>;</span></span> </span> export default</span> {</span></span> input</span>:</span> 'src/index.ts'</span>,</span></span> output</span>:</span> [</span></span> {</span></span> file</span>:</span> pkg</span>.</span>main</span>,</span></span> format</span>:</span> 'cjs'</span>,</span></span> sourcemap</span>:</span> true</span>,</span></span> },</span></span> {</span></span> file</span>:</span> pkg</span>.</span>module</span>,</span></span> format</span>:</span> 'es'</span>,</span></span> sourcemap</span>:</span> true</span>,</span></span> },</span></span> ]</span>,</span></span> external</span>:</span> [</span></span> ...</span>Object</span>.</span>keys</span>(pkg</span>.</span>peerDependencies</span> \|\|</span> {}</span>)</span>,</span></span> 'three/examples/jsm/controls/OrbitControls'</span>,</span></span> ]</span>,</span></span> plugins</span>:</span> [</span></span> nodeResolve</span>()</span>,</span></span> commonjs</span>()</span>,</span></span> typescript</span>(</span>{</span></span> typescript</span>:</span> require</span>(</span>'typescript'</span>)</span>,</span></span> }</span>)</span>,</span></span> ]</span>,</span></span> };</span></span></code></pre> 通常来说，我们将所依赖的第三方依赖明确的生声明在 peerDependencies</code> 中，在根据其 key 设置到 external 中，这样我们的 peerDependencies</code> 就不会被一起打包了。</p> "peerDependencies"</span>:</span> {</span></span> "react"</span>:</span> "^18.2.0"</span>,</span></span> "react-dom"</span>:</span> "^18.2.0"</span>,</span></span> "stats.js"</span>:</span> "^0.17.0"</span>,</span></span> "three"</span>:</span> "^0.144.0"</span></span> },</span></span></code></pre> 但在我的例子中，光添加了 three</code> 还不够。如果还引入了 three</code> 这个包下的其他文件夹内的文件，rollup 并没有非常智能的识别到 three/examples/jsm/controls/OrbitControls</code> 也隶属于 three</code> 。</p> 从而将 OrbitControls</code> 也打包到一起了，所以在 external 中还需要手动添加。</p> import</span> </span> as</span> THREE</span> from</span> 'three'</span>;</span></span> import</span> {</span> OrbitControls</span> }</span> from</span> 'three/examples/jsm/controls/OrbitControls'</span>;</span></span></code></pre>package</a></h2> 在 package.json</code> 中除了 peerDependencies</code> 比较重要外，入口文件和类型文件的位置声明也决定了我们的包能否被正常使用。</p> "main"</span>: </span>"./lib/cjs/index.js"</span>,</span></span> "module"</span>: </span>"./lib/esm/index.js"</span>,</span></span> "types"</span>: </span>"./lib/esm/index.d.ts"</span>,</span></span></code></pre> 而 files</code> 字段则决定了当我们使用 npm publish</code> 时所上传的文件：</p> "files"</span>: [</span></span> "/lib"</span></span> ]</span>,</span></span></code></pre>NPM</a></h2> 在做了适当的配置后，公开一个包到公共源非常简单，只需要两个命令，分别是登录和上传。</p> npm adduser</span></span> npm publish</span></span></code></pre> 需要注意的就是不能在镜像源上登陆，当然也不能上传。</p> What about this - JavaScript 全面解析 2022-09-24T00:00:00+00:00 this 全面解析</a></h2> this 和动态作用域有些许类似，它们都是在执行时决定的。this 是在调用时被绑定的，完全取决于函数的调用位置。</p> 确定调用位置</a></h3> 当一个函数被调用时，会创建一个活动记录（执行期上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this 就是这个记录里的一个属性。</p> 调用位置就是函数在代码中被调用的位置，而不是声明的位置。我们可以通过分析调用栈来确定函数的真正调用位置。</p> function</span> foo</span>() {</span></span> // 当前调用栈：foo</span></span> </span> console</span>.</span>log</span>(</span>"foo"</span>)</span>;</span></span> bar</span>()</span>;</span></span> }</span></span> function</span> bar</span>() {</span></span> // 当前调用栈：foo --> bar</span></span> </span> console</span>.</span>log</span>(</span>"bar"</span>)</span>;</span></span> baz</span>()</span>;</span></span> }</span></span> function</span> baz</span>() {</span></span> // 当前调用栈：foo --> bar --> baz</span></span> </span> console</span>.</span>log</span>(</span>"baz"</span>)</span>;</span></span> }</span></span> foo</span>()</span>;</span></span></code></pre>绑定规则</a></h3> this 是在运行时动态绑定的，所以在不同的情况下，this 的指向可能会出现各种意料之外的结果。</p> 默认绑定</a></h4> 当函数在全局环境下独立调用时，this 会指向全局对象。</p> var</span> a</span> =</span> 123</span>;</span></span> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>a)</span>;</span> // 123</span></span> }</span></span></code></pre> 而当函数处于严格模式下时，则不能将全局对象用于默认绑定，因此 this 会绑定到 undefined</code>。</p> var</span> a</span> =</span> 123</span>;</span></span> function</span> foo</span>() {</span></span> "use strict"</span>;</span></span> console</span>.</span>log</span>(</span>this</span>.</span>a)</span>;</span> // TypeError: this is undefined</span></span> }</span></span></code></pre> 还有一个微妙的细节：虽然 this 的绑定完全取决于调用位置，但只有 foo()</code> 函数本身处于非严格模式时才能绑定到全局对象。如果只是函数执行时所在的环境是严格模式，而函数本身是非严格模式，则不影响默认绑定规则。</p> var</span> a</span> =</span> 123</span>;</span></span> </span> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>a)</span>;</span></span> }</span></span> </span> (</span>()</span> =></span> {</span></span> "use strict"</span>;</span></span> foo</span>()</span>;</span></span> }</span>)()</span>;</span></span></code></pre> 通常来说不推荐在代码中混用严格模式与非严格模式。</p> </blockquote> 隐式绑定</a></h4> 另一种规则是考虑调用位置是否有上下文对象，或者说某个对象是否包含这个函数。</p> function</span> foo</span>(</span>this</span>:</span> typeof</span> obj</span>) {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> foo</span>:</span> foo</span>,</span></span> };</span></span> obj</span>.</span>foo</span>()</span>;</span> // xfy</span></span></code></pre> 这种方式可以理解为将 foo()</code> 的函数体赋值给了对象 obj 的一个属性，而执行时是从 obj 作为上下文对象来执行的。所以 this 隐式地绑定到了 obj 对象上。</p> 对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。</p> function</span> foo</span>(</span>this</span>:</span> typeof</span> obj</span>) {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> foo</span>:</span> foo</span>,</span></span> };</span></span> obj</span>.</span>foo</span>()</span>;</span> // xfy</span></span> </span> const</span> anotherObj</span> =</span> {</span></span> name</span>:</span> "dfy"</span>,</span></span> obj</span>:</span> obj</span>,</span></span> };</span></span> anotherObj</span>.</span>obj</span>.</span>foo</span>()</span>;</span> // xfy</span></span></code></pre> 隐式丢失</strong></p> 既然会有隐式绑定，自然也会出现隐式丢失的问题。</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> </span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> foo</span>,</span></span> };</span></span> </span> const</span> bar</span> =</span> obj</span>.</span>foo</span>;</span> // 函数别名</span></span> bar</span>()</span>;</span></span></code></pre> 虽然 bar 是 obj.foo</code> 的一个引用，但它引用的是函数体本身。可以理解为将函数体传递给了 bar 这个变量，此时调用 bar()</code> 是一个不带任何修饰的函数调用，因此会使用默认绑定。</p> 另一种常见且出乎意料的情况就是在传递回调函数时：</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> </span> function</span> doFoo</span>(</span>fn</span>) {</span></span> fn</span>()</span>;</span></span> }</span></span> </span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> foo</span>,</span></span> };</span></span> </span> doFoo</span>(obj</span>.</span>foo)</span>;</span></span></code></pre> 参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值。只要函数体被传递后，且调用时脱离了原有的对象，就会导致 this 的隐式丢失。</p> 包括 setTimeout()</code> 方法丢失 this 也是同理。</p> 显式绑定</a></h4> 由于原型的特性，JavaScript 中函数也有自己的属性。大多数宿主环境都会提供 call()</code> 与 apply()</code> 方法来让我们显式地绑定 this。</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> foo</span>,</span></span> };</span></span> foo</span>.</span>call</span>(obj)</span>;</span></span></code></pre> call 与 apply 只是传参方式不同。</p> </blockquote> 使用显式绑定可以很好地解决传递参数时隐式丢失 this 的问题。</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> foo</span>,</span></span> };</span></span> function</span> bar</span>() {</span></span> foo</span>.</span>call</span>(obj)</span>;</span></span> }</span></span> setTimeout</span>(bar</span>,</span> 1000</span>)</span>;</span></span> // 同理</span></span> // setTimeout(() => {</span></span> // obj.foo();</span></span> // }, 1000);</span></span></code></pre> 这里在 bar()</code> 的内部直接手动显式地把 foo()</code> 绑定到了 obj，无论之后怎么调用、在何处调用，都会手动将 obj 绑定在 foo()</code> 上。这种绑定称之为硬绑定</strong>。</p> 不过这种绑定是特意设计的例子，这里手动为 foo()</code> 绑定到了 obj。在多数情况下，我们可能需要更灵活的方案。</p> 在 JavaScript 装饰器模式 🎊 - 🍭Defectink (xfy.plus)</a> 中介绍了这种工作模式。通过一个包装器配合显式绑定就能解决大部分情况下的问题。</p> function</span> foo</span>(</span>msg</span>) {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> console</span>.</span>log</span>(msg)</span>;</span></span> }</span></span> function</span> wrapper</span>(</span>fn</span>,</span> obj</span>) {</span></span> return</span> (</span>...</span>rest</span>)</span> =></span> {</span></span> fn</span>.</span>apply</span>(obj</span>,</span> rest)</span>;</span></span> };</span></span> }</span></span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> };</span></span> const</span> bar</span> =</span> wrapper</span>(foo</span>,</span> obj)</span>;</span></span> bar</span>(</span>"嘤嘤嘤"</span>)</span>;</span></span></code></pre> 包装器不仅仅只是用来解决 this 丢失的问题，对于 this 绑定的问题，ES5 提供了内置的方法 Function.prototype.bind</code>。</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> const</span> obj</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> };</span></span> const</span> bar</span> =</span> foo</span>.</span>bind</span>(obj)</span>;</span></span> bar</span>()</span>;</span></span></code></pre>new 绑定</a></h4> 在传统面向类的语言中，“构造函数”是类中的一些特殊方法，使用类时会调用类中的构造函数。通常类似于这样：</p> myObj</span> =</span> new</span> MyClass</span>()</span>;</span></span></code></pre> 在 JavaScript 中，所有函数都可以被 new 操作符调用。这种调用称为构造函数调用，实质上并不存在所谓的“构造函数”，只有对于函数的“构造调用”。</p> 使用 new 来进行构造函数调用时，会执行以下操作：</p> 创建（构造）一个新对象。</li> 对新对象执行 [[Prototype]]</code> 连接。</li> 将新对象绑定到函数调用的 this。</li> 如果函数没有返回其他对象，那么在 new 调用后自动返回这个新对象。</li> </ol> function</span> Foo</span>(</span>name</span>) {</span></span> this</span>.</span>name</span> =</span> name</span>;</span></span> }</span></span> const</span> bar</span> =</span> new</span> Foo</span>(</span>"xfy"</span>)</span>;</span></span> console</span>.</span>log</span>(bar</span>.</span>name)</span>;</span></span></code></pre> 使用 new 操作符来调用 foo()</code> 时，会构造一个新对象并把它绑定到 foo()</code> 中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。</p> ES6 的 class 只是一个语法糖，但它也解决了一些问题。</p> </blockquote> 优先级</a></h3> 上述描述的四条规则中，如果某处位置可以应用多条规则时，就要考虑到它们的优先级问题。</p> 毫无疑问，默认绑定肯定是优先级最低的绑定。所以先来考虑隐式绑定与显式绑定之间的优先级，用一个简单的方法就能测试出来：</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>age)</span>;</span></span> }</span></span> </span> const</span> xfy</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> age</span>:</span> 18</span>,</span></span> foo</span>,</span></span> };</span></span> const</span> dfy</span> =</span> {</span></span> name</span>:</span> "dfy"</span>,</span></span> age</span>:</span> 81</span>,</span></span> foo</span>,</span></span> };</span></span> </span> xfy</span>.</span>foo</span>()</span>;</span> // 18</span></span> dfy</span>.</span>foo</span>()</span>;</span> // 81</span></span> </span> xfy</span>.</span>foo</span>.</span>call</span>(dfy)</span>;</span> // 81</span></span> dfy</span>.</span>foo</span>.</span>call</span>(xfy)</span>;</span> // 18</span></span></code></pre> 很明显，显式绑定的优先级更高，也就是说在判断时应当先考虑是否存在显式绑定。</p> 那么 new 绑定与隐式绑定呢？</p> function</span> foo</span>(</span>msg</span>) {</span></span> this</span>.</span>a</span> =</span> msg</span>;</span></span> }</span></span> </span> const</span> xfy</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> foo</span>,</span></span> };</span></span> xfy</span>.</span>foo</span>(</span>"test"</span>)</span>;</span></span> console</span>.</span>log</span>(xfy)</span>;</span></span> </span> const</span> obj</span> =</span> new</span> xfy</span>.</span>foo</span>(</span>"this is obj"</span>)</span>;</span></span> console</span>.</span>log</span>(obj)</span>;</span></span></code></pre> 可以看到，这里对对象 xfy 中隐式绑定的函数进行了 new 操作，而最后的 this 被绑定到了新对象 obj 上，并没有修改 xfy 本身的值。所以 new 绑定的优先级比隐式绑定更高。</p> 那 new 绑定与显式绑定呢？由于 call/apply</code> 无法与 new 一起使用，所以无法通过 new xfy.foo.call(obj)</code> 来测试优先级，但我们可以通过硬绑定 bind()</code> 来测试。</p> function</span> foo</span>(</span>msg</span>) {</span></span> this</span>.</span>a</span> =</span> msg</span>;</span></span> }</span></span> </span> const</span> xfy</span> =</span> {</span></span> name</span>:</span> "xfy"</span>,</span></span> foo</span>,</span></span> };</span></span> </span> let</span> obj</span> =</span> {};</span></span> </span> const</span> bar</span> =</span> xfy</span>.</span>foo</span>.</span>bind</span>(obj)</span>;</span></span> bar</span>(</span>"obj"</span>)</span>;</span></span> console</span>.</span>log</span>(obj)</span>;</span></span> </span> // bar was bind to obj</span></span> const</span> baz</span> =</span> new</span> bar</span>(</span>"this is baz"</span>)</span>;</span></span> console</span>.</span>log</span>(obj)</span>;</span></span> console</span>.</span>log</span>(baz)</span>;</span></span></code></pre> 可以看到，在硬绑定之后，使用 new 操作时对象 obj 的值并没有被改变，反而对 new 出来的新对象进行了修改。</p> 但这真的说明 new 绑定比硬绑定优先级更高吗？实则不然，上述结果是因为 ES5 中内置的 Function.prototype.bind()</code> 方法比较复杂，它会对 new 绑定进行判断，如果是 new 绑定就会使用新创建的 this。</p> 这是来自 MDN</a> 的 polyfill bind 方法：</p> // Yes, it does work with `new (funcA.bind(thisArg, args))`</span></span> if</span> (</span>!</span>Function</span>.</span>prototype</span>.</span>bind)</span></span> (</span>function</span> () {</span></span> var</span> ArrayPrototypeSlice</span> =</span> Array</span>.</span>prototype</span>.</span>slice</span>;</span></span> Function</span>.</span>prototype</span>.</span>bind</span> =</span> function</span> (</span>otherThis</span>) {</span></span> if</span> (</span>typeof</span> this</span> !==</span> "function"</span>)</span> {</span></span> // closest thing possible to the ECMAScript 5</span></span> // internal IsCallable function</span></span> throw</span> new</span> TypeError</span>(</span></span> "Function.prototype.bind - what is trying to be bound is not callable"</span>,</span></span> )</span>;</span></span> }</span></span> </span> var</span> baseArgs</span> =</span> ArrayPrototypeSlice</span>.</span>call</span>(arguments</span>,</span> 1</span>)</span>,</span></span> baseArgsLength</span> =</span> baseArgs</span>.</span>length</span>,</span></span> fToBind</span> =</span> this</span>,</span></span> fNOP</span> =</span> function</span> () {},</span></span> fBound</span> =</span> function</span> () {</span></span> baseArgs</span>.</span>length</span> =</span> baseArgsLength</span>;</span> // reset to default base arguments</span></span> baseArgs</span>.</span>push</span>.</span>apply</span>(baseArgs</span>,</span> arguments)</span>;</span></span> return</span> fToBind</span>.</span>apply</span>(</span></span> fNOP</span>.</span>prototype</span>.</span>isPrototypeOf</span>(</span>this</span>)</span> ?</span> this</span> :</span> otherThis</span>,</span></span> baseArgs</span>,</span></span> )</span>;</span></span> };</span></span> </span> if</span> (</span>this</span>.</span>prototype)</span> {</span></span> // Function.prototype doesn't have a prototype property</span></span> fNOP</span>.</span>prototype</span> =</span> this</span>.</span>prototype</span>;</span></span> }</span></span> fBound</span>.</span>prototype</span> =</span> new</span> fNOP</span>()</span>;</span></span> </span> return</span> fBound</span>;</span></span> };</span></span> }</span>)()</span>;</span></span></code></pre> 在这几段代码中：</p> fNOP</span>.</span>prototype</span>.</span>isPrototypeOf</span>(</span>this</span>)</span> ?</span> this</span> :</span> otherThis</span>,</span></span> // 以及</span></span> if</span> (</span>this</span>.</span>prototype)</span> {</span></span> // Function.prototype doesn't have a prototype property</span></span> fNOP</span>.</span>prototype</span> =</span> this</span>.</span>prototype</span>;</span></span> }</span></span> fBound</span>.</span>prototype</span> =</span> new</span> fNOP</span>()</span>;</span></span></code></pre> 该 polyfill 检测了是否是使用 new 绑定，并修改 this 为 new 绑定的对象。</p> 判断 this 的步骤</a></h4> 根据上述优先级，可以得出判断 this 的结论（优先级从高到低）：</p> 函数是否在 new 中调用（new 绑定）？如果是，this 绑定到新创建的对象。const bar = new Foo()</code></p> </li> 函数是否通过 call/apply</code> 或者硬绑定调用（显式绑定）？如果是，this 绑定到指定的对象。const bar = foo.call(baz)</code></p> </li> 函数是否在某个上下文对象中调用（隐式绑定）？如果是，this 绑定到那个上下文对象上。const bar = obj.foo()</code></p> </li> 上述情况都不满足，那么就会使用默认绑定。</p> </li> </ol> 绑定例外</a></h3> 凡事都有例外，this 绑定也是如此。在某些情况下，代码看起来可能应用了某种绑定规则，但实际上应用的可能是默认规则。</p> 被忽略的 this</a></h4> 把 null 或者 undefined 作为 this 的绑定对象传入 call/apply</code> 与 bind 方法时，这些值会被忽略，从而应用默认绑定规则。</p> 也就是说，call/apply</code> 传入 null 或者 undefined 时与直接执行函数本身没有区别。</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> foo</span>.</span>call</span>(</span>null</span>)</span>;</span></span></code></pre> 这样使用 call/apply</code> 的作用是利用它们的特性来解决一些小问题。</p> 例如：展开数组</p> function</span> bar</span>(</span>a</span>,</span> b</span>) {</span></span> console</span>.</span>log</span>(a</span>,</span> b)</span>;</span></span> }</span></span> bar</span>.</span>apply</span>(</span>null</span>,</span> [</span>1</span>,</span> 2</span>])</span>;</span></span></code></pre> 当然，在 ES6 中可以使用展开运算符来传递参数：</p> bar</span>(</span>...</span>[</span>1</span>,</span> 2</span>])</span>;</span></span></code></pre> 又或是利用 bind 实现柯里化：</p> function</span> bar</span>(</span>a</span>,</span> b</span>) {</span></span> console</span>.</span>log</span>(a</span>,</span> b)</span>;</span></span> }</span></span> </span> const</span> baz</span> =</span> bar</span>.</span>bind</span>(</span>null</span>,</span> 1</span>)</span>;</span></span> baz</span>(</span>2</span>)</span>;</span></span></code></pre> 这里都是利用忽略 this 产生的一些副作用，但在某些情况下可能不安全，例如函数可能真的会使用到 this，这在非严格模式下可能会修改全局对象。</p> 如果确实需要使用这种方法，可以创建一个 DMZ（隔离）对象来代替 null。</p> const</span> dmz</span> =</span> Object</span>.</span>create</span>(</span>null</span>)</span>;</span></span> foo</span>.</span>call</span>(dmz</span>,</span> arg)</span></span></code></pre>间接引用</a></h4> 另外需要注意的是，在某些情况下我们可能会无意地创建一个函数的间接引用。间接引用最容易在赋值期间发生：</p> function</span> foo</span>() {</span></span> console</span>.</span>log</span>(</span>this</span>.</span>name)</span>;</span></span> }</span></span> const</span> o</span> =</span> {</span></span> foo</span>,</span></span> };</span></span> const</span> p</span> =</span> {};</span></span> (p</span>.</span>foo</span> =</span> o</span>.</span>foo)()</span>;</span></span></code></pre> 赋值表达式 p.foo = o.foo</code> 返回的是目标函数的引用，所以在这里调用实际上是在全局环境下直接调用 foo()</code>。根据之前的规则，这里会应用默认绑定。</p> Three.js 中的物体围绕运动 2022-09-02T00:00:00+00:00 使一个物体围绕另一个物体运动，主要是保证围绕物体的运动轨迹。在 three.js 中，一个 Mesh 实例可以通过其自身的 add()</code> 方法，去添加另一个实例。</p> 通过此方法就可以达成添加一个实例成为另一个实例的子节点。当父节点进行运动时（例如自身旋转），子节点也会跟随运动。</p> 在物体围绕运动中，我们可以把围绕物体添加到被围绕物体中。当父节点绕自身旋转时，离父节点有一定距离的围绕物体就会随着父节点的旋转而旋转。但这样做就会导致本不需要运动的父节点自身进行运动。</p> Object3D</a></h2> three.js 提供了一个可以在场景中添加的“点”。它与 Mesh 等物体不同，它相当于在场景中添加一个不可见的点。并且它也拥有 add()</code> 方法，也就可以添加其他物体到这个点中。</p> const</span> target</span> =</span> new</span> THREE</span>.</span>Object3D</span>()</span>;</span></span></code></pre> 当这个点进行旋转时，被添加的物体也就可以按照预想的方式进行运动。同时它也可以被添加到一个物体中，其位置就会与添加的物体相同，就不用手动为其设置相同的位置了。</p> const</span> target</span> =</span> new</span> THREE</span>.</span>Object3D</span>()</span>;</span></span> </span> const</span> material</span> =</span> new</span> THREE</span>.</span>MeshPhongMaterial</span>(</span>{</span></span> color</span>:</span> "#4d4d4d"</span>,</span></span> specular</span>:</span> "#fdfdfd"</span>,</span></span> emissive</span>:</span> "rgb(0,0,0)"</span>,</span></span> }</span>)</span>;</span></span> const</span> boxGeo</span> =</span> new</span> THREE</span>.</span>BoxGeometry</span>(</span>2</span>,</span> 2</span>,</span> 2</span>)</span>;</span></span> const</span> box</span> =</span> new</span> THREE</span>.</span>Mesh</span>(boxGeo</span>,</span> material)</span>;</span></span> box</span>.</span>castShadow</span> =</span> true</span>;</span></span> box</span>.</span>receiveShadow</span> =</span> true</span>;</span></span> box</span>.</span>position</span>.</span>set</span>(</span>0</span>,</span> 2</span>,</span> 0</span>)</span>;</span></span> box</span>.</span>add</span>(target)</span>;</span></span> three</span>.</span>scene</span>.</span>add</span>(box)</span>;</span></span> </span> const</span> sphereGeo</span> =</span> new</span> THREE</span>.</span>SphereGeometry</span>(</span>0.5</span>,</span> 32</span>,</span> 16</span>)</span>;</span></span> const</span> sphere</span> =</span> new</span> THREE</span>.</span>Mesh</span>(sphereGeo</span>,</span> material)</span>;</span></span> sphere</span>.</span>castShadow</span> =</span> true</span>;</span></span> sphere</span>.</span>receiveShadow</span> =</span> true</span>;</span></span> sphere</span>.</span>position</span>.</span>set</span>(</span>-</span>2</span>,</span> 2</span>,</span> 0</span>)</span>;</span></span> </span> // target.position.set(0, 2, 0);</span></span> target</span>.</span>add</span>(sphere)</span>;</span></span> three</span>.</span>scene</span>.</span>add</span>(target)</span>;</span></span></code></pre> </p> 相对位置</a></h3> 如果被围绕的物体没有通过 add()</code> 方法添加 Object3D，那么就需要手动添加 Object3D 到场景中，并设置到特定的位置。可以通过其 position.set()</code> 方法设置。这对于 Object3D 本身来说是相对于世界坐标位置的。</p> 如果被围绕物体已经添加到场景中，通过 add()</code> 方法添加 Object3D 也会被添加到场景中。且它的位置与父节点相同。</p> 对于围绕物体来说，其自身被 Object3D 通过 add()</code> 方法添加到 Object3D 中。而它通过 position.set()</code> 进行设置时，就是相对与 Object3D 已经设置过的位置进行设置。</p> box</span>.</span>position</span>.</span>set</span>(</span>0</span>,</span> 2</span>,</span> 0</span>)</span>;</span></span> box</span>.</span>add</span>(target)</span>;</span></span> target</span>.</span>add</span>(sphere)</span>;</span></span> sphere</span>.</span>position</span>.</span>set</span>(</span>-</span>2</span>,</span> 0</span>,</span> 0</span>)</span>;</span></span> // sphere position in world is (-2, 2, 0);</span></span></code></pre>获取世界位置</a></h3> 默认情况下 Mesh.position</code> 得到是其自身的相对位置。获取世界全局位置需要一个 Vector3 来保存，再使用 Mesh.getWorldPosition</code> 来获取。</p> const</span> position</span> =</span> new</span> THREE</span>.</span>Vector3</span>()</span>;</span></span> earth</span>.</span>getWorldPosition</span>(position)</span>;</span></span></code></pre>Demo</a></h2> 组件泛型实例-封装可复用的表单组件 2022-08-12T00:00:00+00:00 当前很多 UI 库都会为我们集成可复用的 Form 组件，并且是开箱即用。但有时候我们往往可能需要为自己的组件集成 Form。单纯的手动管理所有的状态可能不是件理想的活，尤其是表单验证。</p> React Hook Forms</a> 为我们提供了完善的状态管理，并且可以集成到任何组件中去。</p> 你可能会问，如今已经有了像是 MUI、Ant Design 等此类优秀的组件库，为什么还需要使用 React Hook Forms 来管理表单。</p> MUI: The React component library you always wanted</a></p> 虽然一些优秀的成熟组件库会为我们提供良好的表单解决方案，但它终究需要与组件库一起使用。而并非只是提供表单的状态管理，并没有完全的与组件库解耦合。</p> 同时，当我们使用诸如 Daisyui</a> 等此类的 CSS 组件时，它们是与状态完全解耦合的。我们需要自己为其维护状态。</p> Hook our form</a></h2> 对于一个表单来说，提供的表单项越多，所需要的状态管理就越繁琐。不仅仅是状态管理，后续的表单验证才是一个表单的核心所在。</p> React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以在开发时验证表单类型。而表单的数据类型也是后续封装通用组件较为繁琐的一个地方。</p> <RUASandpack template="react-ts" files={{ '/App.tsx': sandpack['generic-component-encapsulate-reusable-component'].hookApp, }} customSetup={{ dependencies: { '@emotion/react': '^11.10.0', '@emotion/styled': '^11.10.0', 'react-hook-form': '^7.34.0', }, }} /></p> React Hook Forms 在使用方面，使用了一个 register</code> 函数代替了我们为每个表单项管理状态的步骤。从写法上就可以看出，这个函数返回了我们的表单所需要的属性，以及其状态。</p> <</span>input</span> type</span>=</span>"text"</span> id</span>=</span>"firstname"</span> {</span>...</span>register</span>(</span>"firstName"</span>)</span>}</span> /></span></span></code></pre> 在表单提交方面，handleSubmit</code> 方法接受一个回调，其参数就是表单输入后的状态。</p> const</span> onSubmit</span> =</span> handleSubmit</span>(</span>(</span>data</span>)</span> =></span> console</span>.</span>log</span>(data))</span>;</span></span></code></pre> 表单验证通过后，就可以成功调用这个函数，以实现我们的表单提交。</p> 这是一段最基础的用法，没有表单验证提示，仅仅只是接受任何用户输入的数据。并且同样的组件也没有实现复用。</p> Input 组件</a></h2> 封装一个可复用的 Input</code> 组件可能是再简单不过的事情了，对于其参数类型，主要部分还是来自于 HTMLInput</code> 。我们只需要个别定义的属性，再利用剩余参数将其全部赋值给真正的 input</code></p> export type</span> FormInputProps</span> =</span> {</span></span> label</span>?:</span> string</span> \|</span> undefined</span>;</span></span> }</span> &</span> DetailedHTMLProps</span><</span>InputHTMLAttributes</span><</span>HTMLInputElement</span>></span>,</span> HTMLInputElement</span>></span>;</span></span></code></pre>const</span> Input</span> =</span> ({</span> name</span>,</span> label</span>,</span> ...</span>rest</span> }</span>:</span> FormInputProps</span>)</span> =></span> {</span></span> return</span> (</span></span> <></span></span> <</span>label</span> htmlFor</span>=</span>{</span>name</span>}</span>></span>{</span>label</span>}</span></</span>label</span>></span></span> </span> <</span>S.Wrapper</span>></span></span> <</span>S.Input</span> name</span>=</span>{</span>name</span>} {</span>...</span>rest</span>}</span> /></span></span> </</span>S.Wrapper</span>></span></span> </></span></span> )</span>;</span></span> };</span></span></code></pre> 用起来自然也是和常见的组件一样方便：</p> <</span>div</span>></span></span> <</span>Input</span> name</span>=</span>"firstname"</span> label</span>=</span>"First name:"</span> /></span></span> </</span>div</span>></span></span> </span> <</span>div</span>></span></span> <</span>Input</span> name</span>=</span>"lastname"</span> label</span>=</span>"Last name:"</span> /></span></span> </</span>div</span>></span></span></code></pre> 但是如果仅仅只是这样，我们的组件还不能与 React Hook Forms 一起工作。因为其核心部分 register</code> 函数还无法传递给我们的 Input</code> 组件。也就是说我们的组件现在还是不可控的，这时候再尝试提交就会发现无法获取其状态。</p> 当然我们不能简单的将 register</code> 函数塞给 Input</code> 组件，因为它还没有合适的签名。register</code> 函数会根据表单的数据签名和不同的表单项来实现自己的签名。</p> 从 register</code> 函数的签名中就可以看出，它接受一个泛型，该泛型就是对应的表单项类型。</p> register</span>:</span> <</span>"firstName"</span>></span>(</span>name</span>:</span> "</span>firstName</span>"</span>,</span> options</span>?:</span> ...</span>)</span></span></code></pre> 也就是 FormData</code> 中的 firstName</code> ：</p> type</span> FormData</span> =</span> {</span></span> firstName</span>:</span> string</span>;</span></span> lastName</span>:</span> string</span>;</span></span> favorite</span>:</span> Pet</span>;</span></span> };</span></span></code></pre> 没错，要想正确的给组件中的 register</code> 函数签名，我们就得给我们的函数式组件上个泛型。</p> 泛型</a></h2> 在考虑给组件添加一个泛型之前，需要先简单的了解下泛型是如何工作的。</p> 一个函数的泛型可以非常的简单，它代表了一个任意的类型值（当然也可以对其进行约束）。并根据指定的参数为泛型时，自动推断该类型值。</p> const</span> logAndReturn</span> =</span> <</span>T</span> extends unknown</span>></span>(</span>target</span>:</span> T</span>)</span> =></span> {</span></span> console</span>.</span>log</span>(target)</span>;</span></span> return</span> target</span>;</span></span> };</span></span> </span> // const logAndReturn: <42>(target: 42) => 42</span></span> logAndReturn</span>(</span>42</span>)</span>;</span></span> // const logAndReturn: <"42">(target: "42") => "42"</span></span> logAndReturn</span>(</span>"42"</span>)</span>;</span></span></code></pre>类型别名中的泛型</a></h3> 类型别名中的泛型与函数不同的是，它需要手动传递一个函数的泛型值（或来自其他地方的泛型），并根据该泛型来决定其值。并且如果泛型有约束的话，还需要符合其约束。</p> 例如，我们有一个描述个人的类型别名：</p> type</span> Person</span><</span>T</span> extends number</span> \|</span> string</span>></span> =</span> {</span></span> name</span>:</span> string</span>;</span></span> age</span>:</span> number</span>;</span></span> favorite</span>:</span> T</span>;</span></span> };</span></span></code></pre> 而我们需要编写一个函数，根据其 favorite</code> 来决定打印的值。函数大概长这样：</p> const</span> sayIt</span> =</span> <</span>T</span> extends number</span> \|</span> string</span>></span>(</span>p</span>:</span> Person</span><</span>T</span>></span>)</span> =></span> {</span></span> const</span> type</span> = typeof</span> p</span>.</span>favorite</span>;</span></span> switch</span> (type)</span> {</span></span> case</span> "string"</span>:</span></span> console</span>.</span>log</span>(</span>`My favorite word is: </span>${</span>p</span>.</span>favorite</span>}</span>`</span>)</span>;</span></span> return</span>;</span></span> case</span> "number"</span>:</span></span> console</span>.</span>log</span>(</span>`My favorite number is: </span>${</span>p</span>.</span>favorite</span>}</span>`</span>)</span>;</span></span> return</span>;</span></span> }</span></span> };</span></span></code></pre> 当指定参数为 p: Person<T></code> 时，就需要将函数的泛型传递给类型别名。且类型别名中的泛型约束在了 <T extends number \| string></code> 之间，函数必须保证使其子类型。否则就会提示无法满足其类型。</p> 和参数类型，泛型也是向下兼容的，只要保证其类型是子类型即可。也就是说这样也是可以的 const sayIt = <T extends 42>(p: Person<T>) => {}</code> 。数字 42 是 number</code> 类型的子类型。</p> 随后在调用函数时，就能发现泛型给我们带来的作用了。</p> React 中的泛型</a></h3> 我们的 React 函数组件也是一个函数，对于泛型的规则同样适用。</p> 来看一个简单的小组件，该组件可以以一个常见的对象类型 Record<string, unknown></code> 来根据指定的 key 访问其值，并展示在 DOM 上。</p> <RUASandpack template="react-ts" files={{ '/App.tsx': sandpack['generic-component-encapsulate-reusable-component'].genericApp, '/Child.tsx': sandpack['generic-component-encapsulate-reusable-component'].genericChild, }} /></p> 例如，这样的一个值：</p> const</span> testData</span> =</span> {</span></span> firstName</span>:</span> "xfy"</span>,</span></span> lastName</span>:</span> "xfyxfy"</span>,</span></span> };</span></span></code></pre> 当传递其对应的 key 时，我们的子组件就会展示对应的属性。也就是 data[key]</code> ，这是再简单不过的一个属性访问方式了。</p> <</span>Child</span> data</span>=</span>{</span>testData</span>}</span> name</span>=</span>"firstName"</span> /></span></span></code></pre> 但不仅如此，我们还希望我们的子组件能够根据已经存在的值，推断出我们能够传递的 key。</p> 这正是泛型的作用。</p> 首先，我们子组件的参数签名必然需要一个泛型。并且我们将泛型约束在为一个常见的对象 Record<string, unknown></code>，且不在乎属性值具体是什么类型（unknown）。</p> type</span> Props</span><</span>T</span> extends</span> Record</span><</span>string</span>,</span> unknown</span>>></span> =</span> {</span></span> name</span>: keyof</span> T</span>;</span></span> data</span>:</span> T</span>;</span></span> };</span></span></code></pre> 这便是我们组件的参数具体的签名。还记得上述类型别名需要将函数的泛型传递给它吗？接下来就是要给函数式组件添加一个泛型，并将其传递给 Props</code> 。</p> 我们的组件也是一个标准的函数，所以接下来就简单多了。只需要将泛型正确的约束，并传递给别名即可。</p> const</span> Child</span> =</span> <</span>T</span> extends</span> Record</span><</span>string</span>,</span> unknown</span>>></span>({</span></span> name</span>,</span></span> data</span>,</span></span> }</span>:</span> Props</span><</span>T</span>></span>)</span> =></span> {};</span></span></code></pre>const</span> Child</span> =</span> <</span>T</span> extends</span> Record</span><</span>string</span>,</span> unknown</span>>></span>({</span> name</span>,</span> data</span> }</span>:</span> Props</span><</span>T</span>></span>)</span> =></span> {</span></span> const</span> [</span>showName</span>,</span> setShowName</span>]</span> =</span> useState</span><</span>T[</span>keyof</span> T]</span>></span>()</span>;</span></span> const</span> valid</span> =</span> ()</span> =></span> {</span></span> console</span>.</span>log</span>(data[name])</span>;</span></span> setShowName</span>(data[name])</span>;</span></span> };</span></span> </span> return</span> (</span></span> <></span></span> <</span>div</span>></span>{</span>name</span>}</span></</span>div</span>></span></span> <</span>button</span> onClick</span>=</span>{</span>valid</span>}</span>></span>Show </span>{</span>name</span>}</span></</span>button</span>></span></span> </span> <</span>div</span>></span>{</span>JSON</span>.</span>stringify</span>(showName)</span>}</span></</span>div</span>></span></span> </></span></span> )</span>;</span></span> };</span></span></code></pre>带有泛型的 Input 组件</a></h2> register</code> 函数对表单项的验证与上述较为类似，它也会根据表单项的 key 来决定传递对应的 name。为了满足 register</code> 函数，可复用的 Input 组件就得需要一个泛型，用来接受不同的表单数据类型。</p> React hook forms 为我们提前准备好了适用于 register</code> 函数的类型别名 UseFormRegister</code> ，它会接受一个泛型，该泛型就是我们的表单数据类型。</p> 所以 register</code> 函数的签名看起来就像这样 register?: UseFormRegister<T>;</code> 这里的 T</code> 就是我们的表单类型。但是我们还不知道传入当前组件中的表单类型是什么，所以我们的组件参数签名也需要一个泛型。</p> 所以这里我们的组件参数看起来是这样的：</p> export type</span> FormInputProps</span><</span>TFormValues</span>></span> =</span> {</span></span> name</span>:</span> Path</span><</span>TFormValues</span>></span>;</span></span> label</span>?:</span> string</span> \|</span> undefined</span>;</span></span> rules</span>?:</span> RegisterOptions</span>;</span></span> register</span>?:</span> UseFormRegister</span><</span>TFormValues</span>></span>;</span></span> }</span> &</span> DetailedHTMLProps</span><</span>InputHTMLAttributes</span><</span>HTMLInputElement</span>></span>,</span> HTMLInputElement</span>></span>;</span></span></code></pre> 值得注意的是，这里给 input</code> 使用的 name 属性。因为 register</code> 函数注册时使用的名称需要确保为表单类型的中的一个。所以这里需要使用 React hook forms 导出的 Path<TFormValues></code> 类型，以配合 register</code> 函数。</p> 这里就和上述泛型组件很相似了，接下来要做的就是将组件的泛型传递给参数签名：</p> const</span> Input</span> =</span> <</span>T</span> extends</span> Record</span><</span>string</span>,</span> unknown</span>>></span>({</span></span> name</span>,</span></span> label</span>,</span></span> ...</span>rest</span></span> }</span>:</span> FormInputProps</span><</span>T</span>></span>)</span> =></span> {};</span></span></code></pre> 这里给组件的泛型小小的约束一下，我们希望传递过来的表单类型是一个普通的对象结构 <T extends Record<string, unknown>></code> 。</p> 不仅如此，还不能忘了 register</code> 函数还需要注册在 DOM 上。</p> <</span>S.Input</span></span> err</span>=</span>{</span>!!</span>errorMsg</span>}</span></span> name</span>=</span>{</span>name</span>}</span></span> {</span>...</span>(register</span> &&</span> register</span>(name</span>,</span> rules))</span>}</span></span> {</span>...</span>rest</span>}</span></span> /></span></span></code></pre> 得益于泛型的功劳，我们将 register</code> 函数传递给 Input</code> 组件时，我们的组件就知道了这次表单的类型。并且确定了 name</code> 属性的类型。</p> 这是因为 register</code> 函数本身的签名：const register: UseFormRegister<FormData></code> 。这才使得我们的组件成功接受到了泛型。</p> 再添加一些 rules</code> 以及验证未通过时的提示，这样一个可复用的 React hook form 组件就封装好了。</p> <</span>Input</span></span> name</span>=</span>"lastName"</span></span> label</span>=</span>"Last name:"</span></span> placeholder</span>=</span>"Last Name"</span></span> register</span>=</span>{</span>register</span>}</span></span> rules</span>=</span>{{</span> required</span>:</span> true</span> }}</span></span> errorMsg</span>=</span>{</span>errors</span>.</span>lastName</span> &&</span> "Please input"</span>}</span></span> /></span></span></code></pre> 现代前端的Web应用路由-为React打造一个迷你路由器 2022-08-03T00:00:00+00:00 路由不仅仅只是网络的代名词，它更像是一种表达路径的概念。与网络中的路由相似，前端中的页面路由也是带领我们前往指定的地方。</p> 现代前端的 Web 应用路由</a></h2> 时代在变迁，过去，Web 应用的基本架构使用了一种不同于现代路由的方法。曾经的架构通常都是由后端生成的 HTML 模板来发送给浏览器。当我们单击一个标签导航到另一个页面时，浏览器会发送一个新的请求给服务器，然后服务器再将对应的页面渲染好发过来。也就是说，每个请求都会刷新页面。</p> 自那时起，Web 服务器在设计和构造方面经历了很多发展（前端也是）。如今，JavaScript 框架和浏览器技术已经足够先进，允许我们利用 JavaScript 在客户端渲染 HTML 页面，以至于 Web 应用可以采用更独特的前后的分离机制。在第一次由服务端下发了对应的 JavaScript 代码后，后续的工作就全部交给客户端 JavaScript。而后端服务器负责发送原始数据，通常是 JSON 等。</p> </p> 在旧架构中，动态内容由 Web 服务器生成，服务器会在数据库中获取数据，并利用数据渲染 HTML 模板发送给浏览器。每次切换页面都会获取新的由服务端渲染的页面发送给浏览器。</p> 在新架构中，服务端通常只下发主要的 JavaScript 和基本的 HTML 框架。之后页面的渲染就会由我们的 JavaScript 接管，后续的动态内容也还是由服务器在数据库中获取，但不同的是，后续数据由服务器发送原始格式（JSON 等）。前端 JavaScript 由 AJAX 等技术获取到了新数据，再在客户端完成新的 HTML 渲染。</p> 好像 SPA 的大概就是将原先服务端干的活交给了前端的 JavaScript 来做。事实上，确实如此。AJAX 技术的发展，带动了客户端 JavaScript 崛起，使得原先需要在服务端才能完成渲染的动态内容，现在交给 JavaScript 就可以了。</p> 这么做的好处有很多：</p> 主要渲染工作在客户端，减少服务器的压力。简单的场景甚至只需要静态服务器。</li> 新内容获取只需要少量交互，而不是服务端发送渲染好的 HTML 页面。</li> 可以利用 JavaScript 在客户端修改和渲染任意内容，同时无需刷新整个页面。</li> ……</li> </ul> 当然同时也有一些缺点，目前最主要的痛点：</p> 首屏/白屏时间：由于 HTML 内容需要客户端 JavaScript 完成渲染，前端架构以及多种因素会影响首次内容的出现时间。</li> 爬虫/SEO：由于 HTML 内容需要客户端 JavaScript 完成渲染，早期的爬虫可能不会在浏览器环境下执行 JavaScript，这就导致了根本爬取不到 HTML 内容。</li> </ul> Google 的爬虫貌似已经可以爬取 SPA。</p> </blockquote> React 的路由</a></h2> React 是现代众多成熟的 SPA 应用框架之一，它自然也需要使用路由来切换对应的组件。React Router 是一个成熟的 React 路由组件库，它实现了许多功能，同时也非常还用。</p> 首先来看下本次路由的基本工作原理，本质上很简单，我们需要一个可以渲染任意组件的父组件 <Router /></code> 或者叫 <router-view></code> 之类的。然后再根据浏览器地址的变化，渲染注册路由时对应的组件即可。</p> </p> 配置文件</a></h3> 这里选择类似 Vue Router 的配置文件风格，而不是使用类似 <Route /></code> 这样的 DOM 结构来注册路由。我们的目的是为了实现一个非常简单的迷你路由器，所以配置文件自然也就很简单：</p> import</span> {</span> lazy</span> }</span> from</span> "react"</span>;</span></span> </span> export default</span> [</span></span> {</span></span> path</span>:</span> "/"</span>,</span></span> component</span>:</span> lazy</span>(</span>()</span> => import</span>(</span>"../pages/Home"</span>))</span>,</span></span> },</span></span> {</span></span> path</span>:</span> "/about"</span>,</span></span> component</span>:</span> lazy</span>(</span>()</span> => import</span>(</span>"../pages/About"</span>))</span>,</span></span> },</span></span> ]</span>;</span></span></code></pre> 一个 path</code> 属性，对应了浏览器的地址，或者说 location.pathname</code>；一个 component</code> 属性，对应了到该地址时所需要渲染的组件。</p> 甚至还可以使用 lazy()</code> 配合 <Suspense></code> 来实现代码分割。</p> 展示路由</a></h3> 一个非常简单的路由就这样注册好了，接下来就是将对应的组件展示出来。我们都知道，JSX 最终会被 babel 转义为渲染函数，而一个组件的 <Home /></code> 写法，基本等同于 React.createElement(Home)</code>。元素渲染 – React (reactjs.org)</a></p> 所以动态的渲染指定的组件基本上也就很容易解决，接下来的思路也就很简单了，我们需要：</p> 一个状态：记录当前地址 location.pathname</code>；</li> 根据当前地址在配置文件中寻找对应注册的组件，并将它渲染出来；</li> 一个副作用：当用户手动切换路由时，该组件需要重新渲染为对应注册的路由；</li> </ul> 先不考虑切换路由的问题，前两个基本上已经就实现了：</p> // Router.tsx</span></span> import</span> React</span>, {</span> useState</span>,</span> Suspense</span> }</span> from</span> "react"</span>;</span></span> import</span> routes</span> from</span> "./routes"</span>;</span></span> </span> const</span> Router</span>:</span> React</span>.</span>FC</span> =</span> ()</span> =></span> {</span></span> // 获取地址，并保存到状态中</span></span> const</span> [</span>path</span>,</span> setPath</span>]</span> =</span> useState</span>(location</span>.</span>pathname)</span>;</span></span> // 根据地址，寻找对应的组件</span></span> const</span> element</span> =</span> routes</span>.</span>find</span>(</span>(</span>route</span>)</span> =></span> route</span>.</span>path</span> ===</span> path)</span>?.</span>component</span>;</span></span> </span> return</span> (</span></span> <></span></span> <</span>Suspense</span> fallback</span>=</span>{</span><</span>p</span>></span>loading...</span></</span>p</span>></span>}</span>></span></span> {</span>/* 使用 React.createElement() 渲染组件 /</span>}</span></span> {</span>element</span> ?</span> React</span>.</span>createElement</span>(element)</span> : void</span> 0</span>}</span></span> </</span>Suspense</span>></span></span> </></span></span> )</span>;</span></span> };</span></span> </span> export default</span> Router</span>;</span></span></code></pre> 看上去很简单，事实上，确实很简单。</p> 现在我们直接从地址栏访问对应的路由，我们的 Router 组件应该就可以根据已经注册好的路由配置文件来找到正确的组件，并将其渲染出来了。</p> 切换路由</a></h3> 到目前为止，我们实现了根据对应地址访问到对应组件的功能。这是一个路由必不可少的功能，但它还不能称得上是一个简单的路由器，因为它还无法处理用户手动切换的路由，也就是点击标签前往对应的页面。</p> 简单梳理一下我们需要实现的功能：</p> 一个 Link 组件，用于点击后导航到指定的地址；</li> 导航到地址后，还要修改浏览器的地址栏，并不真正的发送请求；</li> 通知 Router 组件，地址已经改变，重新渲染对应路由的组件；</li> </ul> import</span> React</span> from</span> "react"</span>;</span></span> </span> interface</span> Props</span> {</span></span> to</span>:</span> string</span>;</span></span> children</span>?:</span> React</span>.</span>ReactNode</span>;</span></span> }</span></span> </span> const</span> RouterLink</span>:</span> React</span>.</span>FC</span><</span>Props</span>></span> =</span> ({</span> to</span>,</span> children</span> }</span>:</span> Props</span>)</span> =></span> {</span></span> /</span></span> 处理点击事件</span></span> * 创建自定义事件监听器</span></span> * 并将 path 发送给 router</span></span> * </span>@</span>param</span> e</span></span> /</span></span> const</span> handleClick</span> =</span> (</span>e</span>:</span> React</span>.</span>MouseEvent</span><</span>HTMLAnchorElement</span>,</span> MouseEvent</span>></span>)</span> =></span> {</span></span> e</span>.</span>preventDefault</span>()</span>;</span></span> const</span> nowPath</span> =</span> location</span>.</span>pathname</span>;</span></span> if</span> (nowPath</span> ===</span> to)</span> return</span>;</span> // 原地跳转</span></span> </span> history</span>.</span>pushState</span>(</span>null</span>,</span> ""</span>,</span> to)</span>;</span></span> document</span>.</span>dispatchEvent</span>(</span></span> new</span> CustomEvent</span><</span>string</span>></span>(</span>"route"</span>, {</span></span> detail</span>:</span> to</span>,</span></span> }</span>)</span>,</span></span> )</span>;</span></span> };</span></span> </span> return</span> (</span></span> <></span></span> <</span>a</span> href</span>=</span>""</span> onClick</span>=</span>{</span>handleClick</span>}</span>></span></span> {</span>children</span>}</span></span> </</span>a</span>></span></span> </></span></span> )</span>;</span></span> };</span></span> </span> export default</span> RouterLink</span>;</span></span></code></pre> 我们将 Link 组件实际的渲染为一个 <a></a></code> 标签，这样就能模拟跳转到指定的导航了。这个组件它接收两个参数：{ to, children }</code>，分别是前往的路由地址和标签的内容。标签的内容 children 就是展示在 a 标签内的文本。</p> 我们需要解决的第一个问题就是点击标签后跳转到指定的导航，这里其实需要分成两个部分，第一个部分是悄悄的修改浏览器地址栏，第二个部分则是通知 Router 组件去渲染对应的组件。</p> 修改地址栏很简单，利用到浏览器的 history API，可以很方便的修改 pathName</code> 而不发送实际请求，这里只需要修改到第一个参数 to 即可：history.pushState(null, '', to);</code>。</p> 但使用 pushState()</code> 并不会发出任何通知，我们需要自己实现去通知 Router 组件地址已经变化。本来像利用第三方库来实现一个发布/订阅的模型的，但这样这个路由器可能就没有那么迷你了。最后发现利用 HTML 的 CustomEvent 可以实现一个简单的消息订阅与发布模型。</p> HTML 自定义事件也很简单，我们在对应的 DOM 上 dispatchEvent</code> 即可触发一个事件，而触发的这个事件，就是 CustomEvent</code> 的实例，甚至还能传递一些信息。在这里，我们将路由地址传递过去。</p> document</span>.</span>dispatchEvent</span>(</span></span> new</span> CustomEvent</span><</span>string</span>></span>(</span>"route"</span>, {</span></span> detail</span>:</span> to</span>,</span></span> }</span>)</span>,</span></span> )</span>;</span></span></code></pre> 而在 Router 组件中，只需要和以前一样在对应的 DOM 上去监听一个事件，这个事件就是刚刚发布的 CustomEvent</code> 的实例。</p> // Router.tsx</span></span> const</span> handleRoute</span> =</span> (</span>e</span>:</span> CustomEvent</span><</span>string</span>></span>)</span> =></span> {</span></span> console</span>.</span>log</span>(e</span>.</span>detail)</span>;</span></span> setPath</span>(e</span>.</span>detail)</span>;</span></span> };</span></span> </span> useEffect</span>(</span>()</span> =></span> {</span></span> /</span></span> 监听自定义 route 事件</span></span> * 并根据 path 修改路由</span></span> /</span></span> document</span>.</span>addEventListener</span>(</span>"route"</span>,</span> handleRoute</span> as</span> EventListener</span>)</span>;</span></span> </span> return</span> ()</span> =></span> {</span></span> // 清除副作用</span></span> document</span>.</span>removeEventListener</span>(</span>"route"</span>,</span> handleRoute</span> as</span> EventListener</span>)</span>;</span></span> };</span></span> },</span> [])</span>;</span></span></code></pre> 在 Router 组件中，根据接收到的变化，将新的地址保存到状态中，并触发组件重新渲染。</p> 这样一个最简单的 React 路由就做好了。</p> Vue 的路由</a></h2> 与 React 同理，二者的路由切换都差不多，其主要思路还是使用自定义事件来订阅路由切换的请求。但 Vue 的具体实现与 React 还是有点不同的。</p> 配置文件</a></h3> 路由的配置文件还是同理，不同的是，Vue 的异步组件需要在引入时同时引入一个 Loading 组件来实现 Loading 的效果：</p> import</span> {</span> defineAsyncComponent</span> }</span> from</span> "vue"</span>;</span></span> import</span> Loading</span> from</span> "../components/common/Loading.vue"</span>;</span></span> </span> export default</span> [</span></span> {</span></span> path</span>:</span> "/"</span>,</span></span> name</span>:</span> "Home"</span>,</span></span> component</span>:</span> defineAsyncComponent</span>(</span>{</span></span> loader</span>:</span> ()</span> => import</span>(</span>"../views/Home.vue"</span>)</span>,</span></span> loadingComponent</span>:</span> Loading</span>,</span></span> }</span>)</span>,</span></span> },</span></span> {</span></span> path</span>:</span> "/about"</span>,</span></span> name</span>:</span> "About"</span>,</span></span> component</span>:</span> defineAsyncComponent</span>(</span>{</span></span> loader</span>:</span> ()</span> => import</span>(</span>"../views/About.vue"</span>)</span>,</span></span> loadingComponent</span>:</span> Loading</span>,</span></span> }</span>)</span>,</span></span> },</span></span> ]</span>;</span></span></code></pre>展示路由</a></h3> 同理，Vue 也是利用根据条件来渲染对应路由的组件。不同的是，我们可以使用模板语法来实现，也可以利用 render()</code> 方法来直接渲染组件。</p> 首先来看看和 React 类似的 render()</code> 方法。在 Vue3 中，使用 setup()</code> 方法后，可以直接返回一个 createVNode()</code> 的函数，这就是 render()</code> 方法。所以可以直接写 TypeScript 文件。</p> 与 React 不同的地方在于，React 每次调用 setPath(e.detail)</code> 存储状态时都会重新渲染组件，从而重新执行组件的函数，获取到对应的路由组件。</p> 但 Vue 不同，如果我们仅仅将路由名称 e.detail</code> 保存到状态，但没有实际在 VNode 中使用的话，更新状态时不会重新渲染组件的，也就是说，不会获取到对应的路由组件。所以最佳的办法就是将整个路由组件保存到状态，可保存整个组件无疑太过庞大。好在 Vue3 给了我们另一种解决方法：shallowRef()</code>。它会创建一个跟踪自身 .value</code> 变化的 ref，但不会使其值也变成响应式的。</p> import</span> {</span> createVNode</span>,</span> defineComponent</span>,</span> shallowRef</span> }</span> from</span> "vue"</span>;</span></span> import</span> routes</span> from</span> "./routes"</span>;</span></span> </span> export default</span> defineComponent</span>(</span>{</span></span> name</span>:</span> "RouterView"</span>,</span></span> setup</span>() {</span></span> let</span> currentPath</span> =</span> window</span>.</span>location</span>.</span>pathname</span>;</span></span> const</span> component</span> =</span> shallowRef</span>(</span></span> routes</span>.</span>find</span>(</span>(</span>item</span>)</span> =></span> item</span>.</span>path</span> ===</span> currentPath)</span>?.</span>component</span> ??</span></span> "Note found"</span>,</span></span> )</span>;</span></span> </span> const</span> handleEvent</span> =</span> (</span>e</span>:</span> CustomEvent</span><</span>string</span>></span>)</span> =></span> {</span></span> console</span>.</span>log</span>(e</span>.</span>detail)</span>;</span></span> currentPath</span> =</span> e</span>.</span>detail</span>;</span></span> component</span>.</span>value</span> =</span></span> routes</span>.</span>find</span>(</span>(</span>item</span>)</span> =></span> item</span>.</span>path</span> ===</span> currentPath)</span>?.</span>component</span> ??</span></span> "Note found"</span>;</span></span> };</span></span> </span> document</span>.</span>addEventListener</span>(</span>"route"</span>,</span> handleEvent</span> as</span> EventListener</span>)</span>;</span></span> </span> return</span> ()</span> =></span> createVNode</span>(component</span>.</span>value)</span>;</span></span> },</span></span> }</span>)</span>;</span></span></code></pre> 而使用模板语法主要是利用到了全局的 component</code> 组件，其他部分与 render()</code> 方法相同：</p> <</span>template</span>></span></span> <</span>component</span> :is</span>=</span>"component"</span>></</span>component</span>></span></span> </</span>template</span>></span></span> </span> <</span>script</span> lang</span>=</span>"ts"</span> setup</span>></span></span> import</span> {</span> onUpdated</span>,</span> shallowRef</span> }</span> from</span> "vue"</span>;</span></span> import</span> routes</span> from</span> "./routes"</span>;</span></span> </span> let</span> currentPath</span> =</span> window</span>.</span>location</span>.</span>pathname</span>;</span></span> const</span> component</span> =</span> shallowRef</span>(</span></span> routes</span>.</span>find</span>(</span>(</span>item</span>)</span> =></span> item</span>.</span>path</span> ===</span> currentPath)</span>?.</span>component</span>,</span></span> )</span>;</span></span> </span> const</span> handleEvent</span> =</span> (</span>e</span>:</span> CustomEvent</span><</span>string</span>></span>)</span> =></span> {</span></span> console</span>.</span>log</span>(e</span>.</span>detail)</span>;</span></span> currentPath</span> =</span> e</span>.</span>detail</span>;</span></span> component</span>.</span>value</span> =</span> routes</span>.</span>find</span>(</span>(</span>item</span>)</span> =></span> item</span>.</span>path</span> ===</span> currentPath)</span>?.</span>component</span>;</span></span> };</span></span> </span> document</span>.</span>addEventListener</span>(</span>"route"</span>,</span> handleEvent</span> as</span> EventListener</span>)</span>;</span></span> </span> onUpdated</span>(</span>()</span> =></span> {</span></span> console</span>.</span>log</span>(component)</span>;</span></span> }</span>)</span>;</span></span> </</span>script</span>></span></span></code></pre>总结</a></h2> 如今的 JavaScript 做能做到的比以前更加强大，配合多种 HTML API，可以将曾经不可能实现的事变为现实。这个简单的迷你路由，主要的思路就是利用 HTML API 来通知 Router 组件该渲染哪个组件了。配合上 lazy()</code> 方法，甚至还能实现代码分割。</p> Demo</a></h2> DefectingCat/react-tiny-router: A tiny react router. (github.com)</a></p> Setting up DocSearch for next.js 2022-04-18T00:00:00+00:00 I use next.js and mdx plugin to build my blog site. It's a next.js SSG project.</p> Also it's a JAMStack site. So i need a extenal search engine.</p> The Algolia is my first choice. We can build our own Algolia front UI, or use DocSearch</a></p> Purpose</a></h2> Algolia split DocSearch into to parts:</p> A cralwer to crawl our sites.</p> </li> A frontend UI liburary to show search result.</p> </li> </ul> In legacy edition, Algolia provide a docsearch-scraper to build our own crawler.</p> Although it's still can plug it to DocSearch v3. But now it's deprecated.</p> They introduct the Algolia Crawler web interface</a> to manage the crawler.</p> But i can't login with my Algolia account.</p> So i need find another way to generate my post index.</p> Index format</a></h2> The DocSearch frontend UI read result as specific format. We just need to provide the same format to DocSearch.</p> Then DocSearch fronted UI can works.</p> So we need post same format to Algolia.</p> Push our data</a></h2> Algolia provide JavaScript API Client to push data to Algolia.</p> yarn add algoliasearch</pre> </TabItem> npm install algoliasearch</pre> </TabItem> </Tab> The client will help us push data to Algolia. We just need to prepare out data.</p> Docsearch format</a></h3> Because Docsearch read result as specific format. our data need to be like this:</p> {</span></span> content</span>:</span> null</span>,</span></span> hierarchy</span>: {</span></span> lvl0</span>:</span> 'Post'</span>,</span></span> lvl1</span>:</span> slug</span>,</span></span> lvl2</span>:</span> heading</span>,</span></span> },</span></span> type</span>:</span> 'lvl2'</span>,</span></span> objectID</span>:</span> 'id'</span>,</span></span> url</span>:</span> 'url'</span>,</span></span> }</span></span></code></pre>Generate format</a></h3> For generate our data, we need:</p> dotenv</a>: read Algolia app ID and admin key in .env</code> file.</li> algoliasearch</a>: JavaScript API client.</li> fs</code> and path</code>: read post file.</li> nanoid</a> (optional): generate unique objectID</code>.</li> </ul> For use ECMAScript import</code>, we need set file suffix with .mjs</code>. The node.js can use import</code> statement.</p> // build-search.mjs</span></span> </span> import</span> {</span> config</span> }</span> from</span> "dotenv"</span>;</span></span> import</span> algoliasearch</span> from</span> "algoliasearch/lite.js"</span>;</span></span> import</span> fs</span> from</span> "fs"</span>;</span></span> import</span> path</span> from</span> "path"</span>;</span></span> import</span> {</span> nanoid</span> }</span> from</span> "nanoid"</span>;</span></span></code></pre> Next, read post content from file. First we need read whole content from the file:</p> const</span> files</span> =</span> fs</span>.</span>readdirSync</span>(path</span>.</span>join</span>(</span>"pages/p"</span>))</span>;</span></span></code></pre> Then, prepare a empty array to store post data. And traverse content to generate format we need.</p> const</span> myPosts</span> =</span> []</span>;</span></span> files</span>.</span>map</span>(</span>(</span>f</span>)</span> =></span> {</span></span> const</span> content</span> =</span> fs</span>.</span>readFileSync</span>(path</span>.</span>join</span>(</span>'pages/p'</span>,</span> f)</span>,</span> 'utf-8'</span>)</span>;</span></span> // const { content: meta, content } = matter(markdownWithMeta);</span></span> </span> const</span> slug</span> =</span> f</span>.</span>replace</span>(</span>/\.</span>mdx</span>$</span>/</span>,</span> ''</span>)</span>;</span></span> const</span> regex</span> =</span> /</span>^</span>#</span>{2}</span>(</span>?!</span>#)(</span>.</span></span>)</span>/</span>gm</span>;</span></span> </span> content</span>.</span>match</span>(regex)</span>?.</span>map</span>(</span>(</span>h</span>)</span> =></span> {</span></span> const</span> heading</span> =</span> h</span>.</span>substring</span>(</span>3</span>)</span>;</span></span> </span> myPosts</span>.</span>push</span>(</span>{</span></span> content</span>:</span> null</span>,</span></span> hierarchy</span>:</span> {</span></span> lvl0</span>:</span> 'Post'</span>,</span></span> lvl1</span>:</span> slug</span>,</span></span> lvl2</span>:</span> heading</span>,</span></span> },</span></span> type</span>:</span> 'lvl2'</span>,</span></span> objectID</span>:</span> `</span>${</span>nanoid</span>()</span>}</span>-https://rua.plus/p/</span>${</span>slug</span>}</span>`</span>,</span></span> url</span>:</span> `https://rua.plus/p/</span>${</span>slug</span>}</span>#</span>${</span>heading</span></span> .</span>toLocaleLowerCase</span>()</span></span> .</span>replace</span>(</span>/ /</span>g</span>,</span> '-')</span>}</span>`</span>,</span></span> }</span>)</span>;</span></span> }</span>)</span>;</span></span></code></pre> The type</code> property means level of table of contents.</p> I just need h2 title in search result. So just match them with /^#{2}(?!#)(.)/gm</code>.</p> And post title is the lvl1</code> type:</p> myPosts</span>.</span>push</span>(</span>{</span></span> content</span>:</span> null</span>,</span></span> hierarchy</span>:</span> {</span></span> lvl0</span>:</span> "Post"</span>,</span></span> lvl1</span>:</span> slug</span>,</span></span> },</span></span> type</span>:</span> "lvl1"</span>,</span></span> objectID</span>:</span> `</span>${</span>nanoid</span>()</span>}</span>-https://rua.plus/p/</span>${</span>slug</span>}</span>`</span>,</span></span> url</span>:</span> `https://rua.plus/p/</span>${</span>slug</span>}</span>`</span>,</span></span> }</span>)</span>;</span></span></code></pre>Push to Algolia</a></h3> Algolia API is easy to use. First we need specify the index name.</p> const</span> index</span> =</span> client</span>.</span>initIndex</span>(</span>"rua"</span>)</span>;</span></span></code></pre> And save the objects.</p> const</span> algoliaResponse</span> =</span> await</span> index</span>.</span>replaceAllObjects</span>(posts)</span>;</span></span></code></pre> All done!</p> 我的开发环境 2022-04-14T00:00:00+00:00 最近迁移了自己的小服务器，也顺便把本机的环境重新设置了一下，其中环节还是有点复杂的小细节的。所以打算整理下思路，方便以后再设置同样环境。</p> </p> 对于服务器</a></h2> 目前常用的系统主要是 Ubuntu 和 FreeBSD，到手第一步便是更换到国内的镜像源。</p> 对于 FreeBSD 目前可用的有中科大的源，pkg 的配置文件位置为：/etc/pkg/FreeBSD.conf</code>。</p> FreeBSD:</span> {</span></span> url:</span> "pkg+http://mirrors.ustc.edu.cn/freebsd-pkg/</span>${ABI}</span>/latest",</span></span> mirror_type:</span> "srv",</span></span> signature_type:</span> "fingerprints",</span></span> fingerprints:</span> "/usr/share/keys/pkg",</span></span> enabled:</span> yes</span></span> }</span></span></code></pre> 对于 Ubuntu，随便选一个就可以了。配置文件位于：/etc/apt/sources.list</code>。清华大学开源软件镜像站的 Ubuntu 镜像使用帮助</a></p> # 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释</span></span> deb</span> https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse</span></span> # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse</span></span> deb</span> https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse</span></span> # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse</span></span> deb</span> https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse</span></span> # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse</span></span> deb</span> https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse</span></span> # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse</span></span> </span> # 预发布软件源，不建议启用</span></span> # deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse</span></span> # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse</span></span></code></pre>更换 Shell</a></h3> Ubuntu 和 FreeBSD 默认 shell 分别是 bash 和 sh，下一步就是切换到 zsh。</p> # Ubuntu</span></span> apt</span> install zsh -y</span></span> </span> # FreeBSD</span></span> pkg</span> install zsh</span></span></code></pre> Oh my zsh 的安装非常的简单，复制一条命令即可。但困难的地方在于我的服务器可能经常连不上 Github，因为它是通过 clone Github 上的仓库来进行安装的。</p> sh</span> -c "</span>$(</span>curl</span> -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh</span>)</span>"</span></span></code></pre> 研究了一下，可以找个 Github 的镜像站手动安装。不过这种方法还是有一定风险</em>的，毕竟是直接从别人的站点下载的东西。比较推荐的还是 Gitee 的镜像</a>。还有个 fastgit</a> 目前也是能用的。</p> Oh my zsh 也写了详细了 manual-installation</a> 参考着修改下源的地址就可以了。</p> # Clone the repository</span></span> git</span> clone https://gitee.com/mirrors/ohmyzsh.git ~/.oh-my-zsh</span></span> # Create a new zsh configuration file</span></span> cp</span> ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc</span></span> # Change your default shell</span></span> chsh</span> -s</span> $(</span>which</span> zsh</span>)</span></span></code></pre>Plugins</a></h3> 我比较常用的是 zsh-autosuggestions 与 zsh-syntax-highlighting，比较可惜的是这俩 Gitee mirror 上都还没有。</p> git</span> clone https://github.com/zsh-users/zsh-autosuggestions</span> ${ZSH_CUSTOM</span>:-</span>~</span>/</span>.oh-my-zsh</span>/</span>custom}</span>/plugins/zsh-autosuggestions</span></span> </span> # Add to .zshrc</span></span> plugins</span>=</span>(</span>git zsh-autosuggestions</span>)</span></span></code></pre>git</span> clone https://github.com/zsh-users/zsh-syntax-highlighting.git</span></span> echo</span> "source </span>${</span>(</span>q-</span>)</span>PWD}</span>/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"</span> >></span> ${ZDOTDIR</span>:-</span>$HOME}</span>/.zshrc</span></span> </span> source</span> ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh</span></span></code></pre>Theme</a></h3> 通常用的是 powerlevel10k 或者 random。</p> 对于 powerlevel10k 可以：</p> git</span> clone --depth=1 https://github.com/romkatv/powerlevel10k.git</span> ${ZSH_CUSTOM</span>:-</span>$HOME</span>/</span>.oh-my-zsh</span>/</span>custom}</span>/themes/powerlevel10k</span></span> # or</span></span> git</span> clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git</span> ${ZSH_CUSTOM</span>:-</span>$HOME</span>/</span>.oh-my-zsh</span>/</span>custom}</span>/themes/powerlevel10k</span></span></code></pre> 还需要添加一下环境变量</p> # To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.</span></span> [[</span> ! -f ~</span>/.p10k.zsh </span>]]</span> \|\|</span> source</span> ~/.p10k.zsh</span></span> POWERLEVEL9K_DISABLE_CONFIGURATION_WIZARD</span>=</span>true</span></span></code></pre>Sudo with out password</a></h3> Run sudo without password on mostly Linux</p> Backup /etc/sudoers file, run:</li> </ol> sudo</span> cp /etc/sudoers /root/sudoers.bak</span></span></code></pre> Edit the /etc/sudoers file on CentOS:</li> </ol> sudo</span> visudo</span></span></code></pre> Run /usr/sbin/rebootcommand without password on CentOS:</li> </ol> xfy</span> ALL=</span>(</span>ALL</span>)</span> NOPASSWD:ALL</span></span></code></pre> Save and exit the file.</li> </ol> Docker mirror</a></h3> 对于使用 systemd</code> 的系统（Ubuntu 16.04+、Debian 8+、CentOS 7），在配置文件 /etc/docker/daemon.json</code> 中加入：</p> {</span></span> "</span>registry-mirrors</span>": [</span>"https://docker.mirrors.ustc.edu.cn/"</span>]</span></span> }</span></span></code></pre> 重新启动 dockerd：</p> sudo</span> systemctl restart docker</span></span></code></pre>对于语言</a></h2> 目前常用的主要是 Node.js 与 Rustup，这俩官方地址的速度也是时好时坏。好在淘宝和中科大有他们的镜像源。</p> Node.js</a></h3> 主要用的是 nvm，类似于 Oh my zsh，可以 manual-install</a>。</p> git</span> clone https://gitee.com/mirrors/nvm.git .nvm</span></span></code></pre> 然后导出对应的变量到当前的 shell 配置文件中：</p> export</span> NVM_DIR</span>=</span>"</span>$HOME</span>/.nvm"</span></span> [</span> -s</span> "</span>$NVM_DIR</span>/nvm.sh"</span> ] &&</span> \.</span> "</span>$NVM_DIR</span>/nvm.sh"</span> # This loads nvm</span></span> [</span> -s</span> "</span>$NVM_DIR</span>/bash_completion"</span> ] &&</span> \.</span> "</span>$NVM_DIR</span>/bash_completion"</span> # This loads nvm bash_completion</span></span></code></pre> 其次就是安装 Node.js 本身了，nodejs.org 的速度大部分情况下都是很快的，偶尔也会抽风，nvm 也支持对应的环境变量</a></p> export</span> NVM_NODEJS_ORG_MIRROR</span>=</span>https://npm.taobao.org/mirrors/node</span></span></code></pre>Rustup</a></h3> Rustup 要相对更加简单的一点，Rustup 默认会读取两个环境变量，将其修改为镜像站点即可：</p> export</span> RUSTUP_DIST_SERVER</span>=</span>https://mirrors.ustc.edu.cn/rust-static</span></span> export</span> RUSTUP_UPDATE_ROOT</span>=</span>https://mirrors.ustc.edu.cn/rust-static/rustup</span></span></code></pre> 然后再用官方的脚本。</p> curl</span> https://sh.rustup.rs -sSf</span> \|</span> sh</span></span> </span> source</span> $HOME</span>/.cargo/env</span></span></code></pre> 对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。</p> 当然这几个主要的变量可以放在 .zshrc</code> 中，以后更新还会用到的。</p> Crate.io</a></h3> ~/.cargo/config</code> 清华大学</a>赛高。</p> [source.crates-io]</span></span> replace-with = 'tuna'</span></span> </span> [source.tuna]</span></span> registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"</span></span></code></pre> 对于 Windows 环境，则需要 C:\Users\{username}\.cargo</code> 目录下的 config</code> 文件，添加对应的源地址。</p> Go mod</a></h3> Go mod 支持 proxy 设置：</p> go</span> env -w GO111MODULE=on</span></span> </span> # 1. 七牛 CDN</span></span> go</span> env -w GOPROXY=https://goproxy.cn,direct</span></span> </span> # 2. 阿里云</span></span> go</span> env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct</span></span> </span> # 3. 官方</span></span> go</span> env -w GOPROXY=https://goproxy.io,direct</span></span></code></pre>pypi</a></h3> 同样清华大学的源，pypi 镜像每 5 分钟同步一次。</p> pip</span> install pip -U</span></span> pip</span> config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple</span></span></code></pre> 如果到 pip 默认源的网络连接较差，临时使用本镜像站来升级 pip：</p> pip</span> install -i https://pypi.tuna.tsinghua.edu.cn/simple pip -U</span></span></code></pre>对于本机</a></h2> 目前主要是使用 WSL2 中的 Ubuntu 作为开发环境的，WSL2 目前比较大的问题就是每次其 IP 地址都会变动，宿主机的地址，也就是它的网关也会一直变。</p> 好在 DNS 地址默认就是宿主机 Windows 的地址，可以通过一个简单的命令查到它并将其保存到当前环境变量中：</p> # 主机 IP 保存在 /etc/resolv.conf 中</span></span> export</span> host_ip</span>=</span>$(</span>cat</span> /etc/resolv.conf</span> \|</span>grep</span> "nameserver"</span> \|</span>cut</span> -f</span> 2</span> -d " "</span>)</span></span> alias</span> winip</span>=</span>'cat /etc/resolv.conf \|grep "nameserver" \|cut -f 2 -d " "'</span></span></code></pre> 顺便把内容单独提取到一个小脚本中：</p> HOST_IP</span>=</span>$(</span>cat</span> /etc/resolv.conf</span> \|</span> grep</span> nameserver</span> \|</span> awk</span> '{ print $2 }'</span>)</span></span> WSL_IP</span>=</span>$(</span>hostname</span> -I</span> \|</span> awk</span> '{print $1}'</span>)</span></span> </span> PROXY_PORT</span>=</span>10809</span></span> PROXY_HTTP</span>=</span>"http://</span>${HOST_IP}</span>:</span>${PROXY_PORT}</span>"</span></span> </span> set_proxy</span>() {</span></span> export</span> http_proxy</span>=</span>"</span>${PROXY_HTTP}</span>"</span></span> export</span> HTTP_PROXY</span>=</span>"</span>${PROXY_HTTP}</span>"</span></span> </span> export</span> https_proxy</span>=</span>"</span>${PROXY_HTTP}</span>"</span></span> export</span> HTTPS_proxy</span>=</span>"</span>${PROXY_HTTP}</span>"</span></span> </span> export</span> ALL_PROXY</span>=</span>"</span>${PROXY_SOCKS5}</span>"</span></span> export</span> all_proxy</span>=</span>${PROXY_SOCKS5}</span></span> </span> git</span> config --global http.proxy</span> ${PROXY_HTTP}</span></span> git</span> config --global https.proxy</span> ${PROXY_HTTP}</span></span> </span> # git ssh proxy</span></span> sed</span> -i "s/# ProxyCommand/ProxyCommand/" ~/.ssh/config</span></span> sed</span> -i -E "s/ProxyCommand nc -X connect -x [0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+ %h %p/ProxyCommand nc -X connect -x </span>${HOST_IP}</span>:</span>${PROXY_PORT}</span> %h %p/" ~/.ssh/config</span></span> }</span></span> </span> unset_proxy</span>() {</span></span> unset</span> http_proxy</span></span> unset</span> HTTP_PROXY</span></span> unset</span> https_proxy</span></span> unset</span> HTTPS_PROXY</span></span> unset</span> ALL_PROXY</span></span> unset</span> all_proxy</span></span> </span> git</span> config --global --unset http.proxy</span> ${PROXY_HTTP}</span></span> git</span> config --global --unset https.proxy</span> ${PROXY_HTTP}</span></span> </span> sed</span> -i -E "s/ProxyCommand nc -X connect -x [0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+ %h %p/# ProxyCommand nc -X connect -x 0.0.0.0:0 %h %p/" ~/.ssh/config</span></span> }</span></span> </span> test_proxy</span>() {</span></span> echo</span> "Host ip:"</span> ${HOST_IP}</span></span> echo</span> "WSL ip:"</span> ${WSL_IP}</span></span> echo</span> "Current proxy:"</span> ${https_proxy}</span></span> }</span></span></code></pre> 并放在 .zshrc</code> 中，使其可以自动被设置：</p> # This is proxy for git.</span></span> .</span> ~/.config/proxy.sh</span></span> set_proxy</span></span></code></pre> How to load a background with three.js 2022-04-13T00:00:00+00:00 Three.js setup</a></h2> First, we need a little of setup. Let's create a scene and a camera.</p> const</span> scene</span> =</span> new</span> THREE</span>.</span>Scene</span>()</span>;</span></span> </span> const</span> camera</span> =</span> new</span> THREE</span>.</span>PerspectiveCamera</span>(</span></span> 75</span>,</span></span> window</span>.</span>innerWidth</span> /</span> window</span>.</span>innerHeight</span>,</span></span> 0.1</span>,</span></span> 1000</span>,</span></span> )</span>;</span></span></code></pre> The default camera position is in the center at (0, 0, 0)</code>.</p> And now, We need render scene into our document. So we need a WebGL renderer.</p> const</span> renderer</span> =</span> new</span> THREE</span>.</span>WebGLRenderer</span>(</span>{</span></span> canvas</span>:</span> document</span>.</span>querySelector</span>(</span>'#canvas'</span>)</span></span> antialias: </span>true</span>,</span> // for performance reason, we will trun off antialias</span></span> }</span>)</span>;</span></span></code></pre> With a little of setup:</p> renderer</span>.</span>setPixelRatio</span>(window</span>.</span>devicePixelRatio)</span>;</span></span> renderer</span>.</span>setSize</span>(window</span>.</span>innerWidth</span>,</span> window</span>.</span>innerHeight)</span>;</span></span></code></pre> Render to screen :</p> renderer</span>.</span>render</span>(scene</span>,</span> camera)</span>;</span></span></code></pre> Now, we can get a black canvas in our document.</p> <RUASandpack template="react" files={{ "/App.js": sandpack["how-to-load-a-background-with-threejs"].firstScene, "/styles.css": sandpack["how-to-load-a-background-with-threejs"].resetStyles, }} customSetup={{ dependencies: { "stats.js": "^0.17.0", three: "^0.139.2", "lil-gui": "^0.16.1", }, }} /></p> Load a skyboxes</a></h2> Image a camera inside a cube box. The cube box is our scene. just like const scene = new THREE.Scene();</code>. The camera is our perspect camera.</p> new</span> THREE</span>.</span>PerspectiveCamera</span>()</span>;</span></span></code></pre> Now, we are inside the cube box. The inside texture of the box is our sky. Our camera can see all six texture surround ours give ours the illusion the we are within a larger environment.</p> We know how sky boxes works. But what is a sky boxes?</p> Texture</a></h3> We need set texture to cube box each side. so we need six pictures.</p> The skybox is six images that can be connected each other.</p> We just need load six images in some order, and set them to the scene background.</p> import</span> corona_bk</span> from</span> "assets/first-project/skyboxes/corona_bk.png"</span>;</span></span> import</span> corona_dn</span> from</span> "assets/first-project/skyboxes/corona_dn.png"</span>;</span></span> import</span> corona_ft</span> from</span> "assets/first-project/skyboxes/corona_ft.png"</span>;</span></span> import</span> corona_lf</span> from</span> "assets/first-project/skyboxes/corona_lf.png"</span>;</span></span> import</span> corona_rt</span> from</span> "assets/first-project/skyboxes/corona_rt.png"</span>;</span></span> import</span> corona_up</span> from</span> "assets/first-project/skyboxes/corona_up.png"</span>;</span></span> </span> const</span> sky</span> =</span> new</span> THREE</span>.</span>CubeTextureLoader</span>(manager)</span>.</span>load</span>([</span></span> corona_ft</span>,</span></span> corona_bk</span>,</span></span> corona_up</span>,</span></span> corona_dn</span>,</span></span> corona_rt</span>,</span></span> corona_lf</span>,</span></span> ])</span>;</span></span> scene</span>.</span>background</span> =</span> sky</span>;</span></span></code></pre> The order is:</p> front</li> back</li> up</li> down</li> right</li> left</li> </ol> If load textrue successfully. we can see some picture of six pictures.</p> That's not enough. We are in 3D world, we need to loot around in the cubebox. So we need add a control.</p> const</span> controls</span> =</span> new</span> OrbitControls</span>(camera</span>,</span> ref</span>.</span>current</span>!</span>)</span>;</span></span> controls</span>.</span>enablePan</span> =</span> false</span>;</span></span> controls</span>.</span>update</span>()</span>;</span></span></code></pre> <RUASandpack template="react" files={{ "/App.js": sandpack["how-to-load-a-background-with-threejs"].loadBackground, "/styles.css": sandpack["how-to-load-a-background-with-threejs"].resetStyles, }} customSetup={{ dependencies: { "stats.js": "^0.17.0", three: "^0.139.2", "lil-gui": "^0.16.1", }, }} /></p> For OrbitControls, the camera must be in not default position. I set it to (0, 1, 0)</code>.</p> Also, we need set to the camera up vector camera.up.set(0, 0, 1);</code>.</p> OrbitControls must execute update method after that it created controls.update();</code></p> </blockquote> Hello world 2022-04-06T00:00:00+00:00 Hello</a></h2> This is my first post!</p> console</span>.</span>log</span>(</span>'Hello world'</span>)</span>;</span></span></code></pre>Say hello to world</a></h2> <RUASandpack template="react" files={{ '/App.js': sandpack['hello-world'].hello, }} /></p> JavaScript practice multiplication table 2020-12-11T00:00:00+00:00 从学习 js 到现在，也有一段时间了。曾经也尝试过写一些复杂的实践。后来经过测试，就算在入门阶段到了会写，那么距离最优代码还是有一定的差距。可能隔个几天回来自己都看不懂自己写的是什么了，杂乱无章。</p> 最近打算先开始写一些简单的案例做做练习。无意中想到了经典的乘法口诀表，正好 for 循环也有过实践了，可以尝试一下。</p> for 循环嵌套的一次练习。</p> </blockquote> 思路</a></h2> 有了想法之后，就要开始构建实现的思路。由于 css 还没跨过门槛，所以决定就打算输出到 console 里。</p> 而在 console 输出类似于一个梯形的结构也是需要一个思考的问题。可以打印正确的形状之后，就可以考虑如何输出数字与结果了。</p> 所以构思分为几步：</p> 打印正确的形状</li> 输出内容</li> </ol> 打印正确的形状</a></h2> 首先先忽略内容，一步一步的打印出所有东西。所以先将内容用</code>代替，只在意形状。</p> 正方形</a></h3> 要想正确打印出一个正三角，可以先考虑从一个 10x10 正方形开始。</p> 第一个想法就是将行和列分别输出。首先定义两个变量，一个用于保存</code>，等会打印再同一行循环打印 10 次，第一行的</code>就输出完成。另一个变量用于保存第一行输出的内容。</p> 使用一个简单的 for 循环就能打印出第一行来：</p> let</span> x</span> =</span> ''</span>;</span> //输出“”</span></span> let</span> s</span> =</span> ''</span>;</span> //保存列输出</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> 10</span>;</span> i</span>++</span>)</span> {</span></span> s</span> +=</span> x</span> +</span> ' '</span>;</span> //打印10列“”</span></span> }</span></span> console</span>.</span>log</span>(s)</span>;</span></span></code></pre> 此时就能看到第一行的效果：</p> console</span>.</span>log</span>(s)</span>;</span></span> //输出：</span></span> * * * * * * * * </span></span></code></pre> 现在已经完成了 1x10，也就是说再打印出 9 行通用的内容就可以打印出一个 10x10 的正方形了。</p> 那么接下来的思路和上面的也很相似，只需要再</strong>定义一个变量用于保存最后 10 行的结果就可以了。for 循环也差不多，只需要将s</code>加上换行符打印十次就可以了。</p> let</span> x</span> =</span> ''</span>;</span> //输出“”</span></span> let</span> s</span> =</span> ''</span>;</span> //保存列输出</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> 10</span>;</span> i</span>++</span>)</span> {</span></span> s</span> +=</span> x</span> +</span> ' '</span>;</span> //打印10列“”</span></span> }</span></span> let</span> t</span> =</span> ''</span>;</span> //保存行输出</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> 10</span>;</span> i</span>++</span>)</span> {</span></span> t</span> +=</span> s</span> +</span> '</span>\n</span>'</span>;</span> //再将10列打印10行</span></span> }</span></span> console</span>.</span>log</span>(t)</span>;</span></span></code></pre> 这样一个正方形就被打印出来了：</p> console</span>.</span>log</span>(t)</span>;</span></span> //输出：</span></span> * * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span></code></pre>更好的正方形</a></h3> 现在离乘法表的三角形应该差切掉一半了。但是在此之前，上述打印一个正方形就用掉了三个变量，并且变量s</code>在第一个用完之后便没用了，只是个简单的中间人。思路虽然很清晰，但是最后实现的步骤比较繁琐。</p> 后来思索了一下，只需要将两个 for 循环嵌套一下，就可以节省下来两个变量，并且整体更加的简洁。</p> 此时只需要一个变量s</code>来保存最后的输出结果。将两个 for 循环嵌套在一起时，它们的运算步骤就变成为：</p> 进入第一层循环</li> 第一层循环内的 for 循环到指定的次数后退出</li> 再次执行第一层循环，并重述步骤 2，直到第一层循环达到次数</li> </ol> 这样一个步骤就能够更加简洁的打印出一个正方形。步骤总结就是第一个 for 循环第一次，第二个 for 循环就循环了 10 次，正好可以打印以后 10 个</code>。随后第一个 for 循环进入第二次，并换行，第二个 for 循环再次打印 10 次。这样就两行了，以此类推，就可以打印出 10x10。</p> let</span> s</span> =</span> ''</span>;</span> //保存结果</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> 10</span>;</span> i</span>++</span>)</span> {</span></span> for</span> (</span>let</span> o</span> =</span> 0</span>;</span> o</span> <</span> 10</span>;</span> o</span>++</span>)</span> {</span></span> s</span> +=</span> '* '</span>;</span> //保存行</span></span> }</span></span> s</span> +=</span> '</span>\n</span>'</span>;</span> //换行</span></span> }</span></span> console</span>.</span>log</span>(s)</span>;</span></span></code></pre> 最后的结果和上述还是一样的，但是整体的代码简洁了很多。</p> console</span>.</span>log</span>(s)</span>;</span></span> //输出：</span></span> * * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span> * * * * * * * * </span></span></code></pre>三角形</a></h3> 有了更好的正方形加持下，就可以轻松的打印出三角形了。</p> 再看一次上述的 10x10 的步骤，第一个 for 循环第一次，第二个 for 循环就循环了 10 次，正好可以打印以后 10 个</code>。那么一个正三角形的第一行是只有一个</code>的，也就是说 for 循环第一次，第二个 for 循环就循环了 1 次，这样第一行就只有一个</code>。</p> 实现的整体和打印正方形是没有多少区别的，是需要限制第二个循环的次数，循环到指定的次数后跳出，再由第一个循环换行。</p> 根据“第一行一个</code>，第二行两个</code>”的规律，正好第一个循环的变量i</code>是自增的。只需要将内循环的那个限制条件改为第一个循环的变量。就可以正好根据第一个循环打印出一个三角。</p> let</span> s</span> =</span> ''</span>;</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> 10</span>;</span> i</span>++</span>)</span> {</span></span> for</span> (</span>let</span> o</span> =</span> 0</span>;</span> o</span> <=</span> i</span>;</span> o</span>++</span>)</span> {</span></span> //条件换成第一个循环的次数，达到“递增换行”的效果</span></span> s</span> +=</span> '* '</span>;</span></span> }</span></span> s</span> +=</span> '</span>\n</span>'</span>;</span></span> }</span></span> console</span>.</span>log</span>(s)</span>;</span></span></code></pre> 详细工作方式：当i</code>等于 1 时，第一个循环进入第二个循环，第二个循环限制条件为i</code>，只循环一次，输出一个</code>。随后跳出到第一个循环打印换行，然后第一个循环进入第二次，i</code>等于 2。第二个循环正好沿着i</code>的自增依次打印出对应数量的</code>。</p> 输出：</p> console</span>.</span>log</span>(s)</span>;</span></span> </span></span> </span></span> * </span></span> * * </span></span> * * * </span></span> * * * * </span></span> * * * * * </span></span> * * * * * * </span></span> * * * * * * * </span></span> * * * * * * * * </span></span></code></pre>添加内容</a></h2> 已经跟着第一次打印的正方形，一步一步的能够打印出需要的正三角了。接下来就只需要将</code>替换为乘法表里的内容就可以了。</p> 乘法表</a></h3> 要想实现一个有规律的方法，诀窍就是仔细观察其实现的规律。在 9 行的乘法表中，乘数和被乘数的关系在随着行数和列数增加而增加。被乘数总是与行数相等，而乘数则是与列数相等。</p> 首先第一次的想法是，将乘法表的两个乘数由两个变量代替。只要控制好变量的变化就可以了。这种方法用到的变量比较多，完全用两个变量来代替乘数和被乘数。</p> 第一次的想法没有确切的观察乘法表的规律，在打印正三角的基础上。通过对比大小来控制两个变量的变化。乘数随着行的增加时，是从 1 开始随着列增加的，被乘数一直等于行数。于是在第二个控制行的 for 循环中添加 if 语句，当乘数小于被乘数时++。</p> 被乘数是随着行增加而增加的，于是当第二个 for 循环结束后，被乘数也++。而乘数则是从头开始，所以重新复制=1。</p> let</span> a</span> =</span> 1</span>;</span></span> let</span> b</span> =</span> 1</span>;</span></span> let</span> s</span> =</span> ''</span>;</span></span> for</span> (</span>let</span> i</span> =</span> 0</span>;</span> i</span> <</span> 9</span>;</span> i</span>++</span>)</span> {</span></span> for</span> (</span>let</span> o</span> =</span> 0</span>;</span> o</span> <=</span> i</span>;</span> o</span>++</span>)</span> {</span></span> s</span> +=</span> a</span> +</span> ''</span> +</span> b</span> +</span> '='</span> +</span> a</span> </span> b</span> +</span> ' '</span>;</span></span> if</span> (a</span> <</span> b)</span> {</span></span> a</span>++</span>;</span></span> }</span></span> }</span></span> b</span>++</span>;</span></span> a</span> =</span> 1</span>;</span></span> s</span> +=</span> '</span>\n</span>'</span>;</span></span> }</span></span></code></pre> 这样的方法可以成功的实现所有的效果，但是用的变量还是比较多的。并且语句结构也比较复杂。</p> 更好的乘法表</a></h3> 前面都是没有仔细去观察乘法表的规律而写出来的，从而使用了好几个变量以及复杂的多的语句。</p> 只需要详细观察了乘法表里的乘数与被乘数之间的变化关系，就能够发现两次嵌套循环之间变量的关系刚好一样。</p> let</span> res</span> =</span> ''</span>;</span></span> // i随着行变化（被乘数）</span></span> for</span> (</span>let</span> i</span> =</span> 1</span>;</span> i</span> <=</span> 9</span>;</span> i</span>++</span>)</span> {</span></span> // o始终从1开始，小于行数（乘数）</span></span> for</span> (</span>let</span> o</span> =</span> 1</span>;</span> o</span> <=</span> i</span>;</span> o</span>++</span>)</span> {</span></span> res</span> +=</span> `</span>${</span>o</span>}</span></span>${</span>i</span>}</span>=</span>${</span>o</span> </span> i</span>}</span> `</span>;</span></span> }</span></span> res</span> +=</span> '</span>\n</span>'</span>;</span></span> }</span></span></code></pre> 也就是说i</code>相当于乘数，它随着每行的增加而增加，并且每行都一样，同时它控制着换行。而变量o</code>相当于被乘数，每行从 1 开始，并且小于等于i</code>。</p> 操作 DOM</a></h2> 当时水这篇的时候我还没有学到使用 js 操作 DOM，时隔一年以后，我才想起来这篇还没水完。同时一年后，我还在乘法口诀表(◎﹏◎)</p> 操作 DOM 并不是很复杂，打印乘法口诀表的主要方法也还是相同的。</p> 插入节点</a></h3> 本次操作 DOM 最主要的一点还是循环添加 DOM 节点，通过document.appendChild()</code>方法来添加生成的节点。HTML 结构也非常简单，外部一个div</code>，内部通过span</code>和br</code>来插入内容。就类似于这样：</p> <</span>div</span> class</span>=</span>"wrapper"</span>></span></span> <</span>span</span>></span>1 ✖ 1 ＝ 1</span></</span>span</span>></span></span> <</span>br</span> /></span></span> <</span>span</span>></span>2 ✖ 1 ＝ 2</span></</span>span</span>></span></span> </</span>div</span>></span></span></code></pre> 虽然这是个小测试，这里还是使用了文档片段( DocumentFragment</code></a>)来插入节点。</p> wrapper</span> =</span> document</span>.</span>querySelector</span>(</span>'.wrapper'</span>)</span>;</span></span> fragment</span> =</span> document</span>.</span>createDocumentFragment</span>()</span>;</span></span> </span> for</span> (</span>let</span> i</span> =</span> 1</span>;</span> i</span> <=</span> 9</span>;</span> i</span>++</span>)</span> {</span></span> for</span> (</span>let</span> o</span> =</span> 1</span>;</span> o</span> <=</span> i</span>;</span> o</span>++</span>)</span> {</span></span> cont</span> =</span> fragment</span>.</span>appendChild</span>(document</span>.</span>createElement</span>(</span>'span'</span>))</span>;</span></span> cont</span>.</span>textContent</span> =</span> `</span>${</span>i</span>}</span> ✖ </span>${</span>o</span>}</span> ＝ </span>${</span>i</span> </span> o</span>}</span>`</span>;</span></span> }</span></span> fragment</span>.</span>appendChild</span>(document</span>.</span>createElement</span>(</span>'br'</span>))</span>;</span></span> }</span></span> wrapper</span>.</span>appendChild</span>(fragment)</span>;</span></span></code></pre> 思维也很简单，appendChild()</code>方法会将插入的节点返回，返回后就可以直接使用textContent</code>来插入生成的内容。同样的换行也是在外部的 for 循环内插入一个<br></code>标签。</p> let</span> wrapper</span>,</span> cont</span>,</span> fragment</span>;</span></span> </span> window</span>.</span>onload</span> =</span> function</span> () {</span></span> wrapper</span> =</span> document</span>.</span>querySelector</span>(</span>'.wrapper'</span>)</span>;</span></span> fragment</span> =</span> document</span>.</span>createDocumentFragment</span>()</span>;</span></span> </span> function</span> x99</span>() {</span></span> for</span> (</span>let</span> i</span> =</span> 1</span>;</span> i</span> <=</span> 9</span>;</span> i</span>++</span>)</span> {</span></span> for</span> (</span>let</span> o</span> =</span> 1</span>;</span> o</span> <=</span> i</span>;</span> o</span>++</span>)</span> {</span></span> cont</span> =</span> fragment</span>.</span>appendChild</span>(document</span>.</span>createElement</span>(</span>'span'</span>))</span>;</span></span> cont</span>.</span>textContent</span> =</span> `</span>${</span>i</span>}</span> ✖ </span>${</span>o</span>}</span> ＝ </span>${</span>i</span> </span> o</span>}</span>`</span>;</span></span> }</span></span> fragment</span>.</span>appendChild</span>(document</span>.</span>createElement</span>(</span>'br'</span>))</span>;</span></span> }</span></span> wrapper</span>.</span>appendChild</span>(fragment)</span>;</span></span> }</span></span> x99</span>()</span>;</span></span> };</span></span></code></pre> Configuring Apollo 1999-12-12T00:00:00+00:00 Site Configuration</a></h1> Search (build_search_index</code>)</a></h2> Enables or disables the search functionality for your blog.</p> Type: Boolean</li> Default: false</li> Usage: build_search_index = false</code></li> </ul> When enabled, a search index will be generated for your blog, allowing visitors to search for specific content. Additionally, a search button will be displayed in the navigation bar.</p> Configure the search like this:</p> build_search_index</span> =</span> true</span></span> </span> [</span>search</span>]</span></span> include_title</span> =</span> true</span></span> include_description</span> =</span> true</span></span> include_path</span> =</span> true</span></span> include_content</span> =</span> true</span></span> index_format</span> =</span> "elasticlunr_json"</span></span></code></pre>Theme Mode (theme</code>)</a></h2> Sets the color theme for your blog.</p> Type: String</li> Options: "light": Always using the light theme</li> "dark": Always using the dark theme</li> "auto": Automatically uses the system theme</li> "toggle": Automatically uses the system theme, but also shows buttons to change it.</li> </ul> </li> Default: "toggle"</li> Usage: theme = "toggle"</code></li> </ul> Menu</a></h2> Defines the navigation menu items for your blog.</p> Type: Array of objects</li> Default: []</li> Usage:menu</span> =</span> [</span></span> {</span> name</span> =</span> "/posts"</span>,</span> url</span> =</span> "/posts"</span>,</span> weight</span> =</span> 1</span> },</span></span> {</span> name</span> =</span> "/projects"</span>,</span> url</span> =</span> "/projects"</span>,</span> weight</span> =</span> 2</span> },</span></span> {</span> name</span> =</span> "/about"</span>,</span> url</span> =</span> "/about"</span>,</span> weight</span> =</span> 3</span> },</span></span> {</span> name</span> =</span> "/tags"</span>,</span> url</span> =</span> "/tags"</span>,</span> weight</span> =</span> 4</span> },</span></span> ]</span></span></code></pre></li> </ul> Logo</a></h2> Defines the site logo image file.</p> Type: String</li> Usage:logo</span> =</span> "site_logo.svg"</span></span></code></pre></li> </ul> Socials</a></h2> Defines the social media links.</p> Type: Array of objects</li> Default: []</li> Usage:socials</span> =</span> [</span></span> {</span> name</span> =</span> "twitter"</span>,</span> url</span> =</span> "https://twitter.com/not_matthias"</span>,</span> icon</span> =</span> "twitter"</span> },</span></span> {</span> name</span> =</span> "github"</span>,</span> url</span> =</span> "https://github.com/not-matthias/"</span>,</span> icon</span> =</span> "github"</span> },</span></span> ]</span></span></code></pre></li> </ul> Social links will open in a new tab if external_links_target_blank</code> is set to true</code> in the [markdown]</code> section of your config.</p> Table of Contents (toc</code>)</a></h2> Enables or disables the table of contents for posts.</p> Type: Boolean</li> Default: true</li> Usage: toc = true</code></li> </ul> When enabled, a table of contents will be generated for posts, making it easier for readers to navigate through longer articles.</p> Note: This feature adds additional JavaScript to your site.</p> CDN Usage (use_cdn</code>)</a></h2> Determines whether to use a Content Delivery Network (CDN) for assets.</p> Type: Boolean</li> Default: false</li> Usage: use_cdn = false</code></li> </ul> When set to true, the theme will attempt to load assets from a CDN, which can improve loading times for visitors from different geographic locations.</p> Favicon (favicon</code>)</a></h2> Specifies the path to the favicon image for your blog.</p> Type: String</li> Default: "/icon/favicon.png"</li> Usage: favicon = "/icon/favicon.png"</code></li> </ul> This sets the small icon that appears in the browser tab for your website.</p> Custom Stylesheets (stylesheets</code>)</a></h2> Allows you to add custom stylesheets to your blog.</p> Type: Array of files located in the static</code> directory</li> Default: []</li> Usage:stylesheets</span> =</span> [</span></span> "custom.css"</span>,</span> # static/custom.css</span></span> "/css/another.css"</span> # static/css/another.css</span></span> ]</span></span></code></pre></li> </ul> Fancy Code Styling (fancy_code</code>)</a></h2> Enables enhanced styling for code blocks.</p> Type: Boolean</li> Default: true</li> Usage: fancy_code = true</code></li> </ul> This option adds the language label and a copy button.</p> Dynamic Notes (dynamic_note</code>)</a></h2> Allows for the creation of togglable note sections in your content.</p> Type: Boolean</li> Default: true</li> Usage: dynamic_note = true</code></li> </ul> When enabled, you can create expandable/collapsible note sections in your blog posts.</p> Character Shortcodes</a></h2> We support custom character shortcodes for adding dialogue and interactive characters to your blog posts. You can use them via shortcodes</a>:</p> {{ /* character(name="character-name", body="Character dialogue text") */ }}</span></span></code></pre> These are the supported parameters:</p> name</code> (optional): The identifier for the character. Used to determine styling and appearance.</li> body</code> (optional): The dialogue text for the character. Works with inline shortcodes.</li> position</code> (optional): Position the character on the left or right. Values: "left" or default (right)</li> </ul> </div> Isn't it amazing?</p> </div> </div> </div> </div> Yes! And it's really easy to use</p> </div> </div> </div> </div> We can even use multiple lines with code:</p> fn</span> main</span>() {</span></span> println!</span>(</span>"Hey there!"</span>);</span></span> }</span></span></code></pre> </div> </div> </div> Anchor Links</a></h2> You can add anchor links by adding the following to your _index.md</code>:</p> insert_anchor_links</span> =</span> "heading"</span></span></code></pre>Taxonomy sorting</a></h2> You can sort the taxonomies page with the following config:</p> [</span>extra.taxonomies</span>]</span></span> sort_by</span> =</span> "page_count"</span> # e.g. name, page_count</span></span> reverse</span> =</span> true</span></span></code></pre> The sort_by</code> argument is directly passed to the sort_by</code> function:</p> {%</span> set</span> sort_by</span> =</span> config</span>.</span>extra</span>.</span>taxonomies</span>.</span>sort_by</span> \|</span> default</span>(</span>value</span>=</span>"name"</span>)</span> %}</span></span> {%</span> set</span> terms</span> =</span> terms</span> \|</span> default</span>(</span>value</span>=</span>[]) \|</span> sort</span>(</span>attribute</span>=</span>sort_by</span>)</span> %}</span></span> </span> {%</span> if</span> config</span>.</span>extra</span>.</span>taxonomies</span>.</span>reverse</span> \|</span> default</span>(</span>value</span>=</span>false</span>)</span> %}</span></span> {%</span> set</span> terms</span> =</span> terms</span> \|</span> reverse %}</span></span> {%</span> endif</span> %}</span></span> </span> {%</span> for</span> term</span> in</span> terms %}</span></span> <li></span></span> <a href="{{ term</span>.</span>permalink</span> \|</span> safe }}"></span></span> {{ term</span>.</span>name }} ({{ term</span>.</span>pages</span> \|</span> length }} post{{ term</span>.</span>pages</span> \|</span> length</span> \|</span> pluralize }})</span></span> </a></span></span> </li></span></span> {%</span> endfor</span> %}</span></span></code></pre> Possible values include anything within the TaxonomyTerm object</a>:</p> name</span>:</span> String</span>;</span></span> slug</span>:</span> String</span>;</span></span> path</span>:</span> String</span>;</span></span> permalink</span>:</span> String</span>;</span></span> pages</span>:</span> Array</span><</span>Page</span>></span>;</span></span> page_count</span>:</span> Number</span>;</span></span></code></pre> Examples:</p> name</code> to sort by name</li> page_count</code> to sort by page count</li> </ul> Analytics</a></h2> Enable or disable analytics tracking:</p> [</span>extra.analytics</span>]</span></span> enabled</span> =</span> false</span></span></code></pre> After enabling analytics, configure GoatCounter or Umami.</p> GoatCounter</a></h3> Configure GoatCounter analytics:</p> [</span>extra.analytics.goatcounter</span>]</span></span> user</span> =</span> "your_user"</span> # Your GoatCounter username</span></span> host</span> =</span> "example.com"</span> # Optional: Custom host</span></span></code></pre>Umami Analytics</a></h3> Configure Umami analytics:</p> [</span>extra.analytics.umami</span>]</span></span> website_id</span> =</span> "43929cd1-1e83...."</span> # Your Umami website ID</span></span> host_url</span> =</span> "https://stats.mywebsite.com"</span> # Optional: Custom host URL</span></span></code></pre>Fediverse Author Attribution</a></h2> Enable fediverse author attribution to add a meta tag for fediverse platforms:</p> [</span>extra</span>]</span></span> fediverse</span> =</span> true</span></span> fediverse_creator</span> =</span> "@user@instance.social"</span></span></code></pre> Type: Boolean</li> Default: false</li> Usage: fediverse = true</code></li> </ul> When enabled, this adds a fediverse:creator</code> meta tag to your site's HTML header, allowing fediverse platforms to attribute content to your account. Set fediverse_creator</code> to your fediverse handle in the format @user@instance</code>.</p> Page configuration</a></h1> Source code (repo_view</code>)</a></h2> Do you want to link to the source code of your blog post? You can turn on the repo_view</code> inside the [extra]</code> section of your blog post.</p> [</span>extra</span>]</span></span> repo_view</span> =</span> true</span></span> repo_url</span> =</span> "https://github.com/not-matthias/apollo/tree/main/content"</span> # Alternatively add the repo here</span></span></code></pre> The repo_url</code> can be set in the [extra]</code> section or in your config.toml</code>.</p> Comments (comment</code>)</a></h2> Enables or disables the comment system for posts.</p> Type: Boolean</li> Default: false</li> Usage: comment = false</code></li> </ul> After making comment = false</code> in [extra]</code> section of you post, save your script from Giscus</a> to templates/_giscus_script.html</code>. When enabled, this allows readers to leave comments on your blog posts. This feature has to be set for each individual post and is not supported at higher levels.</p> Example configuration in content/posts/configuration.md</a>:</p> +++</span></span> title</span> =</span> "Configuring Apollo"</span></span> </span> [</span>extra</span>]</span></span> comment</span> =</span> false</span></span> +++</span></span></code></pre> Comments via utterances</a> can be configured in template/_giscus_script.html</code> like this:</p> <</span>script</span></span> src</span>=</span>"https://utteranc.es/client.js"</span></span> repo</span>=</span>"YOUR_NAME/YOUR_REPO"</span></span> issue-term</span>=</span>"pathname"</span></span> theme</span>=</span>"github-light"</span></span> crossorigin</span>=</span>"anonymous"</span></span> async</span></span> ></span><</span>/</span>script</span>></span></span></code></pre>Cards Page</a></h1> The cards.html</code> template allows you to display a list of items in a card format. This is ideal for showcasing projects, but can be used for any list of items you want to display in a visually appealing way.</p> To create a cards page, you need to create a _index.md</code> file in a content directory (e.g., content/projects</code>). The following front matter is recommended:</p> +++</span></span> title</span> =</span> "Projects"</span></span> sort_by</span> =</span> "weight"</span></span> template</span> =</span> "cards.html"</span></span> [</span>extra</span>]</span></span> cards_columns</span> =</span> 3</span></span> card_media_height</span> =</span> 200</span></span> +++</span></span></code></pre> cards_columns</code>: Set exact number of columns (2, 3, 4) or omit for default 2-column layout</li> card_media_height</code>: Control the height of card media area in pixels (default: 300)</li> </ul> Each item in the list should be a separate markdown file in the same directory. The following front matter is supported:</p> title</code>: The title of the item.</li> description</code>: A short description of the item.</li> weight</code>: The order in which the item appears on the page.</li> local_image</code>: A path to a local image for the item's thumbnail. See the Local Image</a> section for more details.</li> local_video</code>: A path to a local video for the item's thumbnail. See the Local Video</a> section for more details.</li> remote_video</code>: A URL to a remote video for the item's thumbnail.</li> link_to</code>: A URL the card should link to.</li> </ul> Talks Page</a></h1> To create a talks page, you need to create a _index.md</code> file in the content/talks</code> directory. The following front matter is recommended:</p> +++</span></span> title</span> =</span> "Talks"</span></span> sort_by</span> =</span> "date"</span></span> template</span> =</span> "talks.html"</span></span> +++</span></span></code></pre> Each talk should be a separate markdown file in the content/talks</code> directory. The following front matter is supported:</p> title</code>: The title of the talk.</li> description</code>: A short description of the talk.</li> date</code>: The date of the talk (displayed with a calendar icon).</li> local_image</code>: A path to a local image for the item's thumbnail. See the Local Image</a> section for more details.</li> video</code>: A map with a link</code> and thumbnail</code> for the talk video.</li> organizer</code>: A map with a name</code> and link</code> for the event organizer (displayed with a location icon).</li> slides</code>: A URL to the presentation slides.</li> code</code>: A URL to the source code.</li> </ul> Local Image</a></h1> The local_image</code> front matter parameter allows you to specify a path to a local image that will be used as the thumbnail for a page. This is particularly useful for social media previews and other places where a representative image is needed.</p> The path resolution for local_image</code> works as follows:</p> If the path starts with a /</code>, it is treated as an absolute path from the content</code> directory. For example, local_image = "/projects/project-1.jpg"</code> will resolve to content/projects/project-1.jpg</code>.</li> If the path does not start with a /</code>, it is treated as a relative path. The theme will prepend the section.path</code> to the local_image</code> path. For example, if you are in a page at content/posts/my-post/index.md</code> and you set local_image = "thumbnail.png"</code>, the theme will look for the image at posts/my-post/thumbnail.png</code>.</li> </ul> Local Video</a></h1> The local_video</code> front matter parameter allows you to specify a path to a local video file that will be displayed as the thumbnail for a page. This is particularly useful for showcasing projects with dynamic content.</p> The path resolution for local_video</code> works the same as local_image</code>:</p> If the path starts with a /</code>, it is treated as an absolute path from the content</code> directory. For example, local_video = "/projects/demo.mp4"</code> will resolve to content/projects/demo.mp4</code>.</li> If the path does not start with a /</code>, it is treated as a relative path. The theme will prepend the section.path</code> to the local_video</code> path. For example, if you are in a page at content/projects/my-project/index.md</code> and you set local_video = "demo.webm"</code>, the theme will look for the video at projects/my-project/demo.webm</code>.</li> </ul> Remote Video</a></h2> The remote_video</code> front matter parameter allows you to specify a URL to a remote video file that will be displayed as the thumbnail for a page.</p> Example usage:</p> [</span>extra</span>]</span></span> remote_video</span> =</span> "https://example.com/videos/demo.mp4"</span></span></code></pre> The browser will automatically detect the video format, so you don't need to worry about specifying the MIME type.</p> Mermaid Example 1999-12-02T00:00:00+00:00 This Theme supports mermaid</a> markdown diagram rendering.</p> To use mermaid diagrams in your posts, see the example in the raw markdown code. https://raw.githubusercontent.com/not-matthias/apollo/refs/heads/main/content/posts/mermaid.md</p> Rendered Example</a></h2>

xfy

新时代的编程

2026-03-02T00:00:00+00:00

大人，时代变了。

编程语言其主要作用就是连接人与机器沟通的桥梁。而随着 AI 极速发展，写代码的方式也在随着技术的发展更新。

抽象的阶梯</a></h2>
回望历史，编程范式一直在攀登抽象的阶梯。从最初直接操作硬件开关，到穿孔卡片，到汇编语言，再到高级语言——每一次跃迁都让程序员离机器更远一步，离问题域更近一步。
AI 辅助编程不是终点，而是这漫长阶梯上的又一级台阶。
当我们用 Claude Code 这样的工具时，实际上是在用自然语言描述意图，让 AI 负责将其翻译成机器能理解的指令。这与当年用 C 语言替代手写汇编，何其相似。本质都是：把低层次的细节交给工具，把高层次的设计留给自己。
新的工作流</a></h2>
过去写代码，我们是建筑师，也是搬砖工。现在，我们更像是指挥家。
不需要再为每一个语法细节劳神，不需要在 Stack Overflow 上翻找半天只为了一个正则表达式。描述你想要什么，AI 帮你实现。描述出现了什么问题，AI 帮你调试。
但这并不意味着可以停止思考。
恰恰相反，新范式对程序员的要求更高了。你需要：

更清晰的思维：只有想得清楚，才能说得清楚。AI 无法理解模糊的意图。</li>
更强的判断力：AI 给出的方案需要你来评估、选择、改进。</li>
更广的知识面：知道什么是可能的，才能提出正确的问题。</li>
更深的领域理解：业务逻辑、架构设计、权衡取舍——这些 AI 暂时还无法替代。</li> </ul> 人机协作的艺术</a></h2>
Claude Code 最好的使用方式，不是当作一个外包工，而是当作一个博学但不熟悉项目的同事。
给它足够的上下文，它会给出惊艳的回答。问它模糊的问题，它会给出平庸的回答。
一个有趣的发现：用 AI 写代码时，提问的质量决定了回答的质量。这恰恰印证了一个古老的道理——提出好问题，比回答问题更重要。
学会提问，成了新时代程序员的核心技能。
保持审慎</a></h2>
然而，不要盲目信任。
AI 会自信地给出错误的答案。它会编造不存在的 API，会用过时的库函数，会忽略边界情况。代码审查的重要性非但没有降低，反而更高了。
每一行 AI 生成的代码，都应该经过你的审视。你可以让 AI 帮你写，但不能让 AI 帮你负责。
配置与上下文</a></h2>
Claude Code 会在本地存储一份配置文件，记录着会话历史、项目信息、使用统计等数据。这是一份真实配置的脱敏版本：
{ "numStartups": 20, "installMethod": "native", "autoUpdates": false, "hasCompletedOnboarding": true, "lastReleaseNotesSeen": "2.1.63", "projects": { "/xxx/xxx/candy": { "allowedTools": [], "mcpServers": {}, "hasTrustDialogAccepted": true, "lastCost": 0.35, "lastTotalInputTokens": 59456, "lastTotalOutputTokens": 604, "lastModelUsage": { "ark-code-latest": { "inputTokens": 59456, "outputTokens": 604, "costUSD": 0.35 } }, "exampleFiles": [ "serve.rs", "mod.rs", "config.rs", "main.rs", "service.rs" ] }, "/xxx/.config/nvim": { "allowedTools": [], "mcpServers": {}, "exampleFiles": [ "autocmds.lua", "keymaps.lua", "options.lua" ], "lastCost": 0.63, "lastTotalInputTokens": 189218, "lastTotalOutputTokens": 3034 }, "/xxx/xxx/blog": { "allowedTools": [], "mcpServers": {}, "exampleFiles": [ "zola.toml", "_index.md", "configuration.md" ], "lastCost": 0.82, "lastLinesAdded": 86, "lastLinesRemoved": 72 } }, "firstStartTime": "2026-02-26T02:22:07.970Z", "githubRepoPaths": { "xxx/candy": ["/xxx/xxx/candy"], "xxx/nvim": ["/xxx/.config/nvim"], "xxx/blog": ["/xxx/xxx/blog"] }, "userID": "xxx", "mcpServers": { "fetch": { "command": "npx", "args": ["-y", "mcp-remote", "https://xxx/xxx"] } }, "toolUsage": { "mcpfetchfetch": { "usageCount": 1 }, "Bash": { "usageCount": 8 } } }</code></pre> 这份配置文件揭示了 AI 辅助编程工具的几个关键特点： 项目感知。工具会为每个项目记录独立的上下文——示例文件、会话历史、Token 消耗。这意味着它能在不同项目间切换时保持记忆，而不需要每次重新理解代码库。 成本透明。每次对话的成本、Token 数量都有精确记录。这让开发者能够理性评估 AI 辅助的投入产出比。当一次会话花费 0.35 美元时，你会思考：这些 Token 换来了什么？ 工具追踪。toolUsage</code> 记录了 Bash 命令和 MCP（Model Context Protocol）服务的调用次数。这不仅仅是统计，更是一种审计——AI 在你的系统上执行了什么操作，一目了然。 MCP 扩展。通过 mcpServers</code> 配置，工具可以接入外部服务。fetch 服务让 AI 能够访问网络资源，而理论上，任何提供 MCP 接口的服务都可以被接入。这是一个开放生态的雏形。
记忆与遗忘</a></h2> 有意思的是，这份配置也暗示了 AI 工具的局限性。 exampleFiles</code> 字段显示，工具会缓存项目中的代表性文件名。这是一种启发式学习——它试图通过文件名来推断项目结构。但这也意味着，当项目结构发生重大变化时，这些缓存的"记忆"可能变得过时。 会话 ID、Token 统计、性能指标——这些数据对用户大多不可见，却在幕后影响着体验。比如缓存读取的 Token 数量（cacheReadInputTokens</code>）直接影响响应速度和成本。聪明的开发者会意识到，保持会话的连续性比频繁开启新会话更高效。 但这里有一个悖论：记忆越久，负担越重。过长的上下文不仅增加成本，还可能引入噪声。知道何时"遗忘"，和知道何时"记住"一样重要。 作为数字同事</a></h2> 把这份配置和前面的讨论结合起来，一个图景浮现出来：AI 编程工具正在演变成某种"数字同事"。 它记得你之前的对话（通过会话 ID 和历史记录）。它了解你的项目（通过 exampleFiles</code> 和项目配置）。它知道你的偏好（通过 allowedTools</code> 和信任设置）。它甚至有自己的"工具箱"（通过 MCP 服务扩展）。 这种演进带来的改变是深远的。过去，开发者需要在文档、搜索引擎、IDE 之间来回切换。现在，这些边界正在模糊。你不再是在"查找资料"，而是在"与工具对话"。 但请记住：这位数字同事不是魔法。它的知识有边界，它的判断可能出错，它的建议需要验证。配置文件中的每一项设置——从信任对话框的接受状态到工具权限——都在提醒我们：这是协作，不是委托。 写在后面</a></h2> 也许几年后，回看这篇文章会觉得过时。就像我们现在看当年的穿孔卡片编程。 但有些东西不会变：对清晰思维的追求、对代码质量的执着、对问题本质的洞察。工具在变，工匠之心不变。 那个 JSON 配置文件，某种意义上是一面镜子。它映照出的不仅是 AI 的状态，更是使用者的痕迹——访问过的项目、运行过的命令、花费过的成本。这是人机协作的证明，也是新时代程序员日常的写照。 时代变了。而我们，正在书写这个时代。

如何设计 React 组件 2026-02-28T00:00:00+00:00 设计 React 组件不仅是编写 JSX，更是一门关于解耦、复用和可维护性的艺术。优秀的组件设计能让项目在规模扩大时依然易于管理。在考虑组件设计时，不仅要关注可复用性，还要警惕过度封装的风险。 核心设计原则</a></h2> 在动手编码前，需要明确并遵循以下核心原则： 单一职责原则 理想情况下，一个组件只负责一件事。如果一个组件既负责数据获取、复杂逻辑处理，又负责 UI 渲染，那它就过于“臃肿”了。</li> 做法：拆分。将数据获取、复杂逻辑计算抽离到自定义 Hook 或工具函数中，组件只负责“组装”和“展示”。</li> </ul> </li> 展示组件 vs 容器组件（React 经典设计模式） 展示组件：只关注 UI 呈现。接收 Props，渲染 DOM，不关心数据来源。通常是无副作用的函数组件。</li> 容器组件：关注逻辑和数据。负责获取数据、管理状态，并将数据传递给展示组件。</li> 现代演变：随着 Hooks 的普及，界限变得模糊，但核心思想依然重要——将逻辑与 UI 解耦。</li> </ul> </li> 组合优于继承 React 推荐使用组合而非继承。不要试图通过继承 BaseComponent 来复用逻辑，而应使用组合或 Hooks。</li> </ul> </li> </ol> 在设计组件前，先思考其职责： 思考点</th> 建议</th></tr></thead> 单一职责</td> 一个组件只做一件事（例如：渲染列表、显示弹窗、处理表单输入）。如果功能变多，考虑拆分为更小的子组件。</td></tr> 可复用性</td> 思考「这段 UI/逻辑」是否可能在其他页面或业务中使用。若是，则抽离成独立组件。</td></tr> 组合优于继承</td> 使用 props.children</code>、render props、函数子组件实现“插槽”式组合。</td></tr> 命名规范</td> 名称要语义化、简短、清晰。如 <UserAvatar /></code>、<OrderList /></code>、<CreateOrderForm /></code>。</td></tr> </tbody></table> 组件 API 设计</a></h2> 组件的“接口”设计直接决定了其易用性。 Props 设计原则</a></h3> 命名语义化：例如 isDisabled</code> 比 disabled</code> 更能明确表示这是一个布尔值开关。</li> 避免传递复杂对象：尽量只传递组件需要的数据，不要传递整个庞大的 user</code> 对象，而是只传 userName</code> 和 avatarUrl</code>。</li> 提供默认值：使用默认参数或解构赋值，降低使用门槛。</li> 深层传递优化：3 层以上的 props 传递可以考虑 Context、状态管理（如 Redux/Zustand）或自定义 Hook。</li> </ul> 统一的 Props 命名规范</a></h3> 事件回调：onXxx</code>（如 onSubmit</code>、onCancel</code>）</li> 布尔开关：isXxx</code> / hasXxx</code>（如 isLoading</code>、hasError</code>）</li> 数据集合：items</code>（列表）或 data</code>（单条）</li> </ul> // 好的设计：解构赋值 + 默认值 + 明确的类型注释 const Button = ({ type = "primary", onClick, children, loading = false, }: ButtonProps) => { // ... };</code></pre>利用 children</code> 和插槽</a></h3> 不要把所有内容都通过 props 传递。对于布局组件或容器类组件，优先使用 children</code>： // 坏设计：写死内容结构 <Card title="标题" content="内容" /> // 好设计：灵活的组合 <Card> <Card.Header>标题</Card.Header> <Card.Body>任意复杂的内容</Card.Body> </Card></code></pre>受控 vs 非受控组件</a></h3> 受控组件：由父组件完全控制状态，通过 props 接收 value</code> 和 onChange</code>。</li> 非受控组件：内部管理自己的状态，只在需要时通知父组件（通过 ref 暴露方法）。</li> 最佳实践：编写同时支持两种模式的组件（例如 Ant Design 的 Input，既可以受控也可以非受控）。</li> </ul> 逻辑复用与状态管理</a></h2> 状态下沉原则</a></h3> 状态应尽量放在离它最近的共同父组件中（局部状态）。</li> 不要随意引入 Redux/Zustand，对于模态框开关、表单输入等 UI 状态，保留在组件内部或父组件即可。</li> </ul> 逻辑抽离：自定义 Hooks</a></h3> 这是现代 React 设计的灵魂。如果组件中充斥着 useEffect</code>、useState</code> 和复杂的数据转换，应将它们抽离出来： // 组件内逻辑混杂 const UserList = () => { const [users, setUsers] = useState([]); useEffect(() => { fetch... }, []); // ... 渲染逻辑 }; // 优秀设计：逻辑抽离 const useUsers = () => { const [users, setUsers] = useState([]); useEffect(() => { fetch... }, []); return { users, loading: !users.length }; }; const UserList = () => { const { users, loading } = useUsers(); // 现在组件只关心渲染 if (loading) return <Spinner />; return <ul>...</ul>; };</code></pre>性能优化意识</a></h2> 设计组件时要有“防患于未然”的性能优化意识： 避免不必要的渲染</a></h3> React.memo：对于接收相同 props 但渲染开销较大的组件，使用 React.memo</code> 进行浅比较优化。</li> useCallback / useMemo：如果传递给子组件的 props 是函数或对象，在父组件中使用 useCallback</code> 或 useMemo</code> 包裹，防止引用变化导致子组件无效刷新。</li> </ul> 合理的代码分割</a></h3> 对于大型组件（如复杂的图表、编辑器），使用 React.lazy</code> 和 Suspense</code> 进行懒加载： const HeavyChart = React.lazy(() => import("./HeavyChart")); const Dashboard = () => ( <Suspense fallback={<Skeleton />}> <HeavyChart /> </Suspense> );</code></pre>实战案例：设计一个健壮的列表组件</a></h2> 假设我们要设计一个加载用户数据的列表。 设计思路</a></h3> 分离关注点：数据获取与 UI 展示分离。</li> 可配置性：列表项如何渲染应由使用者决定。</li> 健壮性：处理加载态、空态和错误态。</li> </ul> interface User { id: string; name: string; age: number; } const useUserList = () => { const [users, setUsers] = useState<User[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState<Error | null>(null); useEffect(() => { fetch("/api/users") .then((res) => res.json()) .then((data) => { setUsers(data); setLoading(false); }) .catch((err) => { setError(err); setLoading(false); }); }, []); return { users, loading, error }; }; interface UserListProps { renderItem?: (user: User) => React.ReactNode; } const UserList = ({ renderItem }: UserListProps) => { const { users, loading, error } = useUserList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; if (users.length === 0) return <div>No users found.</div>; return ( <ul className="user-list"> {users.map((user) => ( <li key={user.id}> {/* 默认渲染逻辑，允许被覆盖 */} {renderItem ? renderItem(user) : user.name} </li> ))} </ul> ); }; export default UserList;</code></pre>总结</a></h2> 设计优秀的 React 组件需要综合考虑多个维度： 维度</th> 检查点</th> 详细说明 / 最佳实践</th></tr></thead> 职责单一</td> 组件只做一件事？</td> 是否可以进一步拆分？是否存在逻辑过重的“巨型组件”？</td></tr> API 友好</td> Props 设计质量</td> props 命名是否直观、语义化？是否有合理的默认值？是否实现了类型安全（TypeScript）？</td></tr> 可测试性</td> 测试覆盖能力</td> 是否可以用 React Testing Library (RTL) 直接渲染并模拟交互？</td></tr> 可复用性</td> 业务数据解耦程度</td> 是否只依赖 props / context，而不硬编码业务数据？逻辑是否通用？</td></tr> 性能优化</td> 渲染效率</td> 是否需要 React.memo</code> / useMemo</code> / useCallback</code>？列表渲染是否使用了唯一的 key</code>？</td></tr> 样式管理</td> 样式封装方式</td> 样式是否被封装（模块化 CSS 或 CSS-in-JS）？是否抽离了主题 token（颜色、间距等）？</td></tr> 可访问性</td> Accessibility 支持</td> 是否有必要的 aria-*</code> 属性和 role</code>？键盘导航是否完整可访问？</td></tr> 错误处理</td> 健壮性</td> 是否有 ErrorBoundary</code> 包裹？异常状态（如接口报错）是否有友好提示？</td></tr> 文档建设</td> 示例与文档</td> 是否提供 Storybook story 或清晰的文档示例代码？</td></tr> 组织规范</td> 目录结构</td> 组件是否存放在对应的 features/</code> 或 components/</code> 目录下？</td></tr> </tbody></table> 设计要点回顾</a></h3> 职责拆分：让每个组件只负责“一件事”。</li> 函数组件 + Hooks：用函数组件和 Hooks 来组织 UI 与逻辑，保持代码简洁、可组合。</li> Props 设计：精心设计 props，确保语义化、类型安全，并提供合理的默认值。</li> 状态管理：分层管理（展示 ↔ 容器），使用 Context 或 Hooks 进行状态共享。</li> 样式处理：抽离样式，使用 CSS Modules、Styled-Components、Tailwind 或 UI 框架。</li> 性能优化：使用 React.memo</code>、虚拟列表、代码分割等手段。</li> 测试覆盖：确保测试到位，使用 RTL + Storybook + E2E 测试。</li> 遵循规范：遵循目录结构和设计检核表，保证项目长期可维护。</li> </ol> Leptos 中的暗色模式适配 2025-03-18T00:00:00+00:00 如今暗色模式已经是各个操作系统都实现的较为完善了，而浏览器也提供了一些方便适配的 API。 实现一个简单的适配暗色模式只是第一步，既然浏览器已经提供好了较为完善的 API 那么就可以实现一个所谓的能用的暗色模式适配方案。 在第一次打开页面或从未进行过设置时，优先匹配系统的颜色模式;</li> 在手动调整过颜色主题时，利用 localStorage</code> 进行保存，以实现再次打开或刷新的持续生效;</li> </ol> 第一步的实现在 CSS 的 mediaQuery</a> API 中可以去查询 '(prefers-color-scheme: dark)'</code> 来检测当前系统是否偏好暗色模式。 if ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ) { // dark mode }</code></pre> 甚至还可以对其使用事件监听器来进行系统颜色模式的切换进行监听。 window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", (event) => { const newColorScheme = event.matches ? "dark" : "light"; });</code></pre> 在第二步的实现中，主要是判断好当前的状态，如果 localStorage</code> 中没有保存过的颜色主题，则使用第一步的系统匹配模式。 整体的实现并不是多么的复杂，详细任何有经验的前端在任何环境下都能搓出来。但在 WebAssembly 中略有不同，尤其是在 Rust 中。对比 JavaScript 就会发现 Rust 为内存安全做了多大的努力（Rust 的空值判断有多麻烦</del>）。 WebAssembly</a></h2> 在 Rust 的 WASM 中访问浏览器的 DOM API 几乎都是通过 web_sys</a> 这个 crate，例如访问 window</a>。或者使用一些更为轻松的方法，例如使用 leptos_use</code></a> let window = use_window(); let is_dark = window .match_media("(prefers-color-scheme: dark)") .map(|m| m.map(|mt| mt.matches()).unwrap_or(false)) .unwrap_or(false); logging::log!("{is_dark}");</code></pre>Context</a></h2> Leptos 中的 provide_context</code> API 与 React 的 Context 十分类似，作用当然也是一样。使用 leptos_use</code> 中 use_color_mode_with_options</code> hooks 不仅仅可以实现主题的切换，更方便的还是它可以一起实现保存到 localStorage</code> 中。 // color mode global context let UseColorModeReturn { mode, set_mode, .. } = use_color_mode_with_options( UseColorModeOptions::default() .emit_auto(true) .attribute("data-theme") .custom_modes(COLOR_MODE.iter().map(|m| m.to_string()).collect::<_>()), ); provide_context((mode, set_mode));</code></pre> Library</a></h2> Leptos use 提供了一些开箱即用的方法，可以更加方便的实现上述操作。 use leptos_use::{use_color_mode_with_options, UseColorModeOptions, UseColorModeReturn}; pub const COLOR_MODE: [&str; 3] = ["auto", "light", "dark"]; // color mode global context let UseColorModeReturn { mode, set_mode, .. } = use_color_mode_with_options( UseColorModeOptions::default() .emit_auto(true) .attribute("data-theme") .custom_modes(COLOR_MODE.iter().map(|m| m.to_string()).collect::<_>()), ); provide_context((mode, set_mode));</code></pre> 通过 leptos 的全局状态，可以直接设置对应的主题。 // components/dark_mode_btn.rs use std::borrow::Cow; use leptos::prelude::*; use leptos_use::ColorMode; use crate::{consts::COLOR_MODE, utils::capitalize_first}; /// 颜色模式切换下拉框 #[component] pub fn DarkMode(#[prop(optional)] class: Cow<'static, str>) -> impl IntoView { let (mode, set_mode) = use_context::<(Signal<ColorMode>, WriteSignal<ColorMode>)>() .expect("to have found the setter provided"); view! { <div class=move || format!("dropdown {class}")> <div tabindex="0" role="button" class="m-1 btn"> Themes </div> <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-32 p-2 shadow flex flex-col h-64 overflow-y-auto flex-nowrap" > <For each=move || COLOR_MODE key=|theme| theme.to_string() children=move |theme| { view! { <li class="w-full" on:click=move |_| set_mode.set(theme.into())> <a class:active=move || { mode.get().to_string() == theme }>{capitalize_first(theme)}</a> </li> } } /> </ul> </div> } }</code></pre> 第 9 章结构体 2025-02-12T00:00:00+00:00 Rust 有 3 种结构体类型：具名字段型结构体、元组结构体和单元型结构体。 具名型结构体：为每个组件命名。</li> 元组型结构体：按组件出现的顺序标识他们。</li> 单元型结构体：没有组件。</li> </ul> 具名结构体</a></h2> struct GrayscaleMap { pixels: Vec<u8>, size: (usize, usize), }</code></pre> 与其他所有语法项一样，结构体默认情况下是私有的，仅在声明它们的模块及其子模块种可见。可以通过在结构体的定义前加上 pub</code> 来是结构体在其模块外部可见。结构体中的每个字段也是默认私有的。 pub struct GrayscaleMap { pub pixels: Vec<u8>, pub size: (usize, usize), }</code></pre> 其他模块不能按名称访问私有字段或使用结构体表达式来创建新的 GrayscaleMap</code> 值。 在结构体表达式中，如果具有名字的字段后面跟着 .. EXPR</code>，则任何未提及的字段都会从 EXPRE</code>（必须是相同结构体的另一个值）中获取它们的值。 struct Broom { name: String, height: u32, health: u32, position: (f32, f32, f32), intent: BroomIntent, } #[derive(Copy, Clone)] enum BroomIntent { FetchWater, DumpWater, } fn chop(b: Broom) -> (Broom, Broom) { let mut broom1 = Broom { height: b.height / 2, ..b }; let mut broom2 = Broom { name: broom1.name.clone(), ..broom1 }; broom1.name.push_str(" I"); broom2.name.push_str(" II"); (broom1, broom2) }</code></pre>元组型结构体</a></h2> 元组型结构体顾名思义类似于元组： struct Bounds(usize, usize);</code></pre> 表达式 Bounds(1024, 768)</code> 看起来像一个函数调用，实际上它确实是，级定义这种类型时也隐式定义了一个函数： fn Bounds(elem0: usize, elem1: uszie) -> Bounds { ... }</code></pre> 元组型结构体适用于创造新类型（newtype），即建立一个只包含单组件的结构体，以获得更严格的类型检查。 单元型结构体</a></h2> 单元型结构体声明了一个根本没有元素的结构体类型： struct onesuch;</code></pre> 这种类型的值不占用内存，很像单元类型 ()</code>。Rust 既不会在内存中实际存储单元类型的值，也不会生成代码对它们进行操作，因为仅通过值的类型它就能知道关于值的所有信息 结构体布局</a></h2> 在内存中，具名字段结构体和元组型结构体是一样的：值的集合以特定的方式在内存中布局。 struct GrayscaleMap { pixels: Vec<u8>, size: (usize, usize), }</code></pre> 与 C 和 C++ 不同，Rust 没有具体承诺它将如何在内存中对结构体的字段或元素进行排序。然而，Rust 确实承诺会将字段的值直接存储在结构体本身的内存块中。JavaScript、Python 和 Java 会将 pixels</code> 值和 size</code> 值分别放在它们自己的分配的堆上的块中，并让 GrayscaleMap</code> 的字段指向它们，而 Rust 会将 pixel</code> 值和 size</code> 值直接嵌入在 GrayscaleMap</code> 值中。只有由 pixels</code> 向量拥有的在堆上分配的缓冲区才会留在它自己的块中。 可以使用 #[repr(C)]</code> 属性要求 Rust 以兼容 C 和 C++ 的方式对结构体进行布局。 方法</a></h2> 在 impl</code> 块中定义的函数被称为关联函数，因为它们是与特定类型相关联的。与关联函数相对应的是自由函数，它是未定义在 impl</code> 块中的语法项。 impl</code> 块知识定义 fn</code> 的集合，每个定义都会成为块顶部命名的结构体类型上的一个方法。 当调用一个需要引用的方法时，我们不需要自己借用可变引用，常规的方法调用语法已经隐式的处理了这一点。 struct Queue<T> { older: Vec<T>, younger: Vec<T>, } impl<T> Queue<T> { pub fn push(&mut self, item: T) { self.younger.push(item); } } let mut q = Queue { older: vec![1], younger: vec![], }; q.push(2);</code></pre> 只需要编写 q.push()</code> 就可以借入对 q</code> 的可变引用，就好像写的是 (&mut q).push()</code> 一样，因为这是 push</code> 方法的 self</code> 参数所要求的。 第 8 章 Create 与模块 2025-01-12T00:00:00+00:00 有时，可能需要对函数的内联进行微观管理，但我们通常会把这种优化留给编译器。可以使用 #[inline]</code> 属性进行微观管理： #[inline] fn add(x: i32, y: i32) -> i32 { x + y }</code></pre> 只有在一种特定的情况下，如果没有 #[inline]</code>，就不会发生内联。当一个 crate 中定义的函数或方法在另一个 crate 中被调用时，Rust 不会将其内联，除非它是泛型的或名曲的标记为 #[inline]</code>。 第 7 章错误处理 2024-12-12T00:00:00+00:00 Rust 中有两类常见的错误处理：panic</code> 和 Result</code>。 普通错误使用 Result</code> 类型来处理。Result</code> 通常用以表示由程序外部的事物引发的错误，比如错误的输入、网络的中断或权限问题。 panic</code> 针对的是另一种错误，即那种永远不应该发生的错误。 Rust 之所以会用一个新词（panic）而不是沿用“异常”来表达，是因为两者并不等价。 </blockquote> panic</a></h2> 当程序遇到下列问题时，就可以断定程序自身存在 Bug，故而引发 panic： 数组越界访问；</li> 整数除以 0；</li> 在恰好为 Err</code> 的 Result</code> 上调用 .expect()</code>；</li> 断言失败；</li> </ul> 在 panic 时，Rust 为我们提供了一种选择，展开调用栈或者终止进程。展开调用栈是默认方案。 展开调用栈</a></h3> 如果在 Rust 中除以了 0，就会触发 panic，通常按如下方式处理： #[allow(unconditional_panic)] fn main() { let x = 37 / 0; }</code></pre> 把一条错误信息打印到终端。</li> </ul> thread 'main' panicked at main.rs:3:13: attempt to divide by zero note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace</code></pre> 如果设置了 RUST_BACKTRACE=1</code> 环境变量，那么就像这条消息打印的一样，Rust 也会在这里转储当前调用栈。 ❯ RUST_BACKTRACE=1 ./main thread 'main' panicked at main.rs:3:13: attempt to divide by zero stack backtrace: 0: rust_begin_unwind at /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library/std/src/panicking.rs:645:5 1: core::panicking::panic_fmt at /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library/core/src/panicking.rs:72:14 2: core::panicking::panic at /rustc/9b00956e56009bab2aa15d7bff10916599e3d6d6/library/core/src/panicking.rs:145:5 3: main::main 4: core::ops::function::FnOnce::call_once note: Some details are omitted, run with `RUST_BACKTRACE=full` for a verbose backtrace.</code></pre> 展开调用栈。这很像 C++ 的异常处理。当前函数使用的任何临时值、局部变量或参数都会按照与创建它们时相反的顺序被丢弃。丢弃一个值仅仅意味着随后会进行清理：程序正在使用的任何字符串或者向量都将被释放，所有打开的文件都将被关闭，等等。还会调用由用户定义的 drop</code> 方法。</li> </ul> 清理了当前函数调用后，我们将继续执行到其调用者中，以相同的方式丢弃其变量和参数。然后再“走到”那个调用者的调用者中，在调用栈中逐级向上，以此类推。 panic 是安全的，没有违反 Rust 的任何安全规则，即使你故意在标准库方法的中间引发 panic，它也永远不会在内存中留下悬空指针或半初始化的值。 panic 是基于线程的，一个线程 panic 时，其他线程可以继续做自己的事。 第 5 章引用 2024-10-10T00:00:00+00:00 Rust 中的指针分为拥有型指针和非拥有型指针。其中，拥有型指针意味着当拥有者被丢弃时，它的引用目标也会随之消失。引用（reference）的非拥有型指针，意味着对引用目标的生命周期毫无影响。 事实上，引用的生命周期绝不能超过其引用目标。为了强调这一点，Rust 把创建对某个值的引用的操作称为借用（borrow）那个值：凡是借用，终须归还。 为了在不影响其所有权的情况下访问值。引用分为一下两种。 共享引用允许我们读取但不能修改其引用目标。但是，共享引用可以同时存在任意数量个。共享引用是 Copy 类型。</li> 可变引用允许我们读取和修改值。但是，一旦一个值拥有了比可变引用，就无法再对该值创建其他任何种类的引用了。可变引用同时只能存在一个。可变引用不是 Copy 类型。</li> </ul> 共享引用和可变引用之间的区别可以视为在编译器强制执行“多重读取”或“单一写入”规则的一种手段。 当通过将值的所有权转移给函数的方式将这个值传递给函数时，就可以说按值传递了它。如果将值的引用传递给函数，就可以说按引用传递了它。 如果需要用一个值来表示对某个“可能不存在”事物的引用，请使用类型 Option<&T></code>。在机器码级别，Rust 会将 None 表示为空指针，将 Some(r)</code> 表示为非零地址（其中 r</code> 是 &T</code> 型的值），因此 Option<&T></code> 和 C 或 C++ 中的可空指针一样高效，但更安全：它的类型要求我们在使用之前必须检查它是否为 None。 除了对简单地址的引用，Rust 还包括两种胖指针，即携带某个值地址的双字值，以及要正确使用该值所需的某些额外信息。 对切片的引用就是一个胖指针，携带者此切片的起始地址及其长度。 另一个胖指针是特型对象，即对实现了指定特型的值的引用。特型对象会携带一个值的地址和指向适用于该值的特型实现的指针。 生命周期</a></h2> 包含引用的结构体</a></h3> 对于一个包含引用的结构体，Rust 要求我们必须要写出它的生命周期 struct Person { name: &str, }</code></pre> 编译器会贴心的为我们提示需要修改的地方 error[E0106]: missing lifetime specifier --> examples/reference.rs:2:11 | 2 | name: &str, | ^ expected named lifetime parameter | help: consider introducing a named lifetime parameter | 1 ~ struct Person<'a> { 2 ~ name: &'a str, |</code></pre>不同的生命周期参数</a></h3> 当一个结构体只多个字段分别来自不同的生命周期的变量，而结构体本身只有一个生命周期时，编译器可能无法推断准确的引用。 struct Person<'a> { pub name: &'a str, pub age: &'a u32, } fn main() { let name = String::from("xfy"); let n; { let age = 18u32; let xfy = Person { name: &name, age: &age, }; n = xfy.name; } println!("{}", n); }</code></pre>error[E0597]: `age` does not live long enough --> examples/reference.rs:13:18 | 10 | let age = 18u32; | --- binding `age` declared here ... 13 | age: &age, | ^^^^ borrowed value does not live long enough ... 16 | } | - `age` dropped here while still borrowed 17 | println!("{}", n); | - borrow later used here</code></pre> 虽然代码本身不会创建任何悬空指针，但是编译器还是拒绝了这段代码。 Person</code> 的两个字段在生命周期的生命上具有相同的生命周期 'a</code> 的引用，因此 Rust 必须要找到一个同时适合 xfy.name</code> 和 xfy.age</code> 的生命周期。</li> 赋值 n = xfy.name</code> 就要求 'a</code> 涵盖到变量 n</code> 到生命周期。</li> 使用 &age</code> 初始化 xfy.age</code>，这就要求 'a</code> 不能长于 age</code> 的生命周期。</li> </ul> 显然这些约束是不能同时满足的，所以就需要为结构体的不同字段声明使用不同的生命周期。 struct Person<'a, 'b> { pub name: &'a str, pub age: &'b u32, } fn main() { let name = String::from("xfy"); let n; { let age = 18u32; let xfy = Person { name: &name, age: &age, }; n = xfy.name; } println!("{}", n); }</code></pre> 第 4 章所有权与移动 2024-05-22T00:00:00+00:00 谈及内存管理，我们希望编程语言具备两个特点： 希望能在我们选定的时机及时释放，这使我们能控制程序的内存消耗；</li> 在对象被释放后，我们绝不希望继续使用指向它的指针，这是未定义行为，会导致崩溃和安全漏洞。</li> </ul> 所有权</a></h2> 在使用指向一个堆内存的指针时，人们普遍认为，虽然其他代码也可以创建指向拥有内存的临时指针，但是在拥有者决定销毁拥有对象之前，其他代码有责任确保其指针已消失。这便是所有权的示例，拥有者决定被拥有者的生命周期，其他所有人都必须尊重其决定。 然而，在 Rust 中，所有权这个概念内置于语言本身，并通过编译期检查强制执行。每个值都有决定其生命周期的唯一拥有者。当游泳者被释放时，它拥有的值也会同时被释放，在 Rust 术语中，释放的行为被称为丢弃（drop）。 Rust 的 Box 类型是所有权的另一个例子。Box<T></code> 是指向在堆上的 T</code> 类型值的指针。因为 Box 拥有它所指向的空间，所以当丢弃 Box 时，也会释放此空间。 let point = Box::new((0.625, 0.5)); let label = format!("{:?}", point); println!("Point {}", label);</code></pre> 就像变量拥有自己的值一样，结构体拥有自己的字段，元组、数组和向量拥有自己的元素。 struct Person { name: String, age: u32, } let composers = vec![ Person { name: "xfy".to_string(), age: 18, }, Person { name: "dfy".to_string(), age: 18, }, Person { name: "Sonetto".to_string(), age: 18, }, ]; composers.iter().for_each(|composer| { println!("{}, age {}", composer.name, composer.age); });</code></pre> 这里有很多所有权关系，但每个都一目了然：composers</code> 变量拥有一个向量，向量拥有自己的元素，每个元素都是一个 Person</code> 结构体，每个结构体都拥有自己的字段，并且字符串拥有自己的文本。当控制流离开声明 composers</code> 的作用域时，程序会丢弃自己的值并将整棵所有权树一起丢弃。 所有权关系的重要性：每个值都有一个唯一的拥有者，因此很容易决定何时丢弃它。但是每个值可能会拥有许多其他值，这些值还可能拥有其他值。 由此可见，拥有者及其拥有那些值形成了一棵树：值的拥有者时值的父节点，值拥有的值时值的字节点。每棵树的总根都是一个变量，当该变量超出作用域时，整棵树都将随之消失。 从某种意义上来说，Rust 确实不如其他语言强大：其他所有使用的编程语言都允许你构建出任意复杂的对象图，这些对象可以以我们认为合适的方式相互引用。 解决问题的方式通常时灵活多样的，因此总是会有一些完美的解决方案能同时满足它所施加的限制。 </blockquote> 单一所有权的概念仍然过于严格，还处理不了某些场景。Rust 从几个方面拓展了这种简单的思想。 可以将值从一个拥有者转移给另一个拥有者。这允许我们构建、重新排列和拆除树形结构。</li> 像整数、浮点数和字符这样的非常简单的类型，不受所有权规则的约束。这些称之为 Copy 类型。（通常是存在栈上可复制的类型）</li> 标准库提供了引用计数指针类型 Rc 和 Arc，它们允许值在某些限制下有多个拥有者。</li> 可以对值进行”借用“（borrow），以获得值的引用。这种引用是非拥有型指针，有着受限的生命周期。</li> </ul> 移动</a></h2> 在 Rust 中，对大多数类型来说（没有实现 Copy 的值），像为变量赋值、将其传递给函数或从函数返回这样的操作都不会复制，而是会移动值。源会把值的所有权转移给目标并变回未初始化状态，改由目标变量来控制值的生命周期。Rust 程序以每次指移动一个值的方式建立和拆除复杂的结构。 历史发展到今天，赋值应该已经是含义最明确的操作了。但是，如果仔细观察不同的语言处理赋值的操作方式，你会发现不同的编程流派之间实际上存在着相当明显的差异。 例如如下 Python 代码： arr = ['udon', 'ramen', 'soba'] trr = arr urr = arr print("Address of arr", hex(id(arr))) print("Address of trr", hex(id(trr))) print("Address of urr", hex(id(urr)))</code></pre> 每个 Python 对象都有一个引用计数，以用于跟踪当前正引用着此值的数量。因此对于一个引用值数组来说，只有 arr</code> 变量指向列表，当程序对 trr</code> 和 urr</code> 赋值时，Python 会直接让目标指向与源相同的对象，并增加引用计数来实现赋值。这和我们的老朋友 JavaScript 是类似的。 而在 C++ 中： // Include the necessary header files #include <iostream> #include <vector> #include <string> // Declare the namespace using namespace std; // Write a main function int main() { // Create three vectors of strings vector <string> arr = {"udon", "ramen", "soba"}; vector <string> trr = arr; vector <string> urr = arr; cout << &arr << endl; cout << &trr << endl; cout << &urr << endl; // Return 0 to indicate success return 0; }</code></pre> 赋值向量时则会深拷贝所有对象，从而选择让全部内存的所有权保持清晰。 而在 Rust 中，同样的的代码在默认情况下则无法通过编译： fn main() { let arr = vec!["udon", "ramen", "soba"]; let trr = arr; let urr = arr; println!("Address of arr {:?}", &arr as *const Vec<&str>); println!("Address of trr {:?}", &trr as *const Vec<&str>); println!("Address of urr {:?}", &urr as *const Vec<&str>); }</code></pre> 这是因为 Rust 的赋值操作会移动而不是复制或共享值。当我们将 arr</code> 赋给 trr</code> 时，arr</code> 的所有权被转移给了 trr</code>，而 arr</code> 变成了未初始化状态。这意味着我们不能再使用 arr</code> 来访问或修改向量。同样地，当我们将 trr</code> 赋给 urr</code> 时，trr</code> 的所有权也被转移给了 urr</code>，而 trr</code> 也变成了未初始化状态。因此，我们只能使用 urr</code> 来操作向量。 当然，如果我们需要达到与 C++ 同样的效果，则可以显式的深克隆目标对象： fn main() { let arr = vec!["udon", "ramen", "soba"]; let trr = arr.clone(); let urr = arr.clone(); println!("Address of arr {:?}", &arr as *const Vec<&str>); println!("Address of trr {:?}", &trr as *const Vec<&str>); println!("Address of urr {:?}", &urr as *const Vec<&str>); }</code></pre>值的移动</a></h3> 在一个常见的 Rust 赋值操作中，通常可能会涉及到很多移动操作（只要没有实现 Copy trait 的值，默认则都是移动）。像这样移动值乍一看可能效率低下，但有两点需要牢记。首先，移动的永远时值本身，而不是这些值拥有的堆存储。对象向量和字符串，值本身就是指单独的“三字标头”，幕后的大型元素数组和文本缓冲区仍然处于它们在堆中的位置。 移动与控制流</a></h3> 如果一个变量在执行了 if</code> 表达式中的条件后仍然有值，那么就可以在这两个分支中使用它： let x = vec![1, 2, 3]; if c { f(x); // Using 'x' here is allowed } else { g(x); // Using 'x' here is allowed } h(x); // Using 'x' here is not allowed, 'x' has been moved</code></pre> 出于类似的原因，禁止在循环中进行变量移动： let x = vec![1, 2, 3]; while f() { g(x); // Moving 'x' in a loop is not allowed } </code></pre> 同理，如果要从 Vec 中移动出一个元素，则会令其来源变为未初始化的状态，因为目标将获得该值的所有权，但并非值的每种拥有者都能变成未初始化的状态： let v = vec!["Hello".to_string(), "World".to_string()]; let second = v[1]; // 'second' takes ownership, leaving 'v' in an undefined state</code></pre> 所以要从 Vec 中移动出某个元素，需要使用一些特定的方法： // Create a vector of strings let mut vec = vec!["apple", "banana", "cherry", "date", "elderberry"]; // Remove and return the element at index 2 let fruit = vec.remove(2); println!("Removed {}", fruit); // cherry println!("Vector is now {:?}", vec); // ["apple", "banana", "date", "elderberry"] // Remove and return the element at index 1, replacing it with the last element let fruit = vec.swap_remove(1); println!("Removed {}", fruit); // banana println!("Vector is now {:?}", vec); // ["apple", "elderberry", "date"] // Remove and return the last element let fruit = vec.pop(); println!("Removed {:?}", fruit); // Some("date") println!("Vector is now {:?}", vec); // ["apple", "elderberry"] // Consume the vector and move its elements into a new vector let mut new_vec: Vec<String> = vec![]; for fruit in vec.into_iter() { new_vec.push(fruit); } println!("New vector is {:?}", new_vec); // ["apple", "elderberry"] // Create another vector of strings let mut vec = vec!["fig", "grape", "honeydew", "kiwi", "lime"]; // Create a draining iterator that removes and yields elements from index 1 to 3 (exclusive) let mut iter = vec.drain(1..3); println!("Drained {:?}", iter.next()); // Some("grape") println!("Drained {:?}", iter.next()); // Some("honeydew") println!("Drained {:?}", iter.next()); // None println!("Vector is now {:?}", vec); // ["fig", "kiwi", "lime"]</code></pre>Copy 类型：关于移动的例外情况</a></h2> 移动一个值会使移动的源变成未初始化的状态。大多数类型会被移动，而也是有例外的情况，即那些被 Rust 指定成 Copy 类型的类型。对 Copy 类型进行赋值会复制这个值，而不会移动它。赋值的源仍会保持已初始化和可用状态。 标准的 Copy 类型包括所有机器整数类型和浮点数类型、char 类型和 bool 类型，以及某些其他类型。Copy 类型的元组或固定大小的数组本身也是 Copy 类型。 根据经验，任何在丢弃值时需要做一些特殊操作的都不能是 Copy 类型：Vec 需要释放自身元素、File 需要关闭自身文件句柄、MutexGuard 需要解锁自身互斥锁，等等。对这些类型进行逐位复制会让我们无法弄清哪个值该对原始资源负责。 结构体只是默认情况下不是 Copy 类型。如果一个结构体的所有字段都是 Copy 类型，那么也可以通过属性 #[derive(Copy, Clone)]</code> 放置在此定义之上来创建 Copy 类型。 Copy 类型更灵活，因为赋值和相关操作不会把原始值变成未初始化状态。但对类型实现者而言，情况恰恰相反：Copy 类型可以包含的类型非常有限，而非 Copy 类型可以在堆上分配内存并拥有其他种类的资源。 异步 Rust 2024-03-27T00:00:00+00:00 async</code> 是 Rust 选择的异步模型。 并发在现代社会非常重要，多数主流语言都有对自己并发模型的设计以及取舍。 OS 线程, 它最简单，也无需改变任何编程模型(业务/代码逻辑)，因此非常适合作为语言的原生并发模型，在多线程章节</a>也提到过，Rust 就选择了原生支持线程级的并发编程。但是，这种模型也有缺点，例如线程间的同步将变得更加困难，线程间的上下文切换损耗较大。使用线程池在一定程度上可以提升性能，但是对于 IO 密集的场景来说，线程池还是不够。</li> 事件驱动（Event driven）, 这个名词你可能比较陌生，如果说事件驱动常常跟回调（Callback）一起使用，相信大家就恍然大悟了。这种模型性能相当的好，但最大的问题就是存在回调地狱的风险：非线性的控制流和结果处理导致了数据流向和错误传播变得难以掌控，还会导致代码可维护性和可读性的大幅降低，大名鼎鼎的 JavaScript</code> 曾经就存在回调地狱。</li> 协程（Coroutines） 可能是目前最火的并发模型，Go</code> 语言的协程设计就非常优秀，这也是 Go</code> 语言能够迅速火遍全球的杀手锏之一。协程跟线程类似，无需改变编程模型，同时，它也跟 async</code> 类似，可以支持大量的任务并发运行。但协程抽象层次过高，导致用户无法接触到底层的细节，这对于系统编程语言和自定义异步运行时是难以接受的</li> actor 模型是 erlang 的杀手锏之一，它将所有并发计算分割成一个一个单元，这些单元被称为 actor</code> , 单元之间通过消息传递的方式进行通信和数据传递，跟分布式系统的设计理念非常相像。由于 actor</code> 模型跟现实很贴近，因此它相对来说更容易实现，但是一旦遇到流控制、失败重试等场景时，就会变得不太好用</li> async/await，该模型性能高，还能支持底层编程，同时又像线程和协程那样无需过多的改变编程模型，但有得必有失，async</code> 模型的问题就是内部实现机制过于复杂，对于用户来说，理解和使用起来也没有线程和协程简单，好在前者的复杂性开发者们已经帮我们封装好，而理解和使用起来不够简单，正是本章试图解决的问题。</li> </ul> Rust 选择的取舍是，同时支持系统 OS 线程和 async 异步： 系统线程通过标准库实现，应对不是非常的并发，而需要并行计算时。优点是线程内的代码执行效率更高、实现更直观更简单。</li> 异步通过语言特性 + 标准库 + 三方库的方式实现。并发性能会更好，但也需要额外的运行时支持。</li> </ul> Rust 中异步的特点： Future 在 Rust 中是惰性的，只有在被轮询(poll</code>)时才会运行，因此丢弃一个 future</code> 会阻止它未来再被运行, 你可以将 Future</code> 理解为一个在未来某个时间点被调度执行的任务。</li> Async 在 Rust 中使用开销是零，意味着只有你能看到的代码(自己的代码)才有性能损耗，你看不到的(async</code> 内部实现)都没有性能损耗，例如，你可以无需分配任何堆内存、也无需任何动态分发来使用 async</code> ，这对于热点路径的性能有非常大的好处，正是得益于此，Rust 的异步编程性能才会这么高。</li> Rust 没有内置异步调用所必需的运行时，但是无需担心，Rust 社区生态中已经提供了非常优异的运行时实现，例如大明星 tokio</code></a>。</li> 运行时同时支持单线程和多线程。</li> </ul> 异步函数</a></h2> 一个普通函数会在调用时会立即执行，而一个异步函数的行为并非如此。 fn main() { normal_fool(); // print right now. } fn normal_fool() { println!("normal_fool"); }</code></pre> 异步函数的情况： #![allow(dead_code, unused_variables)] fn main() { normal_fool(); let foo1 = foo1(); // -> impl Future<Output = ()> } fn normal_fool() { println!("normal_fool"); } async fn foo1() { println!("foo1"); }</code></pre> 异步函数 foo1()</code> 并不会理解执行，而是返回一个 Future</code>。将一个函数标记为 async fn</code> 时也表明改函数会被转换成一个返回一个实现了 Future</code> 的值。 也就是说 foo1()</code> 与 foo2()</code> 是相同的： async fn foo1() { println!("foo1"); } fn foo2() -> impl Future<Output = ()> { async { println!("foo1"); } }</code></pre>与 JavaScript 相比</a></h2> 与老朋友 JavaScript 不同的时，Future 在 Rust 中是惰性的。在 JavaScript 中，创建一个异步的任务，无论是任务队列，还是 Promise，它都会立即执行。而且 JavaScript 自带异步运行时。 JavaScript 中的异步任务会立即被添加到任务队列中；</li> JavaScript 自带异步运行时；</li> JavaScript 中 async/await</code> 语法只是 Promise 到语法糖；</li> </ul> 在 JavaScript 中，一个异步任务会被立即添加到任务队列中的末尾。如果不做任何处理，则该异步任务会立即脱离当前环境。 const sleep = async (duration) => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, duration); }); }; const main = async () => { console.log("hello"); sleep(1000); console.log("world"); }; main();</code></pre> 此处的 sleep</code> 函数则会在之前到当前行时立即被添加到任务队列的末尾。等到 main</code> 函数其他同步代码都执行完成后，才会在等待 1000ms 并结束 main</code> 函数。这是 JavaScript 最基本的异步运行方式。 Future</a></h2> 但 Rust 首当其冲不同的就是，Future 是惰性的。一个 async 函数会返回一个 Future</code>，若直接调用该函数，不会发生任何事，因为 Future 还没有被执行。 Future 人如其名，可以理解为它是一个定义在未来被执行的任务，若不触发它则不会执行。使用一个 Future 需要使用一个执行器。 futures</code> 包为我们提供了一个最简单粗暴的执行器：block_on</code>。它会阻塞当前线程以等待任务完成。 use futures::executor::block_on; fn main() { let future = sleep(); block_on(future); } async fn sleep() { println!("Try to sleep.") }</code></pre>await</a></h3> 既然一个函数被标记为了 async 函数，那肯定少不了它的搭档 await。在一个 async 函数执行另一个 async 函数的方法就是使用 await。不过与 JavaScript 或 C# 等语言不同的是，在 Rust 中使用 await 看上去更像是一个方法的调用： use futures::executor::block_on; fn main() { let future = sleep(); block_on(future); } async fn sleep() { hello_cat().await; println!("Try to sleep.") } async fn hello_cat() { println!("Hello kitty.") }</code></pre> 如果移除 await 字段，则编译器会给我们 futures do nothing unless you .await or poll them</code> 的提示。出了 await 的方式运行 async 函数，还有个就是使用轮询。 与 block_on</code> 不同的时，await 不会阻塞当前的线程。而是异步的等待 Future 的完成，在等待的过程中，该线程还可以继续执行其他的任务，从而实现了并发处理的效果。 #![feature(future_join)] use async_std::task::sleep; use futures::executor::block_on; use std::future::join; use std::time::Duration; fn main() { let f1 = try_sleep(); let f2 = hello_dog(); block_on(join!(f1, f2)); } async fn try_sleep() { hello_cat().await; sleep(Duration::from_secs(3)).await; println!("Try to sleep.") } async fn hello_cat() { println!("Hello kitty.") } async fn hello_dog() { println!("Hello puppy"); }</code></pre> join!</code> 宏可以并发的处理和等待多个 Future，当 try_sleep</code> 被阻塞时，则 hello_dog</code> 可以拿过线程的所有权继续执行。通过这种方式实现了使用同步的代码顺序实现了异步的执行效果。 Future 特征</a></h2> 与 JavaScript 将异步任务放到任务队列尾端不同的时，Rust 的 Future 特征恰恰是异步函数的返回值和被执行的关键。 trait SimpleFuture { type Output; fn poll(&mut self, wake: fn()) -> Poll<Self::Output>; } #[derive(Debug)] enum Poll<T> { Ready(T), Pending, }</code></pre> 这里模拟真正的 Future 实现一个简易版的 SimpleFuture</code>。一个 Future 需要被执行器 poll</code> 轮询后才能执行，通过调用该方法，可以推进 Future 的进一步执行，直到被阻塞将运行权转移给其他 Future。 若在当前 poll</code> 中，Future 可以被完成，则会返回 Poll::Ready(result)</code>，反之则返回 Poll::Pending</code>。并安排一个 wake</code> 函数，当未来 Future 准备好被切回来继续执行时，该函数就会被调用。然后继续刚开始的步骤，该 Future 的执行器会再次调用 poll</code> 方法，此时 Future 就可以继续执行了。 再来模拟一个简单的 Socket，并从一个 socket 中异步读取数据。当该 socket 中有数据时，就直接读取数据并返回 Poll::Ready(data)</code>；如果数据还没准备好，Future 会被阻塞且不再继续执行，并注册一个 wake</code> 函数，当 socket 数据准备好的时候，该函数将被调用以通知执行器继续执行。 use std::{thread::sleep, time::Duration}; pub struct Socket { pub test: u8, } impl Socket { pub fn has_data_to_read(&self) -> bool { return false; } pub fn read_buf(&self) -> Vec<u8> { return vec![]; } pub fn set_readable_callback(&self, wake: fn()) { sleep(Duration::from_secs(3)); wake(); } }</code></pre> Future</code> 本身是一个 trait，除了 async 函数会自动实现这个 trait，我们还可以手动为结构体去实现它。其中 poll</code> 方法就是执行异步函数的主要部分，它配合惰性的特性，在执行器的驱动下实现了异步的主要功能：待会再执行。 pub struct SocketRead<'a> { socket: &'a Socket, } impl SimpleFuture for SocketRead<'_> { type Output = Vec<u8>; fn poll(&mut self, wake: fn()) -> Poll<Self::Output> { if self.socket.has_data_to_read() { // socket 有数据，写入 buffer 并返回 Poll::Ready(self.socket.read_buf()) } else { // socket 中还没数据 // // 注册一个 `wake` 函数，当数据可用时，该函数会被调用， // 然后当前 Future 的执行器会再次调用 `poll` 方法，此时就可以读取到数据。 self.socket.set_readable_callback(wake); Poll::Pending } } }</code></pre>构建自己的异步运行时</a></h2> Future 的实现略微复杂，不是一个 SimpleFuture 就能够解决的。要想完全了解 Rust 异步在背后是如何运行的，就需要手动来构建一个简化版的 Future。 使用 Waker 来唤醒任务</a></h3> Future 的 poll</code> 方法决定了异步的特性，对于 Future 来说，第一次执行 poll</code> 方法无法执行完成是正常的。当其阻塞时，需要将执行的优先权让给其他 Future。并且需要确保在未来一旦准备好时，可以继续执行 poll</code> 方法。而通知可以继续执行 poll</code> 方法就是通过 Waker 来完成的。 Waker 提供了一个 wake</code> 方法用于告诉执行器（后续创建），相关的任务可以继续执行了，此时执行器就可以对对应的 Future 再次执行 poll</code> 方法。 构建定时器</a></h3> 构建定时器之前我们需要一个 Future，因此需要使用到标准库中的 future</code>。 但实现一个真正的异步运行时非常复杂的，不仅仅是 Future 本身，还有其他 API 的异步操作。所以这里使用标准库中的 Future 来创建一个简单的定时 Future：TimeFuture。它的特点就是在第一次 poll</code> 时会创建一个定时器来模拟需要被等待的任务，当定时器结束后，使用 Waker 通知 Executor 来再次执行 poll</code>。 非常的简单易懂，通过这个简单的 Future 就能够大致的了解了 Future 是如何执行与调度任务了。 pub struct TimerFuture { shared_state: Arc<Mutex<SharedState>>, } /// 在 Future 和等待的线程间共享状态 struct SharedState { /// 是否已经开始过第一次 `poll` started: bool, /// 定时（睡眠）是否结束 completed: bool, /// 定时时长 duration: Duration, /// 当睡眠结束后，线程可以用 `waker` 通知 `TimerFuture` 来唤醒任务 waker: Option<Waker>, }</code></pre> 我们的 Future 非常简单，结构体中只保存了一个用于共享的状态。其中状态中包含一个 waker</code>，当线程睡眠结束后可以使用它来通知我们的 TimeFuture 来唤醒任务再次执行。 为什么需要 started</code> 状态？这里是为了模拟真正的 Future 的惰性，将实际的工作代码放在 poll</code> 方法内，只有在第一次被 poll</code> 时（也就是 .await</code> 时）才会真正的执行。后续则根据 completed</code> 来决定返回的 Poll 状态。 </blockquote> 当然到这里 TimeFuture 还不是一个真正的 Future，它还需要实现 Future 这个 trait。这里的 poll</code> 方法非常简单，根据共享状态，如果该方法是第一次执行，则创建一个新的线程来执行真正的任务。然后继续向下执行，判断状态中 completed</code> 是否完成，如果未完成则返回 Poll::Pending</code> 表示该异步任务放到后面还要执行。如果完成则返回 Poll::Ready(())</code> 表示该任务已经执行完成。 而刚刚创建用来执行真正任务的线程，则会休眠指定的时间。当休眠结束后，其线程会继续执行它的代码，也就是标记 completed</code> 为完成，同时调用共享状态中的 waker.wake()</code> 方法来通知执行器可以继续 poll</code> 了。 impl Future for TimerFuture { type Output = (); fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> { // 通过检查共享状态，来确定定时器是否已经完成 let mut shared_state = self.shared_state.lock().unwrap(); if !shared_state.started { let thread_shared_state = self.shared_state.clone(); thread::spawn(move || { let mut shared_state = thread_shared_state.lock().unwrap(); println!("start first execute"); shared_state.started = true; thread::sleep(shared_state.duration); // 通知执行器定时器已经完成，可以继续`poll`对应的`Future`了 shared_state.completed = true; if let Some(waker) = shared_state.waker.take() { waker.wake() } }); } if shared_state.completed { Poll::Ready(()) } else { // 设置 `wkaer`，这样新线程在睡眠结束后可以唤醒当前的任务，接着再次对 `Furture` 进行 // `poll` 操作 // // 下面的`clone`每次被`poll`时都会发生一次，实际上，应该是只`clone`一次更加合理。 // 选择每次都`clone`的原因是： `TimerFuture`可以在执行器的不同任务间移动，如果只克隆一次， // 那么获取到的`waker`可能已经被篡改并指向了其它任务，最终导致执行器运行了错误的任务 shared_state.waker = Some(cx.waker().clone()); Poll::Pending } } }</code></pre> 而该结构体的创建则非常简单，创建一个可线程间共享的状态即可。重点的 waker</code> 现在还是 None</code>，是因为它会在第一次 poll</code> 时由 Executor 来创建并当作 context 来传递给 poll</code> 方法。也就是 cx: &mut Context<'_></code>。至于为什么签名是 Context</code> 会在后面的构建 Executor 中看到。 impl TimerFuture { /// 创建一个新的`TimerFuture`，在指定的时间结束后，该`Future`可以完成 pub fn new(duration: Duration) -> Self { let shared_state = Arc::new(Mutex::new(SharedState { started: false, completed: false, duration, waker: None, })); TimerFuture { shared_state } } }</code></pre>执行器 Executor</a></h3> Rust 的 Future 是惰性的，默认情况下不会去主动的执行。在 async</code> 函数中使用 .await</code> 能调用另一个 async</code> 函数。.await</code> 总是需要 async</code> 的存在，那最外层的 Future 该怎么才能执行呢？没错，就是执行器 Executor。 执行器会管理一批 Future</code> (最外层的 async</code> 函数)，然后通过不停地 poll</code> 推动它们直到完成。最开始它会主动调用一次 poll</code> 方法，并传递响应的 Context</code>，后续就不会再主动的执行 poll</code> 方法了，而是等待 Future 的 wake 函数通知它继续执行。这种 wake 通知然后 poll 的方式会不断重复，直到 Future</code> 完成。 构建执行器</a></h3> 终于到了构建执行器这一步。 Rust 的 Future</code> 是惰性的，只有主动进行 poll</code> 之后才会开始执行。其中一个主动 poll</code> 的方式就是在 async</code> 函数中使用 await</code> 来调用另一个 async</code> 函数。但这只能解决在 async</code> 函数中的 Future</code>。再最外层的 async</code> 函数终究需要一个主动运行的办法。这就是执行器 executor</code> 的重要工作。 执行器负责管理最外层的 async</code> 函数，通过不停的 poll</code> 来执行所有的异步函数。不过执行器只会主动 poll</code> 一次 Future，后续则不会在进行主动 poll</code> 操作。而是等待 Future 调用 wake</code> 函数来通知它可以继续执行，它才会继续 poll</code>。这种 wake</code> 然后 poll</code> 的方式会不断重复，直到 Future 完成。 构建一个属于我们自己的迷你执行器，需要用到 futures</code> 包中的 ArcWake</code> 特征，它可以帮助我们去构建 Waker。 cargo add futures</code></pre> 首先我们需要创建一个执行器的结构体，结构体中有一个 ready_queue</code> 字段，用于存放 sync_channel</code> 发送过来的 Task。Task 就是执行任务的关键。 /// 任务执行器，负责从通道中接收任务然后执行 pub struct Executor { pub ready_queue: Receiver<Arc<Task>>, }</code></pre> 随后就需要一个创建异步任务的 Spawner 和执行器的 ready_queue</code> 字段类似，它的 task_sender</code> 就是用于发送 Task 给执行器的。 #[derive(Clone)] pub struct Spawner { pub task_sender: SyncSender<Arc<Task>>, }</code></pre> 接下来则是最重要的部分 Task，根据上述 Executor</code> 和 Spawner</code> 的字段签名就能看出来，他们发送和接受的分别就是 Task 结构体。Task 结构体中有两个重要的部分，分别是 future</code> 本身和与 Spawner</code> 一样的 task_sender</code> 用于将 Future 放回通道中，等待执行器 poll。 /// 一个Future，它可以调度自己(将自己放入任务通道中)，然后等待执行器去`poll` pub struct Task { /// 进行中的Future，在未来的某个时间点会被完成 /// /// 按理来说`Mutex`在这里是多余的，因为我们只有一个线程来执行任务。但是由于 /// Rust并不聪明，它无法知道`Future`只会在一个线程内被修改，并不会被跨线程修改。因此 /// 我们需要使用`Mutex`来满足这个笨笨的编译器对线程安全的执着。 /// /// 如果是生产级的执行器实现，不会使用`Mutex`，因为会带来性能上的开销，取而代之的是使用`UnsafeCell` pub future: Mutex<Option<BoxFuture<'static, ()>>>, /// 可以将该任务自身放回到任务通道中，等待执行器的poll pub task_sender: SyncSender<Arc<Task>>, }</code></pre> 其中 pub future: Mutex<Option<BoxFuture<'static, ()>>></code> 的这个签名才是重要所在。首先第一个 Mutex 的作用主要是告诉编译器我们的 future 是线程安全的，虽然我们只有一个线程来执行任务，但编译器无从得知。 其次就是 BoxFuture<'a, T></code>，这是个类型别名： type BoxFuture<'a, T> = Pin<Box<dyn Future<Output = T> + Send + 'static>>;</code></pre> 由于 Future 的特性，需要使用 Pin<T></code> 来保证其在内存中固定的位置，不会移动。后续的特征对象表示我们的 Future 可以在线程中安全的移动。 到此我们的 Task 才完成了一半，还需要将其实现 ArcWake 特征才能在执行器中将其变成 wake</code>，用于后续通知执行器继续 poll</code> 。 不过在此之前，我们先来实现一下 Spawner</code> 的 spawn</code> 方法，它负责创建新的 Future，并将其放到任务通道中。 /// `Spawner`负责创建新的`Future`然后将它发送到任务通道中 impl Spawner { pub fn spawn(&self, future: impl Future<Output = ()> + 'static + Send) { let future = Box::pin(future); let task = Arc::new(Task { future: Mutex::new(Some(future)), task_sender: self.task_sender.clone(), }); self.task_sender.send(task).expect("任务队列已满"); } }</code></pre> 在创建新的 Task 时，我们将 Spawner</code> 自身的 task_sender</code> 保存给了 Task，其作用就是用于将 Task 自身发送到任务通道中。在 spawn</code> 执行时我们将直接 Task 发送到执行器。 随后就是给 Task 实现 ArcWake 了，我们只需要实现一个方法 wake_by_ref</code>，它就是 wake</code> 的核心所在。当调用 wake</code> 时，它将 clone 自身的 Arc 并发送到任务通道。 impl ArcWake for Task { fn wake_by_ref(arc_self: &Arc<Self>) { let cloned = arc_self.clone(); arc_self.task_sender.send(cloned).expect("任务队列已满"); } }</code></pre> Spawner</code> 和 Task</code> 主要是将 Future 发送到任务通道中，而我们最后一个实现的方法就是接受并执行通过任务通道发送过来的任务。在上述 Spawner</code> 第一次 spawn</code> 的时候，就会立即发送到任务通道。这就是 Future 的第一次执行，也就是执行器的主动 poll</code>，后续则根据传递过去的 wake</code> 方法来通知（发送 Task 到任务通道）执行器继续 poll</code> 。 impl Executor { pub fn run(&self) { while let Ok(task) = self.ready_queue.recv() { // 获取一个future，若它还没有完成(仍然是Some，不是None)，则对它进行一次poll并尝试完成它 let mut future_slot = task.future.lock().unwrap(); if let Some(mut future) = future_slot.take() { // 基于任务自身创建一个 `LocalWaker` let waker = waker_ref(&task); let context = &mut Context::from_waker(&waker); // `BoxFuture<T>`是`Pin<Box<dyn Future<Output = T> + Send + 'static>>`的类型别名 // 通过调用`as_mut`方法，可以将上面的类型转换成`Pin<&mut dyn Future + Send + 'static>` if future.as_mut().poll(context).is_pending() { // Future还没执行完，因此将它放回任务中，等待下次被poll *future_slot = Some(future) } } } } }</code></pre> 所以我们为 Executor</code> 实现的 run</code> 方法就是循环任务通道，当接受到任务时，首先将取出 Option</code> 中的 Task。并基于任务自身创建一个 waker，这就是上述为 Task 实现 ArcWake 的作用： let waker = waker_ref(&task); let context = &mut Context::from_waker(&waker);</code></pre> 通过这两个方法，就能将任务自身创建成一个在 Future 中传递的上下文，也就是 fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>)</code> 中的 cx</code>，用于通知执行器可以再次 poll</code> 了。 if let Some(waker) = shared_state.waker.take() { waker.wake() }</code></pre> 最后一句即是执行 Future 的 poll</code> 方法，并传递 waker。同时根据其返回值判断是否时 pending</code> 状态。如果是，则将 Future 在放回起初的 Option</code> 中，等待其调用 wake</code> 方法。 if future.as_mut().poll(context).is_pending() { // Future还没执行完，因此将它放回任务中，等待下次被poll *future_slot = Some(future) }</code></pre> 到此，属于我们自己的迷你 Executor 就创建完成了。可以通过 Spawner 创建一个真正的 Future 测试了： pub fn new_executor_and_spawner() -> (Executor, Spawner) { // 任务通道允许的最大缓冲数(任务队列的最大长度) // 当前的实现仅仅是为了简单，在实际的执行中，并不会这么使用 const MAX_QUEUED_TAKSS: usize = 10_000; let (task_sender, ready_queue) = sync_channel(MAX_QUEUED_TAKSS); (Executor { ready_queue }, Spawner { task_sender }) }</code></pre>#[cfg(test)] mod tests { use std::time::Duration; use crate::{executor::new_executor_and_spawner, waker::TimerFuture}; #[test] fn it_works() { let (exec, spawner) = new_executor_and_spawner(); spawner.spawn(async { println!("howdy!"); TimerFuture::new(Duration::new(2, 0)).await; println!("done!") }); drop(spawner); exec.run(); } }</code></pre> 要在 test 中输出到 std，则需要使用： cargo test -- --nocapture</code></pre> Gentoo 指北 2024-03-23T00:00:00+00:00 Binary!</a></h2> Gentoo gose Binary!</a> 在一月的倒数前两天，Gentoo 整了个新活。不再像以前只有过于复杂的软件提供了二进制文件（例如 linux 内核和 firefox），现在整个包管理器 Portage 都提供了二进制的选择。 You probably all know Gentoo Linux as your favourite source-based distribution. Did you know that our package manager, Portage, already for years also has support for binary packages </blockquote> 终究还是变成了当初自己最讨厌的那个自己。 要用上最新的二进制软件分发，第一步就是确认镜像源。 sudo vim /etc/portage/binrepos.conf/gentoobinhost.conf</code></pre> 在 /etc/portage/</code> 中新增的 binrepos.conf</code> 文件夹中就是新的二进制文件的镜像。 # These settings were set by the catalyst build script that automatically # built this stage. # Please consider using a local mirror. [gentoobinhost] priority = 1 # sync-uri = https://gentoo.osuosl.org/releases/amd64/binpackages/17.1/x86-64 sync-uri = https://mirrors.tuna.tsinghua.edu.cn/gentoo/releases/amd64/binpackages/17.1/x86-64/</code></pre> 在 make.conf</code> 中，可以通过 EMERGE_DEFAULT_OPTS</code> 为 emerge 设置新的默认使用二进制的选项。 # Binary packages BINPKG_FORMAT="gpkg" EMERGE_DEFAULT_OPTS="${EMERGE_DEFAULT_OPTS} --getbinpkg --binpkg-respect-use=n" FEATURES="getbinpkg"</code></pre> --binpkg-respect-use=n</code> 的设置会使得当 gentoo 分发的二进制软件不符合当前的 USE flags 时，仍然考虑安装。将其设置到 make.conf</code> 中可能会出事。 磁盘与分区</a></h2> 根据手册中描述的对应磁盘类型的设备名称，可以更方便的找到对应的设备。 Type of device</th> Default device handle</th> Editorial notes and considerations</th></tr></thead> IDE, SATA, SAS, SCSI, or USB flash</td> /dev/sda</td> Found on hardware from roughly 2007 until the present, this device handle is perhaps the most commonly used in Linux. These types of devices can be connected via the SATA bus</a>, SCSI</a>, USB</a> bus as block storage. As example, the first partition on the first SATA device is called /dev/sda1.</td></tr> NVM Express (NVMe)</td> /dev/nvme0n1</td> The latest in solid state technology, NVMe</a> drives are connected to the PCI Express bus and have the fastest transfer block speeds on the market. Systems from around 2014 and newer may have support for NVMe hardware. The first partition on the first NVMe device is called /dev/nvme0n1p1.</td></tr> MMC, eMMC, and SD</td> /dev/mmcblk0</td> embedded MMC</a> devices, SD cards, and other types of memory cards can be useful for data storage. That said, many systems may not permit booting from these types of devices. It is suggested to not use these devices for active Linux installations; rather consider using them to transfer files, which is their typical design intention. Alternatively this storage type could be useful for short-term file backups or snapshots.</td></tr> </tbody></table> 磁盘的分区是一个老生常谈的问题了，分区的主要痛点不是在于给哪个区分多大的空间，而是要注意对应当前设备的启动方式选择好合适的分区表以及分区格式。毕竟当所有东西都编译完成之后发现分区表错了才是最痛苦的。 常见的分区表选择有： GPT（GUID Partition Table）：GPT 是可以为传统 BIOS 启动做分区表的，但是就无法与 Windows 做多个系统了。</li> MBR（Master boot record）：传统的分区表，支持 BIOS，但对最大硬盘只能支持到 2 TiB。</li> </ul> EFI 的配置会稍微多一点，BIOS 启动则会简单一点。SWAP 则看个人喜好。 GPT for UEFI 的常见分区： Device path (sysfs)</th> Mount point</th> File system</th> DPS UUID (PARTUUID)</th> Description</th></tr></thead> /dev/sda1</td> /efi</td> vfat</td> c12a7328-f81f-11d2-ba4b-00a0c93ec93b</td> EFI system partition (ESP) details.</td></tr> /dev/sda2</td> N/A. Swap is not mounted to the filesystem like a device file.</td> swap</td> 0657fd6d-a4ab-43c4-84e5-0933c84b4f4f</td> Swap partition details.</td></tr> /dev/sda3</td> /</td> xfs</td> 4f68bce3-e8cd-4db1-96e7-fbcaf984b709</td> Root partition details.</td></tr> </tbody></table> MBR for BIOS 的常见分区 Device path (sysfs)</th> Mount point</th> File system</th> DPS UUID (PARTUUID)</th> Description</th></tr></thead> /dev/sda1</td> /boot</td> xfs</td> N/A</td> MBR DOS / legacy BIOS boot partition details.</td></tr> /dev/sda2</td> N/A. Swap is not mounted to the filesystem like a device file.</td> swap</td> 0657fd6d-a4ab-43c4-84e5-0933c84b4f4f</td> Swap partition details.</td></tr> /dev/sda3</td> /</td> xfs</td> 4f68bce3-e8cd-4db1-96e7-fbcaf984b709</td> Root partition details.</td></tr> </tbody></table> 安装前的其他准备</a></h2> 在分区完成，并挂载到 /mnt/gentoo</code> 后，可以先做点准备工作。例如启动 ssh</code> 实例，方便后续的一些复制粘贴操作。 rc-service start sshd</code></pre>时间</a></h3> 安装时的系统时间非常重要，C 的某些编译环节会需要正确的系统时间。如果在安装时没有设置好时间，则会导致进入系统后某些文件的创建时间不正确，可能会遇到例如： ninja: error: manifest 'build.ninja' still dirty after 100 tries</code></pre>Kernel</a></h2> Gentoo 为我们提供了三种内核的选择： Distribution Kernels：与其他多数发行版类似，Distribution Kernel 是已经配置过的，直接编译即可。除此之外还能够选择已经编译好的 sys-kernel/gentoo-kernel-bin</code>。</li> Genkernel：Gentoo 提供的一种配置内核的方式，能够提供比完全手动配置更方便的选择。</li> Manual configuration：完全的手动配置。</li> </ul> Manual configuration</a></h3> 整个 Linux 内核的可配置项目比较多，也不是一次性就能全部了解完的。当然也不用每个地方都需要修改。手动配置内核的主要目的还是在了解自身硬件的前提下，尽可能的调整到适合自己的硬件。同时也能关掉一些不用的功能，从而保证内核的精简。 配置</a></h2> 不同于其他的多数发型版，Gentoo 需要手动配置一些常见的项目。正因如此，Gentoo 给人一种仅次于 LFS 的感觉。 tmpfs</a></h3> /tmp</code> 分区默认是一个普通的文件夹，我们可以手动的将其挂载为 tmpfs</a>。 tmpfs /tmp tmpfs rw,nosuid,nodev,size=4G,mode=1777 0 0</code></pre>Emerge</a></h2> Emerge 不同于其他发型版提供的包管理器，是 Gentoo 提供的一种从源码编译软件的主要方式之一。也是使用 Gentoo 的特性之一的最佳方式：USE flags</code>。 不同于二进制直接发行，emerge 从源码编译时支持使用 USE flags</code> 来支持对软件的自定义。 例如安装 kitty 时只需要支持 wayland，不需要传统的 X 的支持。直接将其使用 flags -X</code> 标记为不需要即可，在编译时就不会编译对应的支持。 [ebuild R ] x11-terms/kitty-0.31.0::gentoo USE="wayland -X -test -verify-sig" PYTHON_SINGLE_TARGET="python3_11 -python3_10 (-python3_12)" 0 KiB</code></pre> 对软件精细的控制是 Gentoo 的特点之一，同时代价就是安装软件时的编译时间。对于本地编译从而提升对本机 CPU 的优化在编译时间面前可能显得一文不值。 Portage</a></h3> 说是 emerge 是类似包管理器，在官方 wiki Portage 页面</a> 中 Portage 才被称之为包管理器和分发系统，emerge 可以说是它的工具之一。出了包管理器之外，还有对整个系统的管理，例如设置 profile 等。 对 Portage 对设置文件都保存在 /etc/portage</code>，包括最熟悉的 make.conf</code>。 # /etc/portage drwxr-xr-x 3 root root 31 Nov 27 2022 profile drwxr-xr-x 3 root root 24 Nov 26 08:53 savedconfig drwxr-xr-x 2 root root 6 Dec 2 03:49 package.mask drwxr-xr-x 2 root root 41 Dec 5 21:29 package.accept_keywords -rw-r--r-- 1 root root 77 Dec 6 06:14 package.license -rw-r--r-- 1 root root 865 Dec 12 05:41 make.conf.euse_backup lrwxrwxrwx 1 root root 67 Dec 12 06:33 make.profile -> ../../var/db/repos/gentoo/profiles/default/linux/amd64/17.1/desktop -rw-r--r-- 1 root root 1.1K Jan 4 09:05 make.conf drwxr-xr-x 2 root root 76 Jan 4 09:26 repos.conf drwxr-xr-x 2 root root 32 Jan 4 09:36 binrepos.conf drwxr-xr-x 5 root root 154 Jan 4 21:18 gnupg drwxr-xr-x 2 root root 38 Jan 9 11:44 package.use</code></pre> 常用的或者说后续在使用系统时大概率是需要了解的： packge.mask</code>:</li> </ul> Flags 的设置</a></h3> 在 /etc/portage/make.conf</code> 中设置的是全局生效的 flags，也就是安装任何软件软件时，只要有对应的 flags 就会应用。 USE="wayland qsv jpegxl opengl vulkan drm icons pulseaudio videocodecs \ audiocodecs web alsa gles2 \ -gtk -plasma -gnome -kde -dvd -systemd -nvidia -bluetooth \ -qtwebengine -nouveau -thunderbolt -dri -accessibility -X"</code></pre> 如果要对单独某个软件设置 flags，则需要在 /etc/portage/package.use</code> 中为指定的软件设置。package.use</code> 可以是一个文件，也可以是一个文件夹。在新安装的系统中大概率是一个已经存在的文件夹，当是一个文件夹时，其下的所有文件中的 flags 都会被应用。 其写法与 make.conf</code> 中的 USE</code> 字段略微有点不同。/etc/portage/package.use/tmux</code> # tmux vim syntax >=app-misc/tmux-3.3a-r1 vim-syntax</code></pre>Hyprland</a></h2> 作为新时代的系统窗口协议，Wayland 是良好的 X11 替代品。 Wayland is a replacement for the X11 window system protocol and architecture with the aim to be easier to develop, extend, and maintain. </blockquote> 不同于 Sway 的目标是代替在 X11 上的 i3，Hyprland 则完全是全新的体验。得益于 GPU 的渲染，使得其能够拥有流畅的动画。 OpenRC</a></h3> 对于在 OpenRC 上运行，必不可少的： dbus</li> seatd</li> hyrpland</li> waybar</li> </ul> 如果没有使用 systemd</code> 可以使用 seatd</code> 的 server</code> flag 来以服务的方式运行 seatd</code> 从而代替 logind</code>。 Dbus</a></h3> 如果是没有选择 desktop</code> profile 安装的最小化环境，可能没有 XDG 的一些环境变量和需要的一些目录。 为其他机器编译内核</a></h2> 参考这个帖子：Compiling kernel from another pc can I use it to my pc?</a>。在为其他硬件编译内核只需要选择好目标所需要的驱动，并且别一不小心安装到当前机器上就行了。 配置完后，编译的步骤还是和以前一样： sudo make -j16 -l16</code></pre> 不同的是，modules_install</code> 可以通过指定环境变量来将所有的 modules 安装到指定位置，方便待会拷贝到指定的机器上。 sudo make modules_install INSTALL_MOD_PATH=/home/xfy/gentoo-mini</code></pre> 同理，整个内核也是可以通过环境变量来指定安装的位置。 sudo make install INSTALL_PATH=/home/xfy/gentoo-mini/</code></pre> 之后整个目录看起来就应该类似于 . |-- lib |-- config-6.1.57-gentoo-gentoo-xfy |-- System.map-6.1.57-gentoo-gentoo-xfy `-- vmlinuz-6.1.57-gentoo-gentoo-xfy</code></pre> 拷贝到目标机器之后，只需要删除旧的 modules（留着也可以），并将内核复制到 /boot</code>。再更新下启动配置即可。 sudo cp -aR lib/modules/6.1.57-gentoo-gentoo-xfy/ /lib/modules/ sudo cp config-6.1.57-gentoo-gentoo-xfy /boot/ sudo cp System.map-6.1.57-gentoo-gentoo-xfy /boot/ sudo cp vmlinuz-6.1.57-gentoo-gentoo-xfy /boot/</code></pre>sudo grub-mkconfig -o /boot/grub/grub.cfg</code></pre>系统的更新</a></h2> 在合并整个系统的包之前，首先要做的就是先同步下镜像。 sudo emerge-webrsync</code></pre> 然后便是直接合并，并重新编译。 sudo emerge -avuDU @world</code></pre> 对于新活 sudo emerge -avuDUg @world</code></pre>一些 emerge 的缩写</a></h2> Auto mask</a></h3> sudo emerge -av --autounmask=y --autounmask-write</code></pre>Update world</a></h3> sudo emerge -avuDN @world sudo emerge --ask --verbose --update --deep --newuse @world</code></pre> or sudo emerge -avuDU @world sudo emerge --ask --verbose --update --deep --changed-use @world'</code></pre> 大写的 N</code> 代表 --newuse</code>，大写的 U</code> 代表 --changed-use</code>。当已经被禁用的 USE flags 被添加或移除时，使用 --changed-use</code> 不会触发重新安装。 Deselect and clean dep</a></h3> sudo emerge -av -W app-editors/nano sudo emerge -av --depclean app-editors/nano</code></pre> 疑难杂症 2024-03-23T00:00:00+00:00 在 tauri 中为 command 使用自定义错误</a></h2> 在 tauri 的 command 中返回的任何值都必须要是可以 Serialize</code> 的，包括错误：Everything you return from commands must implement Serialize</code> use base64::DecodeError; use serde::{Serialize, Serializer}; use thiserror::Error; #[derive(Error, Debug)] pub enum VError { #[error("Request error: {0}")] RequestFaild(#[from] reqwest::Error), #[error("Decode error: {0}")] DecodeError(#[from] DecodeError), } // https://github.com/tauri-apps/tauri/discussions/3913 impl Serialize for VError { fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error> where S: Serializer, { serializer.serialize_str(self.to_string().as_ref()) } } pub type VResult<T, E = VError> = anyhow::Result<T, E>;</code></pre>async 语句中使用 ?</code></a></h2> async 语句块与 async fn 最大的不同就是前者无法显式的声明返回值，当配合 ?</code> 使用的时候编译器就无法得知 Result<T, E></code> 中 E 的类型。 async fn foo() -> Result<u8, String> { Ok(1) } async fn bar() -> Result<u8, String> { Ok(1) } pub fn main() { let fut = async { foo().await?; bar().await?; Ok(()) }; }</code></pre> 这段代码会得到编译器 cannot infer type for type parameter E declared on the enum Result</code> 的提示。原因在于编译器无法推断出 Result<T, E></code> 中的 E</code> 的类型。 目前的解决办法就是使用 ::<...></code> 显式的添加类型注解，给予类型注释后此时编译器就知道 Result<T, E></code> 中的 E</code> 的类型是 String</code>，进而成功通过编译。 let fut = async { foo().await?; bar().await?; Ok::<(), String>(()) // 在这一行进行显式的类型注释 };</code></pre>数组元素非基础类型</a></h2> Rust 的数组类型是存储在栈内存中的，但是它也是可以存储非基础类型的值。不过它不可以使用这样的数组初始化语法： let a = [3; 5];</code></pre> let a = [3; 5];</code> 的本质是 Rust 不断的 Copy 出来的，而非基本类型是无法深拷贝的。 正确的做法应该是使用 std::array::from_fn</code> 。 fn main() { let arr: [String; 6] = core::array::from_fn(|i| format!("Arr {}", i)); println!("{:?}", arr); }</code></pre>在 map 方法中使用 ?</code></a></h2> 在 map 方法中使用 Question mark 需要在 collect::<>()</code> 方法中显示注解 Result<T, E></code> let subscripition = subscripition .split('\n') .filter(|line| !line.is_empty()) .map(|line| { let line = line.replace("vmess://", ""); let line = general_purpose::STANDARD.decode(line)?; let line = String::from_utf8_lossy(&line).to_string(); Ok(serde_json::from_str::<Node>(&line)?) }) .collect::<VResult<Vec<_>>>()?;</code></pre>优雅的修改 Option 的内容</a></h2> 为 enum</code> 实现静态字符串</a></h2> #[derive(Debug, Serialize, Deserialize)] pub enum CoreStatus { Started, Restarting, Stopped, } impl CoreStatus { fn as_str(&self) -> &'static str { match self { CoreStatus::Started => "Started", CoreStatus::Restarting => "Restarting", CoreStatus::Stopped => "Stopped", } } }</code></pre>serde-rs deserialize string in json to number</a></h2> use std::fmt::Display; use std::str::FromStr; use serde::de::{self, Deserialize, Deserializer}; #[derive(Deserialize, Eq, PartialEq, Debug)] struct Test { #[serde(deserialize_with = "from_str")] test: u16 } fn from_str<'de, T, D>(deserializer: D) -> Result<T, D::Error> where T: FromStr, T::Err: Display, D: Deserializer<'de> { let s = String::deserialize(deserializer)?; T::from_str(&s).map_err(de::Error::custom) }</code></pre>serde deserialize multiple type</a></h2> https://www.reddit.com/r/rust/comments/fcz4yb/how_do_you_deserialize_strings_integers_to_float/ fn de_str<'de, D>(deserializer: D) -> Result<i64, D::Error> where D: serde::de::Deserializer<'de>, { Ok(match Value::deserialize(deserializer)? { Value::String(s) => s.parse().map_err(de::Error::custom)?, Value::Number(num) => num.as_i64().ok_or(de::Error::custom("Invalide number"))?, _ => return Err(de::Error::custom("wrong type")), }) } fn de_str_option<'de, D>(deserializer: D) -> Result<Option<i64>, D::Error> where D: serde::de::Deserializer<'de>, { Ok(match Value::deserialize(deserializer)? { Value::String(s) => s.parse().map(Some).map_err(de::Error::custom)?, Value::Number(num) => num.as_i64(), _ => return Err(de::Error::custom("wrong type")), }) }</code></pre>DerefMut 获取结构体多个字段 mut</a></h2> 在使用诸如 Arc<Mutex<T>></code> 的数据时，当获取到了锁的引用后，实际修改数据时，修改的是通过锁的 DerefMut</code> 来修改其数据的。 let mut config = config.lock().await; config.rua = "test";</code></pre> 而当数据中有多个字段需要分别获取为 mut</code> 时，则编译器可能无法正确的认识到实际获取的是不同的字段，而非将目标数据获取了多次 mut</code>。 let mut config = config.lock().await; let mut rua = &mut config.rua; let mut core = config.core.as_mut().unwrap(); // cannot borrow `config` as mutable more than once at a time</code></pre> 这是因为 DerefMut</code> 让编译器认为我们获取了两次 config</code> 结构体为 mut</code>，而非它的两个不同的字段。最佳解决办法就是通过手动解引用来获取到实际的结构体，从而使得编译器能够正确的认识到引用到字段。 let mut config = config.lock().await; let config = &mut *config; let mut rua = &mut config.rua; let mut core = config.core.as_mut().unwrap();</code></pre> 虽然自动解引用看上去获取的字段都是正确解引用的，但是编译器可能无法正确的识别到这两个字段是不同的。 ![[Pasted image 20230730004909.png]] 这可能是因为 Mutex</code> 使用的是 UnsafeCell<T></code> 来获取实际值的可修改引用。 pub struct Mutex<T: ?Sized> { #[cfg(all(tokio_unstable, feature = "tracing"))] resource_span: tracing::Span, s: semaphore::Semaphore, c: UnsafeCell<T>, } impl<T: ?Sized> DerefMut for MutexGuard<'_, T> { fn deref_mut(&mut self) -> &mut Self::Target { unsafe { &mut *self.lock.c.get() } } }</code></pre>异步递归</a></h2> 在内部，async fn</code> 创建了一个包含了要 .await</code> 的子 Future</code> 的状态机。这样递归的 async fn</code> 有点诡异，因为结果的状态机必须包含它自身： #![allow(unused)] fn main() { async fn step_one() { /* ... */ } async fn step_two() { /* ... */ } struct StepOne; struct StepTwo; // This function: async fn foo() { step_one().await; step_two().await; } // Generates a type like this: enum Foo { First(StepOne), Second(StepTwo), } // So this function: async fn recursive() { recursive().await; recursive().await; } // Generates a type like this: enum Recursive { First(Recursive), Second(Recursive), } }</code></pre> 但是这将无法工作，因为我们创建了无限大小的类型 error[E0733]: recursion in an `async fn` requires boxing --> src/lib.rs:1:22 | 1 | async fn recursive() { | ^ an `async fn` cannot invoke itself directly | = note: a recursive `async fn` must be rewritten to return a boxed future.</code></pre> 为了允许这种做法，我们需要用 Box</code> 来间接调用。而不幸的是，编译器限制意味着把 recursive()</code> 的调用包裹在 Box::pin</code> 并不够。为了让递归调用工作，我们必须把 recursive</code> 转换成非 async</code> 函数，然后返回一个 .boxed()</code> 的异步块 use futures::future::{BoxFuture, FutureExt}; fn recursive() -> BoxFuture<'static, ()> { async move { recursive().await; recursive().await; }.boxed() }</code></pre>消耗一个异步 map</a></h2> 当一个迭代器中产出异步值的时候，除了使用 for 循环来在外部函数中 await 它，还可以使用 futures</code> crate 中的 try_join_all</code>。 use futures::future::try_join_all; #[tokio::main] async fn main() { let urls = ["https://www.google.com", "https://rua.plus"]; let sites = try_join_all(urls.map(|url| async move { reqwest::get(url).await.unwrap().text().await })) .await .unwrap(); sites.iter().for_each(|site| { println!("{}", site.len()); }); }</code></pre>在 fold</code> 方法中使用 ?</code></a></h2> fold</code> 方法本身无法使用 ?</code>，但是 fold</code> 还有另一个变体，可以允许直接使用 ?</code>：try_fold</code>。 https://doc.rust-lang.org/std/ops/trait.Try.html The ?</code> operator and try {}</code> blocks. try_*</code> methods typically involve a type implementing this trait. For example, the closures passed to Iterator::try_fold</code></a> and Iterator::try_for_each</code></a> must return such a type. Try</code> types are typically those containing two or more categories of values, some subset of which are so commonly handled via early returns that it’s worth providing a terse (but still visible) syntax to make that easy. This is most often seen for error handling with Result</code></a> and Option</code></a>. The quintessential implementation of this trait is on ControlFlow</code></a>. pub async fn regular_post() -> Result<BaiduZZ> { let site = env::var("SPIO_SITE")?; let token = env::var("SPIO_TOKEN")?; let url = format!("{}?site={}&token={}", BAIDU_URL, site, token); let now = Instant::now(); info!("starting get booths, request /admin/Apiview/sample_view"); let params = ExampleParam::default(); let examples = get_examples(&params).await?; let urls = examples .data .list .data .iter() .try_fold(vec![], build_booth_url)? .join("\n"); info!("parse booth's url done {}ms", now.elapsed().as_millis()); let res: BaiduZZ = reqwest::Client::new() .post(url) .header(reqwest::header::CONTENT_TYPE, "text/plain") .body(urls) .send() .await? .json() .await?; Ok(res) } fn build_booth_url(prev: Vec<String>, cur: &BoothExamplesDatum) -> Result<Vec<String>> { let url = Url::parse(cur.link.as_ref().unwrap_or(&PRODUCTION_URL.to_owned())); let host = url?; let host = host.host_str().ok_or(anyhow!("parse url failed"))?; let booth_url = if host.contains("aiyunhuizhan") { format!( "https://{}/optimize/booth_id/{}", host, cur.booth_id .as_ref() .ok_or(anyhow!("cannot read booth id"))? ) } else { cur.link.to_owned().expect("") }; anyhow::Ok([prev, vec![booth_url.to_string()]].concat()) }</code></pre> 同理，返回 std::ops::Try</code> 的方法都能过使用 ?</code>。 use anyhow::anyhow; fn main() -> anyhow::Result<()> { let data = [Some(123), Some(444), None]; data.iter().try_for_each(|x| { let real_x = x.ok_or(anyhow!(""))?; dbg!(real_x); anyhow::Ok(()) })?; Ok(()) }</code></pre>传递 async funcation as paramters</a></h2> use futures::Future; #[tokio::main] async fn main() { let num = test(calc).await; println!("{num}"); } async fn calc() -> i32 { 40 + 2 } async fn test<F, Fut>(f: F) -> i32 where F: FnOnce() -> Fut, Fut: Future<Output = i32>, { f().await }</code></pre>BoxedFuture</a></h2> pub type Response = BoxFuture<'static, (Status, Bytes)>; type Job = fn(Request) -> Response; type Routes = Arc<RwLock<HashMap<&'static str, HashMap<&'static str, Job>>>>;</code></pre>Axum trailing slashes in route path</a></h2> https://github.com/tokio-rs/axum/discussions/2377 use axum::{extract::Request, Router, ServiceExt}; use tower::Layer; use tower_http::normalize_path::NormalizePathLayer; #[tokio::main] async fn main() { let app = Router::new(); let app = NormalizePathLayer::trim_trailing_slash().layer(app); let listener = tokio::net::TcpListener::bind("127.0.0.1:3000") .await .unwrap(); axum::serve(listener, ServiceExt::<Request>::into_make_service(app)) // <-- this .await .unwrap(); }</code></pre> 跨平台的静态链接构建 2023-12-26T00:00:00+00:00 大多数 Linux 软件都是动态链接的，动态链接可以使我们的程序不需要将所有所需要的库都打包到自身当中去。不过这样也有弊处，当目标系统比较旧，或者压根就没有我们需要的库的时候，我们的二进制文件就无法在目标系统中运行。 安装交叉编译工具</a></h2> 不光光需要使用 rustup</code> 来安装对应的 target，还需要 linker 来帮助构建到目标平台。 macOS brew tap SergioBenitez/osxct brew install FiloSottile/musl-cross/musl-cross brew install SergioBenitez/osxct/x86_64-unknown-linux-gnu brew install mingw-w64</code></pre>rustup target add x86_64-unknown-linux-musl rustup target add x86_64-unknown-linux-gnu rustup target add x86_64-pc-windows-gnu</code></pre> Ubuntu apt-get install -y musl-tools libssl-dev pkg-config libudev-dev</code></pre> 在安装好 target 与 linker 之后，则需要在项目目录下的 .cargo/config</code> 中添加对应平台所需要使用的 linker。 [target.x86_64-unknown-linux-gnu] linker = "x86_64-unknown-linux-gnu-gcc" [target.x86_64-unknown-linux-musl] linker = "x86_64-linux-musl-gcc" [target.x86_64-pc-windows-gnu] linker = "x86_64-w64-mingw32-gcc"</code></pre>动态链接</a></h2> TARGET_CC=x86_64-unknown-linux-gnu \ cargo build --release --target x86_64-unknown-linux-gnu</code></pre>静态链接</a></h2> TARGET_CC=x86_64-linux-musl-gcc \ RUSTFLAGS="-C linker=x86_64-linux-musl-gcc" \ cargo build --target=x86_64-unknown-linux-musl --release</code></pre>TARGET_CC=x86_64-linux-musl-gcc \ cargo build --target=x86_64-unknown-linux-musl --release</code></pre>Windows</a></h2> cargo build --target=x86_64-pc-windows-gnu --release</code></pre>Arm Linux</a></h2> 手上的树莓派 3B+ 的 A53 其实是 64 位的，很久之前官方的系统就支持 64 位了。到现在一直都没有好好的发光发热过，如果使用 A53 来编译岂不是暴殄天物。 和编译到 x86 的 linux 一样，只要安装好对应的 target 和设置好对应的 CC 即可。 TARGET_CC=aarch64-linux-musl-cc \ RUSTFLAGS="-C linker=aarch64-linux-musl-cc" \ cargo build --target=aarch64-unknown-linux-musl --release</code></pre>Should I rust or should I go?</a></h2> Golang 则更加的省心 GOOS=linux GOARCH=arm64 go build</code></pre>Openssl</a></h2> 在跨平台时，openssl 可能没有对应平台的链接库，而 openssl 提供了一个简单的解决方案：添加 vendored</code> features。 If the vendored</code> Cargo feature is enabled, the openssl-src</code> crate will be used to compile and statically link to a copy of OpenSSL. The build process requires a C compiler, perl (and perl-core), and make. The OpenSSL version will generally track the newest OpenSSL release, and changes to the version are not considered breaking changes. https://docs.rs/openssl/latest/openssl/#vendored</a> </blockquote> openssl = { version = "0.10.61", features = ["vendored"] }</code></pre> 如果没有直接直接使用openssl 作为依赖，可以单独为其指定 features 而不作为依赖，也不用指定版本。 [dependencies.openssl] features = ["vendored"] [dependencies.openssl-sys] features = ["vendored"]</code></pre> 需要注意的是，在某些镜像中（例如 rust:latest</code>），还需要一些额外的依赖 apt-get install -y musl-tools libssl-dev pkg-config libudev-dev</code></pre>GitLab CI</a></h2> 相对于其他提供 SaaS 的 CI 来说，Gitlab 最大的好处就是可以安装 gitlab-runner 来使用自己的机器作为 runner，从而不用再额外购买 CI 的执行时长。 Compose</a></h3> version: "3.6" services: runner: container_name: gitlab-runner-1 image: "gitlab/gitlab-runner:latest" restart: unless-stopped volumes: - /var/run/docker.sock:/var/run/docker.sock - ./runner-1:/etc/gitlab runner-2: container_name: gitlab-runner-2 image: "gitlab/gitlab-runner:latest" restart: unless-stopped volumes: - /var/run/docker.sock:/var/run/docker.sock - ./runner-2:/etc/gitlab</code></pre> 使用 compose 来运行多个 runner 是最好不过的选择了。compose file 本身与运行其他服务没有什么区别，唯一需要注意的就是注册 runner 了。 在 compose 启动所有的 runner 后，可以使用 docker exec</code> 来为运行中的容器执行命令，从而执行 runner 中的 gitlab-runner</code> 命令来注册 runner。其注册命令为 gitlab-runner register</code>。 docker exec -it gitlab-runner-1 gitlab-runner register</code></pre> 这里是映射了容器中的 /etc/gitlab</code> 目录到本地，runner 注册的配置文件就在该目录。所有除了直接执行容器命令，还可以单独运行一个实例，挂载 ./runner-1</code> 目录来注册。注册完成后配置文件就在该目录下，随后再启动 compose，新启动的 runner 就能读取到刚刚注册的配置文件，从而变成它了。 静态链接的配置文件</a></h2> 较为通用的只用到了 rust 官方镜像的跨平台配置。如果使用了 openssl，则需要添加 vendored</code> features。 Locally test</a></h3> docker run --entrypoint bash --rm -w $PWD -v $PWD:$PWD -v /var/run/docker.sock:/var/run/docker.sock gitlab/gitlab-runner:latest -c 'git config --global --add safe.directory "*";gitlab-runner exec docker build:linux-musl-amd64'</code></pre> 在本地运行并测试刚修改的 .gitlab-ci.yml</code> 是必不可少的，不能每次的修改都需要 push 以后再交给 runner 运行。这样不仅麻烦，还会导致 commit 的杂乱无章。 而通过启动一个新的 runner 实例，可以直接将项目挂载到 runner 的容器中来本地执行当前的 .gitlab-ci.yml</code>。本地执行的 runner 是不需要注册的。 细颗粒度更新与自动依赖收集 2023-11-09T00:00:00+00:00 众所周知，React 并没有实现细颗粒度的状态更新。同时在副作用中也需要我们手动去管理对应依赖。如常见的 useEffect</code> 和 useMemo</code> 等： const [count, setCount] = useState(0); useEffect(() => { console.log("count updated ", count); }, [count]);</code></pre> 这里就需要我们手动的去管理 useEffect</code> 的依赖，否则 useEffect</code> 则只会执行一次。而在 Vue 等框架中，则可以自动追踪其依赖： const y = coumputed(() => x.value * 2 + 1);</code></pre> 在 Vue 和 Mobx 等框架中使用的“能自动追踪依赖的技术”被称为“细颗粒度更新”（Fine-Grained Reactivity），这也是许多前端框架响应式的原理。 实现一个细颗粒度更新</a></h2> 我们希望为 React 实现一个简易的细颗粒度更新的状态，使我们在使用副作用时不需要手动管理其依赖的 hooks。 其设想的效果应如下： const [count, setCount] = useState(0); useEffect(() => { console.log("count is ", count()); }); useEffect(() => { console.log("only print once"); }); // Trigger effect setCount(1);</code></pre> useEffect</code> 不再需要为其手动管理状态，而是自动追踪依赖。当我们更新状态 count</code> 时，自动触发 useEffect</code> 的回调。 useState</a></h3> 第一步就是现实一个简易的状态，这里模仿 React 官方 useState</code> 的签名，我们也返回一个元组，分别是状态和更新其方法。 export type Getter<T> = () => T; export type Setter<T> = (newValue: T | ((oldValue: T) => T)) => void; export type UseState = <T>(value: T) => [Getter<T>, Setter<T>]; const useState: UseState = (value) => { const getter: Getter<typeof value> = () => { return value; }; const setter: Setter<typeof value> = (updater) => { const newState = updater instanceof Function ? updater(value) : updater; if (value === newState) return; value = newState; }; return [getter, setter]; }; export { useState };</code></pre> 这样看似很美好，我们利用函数的参数和闭包实现了一个状态，并在调用设置状态函数时，更新该状态。在调用 getter()</code> 时返回该状态。但是它无法和 React 一起使用，因为 React 的 useState</code> 重点不仅仅是对一个值的设置，而是在状态更新时更新 React 组件。我们的 useState</code> 只实现了一个功能，对状态的管理，我们还需要实现更新 React 组件才能和 React 一起使用。 我们的重点不是在如何实现一个 React，所以更新组件就交给真正的 useState</code> 来做。我们通过在我们自己状态更新时，调用 React 的 useState</code> 来更新组件。这样就通过借用官方的 useState</code> 来帮助我们更新组件，从而实现一个简易的状态。 const useState: UseState = (value) => { const state = useRef(value); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [_, update] = useUpdate({}); const getter: Getter<typeof value> = () => { return state.current; }; const setter: Setter<typeof value> = (updater) => { const newState = updater instanceof Function ? updater(state.current) : updater; if (state.current === newState) return; state.current = newState; update({}); }; return [getter, setter]; };</code></pre> 使用它的方式和官方 hooks 没有区别： useEffect</a></h3> 有了状态之后，接下来就是副作用了。Effect 主要需要解决的问题就是如何自动收集依赖，例如： useEffect(() => { console.log("count is ", count()); });</code></pre> 在用户提供的回调函数中，我们无法直接了当的去知道其中是否有状态需要的依赖，也无法知道有哪些状态在其中。这就是为什么我们将获取状态的 getter</code> 设计成了一个函数，通过在 effect 中调用的 getter</code> ，我们就能为 setter</code> 和 effect 之间建立一个订阅关系，从而实现调用 setter</code> 时调用 effect 的回调方法。 首要方法就是订阅发布模型，首先我们需要为 effect 创建一个用于回调调用栈，当 useEffect</code> 第一次调用时，我们将该 effect 对应的信息保存到栈中。随后如果在回调函数中有状态的 getter</code> 该 getter</code> 则会收集栈中的 effect 并创建对应的订阅。 第一步就是创建保存到栈中的数据结构与一个全局的用于保存 effect 的栈： export type Effect = { // 用于执行 useEffect 回调函数 execute: () => void; // 保存该 useEffect 依赖的 state 对应的 subs 集合 deps: Set<unknown>; }; const effectStack: Effect[] = [];</code></pre> 随后来定义我们的 useEffect</code>： const useEffect = (callback: () => void) => { const execute = () => { effectStack.push(effect); try { callback(); } finally { effectStack.pop(); } }; const effect: Effect = { execute, deps: new Set(), }; // 调用时执行 execute(); };</code></pre> execute</code> 用于将当前的 effect 推入栈中保存，随后执行用户的回调函数。我们的依赖收集重点就是在这里，如果回调函数 callback</code> 中有我们状态的 getter</code>，那么 getter</code> 将会收集刚刚推入栈中的 effect 并建立订阅管理，从而实现自动收集依赖。 所以这里的 getter</code> 需要小小的更新下： const subscribe = (effect: Effect, subs: Subs) => { // 建立订阅关系 subs.add(effect); // 建立依赖关系 effect.deps.add(effect); }; const useState: UseState = (value) => { const state = useRef(value); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [_, update] = useUpdate({}); const subs = useRef(new Set<Effect>()); const getter: Getter<typeof value> = () => { // 获取刚刚送入栈中的 effect const effect = effectStack[effectStack.length - 1]; if (effect) { // 建立订阅发布关系 subscribe(effect, subs.current); } return state.current; }; const setter: Setter<typeof value> = (updater) => { const newState = updater instanceof Function ? updater(state.current) : updater; if (state.current === newState) return; state.current = newState; update({}); }; return [getter, setter]; };</code></pre> 这里通过给 getter</code> 添加一个在执行时检查 effectStack</code>，如果能够取到栈尾的 effect 则添加到 useState</code> 的订阅列表 subs</code> 中。 接下来就是更新 setter</code>，使其在更新状态时检查订阅列表 subs</code> 并遍历执行列表中所有副状态： const setter: Setter<typeof value> = (updater) => { const newState = updater instanceof Function ? updater(state.current) : updater; if (state.current === newState) return; state.current = newState; update({}); for (const sub of [...subs.current]) { sub.execute(); } };</code></pre> 除此之外，和 useEffect</code> 同理，我们需要放到 React 组件中使用，而我们刚刚设计的状态也会真正的更新一个函数式组件。由于函数式组件的特殊性，每次组件更新时所有的 hook 都会执行，所以我们的 useEffect</code> 还需要 React 的真正的 useEffect</code> 一点小小的帮助。 const useEffect = (callback: () => void) => { const execute = () => { // 重制依赖 cleanup(effect); // 添加到副作用列表 effectStack.push(effect); try { callback(); } finally { effectStack.pop(); } }; const effect: Effect = { execute, deps: new Set(), }; useMounted(() => { // 调用时执行 execute(); }, []); };</code></pre>useMemo</a></h3> 通过 useEffect</code> 实现的自动依赖追踪，我们就可以轻松的实现一个自动追踪依赖的 useMemo</code>： const useMemo = <T>(callback: () => T) => { const [s, set] = useState(callback()); useEffect(() => set(callback())); return s; };</code></pre> Rust Box 与对象 2023-02-09T00:00:00+00:00 对于多数高级语言往往会弱化堆栈的概念，它们通常由 GC 等方式来管理内存。而对于像 Rust 这类的低级语言来说，则需要更深入的了解堆栈的概念。 栈内存从高位地址向下增长，且栈内存是连续分配的，一般来说操作系统对栈内存的大小都有限制。这也是为什么 C 语言中无法创建任意长度的数组。在 Rust 中，main</code> 线程的栈大小是 8MB，普通线程是 2MB。在函数调用时会在其中创建一个临时的栈空间，调用结束后 Rust 会让这个栈空间里的对象自动进入 Drop 流程，最后栈顶指针自动移动到上一个调用栈顶，无需程序员手动干预。因而栈内存申请和释放是非常高效的。 与栈相反，堆上的内存是从低位地址向上增长，堆内存通常只受物理内存限制，而且通常不是连续的。因而从性能的角度看，栈内存往往更高。 除此之外，Rust 堆上的对象还有一个特殊之处，它们都拥有一个所有者。因此受所有权规则的限制：当赋值时，发生的是所有权的转移（只需浅拷贝栈上的引用或智能指针即可）。 fn main() -> Result<()> { let str = String::from("Hello world"); println!("{}", str); let str2 = str; // --- value moved here println!("{}", str); // ^^^ value borrowed here after move println!("{}", str2); Ok(()) }</code></pre> 在所有权的规则中，堆内存上的对象默认会转移所有权，str</code> 的指针引用转移给了 str2</code>，所以无法再访问 str</code>，它已经不再和指针绑定了。 不同于我们熟悉的那个语言来，它默认会复制一份引用。由于它们都持有同一个引用，所以通过任何一个变量都可以修改引用的实际值。对于什么时候释放这个引用这种问题，就交给 GC 去思考吧。 const str = { content: "Hello world", }; const str2 = str; console.log(str, str2); str2.content = "world"; console.log(str, str2);</code></pre>堆栈的性能</a></h2> 通常栈的性能会比堆高，但其实未必。对于不同类型的数据，它们的性能也是不同的： 小型数据，在栈上的分配性能和读取性能都比堆上高；</li> 中型数据，栈上分配性能高，但是读取性能和堆上并无区别，因为无法利用寄存器或 CPU 高速缓存，最终还是要经过一次内存寻址；</li> 大型数据，只建议在堆上分配和使用；</li> </ul> 总之，栈的分配速度肯定比堆上快，但是读取速度往往取决于数据能不能放入寄存器或 CPU 高速缓存。 Box 的使用场景</a></h2> Box<T></code> 只是对数据的简单封装，它除了将值存储在堆上之外，并没有其他性能上的损耗。因此 Box</code> 相比较与其他智能指针，功能较为单一。 特意将数据分配在堆上；</li> 数据较大时；又不想在转移所有权时拷贝数据；</li> 类型的大小在编译器无法确定，但是我们又需要固定大小的类型时；</li> 特征对象，用于说明对象实现了一个特征，而不是某个特定的类型；</li> </ul> 将数据存储在堆上</a></h3> 如果将一个数值分配给一个变量，那么这个变量必然是存储在栈上的。如果我们想要它存储在堆上可以使用 Box<T></code>： fn main() -> Result<()> { let n = 3; println!("{}", n); println!("{}", n + 1); let n = Box::new(3); println!("{}", n); println!("{}", *n + 1); Ok(()) }</code></pre> 这样就可以创建了一个智能指针指向存储在堆上的 3，并且变量 n</code> 持有了该指针。大部分智能指针都实现了 Deref</code> 和 Drop</code> 指针，因此： println!</code> 可以正常打印出值，是因为它隐式地调用了 Deref</code> 对智能指针进行了解引用；</li> 在表达式中，无法自动隐式地执行 Deref</code> 解引用操作，需要手动使用 *</code> 操作符来显式的解引用；</li> 变量 n</code> 持有的智能指针将在作用域结束时，被释放掉，这是因为 Box<T></code> 实现了 Drop</code> 特征；</li> </ul> 上述的例子在实际代码中会很少存在，因为将一个简单的值分配到堆上并没有太大的意义。将其分配在栈上，由于寄存器、CPU 缓存等原因，它的性能将更好，而且代码可读性也更好。 避免栈上数据的拷贝</a></h3> 当栈上数据转移所有权时，实际上是把数据拷贝了一份，最终新旧变量各自拥有不同的数据，因此所有权并未转移。 而堆上则不然，底层数据并不会被拷贝，转移所有权仅仅只是赋值一份栈中的指针，再将新的指针赋予新的变量，然后让拥有旧指针的变量失效，最终完成了所有权的转移： fn main() -> Result<()> { let arr = [0; 1000]; let arr1 = arr; println!("arr: {}", arr.len()); println!("arr1: {}", arr1.len()); let arr = Box::new([0; 1000]); let arr1 = arr; println!("arr: {}", arr.len()); // ^^^^^^^^^ value borrowed here after move println!("arr1: {}", arr1.len()); Ok(()) }</code></pre>将动态大小类型变为固定大小类型</a></h3> Rust 需要在编译时就知道类型占用多少空间，无法在编译时知道具体大小的类型被称之为动态大小类型 DST。 其中一种无法在编译时就知道大小的类型是递归类型：在类型定义时用到了自身，或者说该类型的值的一部分是相同类型的其他值，这种值的嵌套理论上可以无限的进行下午，所以 Rust 无法在编译时知道递归类型所需要的空间： enum List { Cons(i32, List), Nil, }</code></pre> 以上就是函数式语言中常见的 Cons List</code>，它的每个节点包含一个 i32</code> 的值，还包含一个新的 List</code>，因此这种嵌套可以无限进行下去，Rust 认为该类型是一个 DST 类型，并给予报错： error[E0072]: recursive type `List` has infinite size --> src\main.rs:3:1 | 3 | enum List { | ^^^^^^^^^ 4 | Cons(i32, List), | ---- recursive without indirection | help: insert some indirection (e.g., a `Box`, `Rc`, or `&`) to break the cycle | 4 | Cons(i32, Box<List>), | ++++ +</code></pre> 编译器也贴心的给了我们一些解决方案，将其转换为一个指针。其中一个方法就是利用 Box<T></code>。 enum List { Cons(i32, Box<List>), Nil, }</code></pre> 只需要将 List</code> 存储到堆上，然后是使用一个智能指针指向它，即可完成从 DST 到 Sized 类型的华丽转变。 特征对象</a></h3> 在 Rust 中，想实现不同类型组成的数组或接受实现了某种方法的不同类型的参数，只有两种办法：枚举和特征对象。枚举的限制较多，因此特征对象往往是最常用的解决办法。 use ::anyhow::Result; trait Draw { fn darw(&self); } struct Button {} impl Draw for Button { fn darw(&self) { println!("Button"); } } struct Input {} impl Draw for Input { fn darw(&self) { println!("Input"); } } fn test<T>(component: &T) where T: Draw, { component.darw(); } fn test2(component: &dyn Draw) { component.darw(); } fn main() -> Result<()> { let components: Vec<Box<dyn Draw>> = vec![Box::new(Button {}), Box::new(Input {})]; components.iter().for_each(|c| test2(&**c)); Ok(()) }</code></pre> 上述代码实现在一个数组中存储实现了 Draw</code> 这个 Trait 但是类型却不同的数据，就是将 Button</code> 和 Input</code> 包装成 Draw</code> 特征的特征对象，再放入到数组中。Box<dyn Draw></code> 就是特征对象。 而在函数 test2</code> 中，其参数可以写成 &Box<dyn Draw></code> 也可以写成 &dyn Draw</code> 这两种都是特征对象作为参数的写法。但需要注意的是，如果写成 &dyn Draw</code> 的格式，则不能直接将 &Box<T></code> 传入，或者说，编译器无法完全为我们隐式解引用。需要手动为其解引用 &**c</code>。 其实，特征也是 DST 类型，而特征对象在做的就是将 DST 类型转换为固定大小类型。 内存布局</a></h2> 这是一个标准的 Vec<i32></code> 的 Vec 内存布局： let arr = vec![1, 2, 3, 4];</code></pre> 与 Box 类似， Vec 和 String 都是智能指针，从上图可以看出，该智能指针存储在栈中，然后指向堆上的数组数据。 那如果数组中每个元素都是一个 Box 对象呢？这就是 Vec<Box<i32>></code> 的内存布局： 可以看出智能指针 Vec 依然是存储在栈上，然后指针指向一个堆上的数组，该数组中每个元素都是一个 Box 智能指针，最终 Box 智能指针又指向存储堆上的实际值。 所以当我们从数组中取出某个元素时，取到的时对应的智能指针 Box，需要对该智能指针进行解引用才能取出该值。 fn main() { let arr = [Box::new(1), Box::new(2), Box::new(3), Box::new(4)]; let (first, second) = (&arr[0], &arr[1]); let sum = **first + **second; println!("{}", sum); }</code></pre> 以上代码有几个指的注意的点： 使用 &</code> 借用数组中的元素，否则会报所有权错误；</li> 表达式不能隐式解引用，因此必须使用 **</code> 做两次解引用，第一次将 &Box<i32></code> 解引用为 Box<i32></code>，第二次将 Box<i32></code> 解引用成 i32</code>；</li> </ul> Box::leak</a></h2> Box 中还提供了一个非常有用的关联函数：Box::leak</code>，它可以消费掉 Box 并强制目标从内存中泄露。 fn main() { let static_str = gen_static_str(); dbg!(&static_str.as_ptr()); } fn gen_static_str() -> &'static str { let mut str = String::from("Hello "); str.push_str("world"); dbg!(&str.as_ptr()); Box::leak(str.into_boxed_str()) }</code></pre> Rust 模式匹配 2023-02-07T00:00:00+00:00 match</a></h2> match</code> 是一个极为强大的控制流运算符，它允许我们将一个值与一系列的模式相比较，并根据相匹配的模式执行相应代码。模式可由字面值、变量、通配符和许多其他内容构成。 fn value_in_cents(coin: Coin) -> u8 { match coin { Coin::Penny => { println!("Lucky penny!"); 1 } Coin::Nickel => 5, Coin::Dime => 10, Coin::Quarter => 25, } }</code></pre>绑定值的模式</a></h3> 在匹配到绑定值的模式后，可以增加一个变量用来表示所匹配到的值。 #[derive(Debug)] // 这样可以立刻看到州的名称 enum UsState { Alabama, Alaska, // --snip-- } enum Coin { Penny, Nickel, Dime, Quarter(UsState), } fn value_in_cents(coin: Coin) -> u8 { match coin { Coin::Penny => 1, Coin::Nickel => 5, Coin::Dime => 10, Coin::Quarter(state) => { println!("State quarter from {:?}!", state); 25 } } }</code></pre> 这里的 Coin::Quarter(state)</code> 就是匹配到的对应的 UsState</code> 的值。 匹配 Option</a></h3> fn plus_one(target: Option<i32>) -> Option<i32> { match target { Some(x) => Some(x + 1), None => None, } } fn main() { let my_num = Some(41); let my_num = plus_one(my_num); println!("My number: {:?}", my_num); }</code></pre> 这里 Clippy 可能会提示我们有更好的写法： fn plus_one(target: Option<i32>) -> Option<i32> { target.map(|x| x + 1); target } fn main() { let my_num = Some(41); let my_num = plus_one(my_num); println!("My number: {:?}", my_num); }</code></pre> Option<T></code> 上有个 map()</code> 方法，可以更好的代替 match Option</code> 来做匹配。 穷尽的匹配</a></h3> match</code> 的匹配是穷尽的，必须穷举到最后的可能性来使代码有效。 但可以使用一个特定值来采取默认操作，有点类似于 switch</code> 语句中的 default</code> 。 let dice_roll = 9; match dice_roll { 3 => add_fancy_hat(), 7 => remove_fancy_hat(), _ => (), }</code></pre> 这个例子也满足穷举性要求，因为我们在最后一个分支中明确地忽略了其他的值。我们没有忘记处理任何东西。 if let</a></h2> 为了满足 match</code> 的穷尽性的要求，必须穷举到所有的可能性。尽管可以使用默认操作，但是最少也需要两行语句。 fn main() { let config_max = Some(3u8); match config_max { Some(config) => println!("The maximum is configured to be {}", config), _ => (), } }</code></pre> 不过我们可以使用 if let</code> 这种更短的方式编写。 fn main() { let config_max = Some(3u8); if let Some(config) = config_max { println!("The maximum is configured to be {}", config); } }</code></pre> 如果使用了 Clippy 这里也会提示我们可以使用更短的写法。 if let</code> 语法获取通过等号分割的一个模式和一个表达式。它的工作方式与 match</code> 相同。这里等号右边的表达式对应着 match</code> ，而左边的模式对应着 match</code> 的第一个分支。 在这个例子中，模式是 Some(max)</code>，max</code> 绑定为 Some</code> 中的值。接着可以在 if let</code> 代码块中使用 max</code> 了，就跟在对应的 match</code> 分支中一样。模式不匹配时 if let</code> 块中的代码不会执行。 换句话说，可以认为 if let</code> 是 match</code> 的一个语法糖，它当值匹配某一模式时执行代码而忽略所有其他值。 公开密钥密码学-非对称加密 🔑 2022-10-24T00:00:00+00:00 GPG/PGP 赛高！ 什么是非对称加密？</a></h2> 人类的历史上加密走了很长的一段路程。想尽了各种办法来保护自己那不想让不该知道的人知道的东西。加密这东西，在密码学中最直白的解释就是将一般的明文信息改变为难以读取的内容，使其不可读的过程只有拥有解密方法的对象，经由解密过程，才能将密文还原为正常可读的内容。 大概在 1970 年代中期，所谓的“强加密”的使用开始从政府保密机构延申至公共的领域了，也就是说开始到我们大众都开始接触了。当今世界，加密已经是我们的日常生活中常常见到的东西了。 例如我们常常访问的带有 SSL/TLS 的网站，这也是非对称加密的一种。所谓的对称加密，它也是密码学中的一种。但他与对称加密不同的是，它需要两个密钥，一个是公开密钥，另一个是私有密钥；一个用作加密，另一个则用作解密。使用其中一个密钥把明文加密后所得的密文，只能用相对应的另一个密钥才能解密得到原本的明文；甚至连最初用来加密的密钥也不能用作解密。 由于加密和解密需要两个不同的密钥，故被称为非对称加密；不同于加密和解密都使用同一个密钥的对称加密。虽然两个密钥在数学上相关，但如果知道了中一个，并不能凭此计算出另外一个；因此其中一个可以公开，称为公钥，任意向外发布；不公开的密钥为私钥，必须由用户自行严格秘密保管，绝不透过任途径向任何人提供，也不会透露给被信任的要通信的另一方。 加密</a></h3> 如果任何人使用公钥加密明文，得到的密文可以透过不安全的途径（如网络）发送，只有对应的私钥持有者才可以解密得到明文；其他人即使从网络上窃取到密文及加密公钥，也无法（在数以年计的合理时间内）解密得出明文。 典型例子是在网络银行或购物网站上，因为客户需要输入敏感消息，浏览器连接时使用网站服务器提供的公钥加密并上传数据，可保证只有信任的网站服务器才能解密得知消息，不必担心敏感个人信息因为在网络上传送而被窃取。 在现实世界上可作比拟的例子是，一个传统保管箱，开门和关门都是使用同一条钥匙，这是对称加密；而一个公开的邮箱，投递口是任何人都可以寄信进去的，这可视为公钥；而只有信箱主人拥有钥匙可以打开信箱，这就视为私钥。 常见的公钥加密算法有：RSA、ElGamal、背包算法、Rabin（RSA 的特例）、迪菲－赫尔曼密钥交换协议中的公钥加密算法、椭圆曲线加密算法（英语：Elliptic Curve Cryptography, ECC）。使用最广泛的是 RSA 算法（由发明者 Rivest、Shmir 和 Adleman 姓氏首字母缩写而来）是著名的公开秘钥加密算法，ElGamal 是另一种常用的非对称加密算法。 加密过程</a></h4> 直白的解释：Tom 和 Jerry 想发送一些消息/文件，而不被隔壁的 Spike 知道文件的内容。于是它们机智的采用了非对称加密来保证内容的安全性。 Tom 先生成非对称的两个密钥，分别为公钥 A，私钥 B</li> 为了能让 Jerry 发过来的消息被加密了，Tom 先将可公开的公钥 A 发给 Jerry</li> 因为公钥 A 是完全可公开的，所以 Spike 知道也没关系</li> Jerry 收到 Tom 发的公钥 A，并将自己的文件 X 使用公钥 A 进行加密</li> 随后 Jerry 就可以将加密的文件 A(X) 正大光明的发送给 Tom 了</li> 此时的 Spike 就算截取到加密过的文件 A(X) 也没有用</li> 因为 Tom 收到的加密文件 A(X) 只有它自己的私钥 B 能够解密，于是它收到后可以使用私钥 B 正常解密</li> 所以如果 Tom 丢失了它的私钥 B，那么 Tom and Jerry 都无法读取加密的文件 A(X) 了</li> （没有私钥就无法解开公钥加密过的信息）</li> 相反，Jerry 也可以将自己的公钥发给 Tom，使其加密要发给自己的信息。</li> </ol> 数字签名</a></h4> 如果某一用户使用他的私钥加密明文，任何人都可以用该用户的公钥解密密文；由于私钥只由该用户自己持有，故可以肯定该文件必定出自于该用户。 公众可以验证该用户发布的数据或文件是否完整、中途有否曾被篡改，接收者可信赖这条信息确实来自于该用户，该用户亦无法抵赖，这被称作数字签名。所以我们常常见到提示一定要保护好自己的私钥，因为不仅仅会使得加密失效，还会直接影响签名验证。 非对称加密的软件</a></h2> 对于软件来说，我们可能经常听说到 GPG 这一词。GPG 的全称是 GNU Privacy Guard（GnuPG 或 GPG）。它是一款非对称加密的软件，是 PGP 加密软件的满足 GPL 的替代物。也就是说它相对于 PGP 加密来说，它是一款开源软件。 因为 PGP 的非对称的算法是开源的，所以 GPG 和 PGP 原理是完全一样的。通常我们会见到 GPG/PGP。所以 PGP 就可以简单了解到它是一款非开源的非对称加密软件了。 PGP（英语：Pretty Good Privacy，中文翻译“优良保密协议”）是一套用于讯息加密、验证的应用程序，采用 IDEA 的散列算法作为加密和验证之用。 多平台的安装与使用</a></h3> 既然上述已经介绍了它是自由软件，那么它跨平台的几率就很大了，支持的平台也非常的多。在官方网站里，我们可以看到它支持很多平台。 Windows GPG4win</a></h4> 安装就不再多说，GPG4win 的官网有打包好的 exe 可执行程序，我们直接下载双击安装就好，安装过程也非常的简单，不需要进行任何配置。也就是常说的“无脑 next☀”。 Download</a> GPG4win 是 GPG 在 Windows 平台的一款可视化的非对称加密软件。对于可视化的软件来说，使用也非常的简单明了。几乎常用的一些功能都非常直白的写在了开打的页面中。基本上只要使用者了解大概的非对称加密的运作原理，就可以很轻松的使用该软件了。 Ubuntu & CentOS</a></h4> 目前最新的 Ubuntu 与 CentOS 的发行版中都带有 GnuPrivacyGuard。也就是 GPG 的一种，所以使用的方法也是大同小异了。以 Ubuntu 为例： * 创建密钥 gpg --gen-key</code></pre> 不知道为啥我的机器在生成密钥的时候会卡住很长时间，导致我没有生成出来。等以后再考虑填这个坑吧。 查看秘钥</li> </ul> 查看公钥：gpg --list-key 查看私钥：gpg --list-secret-keys</code></pre> 提取秘钥</li> </ul> 提取公钥：gpg -a --export newkey > newkey.asc 提取私钥：gpg -a --export-secret-keys newkey > newkey_pirv.asc</code></pre> 导入秘钥</li> </ul> 导入公钥或私钥：gpg --import newkey</code></pre> 使用公钥加密</li> </ul> gpg -ea -r newkey filename</code></pre> 解密并导出为文件</li> </ul> gpg -d test.asc > test</code></pre> 设置密钥信任程度</li> </ul> gpg --edit-key [导入的密钥ID] trust 您是否相信这位用户有能力验证其他用户密钥的有效性(查对身份证、通过不同的渠道检查 指纹等)？ 1 = 我不知道或我不作答 2 = 我不相信 3 = 我勉强相信 4 = 我完全相信 5 = 我绝对相信 m = 回到主菜单</code></pre>我的公钥</a></h2> 如果有小伙伴想和我扮演 Tom and Jerry 的话，或者想校验我的签名的文件的话。欢迎使用下述公钥 参考</a></h2> 传输层安全性协议</a></li> 对称密钥加密</a></li> 公开密钥加密</a></li> GnuPG</a></li> PGP</a></li> GnuPrivacyGuardHowto</a></li> </ul> 使用 useSyncExternalStore 构建属于自己的全局状态 2022-10-14T00:00:00+00:00 在 React18 new hooks</a> 中简单了解过并作过一个简单的全局状态，它的参数只有三个： subscribe</code>: 一个当状态更新后可执行的回调函数。该函数会收到一个回调函数，这个回调函数就是当状态后执行，React 用来对比是否需要重新渲染组件。</li> getSnapshot</code>: 返回当前状态的函数。</li> getServerSnapshot</code>: 在服务端渲染时返回当前状态的函数，可选。</li> </ul> 配合上 useSyncExternalStore</code> 就可以非常方便的对接外部状态，了解了这个 hook 之后，对自定义的全局状态也有更深的了解。 简单来说，JavaScript 的变量是没有任何相应式的。也就是说，通常情况下，当我们修改了一个变量，是无法被动的感知到它的变化的。但是也是有办法去实现这一功能的，例如 Vue 2 使用 Object.defineProperty()</code> 和 Vue 3 使用的 Proxy</code> 来实现的相应式。 而 React 走了另一条道路，数据不可变。它通过 setState</code> 来感知状态的变化，再利用 diff 等方法实现更新。这也就是为什么我们可以利用 setState({})</code> 可以强制更新组件。 正因如此，配合上 useSyncExternalStore</code> 我们的外部状态也就可以是一个普通的变量（PlainObject）。在我们更新我们的状态时，利用 subscribe</code> 参数接受到的回调（listener）来通知组件状态更新了。最后在使用 getSnapshot</code> 来返回新的状态，这就是 useSyncExternalStore</code> 大致的工作流程。 实现一个全局状态</a></h2> 先来一个最简单的，利用 useSyncExternalStore</code> 实现一个全局状态。首先我们需要创建一个普通对象，它主要用于存储状态，并配合 subscribe</code> 和 getSnapshot</code> 等方法来实现状态的更新。 const store: Store = { // 全局状态 state: { count: 0, info: "Hello", }, /** * 设置新的状态 * @param stateOrFn 新状态或设置状态的回调函数 */ setState(stateOrFn) { const newState = typeof stateOrFn === "function" ? stateOrFn(store.state) : stateOrFn; store.state = { ...store.state, ...newState, }; store.listeners.forEach((listener) => listener()); }, /** * 保存 useSyncExternalStore 回调的 listener * 在 setState 中设置过状态后会进行调用 */ listeners: new Set(), /** * 传递给 useSyncExternalStore 的 subscriber * 负责收集 listener 并返回注销 listener 的方法 * @param listener * @returns */ subscribe(listener) { store.listeners.add(listener); return () => { store.listeners.delete(listener); }; }, /** * 返回当前的状态 * @returns */ getSnapshot() { return store.state; }, };</code></pre> 在我们的 store 中： state</code> ：一个普通的对象，它就是我们用于存储全局状态的地方。</li> setState</code> ：提供一个类似于 useState</code> 的设置状态的方法。</li> listeners</code> ：保存 useSyncExternalStore</code> 回调的 listener。</li> subscribe</code> ：传递给 useSyncExternalStore</code> 的 subscriber。</li> getSnapshot</code> ：返回当前的状态。</li> </ul> 需要注意的是，useSyncExternalStore</code> 会立即调用 subscribe</code> 和 getSnapshot</code> ，这就导致了我们不能在这些方法中使用 this.store</code> ，此时的 this</code> 还未准备好。 最后的签名也是比较重要的，setState</code> 就参照 useState</code> 。接受完整的 state 为参数，并将其设置到我们的状态中。 而 useSyncExternalStore</code> 给我们的 listener 签名就简单多了 () => void</code> 。 export type State = { count: number; info: string; }; export type Store = { state: State; setState: (stateOrFn: State | ((state: State) => State)) => void; subscribe: (listener: () => void) => () => void; listeners: Set<() => void>; getSnapshot: () => State; };</code></pre>使用全局状态</a></h3> 到目前为止还只是创建了一个用于存储和更新状态的对象，在使用上我们直接在组件中配合 useSyncExternalStore</code> 来创建我们的状态。这一步就非常的简单，后续的使用就和在使用其他的状态一样。 const Couter = () => { const { count, info } = useSyncExternalStore( store.subscribe, store.getSnapshot, ); return ( <> <div> <div> Count: <span>{count}</span> </div> <div> Info: <span>{info}</span> </div> <div> <Button onClick={() => store.setState((d) => ({ count: d.count + 1 }))} > Add </Button> </div> </div> </> ); };</code></pre>多个 Store</a></h2> 上面的实现是直接针对单一的 store 来实现的，直接将 state 和其方法封装在一个对象中。日常的项目中通常会根据功能来创建多个全局状态，避免混乱。 为了避免每创建一个 store 都要重新写一次同样的方法，我们可以将其封装为一个创建 store 的函数。整体实现都还是一样的，只不过后续我们可以利用这个方法来创建多个 store。 export const createStore: CreateStore = < T extends Record<string, unknown> | unknown[], >( initialState: T, ) => { let state = initialState; const listeners = new Set<() => void>(); const getSnapshot = () => state; const setState: SetState<T> = (stateOrFn) => { state = typeof stateOrFn === "function" ? stateOrFn(state) : stateOrFn; listeners.forEach((listener) => listener()); }; const subscribe = (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener); }; }; return { getSnapshot, setState, subscribe, }; };</code></pre> 对于其方法的签名还是和之前一样，只不过函数还是需要显式注解，因为在创建时我们还需要访问其范型 T</code> 。 export type SetState<S> = (stateOrFn: S | ((state: S) => S)) => void; export type GetSnapshot<S> = () => S; export type Subscribe = (listener: () => void) => () => void; export type CreateStore = <T extends Record<string, unknown> | unknown[]>( initialState: T, ) => { getSnapshot: GetSnapshot<T>; setState: SetState<T>; subscribe: Subscribe; };</code></pre> 将对应需要的方法在函数中创建，并返回为一个对象。但这里没有将 state 直接返回出去，和上述不同，我们将不再直接访问原始 state，而是配合 useSyncExternalStore</code> 封装一个自定义 hook 来返回我们的全局状态。 export type Todo = { id: number; content: string; }[]; const initialTodo: Todo = [ { id: 0, content: "React" }, { id: 1, content: "Vue" }, ]; const todoStore = createStore(initialTodo); export const useTodoStore = (): [Todo, SetState<Todo>] => [ useSyncExternalStore(todoStore.subscribe, todoStore.getSnapshot), todoStore.setState, ];</code></pre> 这里的 useTodoStore</code> 将其显式的注解了其返回值，因为返回的是和 useState</code> 类似的元组，而默认 TypeScript 推断的类型比较宽松，会推断为 (Todo | SetState<Todo>)[]</code> 的数组。 由于封装了新的 hook，在组件中的使用也就更方便了。在需要不同 store 的组件中直接使用不同的 hook 就能访问到对应的全局状态了。 const Todo = () => { const [todos, setTodo] = useTodoStore(); const [value, setValue] = useState(""); }; const Count = () => { const [{ count, info }, setState] = useCountStore(); };</code></pre>Mini Redux</a></h2> 在模仿 Reudx 之前，应该再熟悉一下 Redux 的工作流程。在 Redux 中，和我们上述的状态一样，状态都是普通对象，且是不可变的数据（只读）。此外，我们的 reducer 也应该保持是纯函数。 Redux 通过我们创建的 Action 来决定如何更新状态，再通过 reducer 来实际更新状态。reducer 更新状态也非常简单，和 React 的状态类似，我们的状态也是保持不可变的。所以 reducer 会返回整个状态。 也就是类似于： export type RUAReducer<S extends RUAState, A extends RUAAction> = ( state: S, action: A, ) => S;</code></pre> 上述的 setState</code> 方法也需要简单调整一下，由于 reducer 是返回整个状态，所以可以直接将返回的新状态赋值给全局状态。 const dispatch: RUADispatch<A> = (action) => { state = reducer(state, action); listeners.forEach((listener) => listener()); };</code></pre> 除此之外，其他配合 useSyncExternalStore</code> 的用法没有多大变化。 export const createStore = <S extends RUAState, A extends RUAAction>( reducer: RUAReducer<S, A>, initialState: S, ) => { let state = initialState; const listeners = new Set<() => void>(); const getSnapshot = () => state; const dispatch: RUADispatch<A> = (action) => { state = reducer(state, action); listeners.forEach((listener) => listener()); }; const subscribe = (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener); }; }; return { subscribe, getSnapshot, dispatch, }; };</code></pre> 在 reducer 方面，也没有什么黑魔法，设置状态后将其返回即可。剩下的就交给 React 了。 const reducer: RUAReducer<Todo, TodoAction> = (state, action) => { switch (action.type) { case "add": { if (action.payload == null) throw new Error("Add todo without payload!"); return [ ...state, { id: state[state.length - 1].id + 1, content: action.payload.toString(), }, ]; } case "delete": { if (action.payload == null) throw new Error("Delete todo without payload!"); return state.filter((todo) => todo.id !== action.payload); } default: throw new Error("Dispatch a reducer without action!"); } };</code></pre> 签名方面，主要针对 action 做了一些调整，以确保创建 reducer 和 dispatch 时 action 的类型正确。 export type RUAState = Record<string, unknown> | unknown[]; export type RUAAction<P = unknown, T extends string = string> = { payload: P; type: T; }; export type RUAReducer<S extends RUAState, A extends RUAAction> = ( state: S, action: A, ) => S; export type RUADispatch<A extends RUAAction> = (action: A) => void; export type GetSnapshot<S> = () => S; export type Subscribe = (listener: () => void) => () => void;</code></pre> 在封装 hook 上，和上述没有多少区别： const todoStore = createStore(reducer, initialTodo); export const useTodoStore = (): [Todo, RUADispatch<TodoAction>] => [ useSyncExternalStore(todoStore.subscribe, todoStore.getSnapshot), todoStore.dispatch, ];</code></pre> 只是在 Redux 的三个原则中： Single source of truth</li> State is read-only</li> Changes are made with pure functions</li> </ul> 其中的 Single source of truth 没有完全遵守，我们的全局状态可以使用 createStore</code> 来创建多个 source，且多个 source 是完全分离的，无法一起访问到。 React 18 中的一些新 hooks 2022-10-11T00:00:00+00:00 useTransition</a></h2> 返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。它和 CSS 的过渡没有任何关系。useTransition 的主要目的是作用于在复杂的过渡任务时提供一个优先级较低的更新，过渡任务中触发的更新会让更紧急地更新先进行，比如点击。 过渡任务中的更新将不会展示由于再次挂起而导致降级的内容。这个机制允许用户在 React 渲染更新的时候继续与当前内容进行交互。 这里渲染一个长度为 10 万的列表和两个不同的按钮，第一个按钮会增加列表的长度并使第一个状态数值加一。第二个按钮只会增加自己的状态。 如果在这里设置状态时不使用 setTransiton</code> ，那么在整个列表进行渲染时将无法处理其他任何操作。 在使用了 setTransition</code> 后，整个列表进行渲染操作优先级将会比其他更紧急地操作低，从而可以响应第二个按钮点击。 useTransition</code> 返回的元组中包含两个值 [pending, setTransiton]</code> ，分别是 setTransiton</code> 方法和表示正在过渡的状态 pending</code> 。如果需要在过渡时展示特定的 UI 就可以使用 pending</code> 来控制状态。 <RUASandpack template="react-ts" files={{ '/Button.tsx': { code: sandpack.common.Button, hidden: true, }, '/App.tsx': sandpack['react18-new-hooks'].useTransition, }} /> useDeferredValue</a></h2> useDeferredValue</code> 接受一个状态值，并返回该的副本。返回的副本状态值将会在其他紧急更新后更新。它与 useTransition</code> 比较类似，二者可以搭配使用。 因为函数的原子性，在整个组件更新（重新渲染）时，子组件也会随着一起更新。这里通过设置了状态 value</code> 来对整个组件重新渲染，即使下方的列表没有任何变化也会一起重新渲染。而重新渲染 UI 界面对我们来说就是紧急更新。 将原本的状态值 value</code> 与 useDeferredValue</code> 返回的副本相比较就会发现 value</code> 会随着 UI 一起被更新，而被延迟的状态 deferred</code> 会等待 UI 更新结束后再做更新。 <RUASandpack template="react-ts" files={{ '/Button.tsx': { code: sandpack.common.Button, hidden: true, }, '/App.tsx': sandpack['react18-new-hooks'].useDeferredValue, }} /> useId</a></h2> useId</code> 与其他的都不同，从名字就能看出来它的作用，返回一个在整个 APP 中唯一的 ID。它能够保证每个组件调用它返回的 ID 都唯一，即使是同一个组件被父组件多次调用。 通常的作用有： 为页面中需要唯一 ID 元素提供 ID，例如 <label for="ID"></code> 。</li> SSR 到客户端注入时需要 ID 避免错误。</li> </ul> <RUASandpack template="react-ts" files={{ '/Input.tsx': { code: sandpack.common.Input, hidden: true, }, '/App.tsx': sandpack['react18-new-hooks'].useId, }} /> useSyncExternalStore</a></h2> useSyncExternalStore</code> 是目前最适合用来取代全局状态库的 hook，尤其是配合 redux 的思想后，简直就是手写的 mini redux。 首先看下该钩子的前面，其实不是很复杂。它接受一个范型，用于推断返回的状态。剩下的三个参数分别是： subscribe</code>: 一个当状态更新后可执行的回调函数。该函数会收到一个回调函数，这个回调函数就是当状态后执行，React 用来对比是否需要重新渲染组件。</li> getSnapshot</code>: 返回当前状态的函数。</li> getServerSnapshot</code>: 在服务端渲染时返回当前状态的函数，可选。</li> </ul> useSyncExternalStore<State>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => State, getServerSnapshot?: (() => State) | undefined): State</code></pre> useSyncExternalStore</code> 在组件中使用与 useSelector</code> 很相似： const { count, info } = useSyncExternalStore( store.subscribe, store.getSnapshot, );</code></pre> 但它的重点还是在 store 上： export type State = { count: number; info: string; }; export type Store = { state: State; setState: ( stateOrFn: Partial<State> | ((state: State) => Partial<State>), ) => void; subscribe: (listener: () => void) => () => void; listeners: Set<() => void>; getSnapshot: () => State; }; const store: Store = { state: { count: 0, info: 'Hello', }, setState(stateOrFn) { const newState = typeof stateOrFn === 'function' ? stateOrFn(store.state) : stateOrFn; store.state = { ...store.state, ...newState, }; store.listeners.forEach((listener) => listener()); }, listeners: new Set(), subscribe(listener) { store.listeners.add(listener); return () => { store.listeners.delete(listener); }; }, getSnapshot() { return store.state; }, }; export default store;</code></pre> 其中， listeners</code> 用于存放 subscribe</code> 的回调，在我们更新状态后需要通知 React 来更新组件。所以在 setState</code> 中遍历执行。之所以使用 Set()</code> 是因为 subscribe</code> 还需要返回一个函数用于注销 listener</code> 。 <RUASandpack template="react-ts" files={{ '/Input.tsx': { code: sandpack.common.Input, hidden: true, }, '/Button.tsx': { code: sandpack.common.Button, hidden: true, }, '/store.ts': sandpack['react18-new-hooks'].store, '/App.tsx': sandpack['react18-new-hooks'].useSyncExternalStore, }} /> useInsertionEffect</a></h2> useInsertionEffect</code> 在通常情况下都用不上，它的唯一目的是对 CSS-in-JS 库很重要。 CSS-in-JS 库通常需要在运行时插入或修改 <style></code> 标签等。当 CSS 规则被添加或删除时，浏览器必须检查这些规则是否适用于现有的 DOM 树。它必须重新计算所有的样式规则并重新应用它们--而不仅仅是改变了的那些。如果 React 发现另一个组件也产生了一个新的规则，同样的过程会再次发生。 解决这个问题的最好办法就是所有东西呈现给浏览器绘制前就进行改变。没错 useInsertionEffect</code> 与 useEffect</code> 有着同样的签名，但它会同步的在所有 DOM 更改之前触发。比 useLayoutEffect</code> 还要早触发，这样就可以用于在重绘之前注入样式。 <RUASandpack template="react-ts" files={{ '/App.tsx': sandpack['react18-new-hooks'].useInsertionEffect, }} /> 自建简易 FaaS 2022-10-10T00:00:00+00:00 近些年来，传统的 IaaS、PaaS 已经无法满足人们对资源调度的需求了。各大云厂商相继开始推出自家的 Serverless 服务。Serverless 顾名思义，它是“无服务器”服务器。不过并不是本质上的不需要服务器，而是面向开发者（客户）无需关心底层服务器资源的调度。只需要利用本身业务代码即可完成服务的运行。 Serverless 是近些年的一个发展趋势，它的发展离不开 FaaS 与 BaaS。这里不是着重讨论 Serverless 架构的，而是尝试利用 Node.js 来实现一个最简易的 FaaS 平台。顺便还能对 JavaScript 语言本身做进一步更深的研究。 Serverless 平台是基于函数作为运行单位的，在不同的函数被调用时，为了确保各个函数的安全性，同时避免它们之间的互相干扰，平台需要具有良好的隔离性。这种隔离技术通常被称之为“沙箱”（Sandbox）。在 FaaS 服务器中，最普遍的隔离应该式基于 Docker 技术实现的容器级别隔离。它不同于传统虚拟机的完整虚拟化操作系统，而且也实现了安全性以及对系统资源的隔离。 但在这我们尝试实现一个最简易的 FaaS 服务，不需要利用上 Docker。基于进程的隔离会更加的轻便、灵活，虽然与容器的隔离性有一定差距。 环境搭建</a></h2> 这里利用 TypeScript 来对 JavaScript 做更严格的类型检查，并使用 ESlint + Prettier 等工具规范代码。 初始化环境： yarn --init</code></pre> 添加一些开发必要工具： yarn add typescript ts-node nodemon -D</code></pre> 以及对代码的规范： yarn add eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin -D</code></pre> 当然不能忘了 Node 本身的 TypeScript lib。 yarn add @types/node -D</code></pre>基础能力</a></h2> 在 Nodejs 多进程 | 🍭Defectink</a> 一篇中，我们大概的探讨了进程的使用。这里也是类似。在进程创建时，操作系统将给该进程分配对应的虚拟地址，再将虚拟地址映射到真正的物理地址上。因此，进程无法感知真实的物理地址，只能访问自身的虚拟地址。这样一来，就可以防止两个进程互相修改数据。 所以，我们基于进程的隔离，就是让不同的函数运行再不同的进程中，从而保障各个函数的安全性和隔离性。具体的流程是：我们的主进程（master）来监听函数的调用请求，当请求被触发时，再启动子进程（child）执行函数，并将执行后的结果通过进程间的通信发送给主进程，最终返回到客户端中。 基于进程隔离</a></h3> chlid_process</code>是 Node.js 中创建子进程的一个函数，它有多个方法，包括 exec、execFile 和 fork。实际上底层都是通过 spawn 来实现的。这里我们使用 fork 来创建子进程，创建完成后，fork 会在子进程与主进程之间建立一个通信管道，来实现进程间的通信（IPC，Inter-Process Communication）。 其函数签名为：child_process.fork(modulePath[, args][, options])</code>。 这里利用child.process.fork</code>创建一个子进程，并利用child.on</code>来监听 IPC 消息。 // master.ts import child_process from "child_process"; const child = child_process.fork("./dist/child.js"); // Use child.on listen a message child.on("message", (message: string) => { console.log("MASTER get message:", message); });</code></pre> 在 Node.js 中，process 对象是一个内置模块。在每个进程启动后，它都可以获取当前进程信息以及对当前进程进行一些操作。例如，发送一条消息给主进程。 子进程则利用 process 模块来和主进程进行通信 // child.ts import process from "process"; process.send?.("this is a message from child process");</code></pre> 执行这段方法后，master 就会创建一个子进程，并接收到其发来的消息。 $ node master.js MASTER get message: this is a message from child process</code></pre> 到此，我们就实现了主进程与子进程之间的互相通信。但是需要执行的函数通常来自于外部，所以我们需要从外部手动加载代码，再将代码放到子进程中执行，之后将执行完的结果再发送回主进程，最终返回给调用者。 我们可以再创建一个func.js</code>来保存用户的代码片段，同时在主进程中读取这段代码，发送给子进程。而子进程中需要动态执行代码的能力。什么方式能在 JavaScript 中动态的执行一段代码呢？ Devil waiting outside your floor</a></h3> 没错，这里要用到万恶的 evil。在 JavaScript 中动态的加载代码，eval 函数是最简单方便，同时也是最危险和性能最低下的方式。以至于现代浏览器都不愿意让我们使用 console.log(eval("2 + 2")); // VM122:1 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem:".</code></pre> 执行来自用户的函数与普通函数略有一点区别，它与普通的函数不同，它需要利用 IPC 来返回值，而普通函数则之间 return 即可。我们不应该向用户暴露过度的内部细节，所以，用户的函数可以让他长这样： // func.js (event, context) => { return { message: "it works!", status: "ok " }; };</code></pre> eval 函数不仅可以执行一行代码片段，它还可以执行一个函数。在拿到用户的匿名函数后，我们可以将其包装成一个立即执行函数（IIFE）的字符串，然后交给 eval 函数进行执行。 const fn = `() => (2 + 2)`; const fnIIFE = `(${fn})()`; console.log(eval(fnIIFE));</code></pre> 不用担心，evil 会离我们而去的。 </blockquote> 这里我们使用主进程读取用户函数，并使用 IPC 发送给子进程；子进程利用 eval 函数来执行，随后再利用 IPC 将其结果返回给主进程。 // master.ts import child_process from "child_process"; import fs from "fs"; const child = child_process.fork("./dist/child.js"); // Use child.on listen a message child.on("message", (message: unknown) => { console.log("Function result:", message); }); // Read the function from user const fn = fs.readFileSync("./src/func.js", { encoding: "utf-8" }); // Sent to child process child.send({ action: "run", fn, });</code></pre>// child.ts import process from "process"; type fnData = { action: "run"; fn: () => unknown; }; // Listen function form master process process.on("message", (data: fnData) => { // Convert user function to IIFE const fnIIFE = `(${data.fn})()`; const result = eval(fnIIFE); // Sent result to master process process.send?.({ result }); process.exit(); });</code></pre> Devil crawling along your floor</a></h3> 前面我们利用 eval 函数获得了执行动态代码的能力，但与 Devil 做交易是需要付出代价的。很明显，我们付出了不小的安全性以及性能的代价。 甚至于用户代码能够直接修改 process，导致子进程无法退出等问题： (event, context) => { process.exit = () => { console.log("process NOT exit!"); }; return { message: "function is running.", status: "ok" }; };</code></pre> eval 函数能够访问全局变量的原因在于，它们由同一个执行其上下文创建。如果能让函数代码在单独的上下文中执行，那么就应该能够避免污染全局变量了。 所以我们得换一个 Devil 做交易。在 Node.js 内置模块中，由一个名为 vm 的模块。从名字就可以得出，它是一个用于创建基于上下文的沙箱机制，可以创建一个与当前进程无关的上下文环境。 具体方式是，将沙箱内需要使用的外部变量通过vm.createContext(sandbox)</code>包装，这样我们就能得到一个 contextify 化的 sandbox 对象，让函数片段在新的上下文中访问。然后，可执行对象的代码片段。在此处执行的代码的上下文与当前进程的上下文是互相隔离的，在其中对全局变量的任何修改，都不会反映到进程中。提高了函数运行环境的安全性。 const vm = require("vm"); const x = 1; const context = { x: 2 }; vm.createContext(context); // Contextify the object. const code = "x += 40; var y = 17;"; // `x` and `y` are global variables in the context. // Initially, x has the value 2 because that is the value of context.x. vm.runInContext(code, context);</code></pre> 在我们的 FaaS 中，我们无须在外层访问新的上下文对象，只需要执行一段函数即可。因此可以通过vm.runInNewContext(code)</code>方法来快速创建一个无参数的新上下文，更快速创建新的 sandbox。 我们只需要替换到 eval 函数即可： // child.ts import process from "process"; import vm from "vm"; type fnData = { action: "run"; fn: () => unknown; }; // Listen function form master process process.on("message", (data: fnData) => { // Convert user function to IIFE const fnIIFE = `(${data.fn})()`; const result = vm.runInNewContext(fnIIFE); // Sent result to master process process.send?.({ result }); process.exit(); });</code></pre> 现在，我们实现了将函数隔离在沙箱中执行，流程如图： 但 vm 真的安全到可以随意执行来自用户的不信任代码吗？虽然相对于 eval 函数来，它隔离了上下文，提供了更加封闭的环境，但它也不是绝对安全的。 根据 JavaScript 对象的实现机制，所有对象都是有原型链的（类似Object.crate(null)</code>除外）。因此 vm 创建的上下文中的 this 就指向是当前的 Context 对象。而 Context 对象是通过主进程创建的，其构造函数指向主进程的 Object。这样一来，通过原型链，用户代码就可以顺着原型链“爬”出沙箱： import vm from "vm"; (event, context) => { vm.runInNewContext('this.constructor.constructor("return process")().exit()'); return { message: "function is running.", status: "ok" }; };</code></pre> 这种情况就会导致非信任的代码调用主程序的process.exit</code>方法，从而让整个程序退出。 也许我们可以切断上下文的原型链，利用Object.create(null)</code>来为沙箱创建一个上下文。与任何 Devil 做交易都是需要付出代价的： The vm</code> module is not a security mechanism. Do not use it to run untrusted code. </blockquote> Devil lying by your side</a></h3> 好在开源社区有人尝试解决这个问题，其中一个方案就是 vm2 模块。vm2 模块是利用 Proxy 特性来对内部变量进行封装的。这使得隔离的沙箱环境可以运行不受信任的代码。 当然，我们需要手动添加一下依赖： yarn add vm2</code></pre> 另一个值得庆幸的是，代码改动也很小。我们只需要对child.ts</code>简单修改即可： import process from "process"; import { VM } from "vm2"; type fnData = { action: "run"; fn: () => unknown; }; // Listen function form master process process.on("message", (data: fnData) => { // Convert user function to IIFE const fnIIFE = `(${data.fn})()`; const result = new VM().run(fnIIFE); // Sent result to master process process.send?.({ result }); process.exit(); });</code></pre>HTTP 服务</a></h2> 在实现了动态执行代码片段的能力后，为了让函数能够对外提供服务，我们还需要添加一个 HTTP API。这个 API 使得用户可以根据不同的请求路径来动态的执行对应的代码，并将其结果返回给客户端。 这里 HTTP 服务器选用的是 Koa。 yarn add koa</code></pre> 当然还要有其类型 yarn add @types/koa -D</code></pre> 为了响应 HTTP 请求并运行我们的函数，我们需要进一步的将运行子进行的方法封装为一个异步函数，并在接收到子进程的消息后，直接 resolve 给 Koa。 将前面的子进程的创建、监听以及读取文件都封装进一个函数： // master.ts import child_process from "child_process"; import fs from "fs/promises"; import Koa from "koa"; const app = new Koa(); app.use(async (ctx) => { ctx.response.body = await run(); }); const run = async () => { const child = child_process.fork("./dist/child.js"); // Read the function from user const fn = await fs.readFile("./src/func.js", { encoding: "utf-8" }); // Sent to child process child.send({ action: "run", fn, }); return new Promise((resolve) => { // Use child.on listen a message child.on("message", resolve); }); }; app.listen(3000);</code></pre> 现在我们的流程如下： 这样还不够，到目前为止，用户还只是请求的根路径，而我们响应的也只是同一个函数。因此我们还需要一个路由机制来支持不同的函数触发。 使用ctx.request.path</code>就能获取到每次 GET 请求后的路径，所以这里也不用大费周章的去划分路由，直接把路径作为函数名，读取文件，执行即可。所以这里的改造就简单多了： // master.ts app.use(async (ctx) => { ctx.response.body = await run(ctx.request.path); }); const run = async (path: string) => { const child = child_process.fork("./dist/child.js"); // Read the function from user const fn = await fs.readFile(`./src/func/${path}.js`, { encoding: "utf-8" }); // Sent to child process child.send({ action: "run", fn, }); return new Promise((resolve) => { // Use child.on listen a message child.on("message", resolve); }); };</code></pre> 至此，我们就实现了一个最简单的进程隔离 FaaS 方案，并提供了动态加载函数文件且执行的能力。 但这还不是全部，还有很多方面的问题值得去优化。 进阶优化</a></h2> FaaS 并不只是简单的拥有动态的执行函数的能力就可以了，面对我们的还有大量的待处理问题。 进程管理</a></h3> 上述的方案看上去已经很理想了，利用子进程和沙箱防止污染主进程。但还有个主要的问题，用户的每一个请求都会创建一个新的子进程，并在执行完后再销毁。对系统来说，创建和销毁进程是一个不小的开销，且请求过多时，过多的进程也可能导致系统崩溃。 所以最佳的办法是通过进程池来复用进程。如下图，进程池是一种可以复用进程的概念，通过事先初始化并维护一批进程，让这批进程运行相同的代码，等待着执行被分配的任务。执行完成后不会退出，而是继续等待新的任务。在调度时，通常还会通过某种算法来实现多个进程之间任务分配的负载均衡。 早在 Node.js v0.8 中就引入了 cluster 模块。cluster 是对child_process</code>模块的一层封装。通过它，我们可以创建共享服务器同一端口的子进程。 这时候我们就需要对master.ts</code>进行大改造了。首先需要将child_process</code>更换为 cluster 来管理进程，我们根创建 CPU 超线程数量一半的子进程。这是为了留下多余的超线程给系统已经 Node 的事件循环来工作。顺便在每个子进程中监听对应的 HTTP 端口来启动 HTTP 服务。 // master.ts import cluster from "cluster"; import os from "os"; const num = os.cpus().length; const CPUs = num > 2 ? num / 2 : num; if (cluster.isMaster) { for (let i = 0; i < CPUs; i++) { cluster.fork(); } } else { const app = new Koa(); app.use(async (ctx) => { ctx.response.body = await run(ctx.request.path); }); app.listen(3000); }</code></pre> 这里看上去有点匪夷所思，我们都知道，在操作系统中，是不允许多个进程监听同一个端口的。我们的多个子进程看上去监听的都是同一个端口！ 实际上，在 Node.js 的 net 模块中，当当前进程是 cluster 的子进程时，存在一个特殊的处理。 简单来说就是，当调用 listen 方法监听端口后，它会判断是否处于 cluster 的子进程下。如果是子进程，则会向主进程发送消息，告诉主进程需要监听的端口。当主进程收到消息后，会判断指定端口是否已经被监听，如果没有，则通过端口绑定实现监听。随后，再将子进程加入一个 worker 队列，表明该子进程可以处理来自该端口的请求。 这样一来，实际上监听的端口的依然是主进程，然后将请求分发给 worker 队列中子进程。分发算法采用了 Round Robin 算法，即轮流处理制。我们可以通过环境变量NODE_CLUSTER_SCHED_POLICY</code>或通过配置cluster.schedulingPolicy</code>来指定其他的负载均衡算法。 总的来说，虽然我们的代码看上去是由子进程来多次监听端口，但实际上是由我们的主进程来进行监听。然后就指定的任务分发给子进程进行处理。 回到我们的逻辑上，由于可以直接在当前代码中判断和创建进程，我们也就不再需要child.ts</code>了。子进程也可以直接在作用域中执行 run 函数了。 所以我们将master.ts</code>完整的改造一下，最终我们就实现了基于 cluster 的多进程管理方案： import cluster from "cluster"; import os from "os"; import fs from "fs/promises"; import Koa from "koa"; import { VM } from "vm2"; const num = os.cpus().length; const CPUs = num > 1 ? Math.floor(num / 2) : num; const run = async (path: string) => { try { // Read the function from user const fn = await fs.readFile(`./src/func/${path}.js`, { encoding: "utf-8", }); // Use arrow function to handle semicolon const fnIIFE = `const func = ${fn}`; return new VM().run(`${fnIIFE} func()`); } catch (e) { console.log(e); return "Not Found Function"; } }; if (cluster.isMaster) { for (let i = 0; i < CPUs; i++) { cluster.fork(); } } else { const app = new Koa(); app.use(async (ctx) => { ctx.response.body = await run(ctx.request.path); }); app.listen(3000); }</code></pre>限制函数执行时间</a></h3> 上述，我们利用多进程方案来提高整体的安全性。但是，目前还没有考虑死循环的情况。当用户编写了一个这样的函数时： const loop = (event, context) => { while (1) {} return { message: "this is function2!!!", status: "ok " }; };</code></pre> 我们的进程会一直为其计算下去，无法正常退出，导致资源被占用。所以我们理想的情况下就是在沙箱外限制没个函数的执行时长，当超过限定时间时，之间结束该函数。 好在，vm 模块赋予了我们这一强大的功能： vm.runInNewContext({ 'loop()', { loop, console }, { timeout: 5000 } })</code></pre> 通过 timeout 参数，我们为函数的执行时间限制在 5000ms 内。当死循环的函数执行超 5s 后，随后会得到一个函数执行超时的错误信息。 由于 vm2 也是基于 vm 进行封装的，因此我们可以在 vm2 中使用和 vm 相同的能力。只需要小小的改动就可以实现限制函数执行时长能力： return new VM({ timeout: 5000 }).run(`${fnIIFE} func()`);</code></pre> 看上去不错！但 Devil 不会就这么轻易放过我们的。JavaScript 本身是单线程的语言，它通过出色的异步循环来解决同步阻塞的问题。异步能解决很多问题，但同时也能带来问题。事件循环机制目前管理着两个任务队列：事件循环队列（或者叫宏任务）与任务队列（常见的微任务）。 我们可以把每次的事件循环队列内的每次任务执行看作一个 tick，而任务队列就是挂在每个 tick 之后运行的。也就是说微任务只要一直在运行，或者一直在添加，那么就永远进入不到下一次 tick 了。这和同步下死循环问题一样！ 事件循环通常包含：setTimout、setInterval 和 I/O 操作等，而任务队列通常为：process.nextTick</code>、Promise、MutationObserver 等。 VM2 也有类似 VM 的 timeout 设置，但是同样的是，它也是基于事件循环队列所设置的超时。根本来说，它无法限制任务队列中的死循环。 面对这个难题，考虑了很久，也导致这个项目拖了挺长一段时间的。摸索中想到了大概两个方法能够解决这个问题： 继续使用 cluster 模块，cluster 模块没有直接的 API 钩子给我们方便的在主进程中实现计时的逻辑。我们可以考虑重写任务分发算法，在 Round Robin 算法的的基础上实现计时的逻辑。从而控制子进程，当子进程超时时，直接结束子进程的声明周期。</li> 第二个方法是，放弃使用 cluster 模块，由我们亲自来管理进程的分发已经生命周期，从而达到对子进程设置执行超时时间的限制。</li> </ol> 这两个方法都不是什么简单省事的方法，好在我们有优秀的开源社区。正当我被子进程卡主时，得知了一个名为 Houfeng/safeify: 📦 Safe sandbox that can be used to execute untrusted code. (github.com)</a> 的项目。它属于第二种解决办法，对child_process</code>的手动管理，从而实现对子进程的完全控制，且设置超时时间。 虽然上述写的 cluster 模块的代码需要重构，并且我们也不需要 cluster 模块了。利用 safeify 就可以进行对子进程的管理了。 所以这里对 Koa 的主进程写法就是最常见的方式，将控制和执行函数的逻辑抽离为一个 middleware，交由路由进行匹配： import Koa from "koa"; import runFaaS from "./middleware/faas"; import logger from "koa-logger"; import OPTION from "./option"; import router from "./routers"; import bodyParser from "koa-bodyparser"; import cors from "./middleware/CORS"; const app = new Koa(); app.use(logger()); app.use(bodyParser()); app.use(cors); // 先注册路由 app.use(router.routes()); app.use(router.allowedMethods()); // 路由未匹配到的则运行函数 app.use(runFaaS); console.log(`⚡[Server]: running at http://${OPTION.host}:${OPTION.port} !`); export default app.listen(OPTION.port);</code></pre>总结</a></h2> 我的简易 FaaS 基本上到这里就告一段落了，对 Devil 的最后针扎就是限制函数的异步执行时间。实际上还有一些可以优化的点。例如对函数执行资源的限制，即便我们对函数的执行时间有了限制，但在函数死循环的几秒钟，它还是占有了我们 100% 的 CPU。如果多个进程的函数都会占满 CPU 的执行，那么到最后服务器的资源可能会被消耗殆尽。 针对这个情况也有解决办法：在 Linux 系统上可以使用 CGroup 来对 CPU 和系统其他资源进程限制。其实 safeify 中也有了对 CGroup 的实现，但我最终没有采用作用这个方案，因为在 Docker 环境中，资源本身已经有了一定的限制，而且 Container 中大部分系统文件都是 readonly 的，CGroup 也不好设置。 还有一个优化的地方就是可以给函数上下文提供一些内置的可以函数，模仿添加 BaaS 的实现，添加一个常用的服务。不过最终这个小功能也没有实现，因为（懒）这本来就是一个对 FaaS 的简单模拟，越是复杂安全性的问题也会随着增加。 推荐</a></h2> 无利益相关推荐： 目前市面上大部分对于 Serverless 的书籍都是研究其架构的，对于面向前端的 Serverless 书籍不是很常见。而《前端 Serverless：面向全栈的无服务器架构实战》就是这样一本针对我们前端工程师的书籍，从 Serverless 的介绍，到最后的上云实践，循序渐进。 本篇也大量参考其中。 把玩</a></h2> FaaS</a></del> 使用 Turborepo 和 rollup 构建 NPM 包 2022-10-10T00:00:00+00:00 对于 monorepo 我使用的是 turborepo</a>，创建一个新的项目非常简单： npx create-turbo@latest</code></pre> 对于包管理器，这次尝鲜使用了 pnpm</a> 它在安装包到 workspace 中相对于其他两个来说要更加的方便。 pnpm add --filter rua-three react react-dom three stats.js -D</code></pre>Turborepo</a></h2> 对于 turborepo 来说没有什么需要过多配置的，比较需要注意的就是它的环境变量需要手动在 turbo.json</code> 配置文件中声明一次： "globalEnv": [ "NODE_ENV" ],</code></pre> 除此之外，在默认的 tsconfig 中，其 target</code> 是 es5</code> 如果需要一些比较先进的语法，例如在类体中实例化另一个类，则就需要将 target</code> 设置到 es6</code> 及以上。 "compilerOptions": { "target": "es6", },</code></pre>rollup</a></h2> 相比较与 turborepo 来说，rollup 需要注意的地方就多一些。对于 rollup 的安装来说，本身所需要的依赖不是很多，主要是部分插件。 "@rollup/plugin-commonjs": "^22.0.2", "@rollup/plugin-node-resolve": "^14.1.0", "rollup": "^2.79.1", "rollup-plugin-typescript2": "^0.34.0",</code></pre> 对于一个小包来说，我的目录结构也非常的简单，核心部分就在 rollup.config.js</code> 和 package.json</code> 。 . ├── lib │ ├── cjs │ └── esm ├── package.json ├── README.md ├── rollup.config.js ├── src │ ├── hooks │ ├── index.ts │ └── three └── tsconfig.json</code></pre> 安装完了 rollup 之后，需要对其简单的进行一下配置。对于 input 和 output 是基本操作，没有什么值得注意的。而 external 字段决定了我们依赖是否是外部依赖，从而直接决定了 rollup 会不会将第三方的依赖打包到一起。 import { nodeResolve } from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import typescript from 'rollup-plugin-typescript2'; import pkg from './package.json'; export default { input: 'src/index.ts', output: [ { file: pkg.main, format: 'cjs', sourcemap: true, }, { file: pkg.module, format: 'es', sourcemap: true, }, ], external: [ ...Object.keys(pkg.peerDependencies || {}), 'three/examples/jsm/controls/OrbitControls', ], plugins: [ nodeResolve(), commonjs(), typescript({ typescript: require('typescript'), }), ], };</code></pre> 通常来说，我们将所依赖的第三方依赖明确的生声明在 peerDependencies</code> 中，在根据其 key 设置到 external 中，这样我们的 peerDependencies</code> 就不会被一起打包了。 "peerDependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "stats.js": "^0.17.0", "three": "^0.144.0" },</code></pre> 但在我的例子中，光添加了 three</code> 还不够。如果还引入了 three</code> 这个包下的其他文件夹内的文件，rollup 并没有非常智能的识别到 three/examples/jsm/controls/OrbitControls</code> 也隶属于 three</code> 。 从而将 OrbitControls</code> 也打包到一起了，所以在 external 中还需要手动添加。 import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';</code></pre>package</a></h2> 在 package.json</code> 中除了 peerDependencies</code> 比较重要外，入口文件和类型文件的位置声明也决定了我们的包能否被正常使用。 "main": "./lib/cjs/index.js", "module": "./lib/esm/index.js", "types": "./lib/esm/index.d.ts",</code></pre> 而 files</code> 字段则决定了当我们使用 npm publish</code> 时所上传的文件： "files": [ "/lib" ],</code></pre>NPM</a></h2> 在做了适当的配置后，公开一个包到公共源非常简单，只需要两个命令，分别是登录和上传。 npm adduser npm publish</code></pre> 需要注意的就是不能在镜像源上登陆，当然也不能上传。 What about this - JavaScript 全面解析 2022-09-24T00:00:00+00:00 this 全面解析</a></h2> this 和动态作用域有些许类似，它们都是在执行时决定的。this 是在调用时被绑定的，完全取决于函数的调用位置。 确定调用位置</a></h3> 当一个函数被调用时，会创建一个活动记录（执行期上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this 就是这个记录里的一个属性。 调用位置就是函数在代码中被调用的位置，而不是声明的位置。我们可以通过分析调用栈来确定函数的真正调用位置。 function foo() { // 当前调用栈：foo console.log("foo"); bar(); } function bar() { // 当前调用栈：foo --> bar console.log("bar"); baz(); } function baz() { // 当前调用栈：foo --> bar --> baz console.log("baz"); } foo();</code></pre>绑定规则</a></h3> this 是在运行时动态绑定的，所以在不同的情况下，this 的指向可能会出现各种意料之外的结果。 默认绑定</a></h4> 当函数在全局环境下独立调用时，this 会指向全局对象。 var a = 123; function foo() { console.log(this.a); // 123 }</code></pre> 而当函数处于严格模式下时，则不能将全局对象用于默认绑定，因此 this 会绑定到 undefined</code>。 var a = 123; function foo() { "use strict"; console.log(this.a); // TypeError: this is undefined }</code></pre> 还有一个微妙的细节：虽然 this 的绑定完全取决于调用位置，但只有 foo()</code> 函数本身处于非严格模式时才能绑定到全局对象。如果只是函数执行时所在的环境是严格模式，而函数本身是非严格模式，则不影响默认绑定规则。 var a = 123; function foo() { console.log(this.a); } (() => { "use strict"; foo(); })();</code></pre> 通常来说不推荐在代码中混用严格模式与非严格模式。 </blockquote> 隐式绑定</a></h4> 另一种规则是考虑调用位置是否有上下文对象，或者说某个对象是否包含这个函数。 function foo(this: typeof obj) { console.log(this.name); } const obj = { name: "xfy", foo: foo, }; obj.foo(); // xfy</code></pre> 这种方式可以理解为将 foo()</code> 的函数体赋值给了对象 obj 的一个属性，而执行时是从 obj 作为上下文对象来执行的。所以 this 隐式地绑定到了 obj 对象上。 对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。 function foo(this: typeof obj) { console.log(this.name); } const obj = { name: "xfy", foo: foo, }; obj.foo(); // xfy const anotherObj = { name: "dfy", obj: obj, }; anotherObj.obj.foo(); // xfy</code></pre> 隐式丢失 既然会有隐式绑定，自然也会出现隐式丢失的问题。 function foo() { console.log(this.name); } const obj = { name: "xfy", age: 18, foo, }; const bar = obj.foo; // 函数别名 bar();</code></pre> 虽然 bar 是 obj.foo</code> 的一个引用，但它引用的是函数体本身。可以理解为将函数体传递给了 bar 这个变量，此时调用 bar()</code> 是一个不带任何修饰的函数调用，因此会使用默认绑定。 另一种常见且出乎意料的情况就是在传递回调函数时： function foo() { console.log(this.name); } function doFoo(fn) { fn(); } const obj = { name: "xfy", age: 18, foo, }; doFoo(obj.foo);</code></pre> 参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值。只要函数体被传递后，且调用时脱离了原有的对象，就会导致 this 的隐式丢失。 包括 setTimeout()</code> 方法丢失 this 也是同理。 显式绑定</a></h4> 由于原型的特性，JavaScript 中函数也有自己的属性。大多数宿主环境都会提供 call()</code> 与 apply()</code> 方法来让我们显式地绑定 this。 function foo() { console.log(this.name); } const obj = { name: "xfy", age: 18, foo, }; foo.call(obj);</code></pre> call 与 apply 只是传参方式不同。 </blockquote> 使用显式绑定可以很好地解决传递参数时隐式丢失 this 的问题。 function foo() { console.log(this.name); } const obj = { name: "xfy", age: 18, foo, }; function bar() { foo.call(obj); } setTimeout(bar, 1000); // 同理 // setTimeout(() => { // obj.foo(); // }, 1000);</code></pre> 这里在 bar()</code> 的内部直接手动显式地把 foo()</code> 绑定到了 obj，无论之后怎么调用、在何处调用，都会手动将 obj 绑定在 foo()</code> 上。这种绑定称之为硬绑定。 不过这种绑定是特意设计的例子，这里手动为 foo()</code> 绑定到了 obj。在多数情况下，我们可能需要更灵活的方案。 在 JavaScript 装饰器模式 🎊 - 🍭Defectink (xfy.plus)</a> 中介绍了这种工作模式。通过一个包装器配合显式绑定就能解决大部分情况下的问题。 function foo(msg) { console.log(this.name); console.log(msg); } function wrapper(fn, obj) { return (...rest) => { fn.apply(obj, rest); }; } const obj = { name: "xfy", age: 18, }; const bar = wrapper(foo, obj); bar("嘤嘤嘤");</code></pre> 包装器不仅仅只是用来解决 this 丢失的问题，对于 this 绑定的问题，ES5 提供了内置的方法 Function.prototype.bind</code>。 function foo() { console.log(this.name); } const obj = { name: "xfy", age: 18, }; const bar = foo.bind(obj); bar();</code></pre>new 绑定</a></h4> 在传统面向类的语言中，“构造函数”是类中的一些特殊方法，使用类时会调用类中的构造函数。通常类似于这样： myObj = new MyClass();</code></pre> 在 JavaScript 中，所有函数都可以被 new 操作符调用。这种调用称为构造函数调用，实质上并不存在所谓的“构造函数”，只有对于函数的“构造调用”。 使用 new 来进行构造函数调用时，会执行以下操作： 创建（构造）一个新对象。</li> 对新对象执行 [[Prototype]]</code> 连接。</li> 将新对象绑定到函数调用的 this。</li> 如果函数没有返回其他对象，那么在 new 调用后自动返回这个新对象。</li> </ol> function Foo(name) { this.name = name; } const bar = new Foo("xfy"); console.log(bar.name);</code></pre> 使用 new 操作符来调用 foo()</code> 时，会构造一个新对象并把它绑定到 foo()</code> 中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。 ES6 的 class 只是一个语法糖，但它也解决了一些问题。 </blockquote> 优先级</a></h3> 上述描述的四条规则中，如果某处位置可以应用多条规则时，就要考虑到它们的优先级问题。 毫无疑问，默认绑定肯定是优先级最低的绑定。所以先来考虑隐式绑定与显式绑定之间的优先级，用一个简单的方法就能测试出来： function foo() { console.log(this.age); } const xfy = { name: "xfy", age: 18, foo, }; const dfy = { name: "dfy", age: 81, foo, }; xfy.foo(); // 18 dfy.foo(); // 81 xfy.foo.call(dfy); // 81 dfy.foo.call(xfy); // 18</code></pre> 很明显，显式绑定的优先级更高，也就是说在判断时应当先考虑是否存在显式绑定。 那么 new 绑定与隐式绑定呢？ function foo(msg) { this.a = msg; } const xfy = { name: "xfy", foo, }; xfy.foo("test"); console.log(xfy); const obj = new xfy.foo("this is obj"); console.log(obj);</code></pre> 可以看到，这里对对象 xfy 中隐式绑定的函数进行了 new 操作，而最后的 this 被绑定到了新对象 obj 上，并没有修改 xfy 本身的值。所以 new 绑定的优先级比隐式绑定更高。 那 new 绑定与显式绑定呢？由于 call/apply</code> 无法与 new 一起使用，所以无法通过 new xfy.foo.call(obj)</code> 来测试优先级，但我们可以通过硬绑定 bind()</code> 来测试。 function foo(msg) { this.a = msg; } const xfy = { name: "xfy", foo, }; let obj = {}; const bar = xfy.foo.bind(obj); bar("obj"); console.log(obj); // bar was bind to obj const baz = new bar("this is baz"); console.log(obj); console.log(baz);</code></pre> 可以看到，在硬绑定之后，使用 new 操作时对象 obj 的值并没有被改变，反而对 new 出来的新对象进行了修改。 但这真的说明 new 绑定比硬绑定优先级更高吗？实则不然，上述结果是因为 ES5 中内置的 Function.prototype.bind()</code> 方法比较复杂，它会对 new 绑定进行判断，如果是 new 绑定就会使用新创建的 this。 这是来自 MDN</a> 的 polyfill bind 方法： // Yes, it does work with `new (funcA.bind(thisArg, args))` if (!Function.prototype.bind) (function () { var ArrayPrototypeSlice = Array.prototype.slice; Function.prototype.bind = function (otherThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError( "Function.prototype.bind - what is trying to be bound is not callable", ); } var baseArgs = ArrayPrototypeSlice.call(arguments, 1), baseArgsLength = baseArgs.length, fToBind = this, fNOP = function () {}, fBound = function () { baseArgs.length = baseArgsLength; // reset to default base arguments baseArgs.push.apply(baseArgs, arguments); return fToBind.apply( fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs, ); }; if (this.prototype) { // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } fBound.prototype = new fNOP(); return fBound; }; })();</code></pre> 在这几段代码中： fNOP.prototype.isPrototypeOf(this) ? this : otherThis, // 以及 if (this.prototype) { // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } fBound.prototype = new fNOP();</code></pre> 该 polyfill 检测了是否是使用 new 绑定，并修改 this 为 new 绑定的对象。 判断 this 的步骤</a></h4> 根据上述优先级，可以得出判断 this 的结论（优先级从高到低）： 函数是否在 new 中调用（new 绑定）？如果是，this 绑定到新创建的对象。const bar = new Foo()</code> </li> 函数是否通过 call/apply</code> 或者硬绑定调用（显式绑定）？如果是，this 绑定到指定的对象。const bar = foo.call(baz)</code> </li> 函数是否在某个上下文对象中调用（隐式绑定）？如果是，this 绑定到那个上下文对象上。const bar = obj.foo()</code> </li> 上述情况都不满足，那么就会使用默认绑定。 </li> </ol> 绑定例外</a></h3> 凡事都有例外，this 绑定也是如此。在某些情况下，代码看起来可能应用了某种绑定规则，但实际上应用的可能是默认规则。 被忽略的 this</a></h4> 把 null 或者 undefined 作为 this 的绑定对象传入 call/apply</code> 与 bind 方法时，这些值会被忽略，从而应用默认绑定规则。 也就是说，call/apply</code> 传入 null 或者 undefined 时与直接执行函数本身没有区别。 function foo() { console.log(this.name); } foo.call(null);</code></pre> 这样使用 call/apply</code> 的作用是利用它们的特性来解决一些小问题。 例如：展开数组 function bar(a, b) { console.log(a, b); } bar.apply(null, [1, 2]);</code></pre> 当然，在 ES6 中可以使用展开运算符来传递参数： bar(...[1, 2]);</code></pre> 又或是利用 bind 实现柯里化： function bar(a, b) { console.log(a, b); } const baz = bar.bind(null, 1); baz(2);</code></pre> 这里都是利用忽略 this 产生的一些副作用，但在某些情况下可能不安全，例如函数可能真的会使用到 this，这在非严格模式下可能会修改全局对象。 如果确实需要使用这种方法，可以创建一个 DMZ（隔离）对象来代替 null。 const dmz = Object.create(null); foo.call(dmz, arg)</code></pre>间接引用</a></h4> 另外需要注意的是，在某些情况下我们可能会无意地创建一个函数的间接引用。间接引用最容易在赋值期间发生： function foo() { console.log(this.name); } const o = { foo, }; const p = {}; (p.foo = o.foo)();</code></pre> 赋值表达式 p.foo = o.foo</code> 返回的是目标函数的引用，所以在这里调用实际上是在全局环境下直接调用 foo()</code>。根据之前的规则，这里会应用默认绑定。 Three.js 中的物体围绕运动 2022-09-02T00:00:00+00:00 使一个物体围绕另一个物体运动，主要是保证围绕物体的运动轨迹。在 three.js 中，一个 Mesh 实例可以通过其自身的 add()</code> 方法，去添加另一个实例。 通过此方法就可以达成添加一个实例成为另一个实例的子节点。当父节点进行运动时（例如自身旋转），子节点也会跟随运动。 在物体围绕运动中，我们可以把围绕物体添加到被围绕物体中。当父节点绕自身旋转时，离父节点有一定距离的围绕物体就会随着父节点的旋转而旋转。但这样做就会导致本不需要运动的父节点自身进行运动。 Object3D</a></h2> three.js 提供了一个可以在场景中添加的“点”。它与 Mesh 等物体不同，它相当于在场景中添加一个不可见的点。并且它也拥有 add()</code> 方法，也就可以添加其他物体到这个点中。 const target = new THREE.Object3D();</code></pre> 当这个点进行旋转时，被添加的物体也就可以按照预想的方式进行运动。同时它也可以被添加到一个物体中，其位置就会与添加的物体相同，就不用手动为其设置相同的位置了。 const target = new THREE.Object3D(); const material = new THREE.MeshPhongMaterial({ color: "#4d4d4d", specular: "#fdfdfd", emissive: "rgb(0,0,0)", }); const boxGeo = new THREE.BoxGeometry(2, 2, 2); const box = new THREE.Mesh(boxGeo, material); box.castShadow = true; box.receiveShadow = true; box.position.set(0, 2, 0); box.add(target); three.scene.add(box); const sphereGeo = new THREE.SphereGeometry(0.5, 32, 16); const sphere = new THREE.Mesh(sphereGeo, material); sphere.castShadow = true; sphere.receiveShadow = true; sphere.position.set(-2, 2, 0); // target.position.set(0, 2, 0); target.add(sphere); three.scene.add(target);</code></pre> 相对位置</a></h3> 如果被围绕的物体没有通过 add()</code> 方法添加 Object3D，那么就需要手动添加 Object3D 到场景中，并设置到特定的位置。可以通过其 position.set()</code> 方法设置。这对于 Object3D 本身来说是相对于世界坐标位置的。 如果被围绕物体已经添加到场景中，通过 add()</code> 方法添加 Object3D 也会被添加到场景中。且它的位置与父节点相同。 对于围绕物体来说，其自身被 Object3D 通过 add()</code> 方法添加到 Object3D 中。而它通过 position.set()</code> 进行设置时，就是相对与 Object3D 已经设置过的位置进行设置。 box.position.set(0, 2, 0); box.add(target); target.add(sphere); sphere.position.set(-2, 0, 0); // sphere position in world is (-2, 2, 0);</code></pre>获取世界位置</a></h3> 默认情况下 Mesh.position</code> 得到是其自身的相对位置。获取世界全局位置需要一个 Vector3 来保存，再使用 Mesh.getWorldPosition</code> 来获取。 const position = new THREE.Vector3(); earth.getWorldPosition(position);</code></pre>Demo</a></h2> 组件泛型实例-封装可复用的表单组件 2022-08-12T00:00:00+00:00 当前很多 UI 库都会为我们集成可复用的 Form 组件，并且是开箱即用。但有时候我们往往可能需要为自己的组件集成 Form。单纯的手动管理所有的状态可能不是件理想的活，尤其是表单验证。 React Hook Forms</a> 为我们提供了完善的状态管理，并且可以集成到任何组件中去。 你可能会问，如今已经有了像是 MUI、Ant Design 等此类优秀的组件库，为什么还需要使用 React Hook Forms 来管理表单。 MUI: The React component library you always wanted</a> 虽然一些优秀的成熟组件库会为我们提供良好的表单解决方案，但它终究需要与组件库一起使用。而并非只是提供表单的状态管理，并没有完全的与组件库解耦合。 同时，当我们使用诸如 Daisyui</a> 等此类的 CSS 组件时，它们是与状态完全解耦合的。我们需要自己为其维护状态。 Hook our form</a></h2> 对于一个表单来说，提供的表单项越多，所需要的状态管理就越繁琐。不仅仅是状态管理，后续的表单验证才是一个表单的核心所在。 React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以在开发时验证表单类型。而表单的数据类型也是后续封装通用组件较为繁琐的一个地方。 <RUASandpack template="react-ts" files={{ '/App.tsx': sandpack['generic-component-encapsulate-reusable-component'].hookApp, }} customSetup={{ dependencies: { '@emotion/react': '^11.10.0', '@emotion/styled': '^11.10.0', 'react-hook-form': '^7.34.0', }, }} /> React Hook Forms 在使用方面，使用了一个 register</code> 函数代替了我们为每个表单项管理状态的步骤。从写法上就可以看出，这个函数返回了我们的表单所需要的属性，以及其状态。 <input type="text" id="firstname" {...register("firstName")} /></code></pre> 在表单提交方面，handleSubmit</code> 方法接受一个回调，其参数就是表单输入后的状态。 const onSubmit = handleSubmit((data) => console.log(data));</code></pre> 表单验证通过后，就可以成功调用这个函数，以实现我们的表单提交。 这是一段最基础的用法，没有表单验证提示，仅仅只是接受任何用户输入的数据。并且同样的组件也没有实现复用。 Input 组件</a></h2> 封装一个可复用的 Input</code> 组件可能是再简单不过的事情了，对于其参数类型，主要部分还是来自于 HTMLInput</code> 。我们只需要个别定义的属性，再利用剩余参数将其全部赋值给真正的 input</code> export type FormInputProps = { label?: string | undefined; } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;</code></pre>const Input = ({ name, label, ...rest }: FormInputProps) => { return ( <> <label htmlFor={name}>{label}</label> <S.Wrapper> <S.Input name={name} {...rest} /> </S.Wrapper> </> ); };</code></pre> 用起来自然也是和常见的组件一样方便： <div> <Input name="firstname" label="First name:" /> </div> <div> <Input name="lastname" label="Last name:" /> </div></code></pre> 但是如果仅仅只是这样，我们的组件还不能与 React Hook Forms 一起工作。因为其核心部分 register</code> 函数还无法传递给我们的 Input</code> 组件。也就是说我们的组件现在还是不可控的，这时候再尝试提交就会发现无法获取其状态。 当然我们不能简单的将 register</code> 函数塞给 Input</code> 组件，因为它还没有合适的签名。register</code> 函数会根据表单的数据签名和不同的表单项来实现自己的签名。 从 register</code> 函数的签名中就可以看出，它接受一个泛型，该泛型就是对应的表单项类型。 register: <"firstName">(name: "firstName", options?: ...)</code></pre> 也就是 FormData</code> 中的 firstName</code> ： type FormData = { firstName: string; lastName: string; favorite: Pet; };</code></pre> 没错，要想正确的给组件中的 register</code> 函数签名，我们就得给我们的函数式组件上个泛型。 泛型</a></h2> 在考虑给组件添加一个泛型之前，需要先简单的了解下泛型是如何工作的。 一个函数的泛型可以非常的简单，它代表了一个任意的类型值（当然也可以对其进行约束）。并根据指定的参数为泛型时，自动推断该类型值。 const logAndReturn = <T extends unknown>(target: T) => { console.log(target); return target; }; // const logAndReturn: <42>(target: 42) => 42 logAndReturn(42); // const logAndReturn: <"42">(target: "42") => "42" logAndReturn("42");</code></pre>类型别名中的泛型</a></h3> 类型别名中的泛型与函数不同的是，它需要手动传递一个函数的泛型值（或来自其他地方的泛型），并根据该泛型来决定其值。并且如果泛型有约束的话，还需要符合其约束。 例如，我们有一个描述个人的类型别名： type Person<T extends number | string> = { name: string; age: number; favorite: T; };</code></pre> 而我们需要编写一个函数，根据其 favorite</code> 来决定打印的值。函数大概长这样： const sayIt = <T extends number | string>(p: Person<T>) => { const type = typeof p.favorite; switch (type) { case "string": console.log(`My favorite word is: ${p.favorite}`); return; case "number": console.log(`My favorite number is: ${p.favorite}`); return; } };</code></pre> 当指定参数为 p: Person<T></code> 时，就需要将函数的泛型传递给类型别名。且类型别名中的泛型约束在了 <T extends number | string></code> 之间，函数必须保证使其子类型。否则就会提示无法满足其类型。 和参数类型，泛型也是向下兼容的，只要保证其类型是子类型即可。也就是说这样也是可以的 const sayIt = <T extends 42>(p: Person<T>) => {}</code> 。数字 42 是 number</code> 类型的子类型。 随后在调用函数时，就能发现泛型给我们带来的作用了。 React 中的泛型</a></h3> 我们的 React 函数组件也是一个函数，对于泛型的规则同样适用。 来看一个简单的小组件，该组件可以以一个常见的对象类型 Record<string, unknown></code> 来根据指定的 key 访问其值，并展示在 DOM 上。 <RUASandpack template="react-ts" files={{ '/App.tsx': sandpack['generic-component-encapsulate-reusable-component'].genericApp, '/Child.tsx': sandpack['generic-component-encapsulate-reusable-component'].genericChild, }} /> 例如，这样的一个值： const testData = { firstName: "xfy", lastName: "xfyxfy", };</code></pre> 当传递其对应的 key 时，我们的子组件就会展示对应的属性。也就是 data[key]</code> ，这是再简单不过的一个属性访问方式了。 <Child data={testData} name="firstName" /></code></pre> 但不仅如此，我们还希望我们的子组件能够根据已经存在的值，推断出我们能够传递的 key。 这正是泛型的作用。 首先，我们子组件的参数签名必然需要一个泛型。并且我们将泛型约束在为一个常见的对象 Record<string, unknown></code>，且不在乎属性值具体是什么类型（unknown）。 type Props<T extends Record<string, unknown>> = { name: keyof T; data: T; };</code></pre> 这便是我们组件的参数具体的签名。还记得上述类型别名需要将函数的泛型传递给它吗？接下来就是要给函数式组件添加一个泛型，并将其传递给 Props</code> 。 我们的组件也是一个标准的函数，所以接下来就简单多了。只需要将泛型正确的约束，并传递给别名即可。 const Child = <T extends Record<string, unknown>>({ name, data, }: Props<T>) => {};</code></pre>const Child = <T extends Record<string, unknown>>({ name, data }: Props<T>) => { const [showName, setShowName] = useState<T[keyof T]>(); const valid = () => { console.log(data[name]); setShowName(data[name]); }; return ( <> <div>{name}</div> <button onClick={valid}>Show {name}</button> <div>{JSON.stringify(showName)}</div> </> ); };</code></pre>带有泛型的 Input 组件</a></h2> register</code> 函数对表单项的验证与上述较为类似，它也会根据表单项的 key 来决定传递对应的 name。为了满足 register</code> 函数，可复用的 Input 组件就得需要一个泛型，用来接受不同的表单数据类型。 React hook forms 为我们提前准备好了适用于 register</code> 函数的类型别名 UseFormRegister</code> ，它会接受一个泛型，该泛型就是我们的表单数据类型。 所以 register</code> 函数的签名看起来就像这样 register?: UseFormRegister<T>;</code> 这里的 T</code> 就是我们的表单类型。但是我们还不知道传入当前组件中的表单类型是什么，所以我们的组件参数签名也需要一个泛型。 所以这里我们的组件参数看起来是这样的： export type FormInputProps<TFormValues> = { name: Path<TFormValues>; label?: string | undefined; rules?: RegisterOptions; register?: UseFormRegister<TFormValues>; } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;</code></pre> 值得注意的是，这里给 input</code> 使用的 name 属性。因为 register</code> 函数注册时使用的名称需要确保为表单类型的中的一个。所以这里需要使用 React hook forms 导出的 Path<TFormValues></code> 类型，以配合 register</code> 函数。 这里就和上述泛型组件很相似了，接下来要做的就是将组件的泛型传递给参数签名： const Input = <T extends Record<string, unknown>>({ name, label, ...rest }: FormInputProps<T>) => {};</code></pre> 这里给组件的泛型小小的约束一下，我们希望传递过来的表单类型是一个普通的对象结构 <T extends Record<string, unknown>></code> 。 不仅如此，还不能忘了 register</code> 函数还需要注册在 DOM 上。 <S.Input err={!!errorMsg} name={name} {...(register && register(name, rules))} {...rest} /></code></pre> 得益于泛型的功劳，我们将 register</code> 函数传递给 Input</code> 组件时，我们的组件就知道了这次表单的类型。并且确定了 name</code> 属性的类型。 这是因为 register</code> 函数本身的签名：const register: UseFormRegister<FormData></code> 。这才使得我们的组件成功接受到了泛型。 再添加一些 rules</code> 以及验证未通过时的提示，这样一个可复用的 React hook form 组件就封装好了。 <Input name="lastName" label="Last name:" placeholder="Last Name" register={register} rules={{ required: true }} errorMsg={errors.lastName && "Please input"} /></code></pre> 现代前端的Web应用路由-为React打造一个迷你路由器 2022-08-03T00:00:00+00:00 路由不仅仅只是网络的代名词，它更像是一种表达路径的概念。与网络中的路由相似，前端中的页面路由也是带领我们前往指定的地方。 现代前端的 Web 应用路由</a></h2> 时代在变迁，过去，Web 应用的基本架构使用了一种不同于现代路由的方法。曾经的架构通常都是由后端生成的 HTML 模板来发送给浏览器。当我们单击一个标签导航到另一个页面时，浏览器会发送一个新的请求给服务器，然后服务器再将对应的页面渲染好发过来。也就是说，每个请求都会刷新页面。 自那时起，Web 服务器在设计和构造方面经历了很多发展（前端也是）。如今，JavaScript 框架和浏览器技术已经足够先进，允许我们利用 JavaScript 在客户端渲染 HTML 页面，以至于 Web 应用可以采用更独特的前后的分离机制。在第一次由服务端下发了对应的 JavaScript 代码后，后续的工作就全部交给客户端 JavaScript。而后端服务器负责发送原始数据，通常是 JSON 等。 在旧架构中，动态内容由 Web 服务器生成，服务器会在数据库中获取数据，并利用数据渲染 HTML 模板发送给浏览器。每次切换页面都会获取新的由服务端渲染的页面发送给浏览器。 在新架构中，服务端通常只下发主要的 JavaScript 和基本的 HTML 框架。之后页面的渲染就会由我们的 JavaScript 接管，后续的动态内容也还是由服务器在数据库中获取，但不同的是，后续数据由服务器发送原始格式（JSON 等）。前端 JavaScript 由 AJAX 等技术获取到了新数据，再在客户端完成新的 HTML 渲染。 好像 SPA 的大概就是将原先服务端干的活交给了前端的 JavaScript 来做。事实上，确实如此。AJAX 技术的发展，带动了客户端 JavaScript 崛起，使得原先需要在服务端才能完成渲染的动态内容，现在交给 JavaScript 就可以了。 这么做的好处有很多： 主要渲染工作在客户端，减少服务器的压力。简单的场景甚至只需要静态服务器。</li> 新内容获取只需要少量交互，而不是服务端发送渲染好的 HTML 页面。</li> 可以利用 JavaScript 在客户端修改和渲染任意内容，同时无需刷新整个页面。</li> ……</li> </ul> 当然同时也有一些缺点，目前最主要的痛点： 首屏/白屏时间：由于 HTML 内容需要客户端 JavaScript 完成渲染，前端架构以及多种因素会影响首次内容的出现时间。</li> 爬虫/SEO：由于 HTML 内容需要客户端 JavaScript 完成渲染，早期的爬虫可能不会在浏览器环境下执行 JavaScript，这就导致了根本爬取不到 HTML 内容。</li> </ul> Google 的爬虫貌似已经可以爬取 SPA。 </blockquote> React 的路由</a></h2> React 是现代众多成熟的 SPA 应用框架之一，它自然也需要使用路由来切换对应的组件。React Router 是一个成熟的 React 路由组件库，它实现了许多功能，同时也非常还用。 首先来看下本次路由的基本工作原理，本质上很简单，我们需要一个可以渲染任意组件的父组件 <Router /></code> 或者叫 <router-view></code> 之类的。然后再根据浏览器地址的变化，渲染注册路由时对应的组件即可。 配置文件</a></h3> 这里选择类似 Vue Router 的配置文件风格，而不是使用类似 <Route /></code> 这样的 DOM 结构来注册路由。我们的目的是为了实现一个非常简单的迷你路由器，所以配置文件自然也就很简单： import { lazy } from "react"; export default [ { path: "/", component: lazy(() => import("../pages/Home")), }, { path: "/about", component: lazy(() => import("../pages/About")), }, ];</code></pre> 一个 path</code> 属性，对应了浏览器的地址，或者说 location.pathname</code>；一个 component</code> 属性，对应了到该地址时所需要渲染的组件。 甚至还可以使用 lazy()</code> 配合 <Suspense></code> 来实现代码分割。 展示路由</a></h3> 一个非常简单的路由就这样注册好了，接下来就是将对应的组件展示出来。我们都知道，JSX 最终会被 babel 转义为渲染函数，而一个组件的 <Home /></code> 写法，基本等同于 React.createElement(Home)</code>。元素渲染 – React (reactjs.org)</a> 所以动态的渲染指定的组件基本上也就很容易解决，接下来的思路也就很简单了，我们需要： 一个状态：记录当前地址 location.pathname</code>；</li> 根据当前地址在配置文件中寻找对应注册的组件，并将它渲染出来；</li> 一个副作用：当用户手动切换路由时，该组件需要重新渲染为对应注册的路由；</li> </ul> 先不考虑切换路由的问题，前两个基本上已经就实现了： // Router.tsx import React, { useState, Suspense } from "react"; import routes from "./routes"; const Router: React.FC = () => { // 获取地址，并保存到状态中 const [path, setPath] = useState(location.pathname); // 根据地址，寻找对应的组件 const element = routes.find((route) => route.path === path)?.component; return ( <> <Suspense fallback={<p>loading...</p>}> {/* 使用 React.createElement() 渲染组件 */} {element ? React.createElement(element) : void 0} </Suspense> </> ); }; export default Router;</code></pre> 看上去很简单，事实上，确实很简单。 现在我们直接从地址栏访问对应的路由，我们的 Router 组件应该就可以根据已经注册好的路由配置文件来找到正确的组件，并将其渲染出来了。 切换路由</a></h3> 到目前为止，我们实现了根据对应地址访问到对应组件的功能。这是一个路由必不可少的功能，但它还不能称得上是一个简单的路由器，因为它还无法处理用户手动切换的路由，也就是点击标签前往对应的页面。 简单梳理一下我们需要实现的功能： 一个 Link 组件，用于点击后导航到指定的地址；</li> 导航到地址后，还要修改浏览器的地址栏，并不真正的发送请求；</li> 通知 Router 组件，地址已经改变，重新渲染对应路由的组件；</li> </ul> import React from "react"; interface Props { to: string; children?: React.ReactNode; } const RouterLink: React.FC<Props> = ({ to, children }: Props) => { /** * 处理点击事件 * 创建自定义事件监听器 * 并将 path 发送给 router * @param e */ const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => { e.preventDefault(); const nowPath = location.pathname; if (nowPath === to) return; // 原地跳转 history.pushState(null, "", to); document.dispatchEvent( new CustomEvent<string>("route", { detail: to, }), ); }; return ( <> <a href="" onClick={handleClick}> {children} </a> </> ); }; export default RouterLink;</code></pre> 我们将 Link 组件实际的渲染为一个 <a></a></code> 标签，这样就能模拟跳转到指定的导航了。这个组件它接收两个参数：{ to, children }</code>，分别是前往的路由地址和标签的内容。标签的内容 children 就是展示在 a 标签内的文本。 我们需要解决的第一个问题就是点击标签后跳转到指定的导航，这里其实需要分成两个部分，第一个部分是悄悄的修改浏览器地址栏，第二个部分则是通知 Router 组件去渲染对应的组件。 修改地址栏很简单，利用到浏览器的 history API，可以很方便的修改 pathName</code> 而不发送实际请求，这里只需要修改到第一个参数 to 即可：history.pushState(null, '', to);</code>。 但使用 pushState()</code> 并不会发出任何通知，我们需要自己实现去通知 Router 组件地址已经变化。本来像利用第三方库来实现一个发布/订阅的模型的，但这样这个路由器可能就没有那么迷你了。最后发现利用 HTML 的 CustomEvent 可以实现一个简单的消息订阅与发布模型。 HTML 自定义事件也很简单，我们在对应的 DOM 上 dispatchEvent</code> 即可触发一个事件，而触发的这个事件，就是 CustomEvent</code> 的实例，甚至还能传递一些信息。在这里，我们将路由地址传递过去。 document.dispatchEvent( new CustomEvent<string>("route", { detail: to, }), );</code></pre> 而在 Router 组件中，只需要和以前一样在对应的 DOM 上去监听一个事件，这个事件就是刚刚发布的 CustomEvent</code> 的实例。 // Router.tsx const handleRoute = (e: CustomEvent<string>) => { console.log(e.detail); setPath(e.detail); }; useEffect(() => { /** * 监听自定义 route 事件 * 并根据 path 修改路由 */ document.addEventListener("route", handleRoute as EventListener); return () => { // 清除副作用 document.removeEventListener("route", handleRoute as EventListener); }; }, []);</code></pre> 在 Router 组件中，根据接收到的变化，将新的地址保存到状态中，并触发组件重新渲染。 这样一个最简单的 React 路由就做好了。 Vue 的路由</a></h2> 与 React 同理，二者的路由切换都差不多，其主要思路还是使用自定义事件来订阅路由切换的请求。但 Vue 的具体实现与 React 还是有点不同的。 配置文件</a></h3> 路由的配置文件还是同理，不同的是，Vue 的异步组件需要在引入时同时引入一个 Loading 组件来实现 Loading 的效果： import { defineAsyncComponent } from "vue"; import Loading from "../components/common/Loading.vue"; export default [ { path: "/", name: "Home", component: defineAsyncComponent({ loader: () => import("../views/Home.vue"), loadingComponent: Loading, }), }, { path: "/about", name: "About", component: defineAsyncComponent({ loader: () => import("../views/About.vue"), loadingComponent: Loading, }), }, ];</code></pre>展示路由</a></h3> 同理，Vue 也是利用根据条件来渲染对应路由的组件。不同的是，我们可以使用模板语法来实现，也可以利用 render()</code> 方法来直接渲染组件。 首先来看看和 React 类似的 render()</code> 方法。在 Vue3 中，使用 setup()</code> 方法后，可以直接返回一个 createVNode()</code> 的函数，这就是 render()</code> 方法。所以可以直接写 TypeScript 文件。 与 React 不同的地方在于，React 每次调用 setPath(e.detail)</code> 存储状态时都会重新渲染组件，从而重新执行组件的函数，获取到对应的路由组件。 但 Vue 不同，如果我们仅仅将路由名称 e.detail</code> 保存到状态，但没有实际在 VNode 中使用的话，更新状态时不会重新渲染组件的，也就是说，不会获取到对应的路由组件。所以最佳的办法就是将整个路由组件保存到状态，可保存整个组件无疑太过庞大。好在 Vue3 给了我们另一种解决方法：shallowRef()</code>。它会创建一个跟踪自身 .value</code> 变化的 ref，但不会使其值也变成响应式的。 import { createVNode, defineComponent, shallowRef } from "vue"; import routes from "./routes"; export default defineComponent({ name: "RouterView", setup() { let currentPath = window.location.pathname; const component = shallowRef( routes.find((item) => item.path === currentPath)?.component ?? "Note found", ); const handleEvent = (e: CustomEvent<string>) => { console.log(e.detail); currentPath = e.detail; component.value = routes.find((item) => item.path === currentPath)?.component ?? "Note found"; }; document.addEventListener("route", handleEvent as EventListener); return () => createVNode(component.value); }, });</code></pre> 而使用模板语法主要是利用到了全局的 component</code> 组件，其他部分与 render()</code> 方法相同： <template> <component :is="component"></component> </template> <script lang="ts" setup> import { onUpdated, shallowRef } from "vue"; import routes from "./routes"; let currentPath = window.location.pathname; const component = shallowRef( routes.find((item) => item.path === currentPath)?.component, ); const handleEvent = (e: CustomEvent<string>) => { console.log(e.detail); currentPath = e.detail; component.value = routes.find((item) => item.path === currentPath)?.component; }; document.addEventListener("route", handleEvent as EventListener); onUpdated(() => { console.log(component); }); </script></code></pre>总结</a></h2> 如今的 JavaScript 做能做到的比以前更加强大，配合多种 HTML API，可以将曾经不可能实现的事变为现实。这个简单的迷你路由，主要的思路就是利用 HTML API 来通知 Router 组件该渲染哪个组件了。配合上 lazy()</code> 方法，甚至还能实现代码分割。 Demo</a></h2> DefectingCat/react-tiny-router: A tiny react router. (github.com)</a> Setting up DocSearch for next.js 2022-04-18T00:00:00+00:00 I use next.js and mdx plugin to build my blog site. It's a next.js SSG project. Also it's a JAMStack site. So i need a extenal search engine. The Algolia is my first choice. We can build our own Algolia front UI, or use DocSearch</a> Purpose</a></h2> Algolia split DocSearch into to parts: A cralwer to crawl our sites. </li> A frontend UI liburary to show search result. </li> </ul> In legacy edition, Algolia provide a docsearch-scraper to build our own crawler. Although it's still can plug it to DocSearch v3. But now it's deprecated. They introduct the Algolia Crawler web interface</a> to manage the crawler. But i can't login with my Algolia account. So i need find another way to generate my post index. Index format</a></h2> The DocSearch frontend UI read result as specific format. We just need to provide the same format to DocSearch. Then DocSearch fronted UI can works. So we need post same format to Algolia. Push our data</a></h2> Algolia provide JavaScript API Client to push data to Algolia. yarn add algoliasearch</pre> </TabItem> npm install algoliasearch</pre> </TabItem> </Tab> The client will help us push data to Algolia. We just need to prepare out data. Docsearch format</a></h3> Because Docsearch read result as specific format. our data need to be like this: { content: null, hierarchy: { lvl0: 'Post', lvl1: slug, lvl2: heading, }, type: 'lvl2', objectID: 'id', url: 'url', }</code></pre>Generate format</a></h3> For generate our data, we need: dotenv</a>: read Algolia app ID and admin key in .env</code> file.</li> algoliasearch</a>: JavaScript API client.</li> fs</code> and path</code>: read post file.</li> nanoid</a> (optional): generate unique objectID</code>.</li> </ul> For use ECMAScript import</code>, we need set file suffix with .mjs</code>. The node.js can use import</code> statement. // build-search.mjs import { config } from "dotenv"; import algoliasearch from "algoliasearch/lite.js"; import fs from "fs"; import path from "path"; import { nanoid } from "nanoid";</code></pre> Next, read post content from file. First we need read whole content from the file: const files = fs.readdirSync(path.join("pages/p"));</code></pre> Then, prepare a empty array to store post data. And traverse content to generate format we need. const myPosts = []; files.map((f) => { const content = fs.readFileSync(path.join('pages/p', f), 'utf-8'); // const { content: meta, content } = matter(markdownWithMeta); const slug = f.replace(/\.mdx$/, ''); const regex = /^#{2}(?!#)(.*)/gm; content.match(regex)?.map((h) => { const heading = h.substring(3); myPosts.push({ content: null, hierarchy: { lvl0: 'Post', lvl1: slug, lvl2: heading, }, type: 'lvl2', objectID: `${nanoid()}-https://rua.plus/p/${slug}`, url: `https://rua.plus/p/${slug}#${heading .toLocaleLowerCase() .replace(/ /g, '-')}`, }); });</code></pre> The type</code> property means level of table of contents. I just need h2 title in search result. So just match them with /^#{2}(?!#)(.*)/gm</code>. And post title is the lvl1</code> type: myPosts.push({ content: null, hierarchy: { lvl0: "Post", lvl1: slug, }, type: "lvl1", objectID: `${nanoid()}-https://rua.plus/p/${slug}`, url: `https://rua.plus/p/${slug}`, });</code></pre>Push to Algolia</a></h3> Algolia API is easy to use. First we need specify the index name. const index = client.initIndex("rua");</code></pre> And save the objects. const algoliaResponse = await index.replaceAllObjects(posts);</code></pre> All done! 我的开发环境 2022-04-14T00:00:00+00:00 最近迁移了自己的小服务器，也顺便把本机的环境重新设置了一下，其中环节还是有点复杂的小细节的。所以打算整理下思路，方便以后再设置同样环境。 对于服务器</a></h2> 目前常用的系统主要是 Ubuntu 和 FreeBSD，到手第一步便是更换到国内的镜像源。 对于 FreeBSD 目前可用的有中科大的源，pkg 的配置文件位置为：/etc/pkg/FreeBSD.conf</code>。 FreeBSD: { url: "pkg+http://mirrors.ustc.edu.cn/freebsd-pkg/${ABI}/latest", mirror_type: "srv", signature_type: "fingerprints", fingerprints: "/usr/share/keys/pkg", enabled: yes }</code></pre> 对于 Ubuntu，随便选一个就可以了。配置文件位于：/etc/apt/sources.list</code>。清华大学开源软件镜像站的 Ubuntu 镜像使用帮助</a> # 默认注释了源码镜像以提高 apt update 速度，如有需要可自行取消注释 deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-updates main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-backports main restricted universe multiverse deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-security main restricted universe multiverse # 预发布软件源，不建议启用 # deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse # deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse</code></pre>更换 Shell</a></h3> Ubuntu 和 FreeBSD 默认 shell 分别是 bash 和 sh，下一步就是切换到 zsh。 # Ubuntu apt install zsh -y # FreeBSD pkg install zsh</code></pre> Oh my zsh 的安装非常的简单，复制一条命令即可。但困难的地方在于我的服务器可能经常连不上 Github，因为它是通过 clone Github 上的仓库来进行安装的。 sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"</code></pre> 研究了一下，可以找个 Github 的镜像站手动安装。不过这种方法还是有一定风险的，毕竟是直接从别人的站点下载的东西。比较推荐的还是 Gitee 的镜像</a>。还有个 fastgit</a> 目前也是能用的。 Oh my zsh 也写了详细了 manual-installation</a> 参考着修改下源的地址就可以了。 # Clone the repository git clone https://gitee.com/mirrors/ohmyzsh.git ~/.oh-my-zsh # Create a new zsh configuration file cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc # Change your default shell chsh -s $(which zsh)</code></pre>Plugins</a></h3> 我比较常用的是 zsh-autosuggestions 与 zsh-syntax-highlighting，比较可惜的是这俩 Gitee mirror 上都还没有。 git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions # Add to .zshrc plugins=(git zsh-autosuggestions)</code></pre>git clone https://github.com/zsh-users/zsh-syntax-highlighting.git echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh</code></pre>Theme</a></h3> 通常用的是 powerlevel10k 或者 random。 对于 powerlevel10k 可以： git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k # or git clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k</code></pre> 还需要添加一下环境变量 # To customize prompt, run `p10k configure` or edit ~/.p10k.zsh. [[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh POWERLEVEL9K_DISABLE_CONFIGURATION_WIZARD=true</code></pre>Sudo with out password</a></h3> Run sudo without password on mostly Linux Backup /etc/sudoers file, run:</li> </ol> sudo cp /etc/sudoers /root/sudoers.bak</code></pre> Edit the /etc/sudoers file on CentOS:</li> </ol> sudo visudo</code></pre> Run /usr/sbin/rebootcommand without password on CentOS:</li> </ol> xfy ALL=(ALL) NOPASSWD:ALL</code></pre> Save and exit the file.</li> </ol> Docker mirror</a></h3> 对于使用 systemd</code> 的系统（Ubuntu 16.04+、Debian 8+、CentOS 7），在配置文件 /etc/docker/daemon.json</code> 中加入： { "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"] }</code></pre> 重新启动 dockerd： sudo systemctl restart docker</code></pre>对于语言</a></h2> 目前常用的主要是 Node.js 与 Rustup，这俩官方地址的速度也是时好时坏。好在淘宝和中科大有他们的镜像源。 Node.js</a></h3> 主要用的是 nvm，类似于 Oh my zsh，可以 manual-install</a>。 git clone https://gitee.com/mirrors/nvm.git .nvm</code></pre> 然后导出对应的变量到当前的 shell 配置文件中： export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion</code></pre> 其次就是安装 Node.js 本身了，nodejs.org 的速度大部分情况下都是很快的，偶尔也会抽风，nvm 也支持对应的环境变量</a> export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node</code></pre>Rustup</a></h3> Rustup 要相对更加简单的一点，Rustup 默认会读取两个环境变量，将其修改为镜像站点即可： export RUSTUP_DIST_SERVER=https://mirrors.ustc.edu.cn/rust-static export RUSTUP_UPDATE_ROOT=https://mirrors.ustc.edu.cn/rust-static/rustup</code></pre> 然后再用官方的脚本。 curl https://sh.rustup.rs -sSf | sh source $HOME/.cargo/env</code></pre> 对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。 当然这几个主要的变量可以放在 .zshrc</code> 中，以后更新还会用到的。 Crate.io</a></h3> ~/.cargo/config</code> 清华大学</a>赛高。 [source.crates-io] replace-with = 'tuna' [source.tuna] registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"</code></pre> 对于 Windows 环境，则需要 C:\Users\{username}\.cargo</code> 目录下的 config</code> 文件，添加对应的源地址。 Go mod</a></h3> Go mod 支持 proxy 设置： go env -w GO111MODULE=on # 1. 七牛 CDN go env -w GOPROXY=https://goproxy.cn,direct # 2. 阿里云 go env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct # 3. 官方 go env -w GOPROXY=https://goproxy.io,direct</code></pre>pypi</a></h3> 同样清华大学的源，pypi 镜像每 5 分钟同步一次。 pip install pip -U pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple</code></pre> 如果到 pip 默认源的网络连接较差，临时使用本镜像站来升级 pip： pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pip -U</code></pre>对于本机</a></h2> 目前主要是使用 WSL2 中的 Ubuntu 作为开发环境的，WSL2 目前比较大的问题就是每次其 IP 地址都会变动，宿主机的地址，也就是它的网关也会一直变。 好在 DNS 地址默认就是宿主机 Windows 的地址，可以通过一个简单的命令查到它并将其保存到当前环境变量中： # 主机 IP 保存在 /etc/resolv.conf 中 export host_ip=$(cat /etc/resolv.conf |grep "nameserver" |cut -f 2 -d " ") alias winip='cat /etc/resolv.conf |grep "nameserver" |cut -f 2 -d " "'</code></pre> 顺便把内容单独提取到一个小脚本中： HOST_IP=$(cat /etc/resolv.conf | grep nameserver | awk '{ print $2 }') WSL_IP=$(hostname -I | awk '{print $1}') PROXY_PORT=10809 PROXY_HTTP="http://${HOST_IP}:${PROXY_PORT}" set_proxy() { export http_proxy="${PROXY_HTTP}" export HTTP_PROXY="${PROXY_HTTP}" export https_proxy="${PROXY_HTTP}" export HTTPS_proxy="${PROXY_HTTP}" export ALL_PROXY="${PROXY_SOCKS5}" export all_proxy=${PROXY_SOCKS5} git config --global http.proxy ${PROXY_HTTP} git config --global https.proxy ${PROXY_HTTP} # git ssh proxy sed -i "s/# ProxyCommand/ProxyCommand/" ~/.ssh/config sed -i -E "s/ProxyCommand nc -X connect -x [0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+ %h %p/ProxyCommand nc -X connect -x ${HOST_IP}:${PROXY_PORT} %h %p/" ~/.ssh/config } unset_proxy() { unset http_proxy unset HTTP_PROXY unset https_proxy unset HTTPS_PROXY unset ALL_PROXY unset all_proxy git config --global --unset http.proxy ${PROXY_HTTP} git config --global --unset https.proxy ${PROXY_HTTP} sed -i -E "s/ProxyCommand nc -X connect -x [0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+ %h %p/# ProxyCommand nc -X connect -x 0.0.0.0:0 %h %p/" ~/.ssh/config } test_proxy() { echo "Host ip:" ${HOST_IP} echo "WSL ip:" ${WSL_IP} echo "Current proxy:" ${https_proxy} }</code></pre> 并放在 .zshrc</code> 中，使其可以自动被设置： # This is proxy for git. . ~/.config/proxy.sh set_proxy</code></pre> How to load a background with three.js 2022-04-13T00:00:00+00:00 Three.js setup</a></h2> First, we need a little of setup. Let's create a scene and a camera. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000, );</code></pre> The default camera position is in the center at (0, 0, 0)</code>. And now, We need render scene into our document. So we need a WebGL renderer. const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#canvas') antialias: true, // for performance reason, we will trun off antialias });</code></pre> With a little of setup: renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight);</code></pre> Render to screen : renderer.render(scene, camera);</code></pre> Now, we can get a black canvas in our document. <RUASandpack template="react" files={{ "/App.js": sandpack["how-to-load-a-background-with-threejs"].firstScene, "/styles.css": sandpack["how-to-load-a-background-with-threejs"].resetStyles, }} customSetup={{ dependencies: { "stats.js": "^0.17.0", three: "^0.139.2", "lil-gui": "^0.16.1", }, }} /> Load a skyboxes</a></h2> Image a camera inside a cube box. The cube box is our scene. just like const scene = new THREE.Scene();</code>. The camera is our perspect camera. new THREE.PerspectiveCamera();</code></pre> Now, we are inside the cube box. The inside texture of the box is our sky. Our camera can see all six texture surround ours give ours the illusion the we are within a larger environment. We know how sky boxes works. But what is a sky boxes? Texture</a></h3> We need set texture to cube box each side. so we need six pictures. The skybox is six images that can be connected each other. We just need load six images in some order, and set them to the scene background. import corona_bk from "assets/first-project/skyboxes/corona_bk.png"; import corona_dn from "assets/first-project/skyboxes/corona_dn.png"; import corona_ft from "assets/first-project/skyboxes/corona_ft.png"; import corona_lf from "assets/first-project/skyboxes/corona_lf.png"; import corona_rt from "assets/first-project/skyboxes/corona_rt.png"; import corona_up from "assets/first-project/skyboxes/corona_up.png"; const sky = new THREE.CubeTextureLoader(manager).load([ corona_ft, corona_bk, corona_up, corona_dn, corona_rt, corona_lf, ]); scene.background = sky;</code></pre> The order is: front</li> back</li> up</li> down</li> right</li> left</li> </ol> If load textrue successfully. we can see some picture of six pictures. That's not enough. We are in 3D world, we need to loot around in the cubebox. So we need add a control. const controls = new OrbitControls(camera, ref.current!); controls.enablePan = false; controls.update();</code></pre> <RUASandpack template="react" files={{ "/App.js": sandpack["how-to-load-a-background-with-threejs"].loadBackground, "/styles.css": sandpack["how-to-load-a-background-with-threejs"].resetStyles, }} customSetup={{ dependencies: { "stats.js": "^0.17.0", three: "^0.139.2", "lil-gui": "^0.16.1", }, }} /> For OrbitControls, the camera must be in not default position. I set it to (0, 1, 0)</code>. Also, we need set to the camera up vector camera.up.set(0, 0, 1);</code>. OrbitControls must execute update method after that it created controls.update();</code> </blockquote> Hello world 2022-04-06T00:00:00+00:00 Hello</a></h2> This is my first post! console.log('Hello world');</code></pre>Say hello to world</a></h2> <RUASandpack template="react" files={{ '/App.js': sandpack['hello-world'].hello, }} /> JavaScript practice multiplication table 2020-12-11T00:00:00+00:00 从学习 js 到现在，也有一段时间了。曾经也尝试过写一些复杂的实践。后来经过测试，就算在入门阶段到了会写，那么距离最优代码还是有一定的差距。可能隔个几天回来自己都看不懂自己写的是什么了，杂乱无章。 最近打算先开始写一些简单的案例做做练习。无意中想到了经典的乘法口诀表，正好 for 循环也有过实践了，可以尝试一下。 for 循环嵌套的一次练习。 </blockquote> 思路</a></h2> 有了想法之后，就要开始构建实现的思路。由于 css 还没跨过门槛，所以决定就打算输出到 console 里。 而在 console 输出类似于一个梯形的结构也是需要一个思考的问题。可以打印正确的形状之后，就可以考虑如何输出数字与结果了。 所以构思分为几步： 打印正确的形状</li> 输出内容</li> </ol> 打印正确的形状</a></h2> 首先先忽略内容，一步一步的打印出所有东西。所以先将内容用*</code>代替，只在意形状。 正方形</a></h3> 要想正确打印出一个正三角，可以先考虑从一个 10x10 正方形开始。 第一个想法就是将行和列分别输出。首先定义两个变量，一个用于保存*</code>，等会打印再同一行循环打印 10 次，第一行的*</code>就输出完成。另一个变量用于保存第一行输出的内容。 使用一个简单的 for 循环就能打印出第一行来： let x = '*'; //输出“*” let s = ''; //保存列输出 for (let i = 0; i < 10; i++) { s += x + ' '; //打印10列“*” } console.log(s);</code></pre> 此时就能看到第一行的效果： console.log(s); //输出： * * * * * * * * * *</code></pre> 现在已经完成了 1x10，也就是说再打印出 9 行通用的内容就可以打印出一个 10x10 的正方形了。 那么接下来的思路和上面的也很相似，只需要再定义一个变量用于保存最后 10 行的结果就可以了。for 循环也差不多，只需要将s</code>加上换行符打印十次就可以了。 let x = '*'; //输出“*” let s = ''; //保存列输出 for (let i = 0; i < 10; i++) { s += x + ' '; //打印10列“*” } let t = ''; //保存行输出 for (let i = 0; i < 10; i++) { t += s + '\n'; //再将10列打印10行 } console.log(t);</code></pre> 这样一个正方形就被打印出来了： console.log(t); //输出： * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *</code></pre>更好的正方形</a></h3> 现在离乘法表的三角形应该差切掉一半了。但是在此之前，上述打印一个正方形就用掉了三个变量，并且变量s</code>在第一个用完之后便没用了，只是个简单的中间人。思路虽然很清晰，但是最后实现的步骤比较繁琐。 后来思索了一下，只需要将两个 for 循环嵌套一下，就可以节省下来两个变量，并且整体更加的简洁。 此时只需要一个变量s</code>来保存最后的输出结果。将两个 for 循环嵌套在一起时，它们的运算步骤就变成为： 进入第一层循环</li> 第一层循环内的 for 循环到指定的次数后退出</li> 再次执行第一层循环，并重述步骤 2，直到第一层循环达到次数</li> </ol> 这样一个步骤就能够更加简洁的打印出一个正方形。步骤总结就是第一个 for 循环第一次，第二个 for 循环就循环了 10 次，正好可以打印以后 10 个*</code>。随后第一个 for 循环进入第二次，并换行，第二个 for 循环再次打印 10 次。这样就两行了，以此类推，就可以打印出 10x10。 let s = ''; //保存结果 for (let i = 0; i < 10; i++) { for (let o = 0; o < 10; o++) { s += '* '; //保存行 } s += '\n'; //换行 } console.log(s);</code></pre> 最后的结果和上述还是一样的，但是整体的代码简洁了很多。 console.log(s); //输出： * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *</code></pre>三角形</a></h3> 有了更好的正方形加持下，就可以轻松的打印出三角形了。 再看一次上述的 10x10 的步骤，第一个 for 循环第一次，第二个 for 循环就循环了 10 次，正好可以打印以后 10 个*</code>。那么一个正三角形的第一行是只有一个*</code>的，也就是说 for 循环第一次，第二个 for 循环就循环了 1 次，这样第一行就只有一个*</code>。 实现的整体和打印正方形是没有多少区别的，是需要限制第二个循环的次数，循环到指定的次数后跳出，再由第一个循环换行。 根据“第一行一个*</code>，第二行两个*</code>”的规律，正好第一个循环的变量i</code>是自增的。只需要将内循环的那个限制条件改为第一个循环的变量。就可以正好根据第一个循环打印出一个三角。 let s = ''; for (let i = 0; i < 10; i++) { for (let o = 0; o <= i; o++) { //条件换成第一个循环的次数，达到“递增换行”的效果 s += '* '; } s += '\n'; } console.log(s);</code></pre> 详细工作方式：当i</code>等于 1 时，第一个循环进入第二个循环，第二个循环限制条件为i</code>，只循环一次，输出一个*</code>。随后跳出到第一个循环打印换行，然后第一个循环进入第二次，i</code>等于 2。第二个循环正好沿着i</code>的自增依次打印出对应数量的*</code>。 输出： console.log(s); * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *</code></pre>添加内容</a></h2> 已经跟着第一次打印的正方形，一步一步的能够打印出需要的正三角了。接下来就只需要将*</code>替换为乘法表里的内容就可以了。 乘法表</a></h3> 要想实现一个有规律的方法，诀窍就是仔细观察其实现的规律。在 9 行的乘法表中，乘数和被乘数的关系在随着行数和列数增加而增加。被乘数总是与行数相等，而乘数则是与列数相等。 首先第一次的想法是，将乘法表的两个乘数由两个变量代替。只要控制好变量的变化就可以了。这种方法用到的变量比较多，完全用两个变量来代替乘数和被乘数。 第一次的想法没有确切的观察乘法表的规律，在打印正三角的基础上。通过对比大小来控制两个变量的变化。乘数随着行的增加时，是从 1 开始随着列增加的，被乘数一直等于行数。于是在第二个控制行的 for 循环中添加 if 语句，当乘数小于被乘数时++。 被乘数是随着行增加而增加的，于是当第二个 for 循环结束后，被乘数也++。而乘数则是从头开始，所以重新复制=1。 let a = 1; let b = 1; let s = ''; for (let i = 0; i < 9; i++) { for (let o = 0; o <= i; o++) { s += a + '*' + b + '=' + a * b + ' '; if (a < b) { a++; } } b++; a = 1; s += '\n'; }</code></pre> 这样的方法可以成功的实现所有的效果，但是用的变量还是比较多的。并且语句结构也比较复杂。 更好的乘法表</a></h3> 前面都是没有仔细去观察乘法表的规律而写出来的，从而使用了好几个变量以及复杂的多的语句。 只需要详细观察了乘法表里的乘数与被乘数之间的变化关系，就能够发现两次嵌套循环之间变量的关系刚好一样。 let res = ''; // i随着行变化（被乘数） for (let i = 1; i <= 9; i++) { // o始终从1开始，小于行数（乘数） for (let o = 1; o <= i; o++) { res += `${o}*${i}=${o * i} `; } res += '\n'; }</code></pre> 也就是说i</code>相当于乘数，它随着每行的增加而增加，并且每行都一样，同时它控制着换行。而变量o</code>相当于被乘数，每行从 1 开始，并且小于等于i</code>。 操作 DOM</a></h2> 当时水这篇的时候我还没有学到使用 js 操作 DOM，时隔一年以后，我才想起来这篇还没水完。同时一年后，我还在乘法口诀表(◎﹏◎) 操作 DOM 并不是很复杂，打印乘法口诀表的主要方法也还是相同的。 插入节点</a></h3> 本次操作 DOM 最主要的一点还是循环添加 DOM 节点，通过document.appendChild()</code>方法来添加生成的节点。HTML 结构也非常简单，外部一个div</code>，内部通过span</code>和br</code>来插入内容。就类似于这样： <div class="wrapper"> <span>1 ✖ 1 ＝ 1</span> <br /> <span>2 ✖ 1 ＝ 2</span> </div></code></pre> 虽然这是个小测试，这里还是使用了文档片段( DocumentFragment</code></a>)来插入节点。 wrapper = document.querySelector('.wrapper'); fragment = document.createDocumentFragment(); for (let i = 1; i <= 9; i++) { for (let o = 1; o <= i; o++) { cont = fragment.appendChild(document.createElement('span')); cont.textContent = `${i} ✖ ${o} ＝ ${i * o}`; } fragment.appendChild(document.createElement('br')); } wrapper.appendChild(fragment);</code></pre> 思维也很简单，appendChild()</code>方法会将插入的节点返回，返回后就可以直接使用textContent</code>来插入生成的内容。同样的换行也是在外部的 for 循环内插入一个 </code>标签。 let wrapper, cont, fragment; window.onload = function () { wrapper = document.querySelector('.wrapper'); fragment = document.createDocumentFragment(); function x99() { for (let i = 1; i <= 9; i++) { for (let o = 1; o <= i; o++) { cont = fragment.appendChild(document.createElement('span')); cont.textContent = `${i} ✖ ${o} ＝ ${i * o}`; } fragment.appendChild(document.createElement('br')); } wrapper.appendChild(fragment); } x99(); };</code></pre> Configuring Apollo 1999-12-12T00:00:00+00:00 Site Configuration</a></h1> Search (build_search_index</code>)</a></h2> Enables or disables the search functionality for your blog. Type: Boolean</li> Default: false</li> Usage: build_search_index = false</code></li> </ul> When enabled, a search index will be generated for your blog, allowing visitors to search for specific content. Additionally, a search button will be displayed in the navigation bar. Configure the search like this: build_search_index = true [search] include_title = true include_description = true include_path = true include_content = true index_format = "elasticlunr_json"</code></pre>Theme Mode (theme</code>)</a></h2> Sets the color theme for your blog. Type: String</li> Options: "light": Always using the light theme</li> "dark": Always using the dark theme</li> "auto": Automatically uses the system theme</li> "toggle": Automatically uses the system theme, but also shows buttons to change it.</li> </ul> </li> Default: "toggle"</li> Usage: theme = "toggle"</code></li> </ul> Menu</a></h2> Defines the navigation menu items for your blog. Type: Array of objects</li> Default: []</li> Usage:menu = [ { name = "/posts", url = "/posts", weight = 1 }, { name = "/projects", url = "/projects", weight = 2 }, { name = "/about", url = "/about", weight = 3 }, { name = "/tags", url = "/tags", weight = 4 }, ]</code></pre></li> </ul> Logo</a></h2> Defines the site logo image file. Type: String</li> Usage:logo = "site_logo.svg"</code></pre></li> </ul> Socials</a></h2> Defines the social media links. Type: Array of objects</li> Default: []</li> Usage:socials = [ { name = "twitter", url = "https://twitter.com/not_matthias", icon = "twitter" }, { name = "github", url = "https://github.com/not-matthias/", icon = "github" }, ]</code></pre></li> </ul> Social links will open in a new tab if external_links_target_blank</code> is set to true</code> in the [markdown]</code> section of your config. Table of Contents (toc</code>)</a></h2> Enables or disables the table of contents for posts. Type: Boolean</li> Default: true</li> Usage: toc = true</code></li> </ul> When enabled, a table of contents will be generated for posts, making it easier for readers to navigate through longer articles. Note: This feature adds additional JavaScript to your site. CDN Usage (use_cdn</code>)</a></h2> Determines whether to use a Content Delivery Network (CDN) for assets. Type: Boolean</li> Default: false</li> Usage: use_cdn = false</code></li> </ul> When set to true, the theme will attempt to load assets from a CDN, which can improve loading times for visitors from different geographic locations. Favicon (favicon</code>)</a></h2> Specifies the path to the favicon image for your blog. Type: String</li> Default: "/icon/favicon.png"</li> Usage: favicon = "/icon/favicon.png"</code></li> </ul> This sets the small icon that appears in the browser tab for your website. Custom Stylesheets (stylesheets</code>)</a></h2> Allows you to add custom stylesheets to your blog. Type: Array of files located in the static</code> directory</li> Default: []</li> Usage:stylesheets = [ "custom.css", # static/custom.css "/css/another.css" # static/css/another.css ]</code></pre></li> </ul> Fancy Code Styling (fancy_code</code>)</a></h2> Enables enhanced styling for code blocks. Type: Boolean</li> Default: true</li> Usage: fancy_code = true</code></li> </ul> This option adds the language label and a copy button. Dynamic Notes (dynamic_note</code>)</a></h2> Allows for the creation of togglable note sections in your content. Type: Boolean</li> Default: true</li> Usage: dynamic_note = true</code></li> </ul> When enabled, you can create expandable/collapsible note sections in your blog posts. Character Shortcodes</a></h2> We support custom character shortcodes for adding dialogue and interactive characters to your blog posts. You can use them via shortcodes</a>: {{ /* character(name="character-name", body="Character dialogue text") */ }}</code></pre> These are the supported parameters: name</code> (optional): The identifier for the character. Used to determine styling and appearance.</li> body</code> (optional): The dialogue text for the character. Works with inline shortcodes.</li> position</code> (optional): Position the character on the left or right. Values: "left" or default (right)</li> </ul> </div> Isn't it amazing? </div> </div> </div> </div> Yes! And it's really easy to use </div> </div> </div> </div> We can even use multiple lines with code: fn main() { println!("Hey there!"); }</code></pre> </div> </div> </div> Anchor Links</a></h2> You can add anchor links by adding the following to your _index.md</code>: insert_anchor_links = "heading"</code></pre>Taxonomy sorting</a></h2> You can sort the taxonomies page with the following config: [extra.taxonomies] sort_by = "page_count" # e.g. name, page_count reverse = true</code></pre> The sort_by</code> argument is directly passed to the sort_by</code> function: {% set sort_by = config.extra.taxonomies.sort_by | default(value="name") %} {% set terms = terms | default(value=[]) | sort(attribute=sort_by) %} {% if config.extra.taxonomies.reverse | default(value=false) %} {% set terms = terms | reverse %} {% endif %} {% for term in terms %} <li> <a href="{{ term.permalink | safe }}"> {{ term.name }} ({{ term.pages | length }} post{{ term.pages | length | pluralize }}) </a> </li> {% endfor %}</code></pre> Possible values include anything within the TaxonomyTerm object</a>: name: String; slug: String; path: String; permalink: String; pages: Array<Page>; page_count: Number;</code></pre> Examples: name</code> to sort by name</li> page_count</code> to sort by page count</li> </ul> Analytics</a></h2> Enable or disable analytics tracking: [extra.analytics] enabled = false</code></pre> After enabling analytics, configure GoatCounter or Umami. GoatCounter</a></h3> Configure GoatCounter analytics: [extra.analytics.goatcounter] user = "your_user" # Your GoatCounter username host = "example.com" # Optional: Custom host</code></pre>Umami Analytics</a></h3> Configure Umami analytics: [extra.analytics.umami] website_id = "43929cd1-1e83...." # Your Umami website ID host_url = "https://stats.mywebsite.com" # Optional: Custom host URL</code></pre>Fediverse Author Attribution</a></h2> Enable fediverse author attribution to add a meta tag for fediverse platforms: [extra] fediverse = true fediverse_creator = "@user@instance.social"</code></pre> Type: Boolean</li> Default: false</li> Usage: fediverse = true</code></li> </ul> When enabled, this adds a fediverse:creator</code> meta tag to your site's HTML header, allowing fediverse platforms to attribute content to your account. Set fediverse_creator</code> to your fediverse handle in the format @user@instance</code>. Page configuration</a></h1> Source code (repo_view</code>)</a></h2> Do you want to link to the source code of your blog post? You can turn on the repo_view</code> inside the [extra]</code> section of your blog post. [extra] repo_view = true repo_url = "https://github.com/not-matthias/apollo/tree/main/content" # Alternatively add the repo here</code></pre> The repo_url</code> can be set in the [extra]</code> section or in your config.toml</code>. Comments (comment</code>)</a></h2> Enables or disables the comment system for posts. Type: Boolean</li> Default: false</li> Usage: comment = false</code></li> </ul> After making comment = false</code> in [extra]</code> section of you post, save your script from Giscus</a> to templates/_giscus_script.html</code>. When enabled, this allows readers to leave comments on your blog posts. This feature has to be set for each individual post and is not supported at higher levels. Example configuration in content/posts/configuration.md</a>: +++ title = "Configuring Apollo" [extra] comment = false +++</code></pre> Comments via utterances</a> can be configured in template/_giscus_script.html</code> like this: <script src="https://utteranc.es/client.js" repo="YOUR_NAME/YOUR_REPO" issue-term="pathname" theme="github-light" crossorigin="anonymous" async ></script></code></pre>Cards Page</a></h1> The cards.html</code> template allows you to display a list of items in a card format. This is ideal for showcasing projects, but can be used for any list of items you want to display in a visually appealing way. To create a cards page, you need to create a _index.md</code> file in a content directory (e.g., content/projects</code>). The following front matter is recommended: +++ title = "Projects" sort_by = "weight" template = "cards.html" [extra] cards_columns = 3 card_media_height = 200 +++</code></pre> cards_columns</code>: Set exact number of columns (2, 3, 4) or omit for default 2-column layout</li> card_media_height</code>: Control the height of card media area in pixels (default: 300)</li> </ul> Each item in the list should be a separate markdown file in the same directory. The following front matter is supported: title</code>: The title of the item.</li> description</code>: A short description of the item.</li> weight</code>: The order in which the item appears on the page.</li> local_image</code>: A path to a local image for the item's thumbnail. See the Local Image</a> section for more details.</li> local_video</code>: A path to a local video for the item's thumbnail. See the Local Video</a> section for more details.</li> remote_video</code>: A URL to a remote video for the item's thumbnail.</li> link_to</code>: A URL the card should link to.</li> </ul> Talks Page</a></h1> To create a talks page, you need to create a _index.md</code> file in the content/talks</code> directory. The following front matter is recommended: +++ title = "Talks" sort_by = "date" template = "talks.html" +++</code></pre> Each talk should be a separate markdown file in the content/talks</code> directory. The following front matter is supported: title</code>: The title of the talk.</li> description</code>: A short description of the talk.</li> date</code>: The date of the talk (displayed with a calendar icon).</li> local_image</code>: A path to a local image for the item's thumbnail. See the Local Image</a> section for more details.</li> video</code>: A map with a link</code> and thumbnail</code> for the talk video.</li> organizer</code>: A map with a name</code> and link</code> for the event organizer (displayed with a location icon).</li> slides</code>: A URL to the presentation slides.</li> code</code>: A URL to the source code.</li> </ul> Local Image</a></h1> The local_image</code> front matter parameter allows you to specify a path to a local image that will be used as the thumbnail for a page. This is particularly useful for social media previews and other places where a representative image is needed. The path resolution for local_image</code> works as follows: If the path starts with a /</code>, it is treated as an absolute path from the content</code> directory. For example, local_image = "/projects/project-1.jpg"</code> will resolve to content/projects/project-1.jpg</code>.</li> If the path does not start with a /</code>, it is treated as a relative path. The theme will prepend the section.path</code> to the local_image</code> path. For example, if you are in a page at content/posts/my-post/index.md</code> and you set local_image = "thumbnail.png"</code>, the theme will look for the image at posts/my-post/thumbnail.png</code>.</li> </ul> Local Video</a></h1> The local_video</code> front matter parameter allows you to specify a path to a local video file that will be displayed as the thumbnail for a page. This is particularly useful for showcasing projects with dynamic content. The path resolution for local_video</code> works the same as local_image</code>: If the path starts with a /</code>, it is treated as an absolute path from the content</code> directory. For example, local_video = "/projects/demo.mp4"</code> will resolve to content/projects/demo.mp4</code>.</li> If the path does not start with a /</code>, it is treated as a relative path. The theme will prepend the section.path</code> to the local_video</code> path. For example, if you are in a page at content/projects/my-project/index.md</code> and you set local_video = "demo.webm"</code>, the theme will look for the video at projects/my-project/demo.webm</code>.</li> </ul> Remote Video</a></h2> The remote_video</code> front matter parameter allows you to specify a URL to a remote video file that will be displayed as the thumbnail for a page. Example usage: [extra] remote_video = "https://example.com/videos/demo.mp4"</code></pre> The browser will automatically detect the video format, so you don't need to worry about specifying the MIME type. Mermaid Example 1999-12-02T00:00:00+00:00 This Theme supports mermaid</a> markdown diagram rendering. To use mermaid diagrams in your posts, see the example in the raw markdown code. https://raw.githubusercontent.com/not-matthias/apollo/refs/heads/main/content/posts/mermaid.md Rendered Example</a></h2>

Leptos 中的暗色模式适配

第 9 章结构体

第 8 章 Create 与模块

第 7 章错误处理

第 5 章引用

第 4 章所有权与移动

异步 Rust

Gentoo 指北

疑难杂症

跨平台的静态链接构建

细颗粒度更新与自动依赖收集

Rust Box 与对象

Rust 模式匹配

公开密钥密码学-非对称加密 🔑

参考</a></h2>

传输层安全性协议</a></li>
对称密钥加密</a></li>
公开密钥加密</a></li>
GnuPG</a></li>
PGP</a></li>
GnuPrivacyGuardHowto</a></li> </ul>

使用 useSyncExternalStore 构建属于自己的全局状态

React 18 中的一些新 hooks

自建简易 FaaS

把玩</a></h2>
FaaS</a></del></p>

使用 Turborepo 和 rollup 构建 NPM 包

NPM</a></h2>
在做了适当的配置后，公开一个包到公共源非常简单，只需要两个命令，分别是登录和上传。</p>
`npm adduser</span></span> npm publish</span></span></code></pre> 需要注意的就是不能在镜像源上登陆，当然也不能上传。</p>`

What about this - JavaScript 全面解析

Three.js 中的物体围绕运动

Demo</a></h2>

组件泛型实例-封装可复用的表单组件

现代前端的Web应用路由-为React打造一个迷你路由器

`Demo</a></h2> DefectingCat/react-tiny-router: A tiny react router. (github.com)</a></p>`

Setting up DocSearch for next.js

我的开发环境

How to load a background with three.js

Hello world

Hello</a></h2>
This is my first post!</p>
`console</span>.</span>log</span>(</span>'Hello world'</span>)</span>;</span></span></code></pre>`
Say hello to world</a></h2>
<RUASandpack template="react" files={{ '/App.js': sandpack['hello-world'].hello, }} /></p>

Say hello to world</a></h2>
<RUASandpack template="react" files={{ '/App.js': sandpack['hello-world'].hello, }} /></p>

JavaScript practice multiplication table

Configuring Apollo

Mermaid Example

Rendered Example</a></h2>

xfy

新时代的编程

如何设计 React 组件

xfy

新时代的编程

如何设计 React 组件

Leptos 中的暗色模式适配

第 9 章 结构体

第 8 章 Create 与模块

第 7 章 错误处理

panic</a></h2> 当程序遇到下列问题时，就可以断定程序自身存在 Bug，故而引发 panic：</p> 数组越界访问；</li> 整数除以 0；</li> 在恰好为 Err</code> 的 Result</code> 上调用 .expect()</code>；</li>

第 5 章 引用

第 4 章 所有权与移动

异步 Rust

Gentoo 指北

疑难杂症

跨平台的静态链接构建

细颗粒度更新与自动依赖收集

Rust Box 与对象

Rust 模式匹配

公开密钥密码学-非对称加密 🔑

使用 useSyncExternalStore 构建属于自己的全局状态

React 18 中的一些新 hooks

第 9 章结构体

第 7 章错误处理

第 5 章引用

第 4 章所有权与移动