![\"Gif](\"../images/how-lit-html-works/how-lit-works-demo.gif\")
\n\n翻译自： <https://github.com/lit/lit/blob/main/dev-docs/design/how-lit-html-works.md?plain=1
\n
这是一篇关于 lit-html 如何工作的概览，介绍它为什么快，以及代码是如何组织的。目标读者是贡献者，或任何对 lit-html 内部机制感兴趣的人。它不是 Lit 的教程或入门文档。若你需要入门材料，请参阅 Intro to Lit Tutorial 或 Using lit-html standalone 文档。
\n本文档描述的所有源码都在 lit-html.ts 中。
如果你有不清楚的地方或问题，可以在我们的 Discord channel 联系我们，或在 GitHub Discussions 提问。所有社区入口见 Lit Community page。
\nlit-html 是一个 HTML 模板库。模板通过 JavaScript 的模板字面量来编写，把静态 HTML 字符串和动态 JavaScript 值混合在一起。lit-html 让你可以把 UI 写成应用状态的函数，具有快速的首次渲染和快速更新能力，并且在状态变化时只最小化更新 DOM。
\nlit-html 的性能非常好，可参考 JS Frameworks Benchmark。这篇文档的一个很好的补充材料是 Justin Fagnani 的 lit-html 演讲。
\nlit-html 的设计自然来源于两个强大的 Web 原语的结合：JavaScript Tagged Template Literals（TTL）和 HTML 的 <template> 元素。
TTL 提供了显式语法，可将静态 HTML 字符串与动态 JavaScript 值分离。静态字符串是不可变的，并且在同一个标签模板字面量多次求值时保留身份（引用稳定），因此非常适合作为缓存键。
\n<template> 元素提供了一个 HTML 内容容器，之后可克隆到文档中。在 template 元素里：脚本不会执行，样式不会生效，自定义元素不会升级，等等。在渲染时，template 的内容会被克隆或导入到 Document 中，从而使克隆出的节点变为活动节点。
lit-html 模板只是 UI 的描述。它们必须通过 render() 才会影响 DOM。Define 与 Render 阶段由 Lit 使用者控制，而 Prepare、Create、Update 是内部阶段。渲染被拆成这些内部阶段，是为了缓存并复用 Prepare 与 Create 已完成的工作。
Define: const ui = (title) => html`<h1>${title}</h1>`
Render: render(ui("Example Title"), document.body)
Prepare：首次对某个唯一 TTL 调用 render() 时，创建一个 <template> 元素，包含静态 HTML 和 Lit 的 TemplatePart。TemplatePart 编码了每个动态 JavaScript 值到静态 HTML 中位置的映射。
Create：首次在某个节点上渲染某个模板时，将 <template> 内容克隆进 DOM，并实例化管理动态内容的 Lit Part。
Update：遍历动态 JS 值与对应的 Lit Part，只把变化的值提交到 DOM。这是每次模板渲染都会执行的唯一阶段。
最终结果是在 <body> 中渲染 <h1>Example Title</h1>。如果用户随后执行 render(ui("Updated"), document.body)，则只会运行 Update 阶段，Prepare 与 Create 会被跳过。
接下来文档会反复引用这个示例，来具体展示 lit-html 在每个内部渲染阶段做了什么。
\n<!-- File: index.html -->\n<script type="module" src="./example.js"></script>\n<style>\n .odd {\n color: green;\n text-decoration: underline;\n }\n</style>\n\n<div id="container"></div>\n// File: example.js\nimport { html, render } from "lit";\n\nconst container = document.querySelector("#container");\n\nconst counterUi = (count) =>\n html` <span class="${count % 2 == 1 ? "odd" : ""}"> ${count} </span>\n <button @click=${() => render(counterUi(count + 1), container)}>Increment</button>`;\n\nrender(counterUi(0), container);\n这段示例代码会得到一个计数器，点击 "Increment" 按钮时数值递增：
\n
模板通过 html 标签函数定义。这个标签函数几乎不做额外工作，它只捕获当前值和 strings 对象引用，并将它们作为 TemplateResult 返回。
lit-html 还提供了一个 svg 函数，与 html 类似，但用于定义 SVG 片段而不是 HTML 片段。渲染时，lit-html 会确保由 svg 创建的元素在 SVG 命名空间中创建。
默认的 html 和 svg 标签非常简单：把静态字符串和动态值收集到一个对象字面量中。
const tag =\n (type) =>\n (strings, ...values) => ({\n _$litType$: type,\n strings,\n values,\n });\nconst html = tag(/* HTML_RESULT type:*/ 1);\nconst svg = tag(/* SVG_RESULT type:*/ 2);\n示例中的第一次 render() 调用会把初始 UI 状态定义为 counterUi(0)。把它内联展开后：
// `counterUi(0)` 表达式的求值结果：\nhtml`\n <span class="${""}">\n ${0}\n </span>\n <button @click=${\n () => render(counterUi(1), container)\n }>\n Increment\n </button>`;\n\n// 然后 `html` 标签函数表达式会求值为以下 TemplateResult：\n{\n _$litType$: 1,\n strings: [\n '<span class="',\n '">',\n '</span><button @click=',\n '>Increment</button>'\n ],\n values: [\n "",\n 0,\n () => render(counterUi(1), container)\n ]\n}\n模板表达式求值非常快。它的开销基本等于模板中 JavaScript 表达式本身，再加一次函数调用和一次对象分配。
\n由调用 lit-html 的 render() 函数触发，例如示例里的 render(counterUi(0), container)。
render() 会检查容器元素上是否有 _$litPart$ 字段。如果 Lit 之前渲染过这个容器，那么该字段会是一个 Lit ChildPart 对象。若存在，就直接调用它的 _$setValue 来渲染模板；否则就创建新的 ChildPart，挂到容器的 _$litPart$ 上，再调用 _$setValue。后文会详细介绍 Part（包括 ChildPart）。
源码位置：包含并缓存 Prepare 阶段的 _$getTemplate 方法。
当页面上某个唯一的 html 标签模板字面量第一次被渲染时，必须先进行 prepare。Prepare 阶段的结果是 Lit Template 类的一个实例：它包含一个 <template> 元素和一组元数据对象（称为 TemplatePart），用于记录每个动态 JavaScript 值在 DOM 上应该设置的位置。这个 Lit Template 对象会以 TemplateResult 唯一的 strings 模板字符串数组作为 key 进行缓存，因此后续再遇到来自同一个标签模板字面量的 TemplateResult 时，会跳过此阶段。
Prepare 阶段只看 TemplateResult 的静态字符串，不看动态值，所以每个源码里唯一的标签模板字面量只会执行一次。
在示例代码中，Prepare 完成后，ChildPart._$getTemplate 的返回值如下：
// Prepare 阶段的伪代码：\nlet preparedTemplate = ChildPart._$getTemplate(counterUi(0));\n\n// Prepare 阶段结果：\nconsole.log(preparedTemplate.el);\n// <template><span><!--?lit$1234$--></span><button>Increment</button></template>\n\nconsole.log(preparedTemplate.parts);\n/*\n[\n { type: 1, index: 0, name: "class" },\n { type: 2, index: 1 },\n { type: 1, index: 2, name: "click" }\n]\n*/\n下面这些小节详细说明：当某个 TemplateResult 第一次进入 prepare 时，Template 类构造函数里发生了什么。
我们手里有一组静态 HTML 字符串，但还不能直接放进 <template> 元素。这个步骤会把不可变的模板字符串数组转换成带注释标记的 HTML 字符串，在动态值“空洞”处打标：
<span>${}</span>）会被标记成注释节点：<span><!--?lit$random$--></span>。<p class="${}"></p>）会被标记成哨兵字符串：<p class$lit$="lit$random$"></p>，并且属性名会追加 $lit$ 后缀。之所以给绑定属性追加 $lit$ 后缀，是为了避免某些特殊属性（例如 style、class 以及许多 SVG 属性）在仍包含 marker 表达式时被浏览器提前处理。例如，IE 与 Edge 会解析 style 属性值，若 CSS 无效就会直接丢弃。
示例模板字符串数组对应的预处理 HTML 字符串如下：
\ngetTemplateHtml(['<span class="', '">', "</span><button @click=", ">Increment</button>"]);\n\n// 返回以下带标记的 HTML（为便于阅读添加了空格）：\n`<span class$lit$="lit$1234$">\n <?lit$1234$>\n</span>\n<button @click$lit$=lit$1234$>\n Increment\n</button>`;\n注意这里有三个 marker，与示例 TemplateResult 的 values 数组中的三个动态值一一对应。
\n\n注意\n在上面的预处理 HTML 字符串中，
\n<?lit$1234$>语法表示一个ProcessingInstruction。它在插入<template>元素并被解析后，会变成注释节点：<!--?lit$1234$-->。这是一个减少 marker 字节数的优化。
<template> 元素预处理后的 HTML 字符串会用于设置新建 <template> 元素的 innerHTML，这会触发浏览器解析模板 HTML。这个 <template> 元素会被赋给 Template 的 el 字段。
这一步不会导致 XSS 或其他恶意输入风险，因为只使用了静态字符串，不会插入任何动态值。
\nTemplatePartTemplatePart 是一个元数据对象，记录动态 JavaScript 值应该设置到 DOM 的位置。每个 TemplatePart 包含：它所关联节点的深度优先索引、表达式类型（text 或 attribute）以及属性名。
TemplatePart 的发现方式是：遍历 <template> 元素中的节点树并查找 marker 标记。如果在属性、marker 注释节点、或文本内容中找到 marker，就会创建 TemplatePart 并保存到 parts 字段。
在遍历节点树时，不同 Node 类型会执行以下逻辑：
\n对于元素上的每个属性，如果属性名带 $lit$ 后缀，则该表达式对应 PropertyPart、BooleanAttributePart、EventPart 或 AttributePart 之一。可通过属性名首字符区分（见附录的 Parts 表）。
元素上的属性也可能表示 ElementPart，当属性名以 marker 哨兵值开头时会出现。比如 <div ${} ${}> 会被标记为 <div lit$random$0="" lit$random$1="">。
对于这些识别出的绑定属性，会从元素上移除，并创建 TemplatePart 记录其位置、名称和类型。
匹配 marker 标记的注释节点，表示一个 ChildPart 位置的 TemplatePart。
通常文本位置 marker 会是注释节点，但在 <style>、<script>、<textarea>、<title> 标签内部，看起来像注释的标记（<!-- lit -->）会作为文本插入。因此我们还必须在 Text 节点中查找 marker。若找到，就拆分 Text 节点并插入注释 marker，同时在 ChildPart 位置记录一个 TemplatePart，其索引指向该注释 marker 节点。
Create 阶段发生在 ChildPart 正在渲染的模板与它上次使用的模板不同时。
\n在 lit-html 源码里，这一阶段对应 实例化并克隆 TemplateInstance。
在示例中，这个阶段会把 <template> 中的 DOM 节点克隆到一个 fragment，准备插入文档，同时创建一组 Part 列表，供下一阶段更新时设置 fragment 里的动态 JavaScript 值。
const instance = new TemplateInstance(preparedTemplate);\n// 创建出的 DOM fragment 将被插入到 DOM。\nconst fragment = instance._clone();\n\nconsole.log(instance._$parts);\n// [AttributePart, ChildPart, EventPart]\n在 update 阶段后，这个 fragment 会被插入 DOM。
\n下面详细说明创建并克隆 TemplateInstance 时发生了什么。
TemplateInstance 并实例化 PartTemplateInstance 负责创建初始 DOM 和更新这份 DOM。它是一个 Template 在特定 DOM 位置上的实例。TemplateInstance 持有用于更新 DOM 的 Part 引用。
在 TemplateInstance._clone() 中，首先会把 <template> 元素克隆为 document fragment。
克隆后，会遍历 fragment 的节点树，通过深度优先索引把节点与 TemplatePart 对齐。当某个节点索引与 TemplatePart 上记录的索引匹配时，就会为该节点创建一个 Part 实例。这个实例持有节点引用，便于后续更新时直接访问。根据 TemplatePart 的 type 字段，会实例化以下之一：ChildPart、AttributePart、PropertyPart、EventPart、BooleanAttributePart、ElementPart。
这些 Part 实例会存到 TemplateInstance 上。
随后，TemplateInstance（连同其 Part）会存到根 ChildPart 上，供后续渲染请求直接进入 update 阶段。
Update 阶段每次渲染都会执行，由 TemplateInstance._update() 触发。这里才真正写入 DOM。此前所有步骤都在构建可缓存、可复用的对象，update 则执行实际写入。
更新时会遍历 parts 与 values 数组，并调用 part._$setValue(value)。
每种 Part 在 _$setValue 中如何处理值，由该 Part 自身决定。
回顾一下，示例在首次渲染时的 TemplateResult 动态值为：
["", 0, () => render(counterUi(1), container)];\n这会导致 TemplateInstance 上的三个 part 分别接收对应值。为了演示，把它内联写出来是：
AttributePart._$setValue("");\nChildPart._$setValue(0);\nEventPart._$setValue(() => render(counterUi(1), container));\n在 _$setValue 内，每一种 Part 类型也都会先解析 directive，并把 value 改为 directive 的返回值。这就是 directive 可以自定义并扩展表达式渲染方式 的机制。
_$setValue 引发的 DOM 变更会因 Part 类型而异：
当模板作者在子节点位置写动态表达式时，就会对 ChildPart 设值；传入值就是该模板表达式计算得到的值。
以下这些模板最终都会通过 ChildPart 渲染出 <div>hi</div>：
html`<div>${"hi"}</div>`：对子 part 设置字符串字面量 "hi"。html`<div>${html`hi`}</div>`：对子 part 设置 TemplateResult 值 html`Hi`。html`<div>${['h', 'i']}</div>`：对子 part 设置可迭代对象。html`<div>${document.createTextNode('hi')}</div>`：对子 part 设置 Text 节点。高层来说，ChildPart 通过 _$committedValue 记录上次提交值；若本次传入值与上次相等，则跳过工作。这就是 ChildPart 在值级别做 diff 的方式。\n如果本次值与 _$committedValue 不同，就会根据值类型进行处理，转为 Node 或多个 Node 并提交到 DOM。随后把本次值写入 _$committedValue，供后续 _$setValue 在值不变时省去额外工作。
对 ChildPart 设置原始值（null、undefined、boolean、number、string、symbol、bigint）会创建或更新 Text 节点。文本提交发生在 _commitText 中，文本净化也在这里进行。
如果值是 TemplateResult，ChildPart 会执行 _commitTemplateResult，把该 TemplateResult 渲染到当前 ChildPart，并递归地重复本文描述的 prepare、create、update 流程。
如果值是 Node，ChildPart 会清除之前渲染的节点并直接插入该 Node。
在单个绑定属性值场景（如 html`<input value=${...}>`）中，AttributePart 同样使用 _$committedValue 与上次值做 diff，避免无意义更新。提交时会调用 this.element.setAttribute(name, value)。
AttributePart 也处理属性值中有多个绑定的复杂场景：html`<div class="${...} static-class ${...}"></div>`。多个值会先求值并拼接，再通过一次 setAttribute 提交。
PropertyPart 继承自 AttributePart，区别仅在于提交方式：不是 setAttribute(name, value)，而是通过属性赋值 this.element[name] = value。例如 html`<input .value=${'hi'}>` 会通过 inputEl.value = 'hi' 提交值 'hi'。
BooleanAttributePart 也继承自 AttributePart，并重写 _commitValue。提交到 BooleanAttributePart 时，falsy 值或 nothing 会移除该属性；truthy 值会把属性设为空字符串值。
EventPart 同样继承自 AttributePart，并重写 _$setValue：接收用户提供的事件监听器后调用 this.element.addEventListener(attributeName, value)。EventPart 使用监听器对象，使得跨多次重渲染时即使传入函数变化，也可更新监听器而无需每次都移除再添加。仅当提供了选项不同的监听器对象时，才会移除并添加新监听器。若值为 null、undefined 或 nothing，则会移除已有监听器且不添加新监听器。
它还会确保事件监听回调中的 this 指向 host 对象，通常是渲染该模板的宿主组件。
ElementPart 不能直接提交任何值。它只调用 resolveDirective，让 directive 可以挂接在 ElementPart 位置。
例如 @lit-labs/motion 提供了 animate directive，可应用在元素的 ElementPart 位置，由它来管理元素动画。
前面我们讲的是首次渲染：示例中的 render(counterUi(0), container)。那当点击 "Increment" 并触发 render(counterUi(1), container) 时会怎样？
render() 会在容器上查找 _$litPart$ 属性，并找到一个 ChildPart。随后调用该 ChildPart 的 _$setValue，传入 counterUi(1) 返回的 TemplateResult。
counterUi(1) 的 TemplateResult 为：
{\n _$litType$: 1,\n strings: [\n '<span class="',\n '">',\n '</span><button @click=',\n '>Increment</button>'\n ],\n values: [\n "odd",\n 1,\n () => render(counterUi(2), container)\n ]\n}\n此时不会重复 Prepare 阶段，而是用模板的 strings 模板字符串数组引用从缓存取回 Lit Template。正如 基础构件 中所说，这个引用在同一标签函数多次求值间保持稳定。
容器 ChildPart 保存着上次提交值，在这个例子中是一个 TemplateInstance，其引用的 Template 正是缓存中取回的那个。因为当前渲染到这个 ChildPart 的还是同一个 Template，所以 Create 阶段也会被跳过。
剩下的就是遍历先前创建好的 Part 并用新值调用 _$setValue。演示内联如下：
AttributePart._$setValue("odd");\nChildPart._$setValue(1);\nEventPart._$setValue(() => render(counterUi(2), container));\n结果就是 DOM 更新为绿色带下划线的数字 1，且事件监听器替换为新监听函数。
\n如果某个要设置的值与之前相同（=== 比较），该 Part 就不会进行 DOM 操作。
lit-html 已经很快了，但还能更快吗？
\n<template> 树并手动实例化 Part 的需求，从而减少 Create 阶段树遍历开销。html 标签函数（跟踪于 https://github.com/lit/lit/issues/189）。这可以把 Prepare 阶段前移到构建期，运行时将不再需要 Prepare。Part 是 lit-html 的概念，表示 html 标签模板字面量中表达式所处的位置：
| Part | \n描述 | \n作者写法 | \n
|---|---|---|
ChildPart | \nHTML 子节点位置中的表达式 | \nhtml`<div>${...}</div>` | \n
AttributePart | \nHTML 属性值位置中的表达式 | \nhtml`<input id="${...}">` | \n
BooleanAttributePart | \n布尔属性值中的表达式（名称前缀 ?） | \nhtml`<input ?checked="${...}">` | \n
PropertyPart | \n属性（property）值位置中的表达式（前缀 .） | \nhtml`<input .value=${...}>` | \n
EventPart | \n事件监听位置中的表达式（前缀 @） | \nhtml`<button @click=${...}></button>` | \n
ElementPart | \n元素标签上的表达式 | \nhtml`<input ${...}>` | \n
在上述所有情形中，作者都在 ${...} 中传入一个表达式，表示模板的动态绑定。不同 Part 类型决定该值如何提交到 DOM。比如在 html`<button @click=${() => console.log('clicked')}></button>` 中，EventPart 会接管用户提供函数，并管理 DOM 上的 addEventListener 与 removeEventListener，从而在触发点击事件时调用该函数。
理解 Parts 对 编写自定义 directives 很有帮助。
\n这个示例会在多个位置复用同一个模板，能更清晰地说明多个类之间的关系。
\n考虑以下代码：
\nconst imgTemplate = (url) => html`<img src=${url} />`;\n\nrender(html`${imgTemplate("1.jpg")} ${imgTemplate("2.jpg")} ${imgTemplate("3.jpg")}`, document.body);\n首次渲染时：
\nflowchart TD\n A[(url) => html`<img src=${url}>`] -->|Called with '1.jpg'| C1(TemplateResult\\n{strings, values: ['1.jpg']})\n A -->|Called with '2.jpg'| C2(TemplateResult\\n{strings, values: ['2.jpg']})\n A -->|Called with '3.jpg'| C3(TemplateResult\\n{strings, values: ['3.jpg']})\n C1 --> |Prepare| Template(<template>)\n C2 --> |Cache lookup| Template\n C3 --> |Cache lookup| Template\n Template --> |Create| TI1(Template Instance 1)\n Template --> |Create| TI2(Template Instance 2)\n Template --> |Create| TI3(Template Instance 3)\n TI1 --> |Update| Up1(Render <img src='1.jpg'>)\n TI2 --> |Update| Up2(Render <img src='2.jpg'>)\n TI3 --> |Update| Up3(Render <img src='3.jpg'>)\n然后若执行以下代码：
\nrender(html`${imgTemplate("4.jpg")} ${imgTemplate("5.jpg")} ${imgTemplate("6.jpg")}`, document.body);\n对应更新流程为：
\nflowchart TD\n A[(url) => html`<img src=${url}>`] -->|Called with '4.jpg'| C1(TemplateResult\\n{strings, values: ['4.jpg']})\n A -->|Called with '5.jpg'| C2(TemplateResult\\n{strings, values: ['5.jpg']})\n A -->|Called with '6.jpg'| C3(TemplateResult\\n{strings, values: ['6.jpg']})\n C1 --> |Cache lookup| TI1(Template Instance 1)\n C2 --> |Cache lookup| TI2(Template Instance 2)\n C3 --> |Cache lookup| TI3(Template Instance 3)\n TI1 --> |Update| Up1(setAttribute(imgElem1, '4.jpg'))\n TI2 --> |Update| Up2(setAttribute(imgElem2, '5.jpg'))\n TI3 --> |Update| Up3(setAttribute(imgElem3, '6.jpg'))\n\n\n\n
为了开发复杂的用户界面（UI），JavaScript 应用开发者需要以一种高效的方式存储、计算、使失效、同步并将状态推送到应用的视图层。
\n用户界面通常不仅仅涉及管理简单的数值，往往还经常涉及渲染计算状态（computed state），而这些状态又依赖于一个复杂的其它数值树，或者依赖于本身也是由计算得出的状态。
\n**Signals（信号）**的目标就是提供管理此类应用状态的基础设施，从而让开发者能够专注于业务逻辑，而无需分心于这些重复的细节。
\n类 Signal 的机制也被独立地发现在非 UI 场景中非常有用，特别是在构建系统中，用于避免不必要的重复构建。
\n在响应式编程中，使用 Signals 可以免除手动管理应用更新的需求。
\n\n\n一种基于状态变化进行更新的声明式编程模型。
\n
最基础的响应式系统核心在于“发布-订阅”模式。需要一个容器来存储值，当值变化时通知订阅者。
\n/**\n * 指向当前正在执行的副作用函数 (依赖收集的核心)\n */\nlet activeEffect: VoidFunction | null = null;\n\n/**\n * 创建响应式状态容器（信号）\n */\nexport function signal<T>(initialValue: T) {\n let value = initialValue;\n const subscribers = new Set<VoidFunction>();\n\n const read = () => {\n // 依赖收集：如果有副作用函数正在执行，说明它读取了这个信号\n if (activeEffect) {\n subscribers.add(activeEffect);\n }\n return value;\n };\n\n const write = (newValue: T) => {\n if (value !== newValue) {\n value = newValue;\n // 派发更新：信号的变化会通知所有订阅者\n [...subscribers].forEach((fn) => fn());\n }\n };\n\n return [read, write] as const;\n}\n\n/**\n * 注册副作用函数（订阅者）\n */\nexport function effect(fn: VoidFunction) {\n const execute = () => {\n activeEffect = execute;\n try {\n fn();\n } finally {\n activeEffect = null;\n }\n };\n\n execute(); // 立即执行以建立初始依赖\n}\n存在问题：
\neffect(() => show ? data : null)，当 show 变为 false 后，data 的变化不应再触发 effect。目前的实现会导致内存泄漏和无效执行。subscribers 会无限膨胀。为解决分支切换问题，需要在每次 effect 重新执行前，清除之前的订阅关系，重新收集依赖。
这就要求 effect 知道它依赖了谁，signal 也知道谁依赖了它（双向记录）。
interface ReactiveEffect {\n (): void;\n // 反向存储：effect 知道哪些 Signal 的订阅者集合里包含了自己\n deps: Set<Set<ReactiveEffect>>;\n}\n\nlet activeEffect: ReactiveEffect | null = null;\n\nfunction cleanup(effect: ReactiveEffect) {\n // 从所有依赖的 Signal 中移除当前 effect\n for (const dep of effect.deps) {\n dep.delete(effect);\n }\n effect.deps.clear();\n}\n\nexport function signal<T>(initialValue: T) {\n let value = initialValue;\n const subscribers = new Set<ReactiveEffect>();\n\n const read = () => {\n if (activeEffect) {\n // 1. Signal 记录 Effect\n subscribers.add(activeEffect);\n // 2. Effect 记录 Signal (的 subscribers 集合)\n activeEffect.deps.add(subscribers);\n }\n return value;\n };\n\n const write = (newValue: T) => {\n if (value !== newValue) {\n value = newValue;\n // 必须创建快照！因为 cleanup 会在执行过程中修改 subscribers，\n // 导致遍历过程中的 add/delete 操作引发死循环\n const effectsToRun = new Set(subscribers);\n effectsToRun.forEach((fn) => fn());\n }\n };\n\n return [read, write] as const;\n}\n\nexport function effect(fn: VoidFunction) {\n const effect: ReactiveEffect = () => {\n // 核心：每次运行前先断开所有旧连接\n cleanup(effect);\n\n const prevEffect = activeEffect;\n activeEffect = effect;\n\n try {\n fn();\n } finally {\n activeEffect = prevEffect;\n }\n };\n\n effect.deps = new Set();\n effect();\n}\n在复杂的依赖图中，我们经常遇到菱形依赖（Diamond Problem）：
\ngraph TD\n A[Signal A] --> B[Computed B]\n A --> C[Computed C]\n B --> D[Effect D]\n C --> D\n style A fill:#f9f,stroke:#333\n style D fill:#ff9,stroke:#333\n如果不加控制，修改 A 会导致 D 运行两次（A->B->D 和 A->C->D），且第一次运行时可能处于中间态（Glitch）。
解决方案包含两个部分：
\ninterface ReactiveEffect {\n (): void;\n deps: Set<Set<ReactiveEffect>>;\n options?: { scheduler?: (fn: VoidFunction) => void };\n}\n\nlet activeEffect: ReactiveEffect | null = null;\n\n// --- 调度器逻辑 ---\nconst effectQueue = new Set<VoidFunction>();\nlet isFlushPending = false;\n\nfunction flushQueue() {\n const tasks = [...effectQueue];\n effectQueue.clear();\n isFlushPending = false;\n tasks.forEach((fn) => fn());\n}\n\nfunction queueJob(job: VoidFunction) {\n effectQueue.add(job);\n if (!isFlushPending) {\n isFlushPending = true;\n queueMicrotask(flushQueue);\n }\n}\n\n// --- 清理逻辑 ---\nfunction cleanup(effect: ReactiveEffect) {\n for (const dep of effect.deps) {\n dep.delete(effect);\n }\n effect.deps.clear();\n}\n\n// --- Signal 实现 ---\nexport function signal<T>(initialValue: T) {\n let value = initialValue;\n const subscribers = new Set<ReactiveEffect>();\n\n const read = () => {\n if (activeEffect) {\n subscribers.add(activeEffect);\n activeEffect.deps.add(subscribers);\n }\n return value;\n };\n\n const write = (newValue: T) => {\n if (value !== newValue) {\n value = newValue;\n const effectsToRun = new Set(subscribers);\n effectsToRun.forEach((effect) => {\n // 如果有调度器（用户 effect），放入队列；\n // 否则立即执行（主要用于 computed 内部传递脏标记）\n if (effect.options?.scheduler) {\n effect.options.scheduler(effect);\n } else {\n effect();\n }\n });\n }\n };\n\n return [read, write] as const;\n}\n\n// --- Computed 实现 (Push-Pull) ---\nexport function computed<T>(fn: () => T) {\n let value: T;\n let dirty = true; // 懒计算的核心标志\n\n // Computed 本身既是 Signal (被别人订阅)，也是 Effect (订阅别人)\n\n // 1. 作为 Effect 的行为：依赖变了，我不马上算，我只标记自己脏了\n const runner = () => {\n if (!dirty) {\n dirty = true;\n // 2. 作为 Signal 的行为：告诉我的订阅者“我可能变了” (Push 阶段)\n trigger(subscribers);\n }\n };\n\n const internalEffect: ReactiveEffect = runner as ReactiveEffect;\n internalEffect.deps = new Set();\n\n const subscribers = new Set<ReactiveEffect>();\n\n // 辅助触发函数\n const trigger = (subs: Set<ReactiveEffect>) => {\n const effectsToRun = new Set(subs);\n effectsToRun.forEach((effect) => {\n if (effect.options?.scheduler) {\n effect.options.scheduler(effect);\n } else {\n effect();\n }\n });\n };\n\n const read = () => {\n // 1. 依赖收集 (如果有其它 effect 读取了这个 computed)\n if (activeEffect) {\n subscribers.add(activeEffect);\n activeEffect.deps.add(subscribers);\n }\n\n // 2. 懒计算 (Pull 阶段)\n if (dirty) {\n const prevEffect = activeEffect;\n activeEffect = internalEffect;\n cleanup(internalEffect);\n try {\n value = fn();\n dirty = false;\n } finally {\n activeEffect = prevEffect;\n }\n }\n return value;\n };\n\n return read;\n}\n\nexport function effect(fn: VoidFunction) {\n const effect: ReactiveEffect = () => {\n cleanup(effect);\n // 栈式结构，允许嵌套 effect\n const prevEffect = activeEffect;\n activeEffect = effect;\n try {\n fn();\n } finally {\n activeEffect = prevEffect;\n }\n };\n effect.deps = new Set();\n effect.options = { scheduler: queueJob }; // 默认走微任务调度\n effect();\n}\n实际应用中，通常会在组件挂载时创建多个 Effect。如果组件销毁时不清理，这些 Effect 仍会响应信号变化，导致内存泄漏。
\n手动保存每个 Effect 的返回值并在 onUnmount 中逐个调用是不现实的。我们引入 effectScope 来批量收集和处理副作用的停止。
全局变量标记“当前所在的作用域”，并让 effect 函数感知到它。
// 1. 定义 Scope 类\nexport class EffectScope {\n private effects: VoidFunction[] = [];\n private active = true;\n\n run<T>(fn: () => T): T | undefined {\n if (!this.active) return;\n\n const prevScope = activeScope;\n activeScope = this; // 开启当前作用域\n try {\n return fn();\n } finally {\n activeScope = prevScope; // 恢复上层作用域\n }\n }\n\n // 收集停止函数\n add(stopFn: VoidFunction) {\n if (this.active) {\n this.effects.push(stopFn);\n } else {\n // 如果 Scope 已经停止，新加入的 effect 应该立即销毁\n stopFn();\n }\n }\n\n stop() {\n if (this.active) {\n this.effects.forEach((stop) => stop());\n this.effects = [];\n this.active = false;\n }\n }\n}\n\n// 指向当前活跃的 Scope\nlet activeScope: EffectScope | null = null;\n\nexport function effectScope(fn?: VoidFunction) {\n const scope = new EffectScope();\n if (fn) scope.run(fn);\n return () => scope.stop();\n}\n修改之前的 effect 函数，使其：
activeScope 中。export function effect(fn: VoidFunction) {\n const effect: ReactiveEffect = () => {\n cleanup(effect);\n const prevEffect = activeEffect;\n activeEffect = effect;\n try {\n fn();\n } finally {\n activeEffect = prevEffect;\n }\n };\n effect.deps = new Set();\n effect.options = { scheduler: queueJob };\n\n // 首次执行\n effect();\n\n // --- 新增逻辑 ---\n\n // 定义停止函数：彻底移除该 effect 的所有依赖\n const stop = () => {\n cleanup(effect);\n // 如果有调度器中的任务，也应该移除（此处简化略过）\n };\n\n // 如果当前处于某个 Scope 中，自动注册\n if (activeScope) {\n activeScope.add(stop);\n }\n\n return stop;\n}\n目前的实现虽然功能完备，但在大规模图结构下存在性能瓶颈：
\nSet 的创建、迭代和垃圾回收（GC）在极高频更新下开销显著。alien-signals 是目前基准测试中性能最强的实现之一，核心优化思路如下：
\nAlien Signals 不使用 Set 来存储依赖，而是使用双向链表直接存储节点关系。这极大地减少了内存分配和 GC 压力。
这是性能的关键。它不依赖简单的 dirty 布尔值，而是引入了全局版本号。
LastSeenVersion < GlobalVersion ?\n如果全局版本没变，说明整个系统没有任何状态更新，直接返回缓存，O(1) 复杂度。在某些情况下，Computed 可以跳过依赖图的遍历。如果一个 Computed 的所有依赖都没有变化（通过比较版本号），它可以直接更新自己的版本号到最新，而不需要执行计算函数。
\nlet globalEpoch = 1;\n\nclass Signal<T> {\n epoch = 0; // 最后更新的时间戳\n value: T;\n\n write(newVal: T) {\n this.value = newVal;\n this.epoch = ++globalEpoch; // 更新时推进全局时间\n }\n}\n\nclass Computed<T> {\n lastCheckEpoch = 0; // 上次检查的时间\n cachedValue: T;\n\n read() {\n // 如果上次检查后，全局时间都没动过，说明肯定没变\n if (this.lastCheckEpoch === globalEpoch) {\n return this.cachedValue;\n }\n\n // ... 这里再进行细粒度的依赖版本对比 ...\n }\n}\n这种设计使得 Alien Signals 在只有少量信号变更、但计算链路很深的大型应用中，性能表现远超传统的“脏标记+递归通知”模式。
\n","tags":["js"]},{"id":"windows-setup","url":"https://yieldray.fun/posts/windows-setup","title":"windows setup","date_published":"2026-01-02T13:50:11.000Z","date_modified":"2026-01-02T13:50:11.000Z","content_text":"下载 ISO 镜像：
https://www.microsoft.com/zh-cn/software-download/windows11
https://msdn.itellyou.cn/
https://uupdump.net/
制作启动盘工具：
https://rufus.ie/zh/
https://www.ventoy.net/
https://www.firpe.cn/
激活脚本：
https://github.com/massgravel/Microsoft-Activation-Scripts
安装 Office：
https://github.com/YerongAI/Office-Tool
系统清理优化：
https://github.com/zoicware/RemoveWindowsAI
https://github.com/Raphire/Win11Debloat
https://github.com/hellzerg/optimizer
https://github.com/flick9000/winscript
图吧工具箱：
https://www.tbtool.cn/
系统工具：
https://learn.microsoft.com/zh-cn/sysinternals/
https://www.winpenpack.com/
http://dimio.altervista.org/eng/
https://litemonitor.cn/
包管理器：
https://scoop.sh/
https://gitee.com/scoop-installer
https://chocolatey.org/
https://learn.microsoft.com/zh-cn/windows/package-manager/winget/
DirectX 修复工具：
https://www.microsoft.com/zh-cn/download/details.aspx?id=35
https://blog.csdn.net/vbcom/article/details/7245186
右键菜单：
https://github.com/moudey/Shell
开发通用：
https://github.com/RubyMetric/chsrc
https://zed.dev/
https://reqable.com/
使用 outline 而非 border 的原因在于 border 需要实际布局空间（盒模型的一部分）。
outline 不属于盒模型，不占空间，因此不会造成布局抖动。
例如动画场景，border 从无到有，为了避免布局抖动，使用 border 时需要预留空间，比较麻烦。
当只需要实心 outline 时，即 outline-style: solid 时，box-shadow 可以作为 outline 的替代品。
box-shadow 也和 outline 一样遵循 border-radius。
总的来说，除了 outline-style，outline-color outline-offset outline-width 都可通过 box-shadow 实现。
\noutline-offset
\nbutton {\n /* 相当于 outline-width: calc(4px - 2px) */\n box-shadow:\n 0 0 0 2px white /* 需要与背景色一致，伪 outline-offset */,\n 0 0 0 4px indigo /* box-shadow 伪边框 */;\n}\noutline 的最大缺点是不能仅在指定方向绘制，box-shadow 可以做到。
仅在指定方向有边框，下面的例子在水平方向均有边框（相当于 border-inline）
button {\n /* 相当于 outline-width: 2px */\n box-shadow:\n 2px 0 0 0 indigo,\n -2px 0 0 0 indigo;\n}\n还可以在元素内部绘制（相当于 outline-offset 为负数）
\nbutton {\n box-shadow: inset 0 0 0 2px #3498db;\n}\nbox-shadow 不在 border-box 内绘制，因此可能不适合与 border 一起使用。
\n","tags":["css"]},{"id":"c-simple-epoll-http-server","url":"https://yieldray.fun/posts/c-simple-epoll-http-server","title":"实现一个使用 epoll 的极简 HTTP 服务器","date_published":"2025-11-09T20:26:40.000Z","date_modified":"2025-11-09T20:26:40.000Z","content_text":"实现一个使用 epoll 的极简 HTTP 服务器 (仅支持 GET/POST, 简单路由)。
\n\n\nSource: https://github.com/flouthoc/envelop.c
\n
Author: flouthoc@gmail.com\nMIT LICENSE
#include <stdio.h>\n#include <string.h>\n#include <sys/types.h>\n#include <sys/socket.h>\n#include <unistd.h>\n#include <stdlib.h>\n#include <errno.h>\n#include <arpa/inet.h>\n#include <sys/epoll.h>\n#include <fcntl.h>\n\n/* 命名约定简述:\n MACROS 全大写; ENUMS 首字母大写其余小写; STRUCTS 全小写下划线; 变量全小写。\n*/\n\n// 服务器监听地址 0.0.0.0:SERVER_PORT (对所有本地接口开放)\n#define SERVER_PORT 3000\n\n/* 支持的 HTTP 版本标识 */\n#define VERSION_11 "1.1"\n#define VERSION_10 "1.0"\n/* 事件数组最大容量 (epoll) */\n#define MAXEVENTS 64\n\n\n/* 全局临时缓冲区 (复用以减少栈分配) */\nchar global_buffer[1024];\n\n/* 仅实现需要支持的请求方法 */\nenum Method {\n GET,\n POST\n};\n\n/* 常用 HTTP 状态码 (只列出当前用到的) */\nenum Http_status {\n HTTP_STATUS_OK = 200,\n HTTP_STATUS_CREATED = 201,\n HTTP_STATUS_ACCEPTED = 202,\n HTTP_STATUS_BAD_REQUEST = 400,\n HTTP_STATUS_NOT_FOUND = 404,\n};\n\n/* 解析后的请求行数据 (仅保留必要字段) */\nstruct http_request {\n char version[4];\n enum Method method;\n char * uri;\n};\n\n/* 构造用的响应头及可选正文 */\nstruct http_response {\n char * header;\n size_t length;\n int is_content; // 如果此响应中有消息体，则为1；如果没有，则为0，这只是为了在回复时额外添加换行\n};\n\n// 打印响应头 (调试用)，保留 \\r\\n 可视化\nvoid print_rn(char * str) {\n while ( * str) {\n if ( * str == '\\n') {\n fputs("\\n", stdout);\n } else if ( * str == '\\r') {\n fputs("\\r", stdout);\n } else {\n fputc( * str, stdout);\n }\n str++;\n }\n fputs("\\n", stdout);\n}\n\n// 扩展响应缓冲区并追加字符串 (header + 内容)\nstatic inline void extend_header(struct http_response * handle,\n const char * extension, size_t length) {\n struct http_response * h = handle;\n h -> length += length;\n h -> header = realloc(h -> header, h -> length);\n strcat(h -> header, extension);\n}\n\n// 发送响应并 free 结构体\nstatic void reply(struct http_response * handle, int connectionfd) {\n\n int written, n;\n char * buf;\n if (handle -> is_content == 0) extend_header(handle, "\\r\\n", 2);\n n = handle -> length;\n buf = handle -> header;\n\n print_rn(buf);\n\n while (n > 0) {\n if ((written = write(connectionfd, buf, (handle -> length + 1))) > 0) {\n buf += written;\n n -= written;\n } else {\n perror("When replying to file descriptor");\n }\n }\n\n free(handle -> header);\n free(handle);\n\n}\n\n/* TODO: 可扩展为最简模板解析器 (占位) */\nstatic char * readTemplate(char * filename) {\n if (filename != NULL) {\n /* 预留: 读取文件并返回动态内容 */\n }\n return NULL;\n}\n\n// 构造状态行 (HTTP/X.X <code>) 并初始化响应结构\nstatic inline void prepare_status_line(struct http_response ** response_handle, char * version, enum Http_status status) {\n struct http_response * r = malloc(sizeof(struct http_response));\n /* Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF */\n /* I wont use Reason-Phrase cause its not important for me now */\n r -> header = malloc(16 * sizeof(char)); // hard-coding length for HTTP/X.X(8) SP(1) STATUS-CODE(3) SP(1) CRLF(2)\n r -> length = sprintf(r -> header, "HTTP/%s %d \\r\\n", version, status);\n r -> is_content = 0;\n * response_handle = r;\n}\n\n// 添加单个 header 行\nvoid setHeader(struct http_response * handle, char * header, char * value) {\n size_t len;\n char local_buffer[1024];\n strcpy(local_buffer, value);\n len = sprintf(global_buffer, "%s: %s\\r\\n", header, local_buffer);\n extend_header(handle, global_buffer, len);\n}\n\n// 设置正文相关头并发送带内容的响应\nvoid replywithContent(struct http_response * response_handle, int connectionfd,\n const char * content) {\n size_t content_length = strlen(content);\n sprintf(global_buffer, "%d", (int) content_length);\n setHeader(response_handle, "Content-Length", global_buffer);\n setHeader(response_handle, "Content-Type", "text/html");\n extend_header(response_handle, "\\r\\n", 2);\n response_handle -> is_content = 1;\n extend_header(response_handle, content, content_length);\n reply(response_handle, connectionfd);\n}\n\n/* 路由: 根据 URI 返回不同内容 (简易示例) */\nvoid router(struct http_request * request_handle, int connectionfd, struct http_response ** response_handle) {\n if (!strcmp(request_handle -> uri, "/hello")) {\n prepare_status_line(response_handle, request_handle -> version, HTTP_STATUS_OK);\n replywithContent( * response_handle, connectionfd, "Hello");\n } else if (!strcmp(request_handle -> uri, "/hey")) {\n prepare_status_line(response_handle, request_handle -> version, HTTP_STATUS_OK);\n replywithContent( * response_handle, connectionfd, "Hey hi this is a test");\n } else {\n prepare_status_line(response_handle, request_handle -> version, HTTP_STATUS_NOT_FOUND);\n replywithContent( * response_handle, connectionfd, "Not Found");\n }\n}\n\n// 解析请求行 (方法 URI 版本)，仅支持 GET/POST + HTTP/1.0/1.1\nstatic int parse_http_request(struct http_request ** req, char * request_buffer) /* 仅解析运行所需部分 */ {\n int length;\n char * uri;\n char * token_handler;\n struct http_request * p = (struct http_request * )(malloc(sizeof(struct http_request)));\n token_handler = strtok(request_buffer, " ");\n\n if (!strcmp(token_handler, "GET")) p -> method = GET;\n else if (!strcmp(token_handler, "POST")) p -> method = POST;\n else return 0;\n\n token_handler = strtok(NULL, " ");\n length = strlen(token_handler);\n uri = malloc(sizeof(char) * (length + 1));\n strcpy(uri, token_handler);\n p -> uri = uri;\n\n token_handler = strtok(NULL, " ");\n if (!strncmp(token_handler, "HTTP/1.1\\r\\n", 10)) strcpy(p -> version, VERSION_11);\n else if (!strncmp(token_handler, "HTTP/1.0\\r\\n", 10)) strcpy(p -> version, VERSION_10);\n else return 0;\n\n * req = p;\n return 1;\n}\n\n// 根据解析结果分发响应 (目前只区分 GET)\nvoid respond(struct http_request * request_handle, int connectionfd) {\n struct http_response * response_handle;\n if (request_handle -> method == GET) router(request_handle, connectionfd, & response_handle);\n else goto error;\n return;\n\n error:\n prepare_status_line( & response_handle, request_handle -> version, HTTP_STATUS_BAD_REQUEST);\n reply(response_handle, connectionfd);\n}\n\nint main() {\n int n, i;\n int listenfd;\n int listenfd_flags;\n int epoll_fd;\n char msg_buffer[1024];\n char temp_buffer[1024];\n int connectionfd;\n int client_length;\n\n /* 请求结构体指针 (解析成功后填充) */\n struct http_request * request_handle;\n\n /* sockaddr_in: 保存服务器与客户端地址信息 */\n struct sockaddr_in server_address, client_address;\n\n /* epoll_event: 事件数据; 仅在支持 epoll 的系统运行 (Linux) */\n struct epoll_event event;\n struct epoll_event * events;\n\n char greet[] = "Hello";\n\n /* 创建监听套接字 */\n listenfd = socket(AF_INET, SOCK_STREAM, 0);\n\n if (listenfd == -1) {\n perror("Socket");\n exit(1);\n }\n\n /* 清零地址结构 */\n memset(&server_address, 0, sizeof(server_address));\n\n /* 设置地址族/地址/端口 */\n server_address.sin_family = AF_INET;\n server_address.sin_addr.s_addr = inet_addr("0.0.0.0");\n /* 端口号定义见顶部宏 */\n server_address.sin_port = htons(SERVER_PORT);\n\n /* 绑定监听地址与端口 */\n if (bind(listenfd, (struct sockaddr * ) & server_address, sizeof(server_address)) == -1) {\n perror("Bind");\n exit(1);\n }\n\n if ((listenfd_flags = fcntl(listenfd, F_GETFL, 0)) == -1) {\n perror("While trying to get listenfd flags");\n exit(1);\n }\n\n /* 设置非阻塞 (事件驱动需要) */\n listenfd_flags |= O_NONBLOCK;\n\n if (fcntl(listenfd, F_SETFL, listenfd_flags) == -1) {\n perror("While trying to set flags");\n exit(1);\n }\n\n if (listen(listenfd, 10) == -1) {\n perror("Listen");\n exit(1);\n }\n\n if ((epoll_fd = epoll_create1(0)) == -1) {\n perror("epoll_create");\n exit(1);\n }\n\n event.data.fd = listenfd;\n event.events = EPOLLIN;\n if (epoll_ctl(epoll_fd, EPOLL_CTL_ADD, listenfd, & event) == -1) {\n perror("Epoll context");\n exit(1);\n }\n\n events = calloc(MAXEVENTS, sizeof event);\n\n /* 主事件循环 (epoll_wait) */\n while (1) {\n\n /* 等待就绪事件 */\n n = epoll_wait(epoll_fd, events, MAXEVENTS, -1);\n for (i = 0; i < n; i++) {\n\n /* 若事件包含错误/挂断或非可读则关闭并跳过 */\n if ((events[i].events & EPOLLERR) || (events[i].events & EPOLLHUP) || (!(events[i].events & EPOLLIN))) {\n /* 文件描述符尚未连接用于传输，可以在不关闭的情况下关闭 */\n close(events[i].data.fd);\n continue;\n } else if (listenfd == events[i].data.fd) {\n\n // 新连接到来: 循环接受所有就绪连接\n while (1) {\n\n /* 接受连接 */\n int connectionfd_flags;\n connectionfd = accept(listenfd, (struct sockaddr * ) & client_address, & client_length);\n if (connectionfd == -1) {\n\n if ((errno == EAGAIN) || (errno == EWOULDBLOCK)) {\n /* 已处理所有传入连接 */\n break;\n } else {\n perror("accept");\n break;\n }\n }\n\n /* 设置客户端套接字非阻塞 */\n if ((connectionfd_flags = fcntl(connectionfd, F_GETFL, 0)) == -1) {\n perror("While trying to get listenfd flags");\n exit(1);\n }\n\n connectionfd_flags |= O_NONBLOCK;\n\n if (fcntl(connectionfd, F_SETFL, connectionfd_flags) == -1) {\n perror("While trying to set flags");\n exit(1);\n }\n\n // 将客户端套接字加入 epoll 监听\n event.data.fd = connectionfd;\n event.events = EPOLLIN;\n if (epoll_ctl(epoll_fd, EPOLL_CTL_ADD, connectionfd, & event) == -1) {\n perror("epoll_ctl");\n exit(1);\n }\n }\n continue;\n } else {\n // 已有连接: 读取并处理请求\n memset(msg_buffer, 0, sizeof(msg_buffer));\n memset(temp_buffer, 0, sizeof(temp_buffer));\n\n // 读取请求 (简单循环, 遇到 -1 退出)\n while ((n = read(events[i].data.fd, msg_buffer, 1024))) {\n\n if (n == -1) {\n //\tprintf("Might be EAGAIN\\n");\n break;\n }\n\n }\n\n // 解析 HTTP 请求\n strcpy(temp_buffer, msg_buffer);\n if (!parse_http_request( & request_handle, temp_buffer)) {\n printf("Request Unparsablen\\n");\n // 解析失败: 关闭连接\n if (shutdown(events[i].data.fd, SHUT_RDWR) == -1) {\n perror("shutdown");\n }\n\n continue;\n }\n\n // 构造并发送响应\n respond(request_handle, events[i].data.fd);\n // 关闭连接并释放资源\n if (shutdown(events[i].data.fd, SHUT_RDWR) == -1) {\n perror("shutdown");\n }\n\n free(request_handle -> uri);\n free(request_handle);\n //printf("%s\\n", temp_buffer);\n }\n }\n }\n\n\n /*\n\n // This was some rough loop so i'm commenting it\n while(1){\n client_length = sizeof(client_address);\n memset(msg_buffer, 0, sizeof(msg_buffer));\n memset(temp_buffer, 0, sizeof(temp_buffer));\n connectionfd = accept(listenfd, (struct sockaddr*)&client_address, &client_length);\n while( n = recv(connectionfd, msg_buffer, 1024, MSG_DONTWAIT)){\n\n //printf("%sn", msg_buffer);\n //printf("%zdn", strlen(msg_buffer));\n if(strstr(msg_buffer, "rnrn"))\n break;\n\n\n //if( n < 0)\n // if(errno == EWOULDBLOCK)\n // break;\n }\n strcpy(temp_buffer, msg_buffer);\n if(!parse_http_request(&request_handle, temp_buffer)){\n printf("Request Unparsable");\n close(connectionfd);\n continue;\n }\n respond(request_handle, connectionfd);\n close(connectionfd);\n free(request_handle->uri);\n free(request_handle);\n }\n\n */\n\n exit(0);\n}\nencodeURIComponent() 和 URLSearchParams 都可用于 URI 组件编码。目前，前者由 ECMA262 定义，后者由 HTML 标准定义。
RFC3986 定义的 URI 组件如下：
\n foo://example.com:8042/over/there?name=ferret#nose\n \\_/ \\______________/\\_________/ \\_________/ \\__/\n | | | | |\nscheme authority path query fragment\n | _____________________|__\n / \\ / \\\n urn:example:animal:ferret:nose\n备注：某些 scheme 的组件 在 URL 对象中会被特殊处理 （scheme 为：ftp/file/http/https/ws/wss）。
\nnew URL("http://domain域.域").toString();\n// => "http://xn--domain-u21k.xn--cjs/"\n\nnew URL("ws://domain域.域").toString();\n// => "ws://xn--domain-u21k.xn--cjs/"\n\nnew URL("file://domain域.域").toString();\n// => "file://xn--domain-u21k.xn--cjs/"\n\nnew URL("ftp://domain域.域").toString();\n// => "ftp://xn--domain-u21k.xn--cjs/"\n\nnew URL("git://domain域.域").toString();\n// => "git://domain%E5%9F%9F.%E5%9F%9F"\nencodeURIComponent 遵循 RFC2396，
\nreserved = ";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" |\n "$" | ","\n\nunreserved = alphanum | mark\n\nmark = "-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"\n而非 RFC3986。
\nreserved = gen-delims / sub-delims\n\ngen-delims = ":" / "/" / "?" / "#" / "[" / "]" / "@"\n\nsub-delims = "!" / "$" / "&" / "'" / "(" / ")"\n / "*" / "+" / "," / ";" / "="\n\nunreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"\n\n\n因为 RFC3986 支持了 IPv6。
\n
在 encodeURIComponent 中，大小写、数字和 -_.!~*'() 不会被转义，即： abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.!~*'() 不会被转义。
要支持 RFC3986，还需要转义 !'()*。
要支持 RFC5987，还需要转义 ['()*]，无需转义 |`^， （用于 Content-Disposition 和 Link 标头）
function encodeRFC3986URIComponent(str) {\n return encodeURIComponent(str).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);\n}\n\nfunction encodeRFC5987ValueChars(str) {\n return encodeURIComponent(str)\n .replace(/['()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`)\n .replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16)));\n}\n下为 engine262 实现：
\nconst uriReserved = ";/?:@&=+$,";\nconst uriAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";\nconst uriMark = "-_.!~*'()";\nconst DecimalDigit = "0123456789";\nconst uriUnescaped = uriAlpha + DecimalDigit + uriMark;\n\n/** https://tc39.es/ecma262/#sec-encodeuricomponent-uricomponent */\nfunction* encodeURIComponent([uriComponent = Value.undefined]: Arguments): ValueEvaluator {\n // 1. Let componentString be ? ToString(uriComponent).\n const componentString = Q(yield* ToString(uriComponent));\n // 2. Let unescapedURIComponentSet be a String containing one instance of each code unit valid in uriUnescaped.\n const unescapedURIComponentSet = uriUnescaped;\n // 3. Return ? Encode(componentString, unescapedURIComponentSet).\n return Q(Encode(componentString, unescapedURIComponentSet));\n}\n\n/** https://tc39.es/ecma262/#sec-encodeuri-uri */\nfunction* encodeURI([uri = Value.undefined]: Arguments): ValueEvaluator {\n // 1. Let uriString be ? ToString(uri).\n const uriString = Q(yield* ToString(uri));\n // 2. Let unescapedURISet be a String containing one instance of each code unit valid in uriReserved and uriUnescaped plus "#".\n const unescapedURISet = `${uriReserved}${uriUnescaped}#`;\n // 3. Return ? Encode(uriString, unescapedURISet).\n return Q(Encode(uriString, unescapedURISet));\n}\n\n\n不难看出，encodeURI 除了不会转义
\nabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.!~*'()以外，还不会转义;/?:@&=+$,#。
下为 quickjs 实现：
\nstatic JSValue js_global_encodeURI(JSContext *ctx, JSValueConst this_val,\n int argc, JSValueConst *argv,\n int isComponent)\n{\n JSValue str;\n StringBuffer b_s, *b = &b_s;\n JSString *p;\n int k, c, c1;\n\n str = JS_ToString(ctx, argv[0]);\n if (JS_IsException(str))\n return str;\n\n p = JS_VALUE_GET_STRING(str);\n string_buffer_init(ctx, b, p->len);\n for (k = 0; k < p->len;) {\n c = string_get(p, k);\n k++;\n if (isURIUnescaped(c, isComponent)) {\n string_buffer_putc16(b, c);\n } else {\n if (is_lo_surrogate(c)) {\n js_throw_URIError(ctx, "invalid character");\n goto fail;\n } else if (is_hi_surrogate(c)) {\n if (k >= p->len) {\n js_throw_URIError(ctx, "expecting surrogate pair");\n goto fail;\n }\n c1 = string_get(p, k);\n k++;\n if (!is_lo_surrogate(c1)) {\n js_throw_URIError(ctx, "expecting surrogate pair");\n goto fail;\n }\n c = from_surrogate(c, c1);\n }\n if (c < 0x80) {\n encodeURI_hex(b, c);\n } else {\n /* XXX: use C UTF-8 conversion ? */\n if (c < 0x800) {\n encodeURI_hex(b, (c >> 6) | 0xc0);\n } else {\n if (c < 0x10000) {\n encodeURI_hex(b, (c >> 12) | 0xe0);\n } else {\n encodeURI_hex(b, (c >> 18) | 0xf0);\n encodeURI_hex(b, ((c >> 12) & 0x3f) | 0x80);\n }\n encodeURI_hex(b, ((c >> 6) & 0x3f) | 0x80);\n }\n encodeURI_hex(b, (c & 0x3f) | 0x80);\n }\n }\n }\n JS_FreeValue(ctx, str);\n return string_buffer_end(b);\n\nfail:\n JS_FreeValue(ctx, str);\n string_buffer_free(b);\n return JS_EXCEPTION;\n}\nRFC1866 和 HTML 标准 均定义过 application/x-www-form-urlencoded。
URLSearchParams.prototype.toString() 遵循 application/x-www-form-urlencoded。
在 URLSearchParams 中，空格会被编码为 + 而不是 %20。
大小写、数字和 -_.* 不会被转义，空格被编码为 +，其余字符按百分号编码。
| 规范 | \n不编码字符 | \n
|---|---|
| RFC2396 | \nabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.!~*'() | \n
| RFC3986 | \nabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.~ | \n
| application/x-www-form-urlencoded | \nabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.* | \n
const encodeQueryParam = (s) => new URLSearchParams({ "": s }).toString().slice(1);\n\nencodeQueryParam("~"); // => %7E\n\n// decodeURIComponent 会解码所有百分号编码串，但是注意查询字符串中空格会被编码为加号\nconst decodeQueryParam = (s) => decodeURIComponent(s.replace(/\\+/g, " "));\n\ndecodeQueryParam("%7E"); // => ~\nhttps://developer.chrome.com/blog
\n\n\nhttps://blog.nightly.mozilla.org/
\nhttps://blogs.windows.com/msedgedev/posts/
\nhttps://developer.chrome.com/release-notes
\nhttps://developer.apple.com/documentation/safari-release-notes
\nhttps://www.mozilla.org/en-US/firefox/releases/
\nhttps://spidermonkey.dev/blog/
\n\nhttps://www.smashingmagazine.com/category/css/
\nhttps://frontendmasters.com/blog/
\n\n\nhttps://www.w3.org/groups/wg/css/publications/
\nhttps://web-platform-dx.github.io/web-features-explorer/
\n\n\nhttps://polypane.app/experimental-web-platform-features/
\n\n\n\n翻译自：https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/
\n
我们去年（2024）发布了《你需要了解的现代 CSS》，当时我还不确定一年后是否有足够的新内容值得再写一版。但时间和 CSS 都在进步，结果呢？今年的新内容比去年还多。至少在这个有点主观的“Chris 认为值得了解的新鲜或获得了浏览器支持提升的东西”列表里是这样。
\n我们通常不会为包含任意内容的元素设置 height，而是让它们根据内容自适应高度。问题在于，我们一直无法将高度从一个固定值（如 0）动画到其本身的高度（或反过来）。换句话说，无法动画到 auto（或其他类似的尺寸关键字，如 min-content 等）。
现在，我们可以选择性地允许动画到这些关键字，例如：
\nhtml {\n interpolate-size: allow-keywords;\n /* 现在如果我们在任何地方 transition\n "height: 0;" 到 "height: auto;"\n 都能生效 */\n}\n如果不想全局开启，也可以用 calc-size() 函数实现 transition，无需 interpolate-size：
.content {\n height: 3lh;\n overflow: hidden;\n transition: height 0.2s;\n\n &.expanded {\n height: calc-size(auto, size);\n }\n}\n这是 CSS 首次原生支持这种动画。实际开发中这种需求很常见，现在可以非常自然地实现，而不会破坏行为。
\n而且不仅仅是 height，任何接受尺寸的属性都可以；也不仅仅是 auto，其他尺寸关键字也可以。
| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n仅 Chrome | \n
| 渐进增强 | \n可以！通常这种动画不是硬性需求，只是锦上添花 | \n
| Polyfill | \n基本没有。以前的做法是动画 max-height 到一个很大的值，或者用 JS 计算尺寸再动画，体验都不好 | \n
这些是独立且实用的功能，主要偏向 HTML，但它们互补，值得一起介绍。
\npopover 是你可以加在任何 HTML 元素上的属性，赋予其打开/关闭的功能，并有 JS API 控制。它和模态框类似但不同，更像是 tooltip 或可以同时打开多个的东西。
Invoker 也是 HTML 属性，让我们可以用声明式的方式在标记中调用这些 JS API。
\n在 HTML 层实现功能非常强大。无需 JS 就能工作，且可访问性好，用户体验细节也更容易做对。
\n| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \nPopover 各浏览器都支持，但 invokers 目前仅 Chrome。子功能如 popover="hint" 支持略少。 | \n
| 渐进增强 | \n不太适用。这类功能通常必须“能用”，建议用 polyfill 保证一致性。 | \n
| Polyfill | \n有！Popovers Polyfill / Invokers Polyfill | \n
记住 popover 也有 JS API，如 myPopover.showPopover() 和 secondPopover.hidePopover()，但这里展示的是 HTML 的 invoker 控制。还有其他 HTML 控制方式（如 popovertarget="mypopover" popovertargetaction="show"），但我更喜欢通用的 command invokers 方法。
另外 —— popover 和锚点定位（anchor positioning）配合特别好，这也是现代 CSS 的奇迹之一。
\nCSS 已经有很多函数，比如 calc()、attr()、clamp()，还有很多。它们其实叫 CSS 值函数，总是返回一个值。
@function 的魔力在于——你可以自己写函数了。
@function --titleBuilder(--name) {\n result: var(--name) " is cool.";\n}\n将逻辑抽象为函数是计算机编程的基本思想。把代码和逻辑集中在一个地方而不是重复写，能让 CSS 更简洁、可维护。
\n| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n仅 Chrome | \n
| 渐进增强 | \n取决于你用它做什么。如果可以接受回退值，可以这样写：property: fallback; property: --function(); | \n
| Polyfill | \n没有。Sass 有函数但不是同一规范，不能直接用。 | \n
从概念上说，CSS 里已经有很多条件逻辑。选择器本身就是“如果”匹配就应用样式，媒体查询也是“如果”条件成立就生效。
\n但 if() 函数 是第一个专门用于逻辑分支的 CSS 构造。
和所有函数一样，包括上面自定义的 @function，if() 返回一个值。它的语法让代码更易读，也能减少重复。
| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n仅 Chrome | \n
| 渐进增强 | \n取决于你用它做什么。如果可以接受回退值，可以这样写：property: fallback; property: if( style(--x: true): value; else: fallback; ); | \n
| Polyfill | \n没有。CSS 预处理器有类似逻辑，但不会基于动态值和 DOM 重新计算。 | \n
将逻辑写进一个值里很酷！
\n.grid {\n display: grid;\n grid-template-columns: if(\n media(max-width > 300px): repeat(2, 1fr) ; media(max-width > 600px): repeat(3, 1fr) ;\n media(max-width > 900px): repeat(auto-fit, minmax(250px, 1fr)) ; else: 1fr;\n );\n}\n语法很像 switch 语句，可以有任意多个条件，匹配到第一个就用。
\nif(\n condition: value;\n condition: value;\n else: value;\n)\n条件可以是：
\nmedia()supports()style()CSS 新增的 field-sizing 属性可以让表单字段（或任何可编辑元素）根据内容自动增长。
开发者一直用 JS 实现这个需求，最典型的例子是 <textarea>，让它根据用户输入自动变大，无需手动调整（尤其在小屏幕上很难操作）。当然，内联调整大小也不错。
| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \nChrome，Safari 很快也会支持 | \n
| 渐进增强 | \n可以！通常只是提升用户体验，不是硬性需求 | \n
| Polyfill | \n有非常轻量的 JS 实现 | \n
给 <select> 外观做样式已经可以实现，但下拉菜单内容一直是操作系统自带的样式。现在你可以选择完全自定义 select 菜单的样式。
（原文未写，略）
\n| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n仅 Chrome | \n
| 渐进增强 | \n100%。会回退为未自定义样式的 <select>，也没问题 | \n
| Polyfill | \n以前 <selectlist> 时代有 polyfill，但现在渐进增强很好，不需要 | \n
select,\n::picker(select) {\n appearance: base-select;\n}\nCSS 的 text-wrap 属性可以让浏览器以不同方式换行。例如，text-wrap: balance; 会让每行长度尽量接近。
这对大字号元素（如标题）来说是更好的默认值。它也能避免单词孤零零地出现在下一行（孤儿），而 text-wrap: pretty; 也能做到，并且专为长文本设计，让文本更易读。总之：免费获得更好的排版。
| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \nbalance 各浏览器都支持，pretty 目前仅 Chrome 和 Safari | \n
| 渐进增强 | \n绝对可以。即使没有这些增强，文本依然可读可访问 | \n
| Polyfill | \nbalance 有 polyfill | \n
这个有点让人困惑，因为 linear 作为 transition-timing-function 或 animation-timing-function 的关键字，意味着“线性无变化”（有时正是你想要的，比如透明度变化）。但 linear() 函数 实际上可以实现非常花哨的缓动，比如“弹跳”效果。
即使是 cubic-bezier() 也只能做有限的弹跳动画，而 linear() 可以接受无限个点，效果更丰富。
| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强 | \n可以！可以回退到命名缓动值或 cubic-bezier() | \n
| Polyfill | \n没有，但如果你很在意 fancy 缓动，GSAP 这类 JS 库都能实现 | \n
.bounce {\n animation-timing-function: linear(\n 0,\n 0.004,\n 0.016,\n 0.035,\n 0.063,\n 0.098,\n 0.141 13.6%,\n 0.25,\n 0.391,\n 0.563,\n 0.765,\n 1,\n 0.891 40.9%,\n 0.848,\n 0.813,\n 0.785,\n 0.766,\n 0.754,\n 0.75,\n 0.754,\n 0.766,\n 0.785,\n 0.813,\n 0.848,\n 0.891 68.2%,\n 1 72.7%,\n 0.973,\n 0.953,\n 0.941,\n 0.938,\n 0.941,\n 0.953,\n 0.973,\n 1,\n 0.988,\n 0.984,\n 0.988,\n 1\n );\n}\nCSS 早有 path() 函数，但它只能 1:1 复制 SVG <path> 的 d 属性，只能用像素单位，语法也不太友好。shape() 函数 则是为 CSS 量身定制的升级版。
shape() 函数几乎可以画任何东西。可以用在 clip-path，让元素变任意形状，且支持响应式、CSS 单位、自定义属性、媒体查询等。也可以用在 offset-path()，让元素沿任意路径运动。未来还会支持 shape-outside。
| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \nChrome、Safari 已支持，Firefox 也在开发，很快就全面了 | \n
| 渐进增强 | \n基本可以！裁剪和路径动画通常是美化，回退到普通样式也没问题 | \n
| Polyfill | \n没有，建议做好回退方案 | \n
任何 SVG path 都能转成 shape()。
.arrow {\n clip-path: shape(\n evenodd from 97.788201% 41.50201%,\n line by -30.839077% -41.50201%,\n curve by -10.419412% 0% with -2.841275% -3.823154% / -7.578137% -3.823154%,\n smooth by 0% 14.020119% with -2.841275% 10.196965%,\n line by 18.207445% 24.648236%,\n hline by -67.368705%,\n curve by -7.368452% 9.914818% with -4.103596% 0% / -7.368452% 4.393114%,\n smooth by 7.368452% 9.914818% with 3.264856% 9.914818%,\n hline by 67.368705%,\n line by -18.211656% 24.50518%,\n curve by 0% 14.020119% with -2.841275% 3.823154% / -2.841275% 10.196965%,\n curve by 5.26318% 2.976712% with 1.472006% 1.980697% / 3.367593% 2.976712%,\n smooth by 5.26318% -2.976712% with 3.791174% -0.990377%,\n line by 30.735919% -41.357537%,\n curve by 2.21222% -7.082013% with 1.369269% -1.842456% / 2.21222% -4.393114%,\n smooth by -2.21222% -7.082013% with -0.736024% -5.239556%,\n close\n );\n}\n天然支持缩放，语法也比 path() 更易读：
CSS 的 attr() 函数可以获取匹配元素的字符串值。例如 <div data-name="Chris"> 可以用 div::before { content: attr(data-name); } 得到 "Chris"。现在，你可以为获取的值指定类型，更实用。
数字和颜色等类型比字符串更有用，可以直接用于样式。
\nattr(data-count type(<number>))\n| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n仅 Chrome | \n
| 渐进增强 | \n取决于你用它做什么。如果只是美化，没问题；如果是布局核心信息，则不建议依赖 | \n
| Polyfill | \n没有 | \n
有多种方式可以让视觉顺序和源码顺序不一致。新的 reading-order 属性 允许我们在改变布局顺序时，让 Tab 键导航顺序也能合理。
长期以来我们被告知：不要随意重排布局！源码顺序应尽量和视觉顺序一致，否则 Tab 导航会变得混乱甚至导致滚动，影响可访问性。现在我们可以告诉浏览器按布局顺序导航。
\n| 支持情况 | \n说明 | \n
|---|---|
| 浏览器支持 | \n仅 Chrome | \n
| 渐进增强 | \n不太适用。建议等所有浏览器都支持后再广泛使用 | \n
| Polyfill | \n没有，但可以用 JS 动态设置 tabindex 实现 | \n
.grid {\n reading-flow: grid-rows;\n}\n重排 grid 布局是最常见的需求，让 Tab 顺序跟随行顺序很合理。你需要根据实际布局设置对应值，比如 flexbox 用 flex-flow。MDN 有完整值列表。
random() 已在 Safari 支持，非常酷。margin-trim 很实用，期待能在更多浏览器用上。sibling-index() 和 sibling-count() 已在 Chrome 支持，非常适合做错位动画。view-transition-name: match-element; 很方便，无需为每个元素生成唯一名。Firefox 也在开发 View Transitions，意义重大。calc() 进行带单位的乘除（不再要求第二个参数无单位），不再需要 hack。:has() 伪类 非常适合选择有特定子元素或状态的元素。dvh）现在都已成为基线。\n\n翻译自：https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/
\n
我的目标是通过这份可收藏的指南，列出最近 CSS 的（坦率地说：令人惊叹的）新特性。这个列表没有严格的标准，只要这些东西都相当新，而且我感觉很多人还不了解。即使知道，也未必真正理解它们，或许需要一个通俗易懂的解释，说明它是什么、为什么要关心，以及一些参考代码。也许你就是这样的人。
\n我希望大家能对这些特性形成肌肉记忆。正如我说的，“即使你知道这些东西，形成肌肉记忆也需要时间。”
\n这些特性的语法、细节和细微之处远比我在这里展示的要多。我希望你知道它们的可能性，能查到最基础的用法和语法，之后需要时再深入研究。
\n容器查询允许你为容器元素的子元素编写样式，当该容器满足某些媒体条件（通常是宽度）时生效。
\n<div class="element-wrap">\n <div class="element"></div>\n</div>\n.element-wrap {\n container: element / inline-size;\n}\n@container element (min-inline-size: 300px) {\n .element {\n display: flex;\n gap: 1rem;\n }\n}\n如果你曾想过：我希望能根据这个元素的尺寸做样式决策，而不是像 @media 查询那样只能针对整个页面。那么 @container 查询就是为你准备的！做设计系统或组件化网站的人，通常会用容器查询根据尺寸来调整样式，因为页面整体尺寸并不能代表组件的实际尺寸。
| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n视情况而定——如果不是关键样式，可以渐进增强。 | \n
| Polyfill | \n有 | \n
中间有个拖动条，可以看到日历根据空间大小切换布局。它有三个断点。
\n样式容器查询允许你在某个自定义属性有特定值时应用样式。
\n.container {\n --variant: 1;\n\n &.variant2 {\n --variant: 2;\n }\n}\n\n@container style(--variant: 1) {\n button {\n } /* 不能选 .container，但能选内部元素 */\n .other-things {\n }\n}\n\n@container style(--variant: 2) {\n button {\n }\n .whatever {\n }\n}\n你是否想过在 CSS 里用 mixin？比如设置一个属性却能影响多个属性。Sass 的 mixin 很流行。用样式容器查询也能做到。而且就像 CSS 变量比 Sass 变量更强大一样，样式容器查询也更强大，因为它遵循层叠、可计算等。
\n| \n | \n |
|---|---|
| 浏览器支持 | \n✅ Chrome 及相关浏览器，Safari 即将支持，Firefox 暂不支持 | \n
| 渐进增强？ | \n视你怎么用样式而定，但一般来说不太适合渐进增强。 | \n
| Polyfill | \n无 | \n
容器单位（如 px、rem、vw）允许你根据容器元素的当前尺寸设置元素大小。类似于视口单位 1vw 是浏览器宽度的 1%，1cqw 是容器宽度的 1%（推荐用 cqi，即“逻辑内联方向”）。
单位有：cqw（容器宽度）、cqh（容器高度）、cqi（容器内联）、cqb（容器块方向）、cqmin（cqi 和 cqb 中较小者）、cqmax（较大者）。
如果你觉得某个元素的尺寸应该基于容器当前尺寸，容器单位几乎是唯一选择。比如排版，一个卡片组件在变大时标题也应变大，无需加类名控制。这个演示很棒。即使用容器查询也没这么灵活。
\n| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n可以——可以先写回退单位，再写容器单位。 | \n
| Polyfill | \n有 | \n
这个元素不仅 font-size，连 padding、border、margin 都用容器单位。
:has() 允许你有条件地选择某个元素，当其 DOM 树中更深层的元素匹配 :has() 内的选择器时生效。
figure:has(figcaption) {\n border: 1px solid black;\n padding: 0.5rem;\n}\n如果你想要 CSS 的“父选择器”，:has() 就能实现，而且更强大。选中父元素后还能继续向下选。Jhey Tompkins 称它为“家族选择器”。还能和 :not() 结合，选中没有某元素的情况。
| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n视你怎么用样式而定，但一般来说不太适合渐进增强。 | \n
| Polyfill | \n仅 JS 侧有 | \n
视图过渡有两种：
\n两者都很有用。同页过渡指 DOM 变化但页面不变时的动画，比如列表排序。跨页过渡是页面切换时元素动画，比如视频缩略图变成视频。下面是同页过渡的基本语法：
\nif (!document.startViewTransition) {\n updateTheDOM();\n} else {\n document.startViewTransition(() => updateTheDOM());\n}\n跨页过渡需要加 meta 标签：
\n<meta name="view-transition" content="same-origin" />\n然后需要确保要过渡的元素在新旧页面都有唯一的 view-transition-name。
如果元素移动到新位置而不是瞬间出现，用户更容易理解界面。这就是动画里的tweening，即根据起止状态自动生成动画。视图过渡本质上就是 tweening。你可以控制动画细节，但大部分动画都是根据 DOM 的起止状态自动生成，无需手动指定每个细节。
\n| \n | \n |
|---|---|
| 浏览器支持 | \n✅ Chrome 及相关浏览器 ❌ Safari ❌ Firefox | \n
| 渐进增强？ | \n可以——动画可以不执行，或提供回退动画。 | \n
| Polyfill | \n无 | \n
这是同页视图过渡的例子：
\n嵌套允许你在已有规则集内写更多选择器。
\n.card {\n padding: 1rem;\n\n > h2:first-child {\n margin-block-start: 0;\n }\n\n footer {\n border-block-start: 1px solid black;\n }\n}\n嵌套主要是 CSS 编写的便利性。它能把相关样式组织在一起，避免重复写选择器，减少错误，让 CSS 更易读。但嵌套也可能导致写出和 HTML 结构过度耦合的 CSS，增加特异性，降低复用性。
\n.card {\n container: card / inline-size;\n\n display: grid;\n gap: 1rem;\n\n @container (min-inline-size: 250px) {\n gap: 2rem;\n }\n}\n和 Sass 风格嵌套的唯一区别是不能直接用 & 拼接：
.card {\n body.home & {\n /* 可以 */\n }\n & .footer {\n /* 可以，甚至不需要 & */\n }\n &__big {\n /* 不行，不能这样用 */\n }\n}\n| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n不支持 | \n
| Polyfill | \n可用 LightningCSS、Sass、Less 等预处理器 | \n
任何与元素滚动（通常是页面本身）相关的动画，现在都能用 CSS 实现，无需 JS 绑定滚动事件。分两种：
\nanimation-timeline: scroll()）animation-timeline: view()）比如阅读进度条，随着页面滚动从 0% 到 100%。可以用动画移动元素的 background-position，与页面滚动同步。用 CSS 实现性能更好。
另一个主要用例是元素进入（或离开）视口时触发动画。你可以精细控制动画何时开始、结束。
\n| \n | \n |
|---|---|
| 浏览器支持 | \n✅ Chrome 及相关浏览器 ❌ Safari 🔜 Firefox | \n
| 渐进增强？ | \n可以——这些效果通常是视觉增强，不是必需功能。 | \n
| Polyfill | \n有 | \n
这是图片缩放与页面滚动的演示。
\n锚点定位允许你将元素相对于另一个元素定位。你声明一个锚点元素并命名，然后可以将其他元素定位到锚点的上/右/下/左（或中心、逻辑等价位置）。
\n一旦能自由使用，你就不用太关心元素的精确 DOM 位置（可访问性除外）。现在想相对定位，通常要求目标元素是子元素，并且有定位上下文。这会影响 DOM 结构是否合理。
\n主要用例是 tooltip 和自定义右键菜单。
\n| \n | \n |
|---|---|
| 浏览器支持 | \n🔜 Chrome 及相关浏览器 ❌ Safari ❌ Firefox | \n
| 渐进增强？ | \n可能——如果能接受元素位置完全不同。 | \n
| Polyfill | \n有 | \n
截至发稿时，仅在 Chrome Canary 开启“Experimental Web Platform Features”后可用。
\nCSS 的作用域通过 @scope at-rule 实现，声明一块 CSS 只应用于指定选择器。还可以指定停止应用的选择器。
你也可以通过加类名并嵌套实现作用域。但 @scope 有一些独特用法，比如“甜甜圈作用域”：
@scope (.card) to (.markdown-output) {\n h2 {\n background: tan; /* 到 Markdown 时停止应用 */\n }\n}\n更合理的就近样式也是一大优点。比如主题切换，如果 .dark 和 .light 并存，后定义的会覆盖前面的，即使不合理。用 @scope 可以解决。
我最喜欢的是可以直接在 DOM 里插入 <style>，只作用于那一块，无需命名：
<div class="my-cool-component">\n <style>\n @scope {\n :scope {\n /* 选中上面的 div，无需类名 */\n }\n .card {\n }\n }\n </style>\n\n <article class="card"></article>\n</div>\n| \n | \n |
|---|---|
| 浏览器支持 | \n✅ Chrome ✅ Safari ❌ Firefox | \n
| 渐进增强？ | \n不支持 | \n
| Polyfill | \n无 | \n
CSS 层叠层是一种极其强大的语法，影响一组样式的优先级。你可以给层命名和排序（不排序则按源码顺序）。高层自动覆盖低层，无论选择器强度如何。未在层内的样式最强。
\n<body id="home"></body>\n@layer base {\n body#home {\n margin: 0;\n background: #eee;\n }\n}\n\nbody {\n background: white;\n}\n我们习惯认为 body#home 选择器很强，背景会是 #eee。但因为有未分层样式，最终背景是 white。
你可以有任意多层，并提前排序。新项目建议这样分层：
\n@layer reset, default, themes, patterns, layouts, components, utilities;\n注意：低层的 !important 实际上更强。
如果你用第三方样式库，CSS 层能让你把库放在低层，你写的样式在高层，永远不用担心选择器强度“打架”。你的样式总能覆盖库，CSS 更干净、可维护。
\n比如把 Bootstrap 放在低层：
\n@import url("https://cdn.com/bootstrap.css") layer;\n\nh5 {\n margin-bottom: 2rem;\n}\n| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n不支持 | \n
| Polyfill | \n有 | \n
逻辑属性是带方向的属性的替代方案。例如在英文（LTR）中，inline 方向是水平，block 方向是垂直，所以 margin-right 等价于 margin-inline-end，margin-top 等价于 margin-block-start。在阿拉伯语（RTL）中，margin-inline-end 就等价于 margin-left。很多 CSS 属性都有方向性，关键是理解 inline 和 block 流，以及 start/end 的用法。
很多时候你写方向信息，其实是想表达“文本的内联方向”。比如按钮图标和文字之间的间距，如果用 margin-right，RTL 语言下就错了。你真正想要的是 margin-inline-end。用逻辑属性，自动适配多语言，无需额外判断。
| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n需要用 @supports 和 unset 移除回退值再用逻辑属性，可行。 | \n
| Polyfill | \n有处理器 | \n
我们习惯用 sRGB 色彩空间（hex、rgb()、hsl()、hsb()）。但现在很多显示器能显示比 sRGB 更广的色域，Display P3 比 sRGB 宽 50%，颜色更丰富。新 CSS 函数还能用不同色彩模型，声明更丰富的颜色。
想用更鲜艳的颜色，就要用 P3 色彩空间。新色彩模型（和函数）很有用。
\n比如 oklch()（OKLCH 色彩模型）能显示所有颜色（包括 P3），和 hsl() 一样易读，且“亮度感知一致”，第一个参数（亮度）比 hsl() 更可控。对网页配色很友好。oklab 也很适合做渐变。
| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持（如 oklab） | \n
| 渐进增强？ | \n可以——可声明回退色，无法显示的设备会自动降级。 | \n
| Polyfill | \n有 | \n
你可以编辑这些 <style> 块，因为我设置了 display: block; 和 contenteditable：
color-mix() 允许你在 CSS 里直接混合颜色。以前只能用预处理器，现在原生 CSS 更强大。
想随时变暗/变亮已有颜色？color-mix() 就能做到。还能指定色彩模型，比如 OKLCH 适合调整亮度。还能做整套色板。
| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n可以，声明回退色即可。 | \n
| Polyfill | \n理论可行，但我没见过。 | \n
margin-trim 属性会移除选中容器在指定方向上的末尾的 margin。比如一行有五个块，每个都有右 margin，通常要选 :last-child 去掉最后一个。用 margin-trim 可以直接让父元素自动去掉多余 margin。
.container {\n /* 防止元素末尾有“多余” margin */\n margin-trim: block-end;\n\n /* 可能的“罪魁祸首”，但也可能是其他元素 */\n > p {\n margin-block-end: 1rem;\n }\n}\n你知道 flexbox 和 grid 的 gap 有多好用吧？只在元素之间加间距。如果不能用 gap，margin-trim 就很棒，可以给所有子元素加方向 margin，无需再选第一个/最后一个去掉多余 margin。可能会成为最佳实践。
| \n | \n |
|---|---|
| 浏览器支持 | \n✅ Safari ❌ Chrome ❌ Firefox | \n
| 渐进增强？ | \n可以。多一点空白通常不是大问题。 | \n
| Polyfill | \n无 | \n
最后一个段落常因底部 margin 造成多余空白。用 margin-trim 可以自动去掉，无需手动选最后一个段落。
text-wrap 可能不在你的长期 CSS 记忆里。它能做 text-wrap: nowrap;，但我们一般用 white-space: nowrap;。现在，text-wrap 有两个新用法：
text-wrap: balance; —— 多行文本尽量等宽text-wrap: pretty; —— 避免孤儿行标题最后一个词单独一行很难看，也算排版失误。以前只能用 等 hack。平衡标题能避免这种情况，还能让多行文本更均匀。pretty 更专注于避免孤儿，适合正文。
| \n | \n |
|---|---|
| 浏览器支持 | \n取决于值。balance 支持较好，pretty 支持较少。 | \n
| 渐进增强？ | \n可以。美观略差，但孤儿行不是大问题，没生效也无妨。 | \n
| Polyfill | \n有 | \n
Subgrid 是 CSS grid 的可选部分，适用于嵌套 grid 元素。设置 grid-template-columns: subgrid; 或 grid-template-rows: subgrid;，表示“继承父 grid 的列或行”。
用 grid 布局的核心是对齐。没有 subgrid，子元素无法访问父 grid 的线，难以对齐。Subgrid 填补了这个空白。比如在 <form> 里，DOM 嵌套很重要，subgrid 能保证对齐。
| \n | \n |
|---|---|
| 浏览器支持 | \n全面支持 | \n
| 渐进增强？ | \n可以。可回退为自定义 grid 线，虽然不完美但可用。 | \n
| Polyfill | \n无。有 grid polyfill 但不支持 subgrid。 | \n
CSS 的发展速度并未放缓，还有很多值得期待的新特性。
\nfield-sizing 将解决表单元素（如 textarea、input）自动适应内容的老问题<selectmenu> 本质上是完全可 CSS 样式化的 <select>，非常酷这只是值得关注的一部分。你可以订阅我们的 feed，我们会帮你持续关注，下一期你就不会错过。
\n你有喜欢的新特性我没提到吗？欢迎告诉我。
\n","tags":["css"]},{"id":"cli-standard","url":"https://yieldray.fun/posts/cli-standard","title":"环境变量约定","date_published":"2025-09-27T18:19:38.000Z","date_modified":"2025-09-27T18:19:38.000Z","content_text":"https://bixense.com/clicolors/
\nhttps://curl.se/docs/manpage.html#ENVIRONMENT
\nhttps://about.gitlab.com/blog/we-need-to-talk-no-proxy/
\nhttps://specifications.freedesktop.org/basedir-spec/latest/
\nhttps://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap08.html
\nhttps://man7.org/linux/man-pages/man8/ld.so.8.html
\nhttps://man.openbsd.org/ssh#ENVIRONMENT
\nhttps://git-scm.com/docs/git#_environment_variables
\n","tags":["linux"]},{"id":"music","url":"https://yieldray.fun/posts/music","title":"Music for Web","date_published":"2025-09-13T21:14:22.000Z","date_modified":"2025-09-13T21:14:22.000Z","content_text":"一个基于 SoundFont2 的实时合成器和 MIDI 播放/编辑器，完全用 JavaScript 编写，支持在线和本地运行。它允许用户加载、播放和编辑 MIDI 文件，并支持 SoundFont（SF2）、DLS 音色库的管理与转换。
\nMIDI（Musical Instrument Digital Interface）是一种数字音乐协议，常用于描述音乐演奏的指令（如音符、力度、乐器类型等），本身不包含实际音频数据。可以理解为“数字乐谱”，需要通过合成器和音源进行音频渲染。
\nSoundFont（.sf2）是一种音色库文件格式，内部包含了多种乐器的采样数据。合成器在播放 MIDI 时，会根据 MIDI 指令调用 SoundFont 中的采样，合成出最终的音频。
\nDLS（Downloadable Sounds）是一种与 SoundFont 类似的音色库标准，常见于部分音频硬件和软件。其作用与 SoundFont 相同，均为合成器提供乐器采样。
\n在本项目中，合成器指的是将 MIDI 文件与音色库（SoundFont/DLS）结合，实时生成音频输出的软件模块。SpessaSynth 即为基于 JavaScript 的软件合成器。
\nWeb MIDI API 是浏览器提供的接口，允许网页与外部 MIDI 设备（如电子琴、MIDI 控制器）进行数据交互，实现 MIDI 信号的输入与输出。
\n跨平台乐谱与吉他六线谱渲染库
\nGuitar Pro 是一款流行的乐谱编辑和播放软件，广泛用于吉他、贝斯等乐器的曲谱制作。其文件格式（如 .gp3、.gp4、.gp5、.gpx、.gp）分别对应不同版本，包含了乐谱、六线谱、和弦、歌词、演奏技巧等详细音乐信息。AlphaTab 支持直接解析这些格式的数据。
\nAlphaTex 是 AlphaTab 项目自定义的一种轻量级乐谱标记语言。它以文本方式描述乐谱内容，便于手工编辑和版本管理，适合在代码环境中直接嵌入和处理。
\nMusicXML 是一种开放的、基于 XML 的音乐记谱交换标准，旨在不同乐谱软件之间实现乐谱数据的互操作。它能够描述丰富的音乐结构和表现细节，被广泛用于主流乐谱编辑器和数字音乐应用中。
\nlibopenmpt 的 emscripten 编译
\nlibopenmpt 是一个跨平台 C/C++ 库，用于将 音乐模块文件(MOD) 解码为原始 PCM 音频流。
\nMOD（Module） 是一种早期的数字音乐文件格式，最初流行于 Amiga 电脑和 Demo 场景（Demoscene）社区。MOD 文件不仅包含乐曲的音符信息，还包含用于合成音乐的采样（Sample）数据，因此它既像乐谱，又像一个小型的音源库。
\nPCM（Pulse Code Modulation，脉冲编码调制）是一种最常见的数字音频编码方式。
\nPCM 是将模拟音频信号（如麦克风采集到的声音）按一定的采样率和量化精度，定期采样并转换为数字信号（即一系列二进制数字）的过程。PCM 数据本身不经过压缩，保留了原始音频的全部细节，因此常用于高保真音频处理和存储。
\n常见的 PCM 格式：
\nTone.js 是一个 Web Audio 的框架，用于在浏览器中创建交互式音乐。
Tone.js 的架构旨在让音乐家和音频程序员在创建基于网页的音频应用时都能感到熟悉。
高层次上，Tone 提供了常见的 DAW（数字音频工作站）功能，例如用于同步和调度事件的全局传输，以及预制的合成器和效果。
发送、接收和播放 MIDI 消息。
\nstrudel 是 Tidal Cycles 模式语言的 JavaScript 移植。
\nTidal Cycles（简称 “Tidal”）是一款用于用代码制作模式的软件，无论是在演算法现场编码音乐，还是在工作室作曲。
它包括一个简单而灵活的节奏序列符号，以及一个用于组合和转换它们的大量模式函数库。
默认情况下，声音由功能丰富的 SuperDirt 合成器/采样器制作，也可以使用开放声音控制 (OSC) 或 MIDI 控制其他合成器。
OpenTelemetry 提供一组框架和工具包，用于可观测性。要让系统可观测，主要分为三个步骤：
\nflowchart TD\n %% 左侧：Capture Telemetry\n subgraph Capture_Telemetry [Capture Telemetry]\n A1[Application Code]\n A2[OpenTelemetry API]\n A3[OpenTelemetry SDK]\n A4[Providers]\n A5[Meters/Tracers]\n A6[Telemetry Data]\n A1 -->|Uses| A2\n A2 -->|Implemented by| A3\n A3 -->|Configures Resources with| A4\n A4 -->|Create| A5\n A5 -->|Capture| A6\n end\n\n %% 右侧：Process and Save\n subgraph Process_and_Save [Process and Save]\n B1[Telemetry Data]\n B2[Readers, Samplers, Etc.]\n B3[Processed Telemetry Data]\n B4[Exporters]\n B5[Collectors]\n B6[Backend Services]\n B1 -->|Processed by| B2\n B2 -->|Outputs| B3\n B3 -->|Exported via| B4\n B3 -->|Pulled by| B5\n B4 -->|Sends to| B6\n B5 -->|Sends to| B6\n end\nhttps://opentelemetry.io/docs/zero-code/js/
\nnpm i @opentelemetry/api @opentelemetry/auto-instrumentations-node\n\nexport OTEL_RESOURCE_ATTRIBUTES="host.name=localhost"\nexport OTEL_TRACES_EXPORTER="otlp"\nexport OTEL_EXPORTER_OTLP_ENDPOINT="your-endpoint"\nexport OTEL_NODE_RESOURCE_DETECTORS="env,host,os"\nexport OTEL_SERVICE_NAME="your-service-name"\nexport NODE_OPTIONS="--require @opentelemetry/auto-instrumentations-node/register"\nnode app.js\n手动配置需要在应用中引入 OpenTelemetry SDK 并在应用启动时初始化。下面以 Node.js 为例。
\nnpm install @opentelemetry/api @opentelemetry/sdk-node \\\n @opentelemetry/resources \\\n @opentelemetry/semantic-conventions \\\n @opentelemetry/exporter-trace-otlp-http\n在应用入口（如 tracing.js）中添加：
const { NodeSDK } = require("@opentelemetry/sdk-node");\nconst { Resource } = require("@opentelemetry/resources");\nconst { SemanticResourceAttributes } = require("@opentelemetry/semantic-conventions");\nconst { OTLPTraceExporter } = require("@opentelemetry/exporter-trace-otlp-http");\nconst { OTLPMetricExporter } = require("@opentelemetry/exporter-metrics-otlp-http");\nconst { PeriodicExportingMetricReader } = require("@opentelemetry/sdk-metrics");\nconst { ParentBasedSampler, AlwaysOnSampler } = require("@opentelemetry/sdk-trace-base");\nconst { W3CTraceContextPropagator } = require("@opentelemetry/core");\n\nconst sdk = new NodeSDK({\n // 资源（Resource）：标识生成信号的实体，如服务名称与版本\n resource: new Resource({\n [SemanticResourceAttributes.SERVICE_NAME]: "your-service-name",\n [SemanticResourceAttributes.SERVICE_VERSION]: "1.0.0",\n }),\n // 采样（Sampler）：决定哪些 Traces 被导出\n sampler: new ParentBasedSampler({\n root: new AlwaysOnSampler(), // 始终采样所有 Traces\n }),\n // 传播（Propagator）：使用 W3C Trace Context 规范在服务间传递上下文\n textMapPropagator: new W3CTraceContextPropagator(),\n // 导出器（Exporter）：将 Trace 发送到 Collector\n traceExporter: new OTLPTraceExporter({\n url: "http://your-collector:4318/v1/traces",\n }),\n // 收集（Metric Reader）：周期性导出 Metric 数据\n metricReader: new PeriodicExportingMetricReader({\n exporter: new OTLPMetricExporter({\n url: "http://your-collector:4318/v1/metrics",\n }),\n exportIntervalMillis: 60000, // 每 60 秒导出一次\n }),\n});\n\nsdk.start()\n .then(() => console.log("Tracing & Metrics initialized"))\n .catch((error) => console.error("Error initializing SDK", error));\n通过 --require 在启动应用时加载该文件：
node --require ./tracing.js app.js\n在业务代码中获取 Tracer 并创建 Span：
const { trace } = require("@opentelemetry/api");\nconst tracer = trace.getTracer("example-tracer");\n\nfunction main() {\n const span = tracer.startSpan("main");\n // 业务逻辑...\n span.end();\n}\n\nmain();\n/** 生成（Generation）: 使用 Tracer 生成 Trace 信号 */\nconst { trace, metrics, propagation, context } = require("@opentelemetry/api");\n\n// Trace 示例\nconst tracer = trace.getTracer("demo-tracer", "1.0.0");\nconst span = tracer.startSpan("processOrder", {\n kind: trace.SpanKind.INTERNAL,\n attributes: { "order.id": "1234" }, // Resource & Semantic Conventions\n});\n// 在上下文中激活此 Span\nspan.setAttribute("processing.step", "validate");\nspan.end();\n\n/** 生成（Generation）: 使用 Meter 生成 Metric 信号 */\nconst meter = metrics.getMeter("demo-meter", "1.0.0");\nconst requestCount = meter.createCounter("requests.count", {\n description: "示例请求计数",\n});\n// 记录指标\nrequestCount.add(1, { route: "/placeOrder" });\n\n/** 生成（Generation）: 使用 Baggage 传递上下文信息 */\nconst userBaggage = propagation.createBaggage({\n "user-id": { value: "alice" },\n});\nconst ctxWithBaggage = propagation.setBaggage(context.active(), userBaggage);\n// 在后续调用中传递 ctxWithBaggage\n\n/** 导出（Export）与收集（Collect）由 SDK 初始化时的 Exporter 和 Collector 管道自动处理 */\n手动配置应用自身的 Instrumentation 之外，可以使用社区提供的 Instrumentations 来自动生成常用库的遥测数据：
\nconst { registerInstrumentations } = require("@opentelemetry/instrumentation");\nconst { HttpInstrumentation } = require("@opentelemetry/instrumentation-http");\nconst { ExpressInstrumentation } = require("@opentelemetry/instrumentation-express");\n\nregisterInstrumentations({\n instrumentations: [\n new HttpInstrumentation({\n // 配置 HTTP Span 属性\n ignoreIncomingPaths: ["/health"],\n }),\n new ExpressInstrumentation({\n requestHook: (span, req) => {\n span.setAttribute("express.route", req.route.path);\n },\n }),\n ],\n});\n默认情况下，SDK 不会打印调试信息。可通过环境变量开启诊断日志：
\nexport OTEL_LOG_LEVEL=debug\n可以将 Span 导出到控制台，帮助本地调试：
\nconst { ConsoleSpanExporter, SimpleSpanProcessor } = require("@opentelemetry/sdk-trace-base");\n// 在 SDK 初始化后或自定义 TracerProvider 时：\nsdk.configureTracerProvider((provider) => {\n provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));\n});\n在应用关闭时调用：
\nsdk.shutdown()\n .then(() => console.log("Tracing terminated"))\n .catch((error) => console.error("Error terminating tracing", error));\n\n\nMakefile Tutorial（源码），通过 Gemini 2.5 Flash 翻译
\n
我创建本指南是因为我一直无法完全理解 Makefiles。它们似乎充满了隐藏的规则和深奥的符号，而提出简单的问题却得不到简单的答案。为了解决这个问题，我花了几个周末阅读了所有关于 Makefiles 的资料。我将最关键的知识浓缩到本指南中。每个主题都有一个简短的描述和一个可以自行运行的独立示例。
\n如果您对 Make 有大致的了解，可以查看 Makefile Cookbook，其中包含一个适用于中型项目的模板，并对 Makefile 的每个部分的作用进行了充分的注释。
\n祝您好运，希望您能征服 Makefiles 令人困惑的世界！
\nMakefiles 用于帮助决定大型程序的哪些部分需要重新编译。在绝大多数情况下，C 或 C++ 文件会被编译。其他语言通常有自己的工具，其作用与 Make 类似。当您需要根据文件更改运行一系列指令时，Make 也可以用于编译之外的用途。本教程将重点介绍 C/C++ 编译用例。
\n这是一个您可以使用 Make 构建的依赖关系图示例。如果任何文件的依赖关系发生更改，则该文件将被重新编译：
\n![](\"https://makefiletutorial.com/assets/dependency_graph.png\"/)
\n流行的 C/C++ 替代构建系统有 SCons、CMake、Bazel 和 Ninja。一些代码编辑器，如 Microsoft Visual Studio，有自己的内置构建工具。对于 Java，有 Ant、Maven 和 Gradle。其他语言，如 Go、Rust 和 TypeScript，有自己的构建工具。
\n像 Python、Ruby 和原始 Javascript 这样的解释型语言不需要 Makefiles 的类似物。Makefiles 的目标是根据文件更改编译需要编译的任何文件。但是当解释型语言中的文件更改时，不需要重新编译任何东西。当程序运行时，使用文件的最新版本。
\nMake 有多种实现，但本指南的大部分内容适用于您正在使用的任何版本。但是，它专门为 GNU Make 编写，这是 Linux 和 MacOS 上的标准实现。所有示例都适用于 Make 版本 3 和 4，除了某些深奥的差异外，它们几乎是等效的。
\n要运行这些示例，您需要一个终端并安装“make”。对于每个示例，将内容放入名为 Makefile 的文件中，并在该目录中运行命令 make。让我们从最简单的 Makefile 开始：
hello:\n echo "Hello, World"\n\n\n注意：Makefiles 必须使用 TAB 缩进，而不是空格，否则
\nmake将失败。
以下是运行上述示例的输出：
\n$ make\necho "Hello, World"\nHello, World\n就是这样！如果您有点困惑，这里有一个视频，它将逐步介绍这些步骤，并描述 Makefiles 的基本结构。
\nMakefile 由一组规则组成。规则通常如下所示：
\ntargets: prerequisites\n command\n command\n command\n让我们从一个 hello world 示例开始：
\nhello:\n echo "Hello, World"\n echo "This line will print if the file hello does not exist."\n这里已经有很多内容了。让我们分解一下：
\nhello 的目标然后我们将运行 make hello。只要 hello 文件不存在，命令就会运行。如果 hello 存在，则不会运行任何命令。
重要的是要意识到我将 hello 既称为目标又称为文件。这是因为两者直接相关。通常，当运行目标（即运行目标的命令）时，命令将创建一个与目标同名的文件。在这种情况下，hello 目标不会创建 hello 文件。
让我们创建一个更典型的 Makefile——一个编译单个 C 文件的 Makefile。但在我们这样做之前，创建一个名为 blah.c 的文件，其内容如下：
// blah.c\nint main() { return 0; }\n然后创建 Makefile（一如既往地命名为 Makefile）：
blah:\n cc blah.c -o blah\n这次，尝试简单地运行 make。由于没有将目标作为参数提供给 make 命令，因此将运行第一个目标。在这种情况下，只有一个目标 (blah)。第一次运行此命令时，将创建 blah。第二次，您将看到 make: 'blah' is up to date。这是因为 blah 文件已经存在。但有一个问题：如果我们修改 blah.c 然后运行 make，则不会重新编译任何内容。
我们通过添加一个先决条件来解决这个问题：
\nblah: blah.c\n cc blah.c -o blah\n当我们再次运行 make 时，会发生以下一系列步骤：
blah.c 的先决条件blah 目标。它只会在 blah 不存在，或者 blah.c 比 blah 新时运行最后一步至关重要，也是 make 的精髓。它试图做的是决定 blah 的先决条件自 blah 上次编译以来是否已更改。也就是说，如果 blah.c 被修改，运行 make 应该重新编译该文件。反之，如果 blah.c 没有更改，则不应重新编译。
为了实现这一点，它使用文件系统时间戳作为代理来确定是否发生了更改。这是一个合理的启发式方法，因为文件时间戳通常只会在文件被修改时才会更改。但重要的是要意识到情况并非总是如此。例如，您可以修改一个文件，然后将该文件的修改时间戳更改为旧的。如果您这样做，Make 将错误地猜测该文件没有更改，因此可以忽略。
\n哎呀，真是一大堆。确保您理解这一点。这是 Makefiles 的核心，可能需要几分钟才能正确理解。如果仍然感到困惑，请尝试上述示例或观看上面的视频。
\n以下 Makefile 最终运行所有三个目标。当您在终端中运行 make 时，它将通过一系列步骤构建一个名为 blah 的程序：
blah，因为第一个目标是默认目标blah 需要 blah.o，因此 make 搜索 blah.o 目标blah.o 需要 blah.c，因此 make 搜索 blah.c 目标blah.c 没有依赖项，因此运行 echo 命令cc -c 命令，因为 blah.o 的所有依赖项都已完成cc 命令，因为 blah 的所有依赖项都已完成blah 是一个编译好的 C 程序blah: blah.o\n cc blah.o -o blah # Runs third\n\nblah.o: blah.c\n cc -c blah.c -o blah.o # Runs second\n\n# Typically blah.c would already exist, but I want to limit any additional required files\nblah.c:\n echo "int main() { return 0; }" > blah.c # Runs first\n如果您删除 blah.c，所有三个目标都将重新运行。如果您编辑它（从而将时间戳更改为比 blah.o 新），则前两个目标将运行。如果您运行 touch blah.o（从而将时间戳更改为比 blah 新），则只有第一个目标将运行。如果您不更改任何内容，则不会运行任何目标。试试看！
下一个示例没有做任何新的事情，但仍然是一个很好的附加示例。它将始终运行两个目标，因为 some_file 依赖于 other_file，而 other_file 从未创建。
some_file: other_file\n echo "This will always run, and runs second"\n touch some_file\n\nother_file:\n echo "This will always run, and runs first"\nclean 通常用作删除其他目标输出的目标，但它在 Make 中不是一个特殊词。您可以在此上运行 make 和 make clean 来创建和删除 some_file。
请注意，clean 在这里做了两件新事情：
make clean，否则它永远不会运行clean 的文件，此目标将不会运行，这不是我们想要的。请参阅本教程后面的 .PHONY，了解如何解决此问题some_file:\n touch some_file\n\nclean:\n rm -f some_file\n变量只能是字符串。您通常会希望使用 :=，但 = 也可以。请参阅 变量第 2 部分。
以下是使用变量的示例：
\nfiles := file1 file2\nsome_file: $(files)\n echo "Look at this variable: " $(files)\n touch some_file\n\nfile1:\n touch file1\nfile2:\n touch file2\n\nclean:\n rm -f file1 file2 some_file\n单引号或双引号对 Make 没有意义。它们只是分配给变量的字符。但是，引号对 shell/bash 有用，您在 printf 等命令中需要它们。在此示例中，这两个命令的行为相同：
a := one two# a is set to the string "one two"\nb := 'one two' # Not recommended. b is set to the string "'one two'"\nall:\n printf '$a'\n printf $b\n使用 ${} 或 $() 引用变量
x := dude\n\nall:\n echo $(x)\n echo ${x}\n\n # Bad practice, but works\n echo $x\n要制作多个目标并希望它们全部运行？创建一个 all 目标。\n由于这是列出的第一个规则，如果调用 make 时未指定目标，它将默认运行。
all: one two three\n\none:\n touch one\ntwo:\n touch two\nthree:\n touch three\n\nclean:\n rm -f one two three\n当一个规则有多个目标时，将为每个目标运行命令。$@ 是一个 自动变量，它包含目标名称。
all: f1.o f2.o\n\nf1.o f2.o:\n echo $@\n# Equivalent to:\n# f1.o:\n# \techo f1.o\n# f2.o:\n# \techo f2.o\n* 和 % 在 Make 中都称为通配符，但它们的意思完全不同。* 在您的文件系统中搜索匹配的文件名。我建议您始终将其包装在 wildcard 函数中，否则您可能会陷入下面描述的常见陷阱。
# Print out file information about every .c file\nprint: $(wildcard *.c)\n ls -la $?\n* 可用于目标、先决条件或 wildcard 函数中。
危险：* 不能直接用于变量定义中
危险：当 * 不匹配任何文件时，它会保持原样（除非在 wildcard 函数中运行）
thing_wrong := *.o # Don't do this! '*' will not get expanded\nthing_right := $(wildcard *.o)\n\nall: one two three four\n\n# Fails, because $(thing_wrong) is the string "*.o"\none: $(thing_wrong)\n\n# Stays as *.o if there are no files that match this pattern :(\ntwo: *.o\n\n# Works as you would expect! In this case, it does nothing.\nthree: $(thing_right)\n\n# Same as rule three\nfour: $(wildcard *.o)\n% 非常有用，但由于其在各种情况下的使用方式而有些令人困惑。
% 最常用于规则定义和某些特定函数中。请参阅以下部分，了解其使用示例：
\n\n有许多 自动变量，但通常只出现几个：
\nhey: one two\n # Outputs "hey", since this is the target name\n echo $@\n\n # Outputs all prerequisites newer than the target\n echo $?\n\n # Outputs all prerequisites\n echo $^\n\n # Outputs the first prerequisite\n echo $<\n\n touch hey\n\none:\n touch one\n\ntwo:\n touch two\n\nclean:\n rm -f hey one two\nMake 喜欢 C 编译。每次它表达它的爱时，事情都会变得混乱。Make 最令人困惑的部分可能是它所做的魔法/自动规则。Make 将这些称为“隐式”规则。我个人不同意这种设计决策，我不建议使用它们，但它们经常被使用，因此了解它们很有用。以下是隐式规则的列表：
\nn.o 自动从 n.c 生成，命令形式为 $(CC) -c $(CPPFLAGS) $(CFLAGS) $^ -o $@n.o 自动从 n.cc 或 n.cpp 生成，命令形式为 $(CXX) -c $(CPPFLAGS) $(CXXFLAGS) $^ -o $@n 自动从 n.o 生成，通过运行命令 $(CC) $(LDFLAGS) $^ $(LOADLIBES) $(LDLIBS) -o $@隐式规则使用的重要变量是：
\nCC：用于编译 C 程序的程序；默认 ccCXX：用于编译 C++ 程序的程序；默认 g++CFLAGS：提供给 C 编译器的额外标志CXXFLAGS：提供给 C++ 编译器的额外标志CPPFLAGS：提供给 C 预处理器的额外标志LDFLAGS：当编译器需要调用链接器时提供给编译器的额外标志让我们看看现在如何构建一个 C 程序，而无需明确告诉 Make 如何进行编译：
\nCC = gcc # Flag for implicit rules\nCFLAGS = -g # Flag for implicit rules. Turn on debug info\n\n# Implicit rule #1: blah is built via the C linker implicit rule\n# Implicit rule #2: blah.o is built via the C compilation implicit rule, because blah.c exists\nblah: blah.o\n\nblah.c:\n echo "int main() { return 0; }" > blah.c\n\nclean:\n rm -f blah*\n静态模式规则是 Makefile 中减少编写的另一种方式。以下是它们的语法：
\ntargets...: target-pattern: prereq-patterns ...\n commands\n其本质是给定的 target 通过 target-pattern（通过 % 通配符）匹配。匹配到的内容称为词干。然后将词干替换到 prereq-pattern 中，以生成目标的先决条件。
一个典型的用例是将 .c 文件编译成 .o 文件。以下是手动方式：
objects = foo.o bar.o all.o\nall: $(objects)\n $(CC) $^ -o all\n\nfoo.o: foo.c\n $(CC) -c foo.c -o foo.o\n\nbar.o: bar.c\n $(CC) -c bar.c -o bar.o\n\nall.o: all.c\n $(CC) -c all.c -o all.o\n\nall.c:\n echo "int main() { return 0; }" > all.c\n\n# Note: all.c does not use this rule because Make prioritizes more specific matches when there is more than one match.\n%.c:\n touch $@\n\nclean:\n rm -f *.c *.o all\n以下是更高效的方式，使用静态模式规则：
\nobjects = foo.o bar.o all.o\nall: $(objects)\n $(CC) $^ -o all\n\n# Syntax - targets ...: target-pattern: prereq-patterns ...\n# In the case of the first target, foo.o, the target-pattern matches foo.o and sets the "stem" to be "foo".\n# It then replaces the '%' in prereq-patterns with that stem\n$(objects): %.o: %.c\n $(CC) -c $^ -o $@\n\nall.c:\n echo "int main() { return 0; }" > all.c\n\n# Note: all.c does not use this rule because Make prioritizes more specific matches when there is more than one match.\n%.c:\n touch $@\n\nclean:\n rm -f *.c *.o all\n虽然我稍后会介绍 filter 函数，但它在静态模式规则中很常用，所以我会在这里提及。filter 函数可以在静态模式规则中使用，以匹配正确的文件。在此示例中，我创建了 .raw 和 .result 扩展名。
obj_files = foo.result bar.o lose.o\nsrc_files = foo.raw bar.c lose.c\n\nall: $(obj_files)\n# Note: PHONY is important here. Without it, implicit rules will try to build the executable "all", since the prereqs are ".o" files.\n.PHONY: all\n\n# Ex 1: .o files depend on .c files. Though we don't actually make the .o file.\n$(filter %.o,$(obj_files)): %.o: %.c\n echo "target: $@ prereq: $<"\n\n# Ex 2: .result files depend on .raw files. Though we don't actually make the .result file.\n$(filter %.result,$(obj_files)): %.result: %.raw\n echo "target: $@ prereq: $<"\n\n%.c %.raw:\n touch $@\n\nclean:\n rm -f $(src_files)\n模式规则经常使用，但相当令人困惑。您可以从两个方面来看待它们：
\n让我们先看一个例子：
\n# Define a pattern rule that compiles every .c file into a .o file\n%.o : %.c\n $(CC) -c $(CFLAGS) $(CPPFLAGS) $< -o $@\n模式规则在目标中包含一个 '%'。这个 '%' 匹配任何非空字符串，而其他字符匹配它们自己。模式规则的先决条件中的 '%' 代表与目标中的 '%' 匹配的相同词干。
\n这是另一个例子：
\n# Define a pattern rule that has no pattern in the prerequisites.\n# This just creates empty .c files when needed.\n%.c:\n touch $@\n双冒号规则很少使用，但允许为同一目标定义多个规则。如果这些是单冒号，则会打印警告，并且只有第二组命令会运行。
\nall: blah\n\nblah::\n echo "hello"\n\nblah::\n echo "hello again"\n在命令前添加 @ 以阻止其打印\n您还可以使用 -s 运行 make，以便在每行前添加 @
all:\n @echo "This make line will not be printed"\n echo "But this will"\n每个命令都在一个新的 shell 中运行（或者至少效果是如此）
\nall:\n cd ..\n # The cd above does not affect this line, because each command is effectively run in a new shell\n echo `pwd`\n\n # This cd command affects the next because they are on the same line\n cd ..;echo `pwd`\n\n # Same as above\n cd ..; \\\n echo `pwd`\n默认 shell 是 /bin/sh。您可以通过更改变量 SHELL 来更改它：
SHELL=/bin/bash\n\ncool:\n echo "Hello from bash"\n如果您希望字符串中包含美元符号，可以使用 $$。这是在 bash 或 sh 中使用 shell 变量的方法。
请注意下一个示例中 Makefile 变量和 Shell 变量之间的区别。
\nmake_var = I am a make variable\nall:\n # Same as running "sh_var='I am a shell variable'; echo $sh_var" in the shell\n sh_var='I am a shell variable'; echo $$sh_var\n\n # Same as running "echo I am a make variable" in the shell\n echo $(make_var)\n-k、-i 和 -运行 make 时添加 -k，即使出现错误也继续运行。如果您想一次性查看 Make 的所有错误，这很有帮助。\n在命令前添加 - 以抑制错误\n向 make 添加 -i 以使每个命令都发生这种情况。
one:\n # This error will be printed but ignored, and make will continue to run\n -false\n touch one\n注意：如果您 ctrl+c make，它将删除刚刚创建的较新目标。
要递归调用 makefile，请使用特殊的 $(MAKE) 而不是 make，因为它会为您传递 make 标志，并且本身不会受其影响。
new_contents = "hello:\\n\\ttouch inside_file"\nall:\n mkdir -p subdir\n printf $(new_contents) | sed -e 's/^ //' > subdir/makefile\n cd subdir && $(MAKE)\n\nclean:\n rm -rf subdir\n当 Make 启动时，它会自动从执行时设置的所有环境变量中创建 Make 变量。
\n# Run this with "export shell_env_var='I am an environment variable'; make"\nall:\n # Print out the Shell variable\n echo $$shell_env_var\n\n # Print out the Make variable\n echo $(shell_env_var)\nexport 指令获取一个变量并将其设置为所有配方中所有 shell 命令的环境：
shell_env_var=Shell env var, created inside of Make\nexport shell_env_var\nall:\n echo $(shell_env_var)\n echo $$shell_env_var\n因此，当您在 make 中运行 make 命令时，您可以使用 export 指令使其可供子 make 命令访问。在此示例中，cooly 被导出，以便 subdir 中的 makefile 可以使用它。
new_contents = "hello:\\n\\techo \\$$(cooly)"\n\nall:\n mkdir -p subdir\n printf $(new_contents) | sed -e 's/^ //' > subdir/makefile\n @echo "---MAKEFILE CONTENTS---"\n @cd subdir && cat makefile\n @echo "---END MAKEFILE CONTENTS---"\n cd subdir && $(MAKE)\n\n# Note that variables and exports. They are set/affected globally.\ncooly = "The subdirectory can see me!"\nexport cooly\n# This would nullify the line above: unexport cooly\n\nclean:\n rm -rf subdir\n您需要导出变量才能在 shell 中运行它们。
\none=this will only work locally\nexport two=we can run subcommands with this\n\nall:\n @echo $(one)\n @echo $$one\n @echo $(two)\n @echo $$two\n.EXPORT_ALL_VARIABLES 为您导出所有变量。
.EXPORT_ALL_VARIABLES:\nnew_contents = "hello:\\n\\techo \\$$(cooly)"\n\ncooly = "The subdirectory can see me!"\n# This would nullify the line above: unexport cooly\n\nall:\n mkdir -p subdir\n printf $(new_contents) | sed -e 's/^ //' > subdir/makefile\n @echo "---MAKEFILE CONTENTS---"\n @cd subdir && cat makefile\n @echo "---END MAKEFILE CONTENTS---"\n cd subdir && $(MAKE)\n\nclean:\n rm -rf subdir\n有一个很好的 选项列表 可以从 make 运行。查看 --dry-run、--touch、--old-file。
您可以有多个目标要制作，即 make clean run test 运行 clean 目标，然后是 run，然后是 test。
变量有两种风格：
\n=） - 仅在命令使用时查找变量，而不是在命令定义时查找。:=） - 像正常的命令式编程一样 -- 只有到目前为止定义的变量才会被扩展# Recursive variable. This will print "later" below\none = one ${later_variable}\n# Simply expanded variable. This will not print "later" below\ntwo := two ${later_variable}\n\nlater_variable = later\n\nall:\n echo $(one)\n echo $(two)\n简单扩展（使用 :=）允许您向变量追加。递归定义将导致无限循环错误。
one = hello\n# one gets defined as a simply expanded variable (:=) and thus can handle appending\none := ${one} there\n\nall:\n echo $(one)\n?= 仅在变量尚未设置时才设置变量
one = hello\none ?= will not be set\ntwo ?= will be set\n\nall:\n echo $(one)\n echo $(two)\n行尾的空格不会被删除，但开头的空格会被删除。要创建一个包含单个空格的变量，请使用 $(nullstring)
with_spaces = hello # with_spaces has many spaces after "hello"\nafter = $(with_spaces)there\n\nnullstring =\nspace = $(nullstring) # Make a variable with a single space.\n\nall:\n echo "$(after)"\n echo start"$(space)"end\n未定义的变量实际上是一个空字符串！
\nall:\n # Undefined variables are just empty strings!\n echo $(nowhere)\n使用 += 追加
foo := start\nfoo += more\n\nall:\n echo $(foo)\n字符串替换 也是一种非常常见且有用的修改变量的方法。另请查看 文本函数 和 文件名函数。
\n您可以使用 override 覆盖来自命令行的变量。\n这里我们使用 make option_one=hi 运行 make
# Overrides command line arguments\noverride option_one = did_override\n# Does not override command line arguments\noption_two = not_override\nall:\n echo $(option_one)\n echo $(option_two)\ndefine 指令 不是一个函数，尽管它可能看起来像那样。我很少看到它被使用，所以我不会详细介绍，但它主要用于定义 预设配方，并且与 eval 函数 配合得很好。
\ndefine/endef 只是创建一个变量，该变量设置为命令列表。请注意，这与命令之间用分号分隔略有不同，因为每个命令都在单独的 shell 中运行，正如预期的那样。
one = export blah="I was set!"; echo $$blah\n\ndefine two\nexport blah="I was set!"\necho $$blah\nendef\n\nall:\n @echo "This prints 'I was set'"\n @$(one)\n @echo "This does not print 'I was set' because each command runs in a separate shell"\n @$(two)\n可以为特定目标设置变量
\nall: one = cool\n\nall:\n echo one is defined: $(one)\n\nother:\n echo one is nothing: $(one)\n您可以为特定目标模式设置变量
\n%.c: one = cool\n\nblah.c:\n echo one is defined: $(one)\n\nother:\n echo one is nothing: $(one)\nfoo = ok\n\nall:\nifeq ($(foo), ok)\n echo "foo equals ok"\nelse\n echo "nope"\nendif\nnullstring =\nfoo = $(nullstring) # end of line; there is a space here\n\nall:\nifeq ($(strip $(foo)),)\n echo "foo is empty after being stripped"\nendif\nifeq ($(nullstring),)\n echo "nullstring doesn't even have spaces"\nendif\nifdef 不会扩展变量引用；它只是查看是否定义了任何内容
\nbar =\nfoo = $(bar)\n\nall:\nifdef foo\n echo "foo is defined"\nendif\nifndef bar\n echo "but bar is not"\nendif\n此示例向您展示如何使用 findstring 和 MAKEFLAGS 测试 make 标志。使用 make -i 运行此示例，以查看它打印 echo 语句。
all:\n# Search for the "-i" flag. MAKEFLAGS is just a list of single characters, one per flag. So look for "i" in this case.\nifneq (,$(findstring i, $(MAKEFLAGS)))\n echo "i was passed to MAKEFLAGS"\nendif\n函数主要用于文本处理。使用 $(fn, arguments) 或 ${fn, arguments} 调用函数。Make 有相当多的 内置函数。
bar := ${subst not,"totally", "I am not superman"}\nall:\n @echo $(bar)\n如果要替换空格或逗号，请使用变量
\ncomma := ,\nempty:=\nspace := $(empty) $(empty)\nfoo := a b c\nbar := $(subst $(space),$(comma),$(foo))\n\nall:\n @echo $(bar)\n第一个参数之后不要包含空格。那将被视为字符串的一部分。
\ncomma := ,\nempty:=\nspace := $(empty) $(empty)\nfoo := a b c\nbar := $(subst $(space), $(comma) , $(foo)) # Watch out!\n\nall:\n # Output is ", a , b , c". Notice the spaces introduced\n @echo $(bar)\n$(patsubst pattern,replacement,text) 执行以下操作：
“在文本中查找与模式匹配的以空格分隔的单词，并将其替换为 replacement。这里的模式可以包含一个 '%'，它充当通配符，匹配单词中的任意数量的任意字符。如果 replacement 也包含一个 '%'，则该 '%' 将被模式中匹配 '%' 的文本替换。只有模式和 replacement 中的第一个 '%' 以这种方式处理；任何后续的 '%' 保持不变。”（GNU 文档）
\n替换引用 $(text:pattern=replacement) 是上述的简写。
还有另一种简写，只替换后缀：$(text:suffix=replacement)。这里不使用 % 通配符。
注意：不要为此简写添加额外的空格。它将被视为搜索或替换项。
\nfoo := a.o b.o l.a c.o\none := $(patsubst %.o,%.c,$(foo))\n# This is a shorthand for the above\ntwo := $(foo:%.o=%.c)\n# This is the suffix-only shorthand, and is also equivalent to the above.\nthree := $(foo:.o=.c)\n\nall:\n echo $(one)\n echo $(two)\n echo $(three)\nforeach 函数如下所示：$(foreach var,list,text)。它将一个单词列表（以空格分隔）转换为另一个单词列表。var 被设置为列表中的每个单词，并且 text 为每个单词展开。\n这会在每个单词后附加一个感叹号：
foo := who are you\n# For each "word" in foo, output that same word with an exclamation after\nbar := $(foreach wrd,$(foo),$(wrd)!)\n\nall:\n # Output is "who! are! you!"\n @echo $(bar)\nif 检查第一个参数是否非空。如果非空，则运行第二个参数，否则运行第三个参数。
foo := $(if this-is-not-empty,then!,else!)\nempty :=\nbar := $(if $(empty),then!,else!)\n\nall:\n @echo $(foo)\n @echo $(bar)\nMake 支持创建基本函数。您只需通过创建变量来“定义”函数，但使用参数 $(0)、$(1) 等。然后使用特殊的 call 内置函数调用该函数。语法是 $(call variable,param,param)。$(0) 是变量，而 $(1)、$(2) 等是参数。
sweet_new_fn = Variable Name: $(0) First: $(1) Second: $(2) Empty Variable: $(3)\n\nall:\n # Outputs "Variable Name: sweet_new_fn First: go Second: tigers Empty Variable:"\n @echo $(call sweet_new_fn, go, tigers)\nshell - 这会调用 shell，但它会将换行符替换为空格！
\nall:\n @echo $(shell ls -la) # Very ugly because the newlines are gone!\nfilter 函数用于从列表中选择与特定模式匹配的某些元素。例如，这将选择 obj_files 中所有以 .o 结尾的元素。
obj_files = foo.result bar.o lose.o\nfiltered_files = $(filter %.o,$(obj_files))\n\nall:\n @echo $(filtered_files)\nFilter 也可以以更复杂的方式使用：
\n过滤多个模式：您可以一次过滤多个模式。例如，$(filter %.c %.h, $(files)) 将从文件列表中选择所有 .c 和 .h 文件。
否定：如果您想选择所有不匹配模式的元素，可以使用 filter-out。例如，$(filter-out %.h, $(files)) 将选择所有不是 .h 文件的文件。
嵌套过滤器：您可以嵌套过滤器函数以应用多个过滤器。例如，$(filter %.o, $(filter-out test%, $(objects))) 将选择所有以 .o 结尾但不以 test 开头的对象文件。
include 指令告诉 make 读取一个或多个其他 makefile。它是 makefile 中的一行，看起来像这样：
\ninclude filenames...\n当您使用 -M 等编译器标志根据源文件创建 Makefiles 时，这尤其有用。例如，如果某些 C 文件包含一个头文件，该头文件将被添加到由 gcc 编写的 Makefile 中。我在 Makefile Cookbook 中对此进行了更多讨论。
使用 vpath 指定某些先决条件存在的位置。格式为 vpath <pattern> <directories, space/colon separated>\n<pattern> 可以包含一个 %，它匹配任意零个或多个字符。\n您也可以使用变量 VPATH 全局地执行此操作
vpath %.h ../headers ../other-directory\n\n# Note: vpath allows blah.h to be found even though blah.h is never in the current directory\nsome_binary: ../headers blah.h\n touch some_binary\n\n../headers:\n mkdir ../headers\n\n# We call the target blah.h instead of ../headers/blah.h, because that's the prereq that some_binary is looking for\n# Typically, blah.h would already exist and you wouldn't need this.\nblah.h:\n touch ../headers/blah.h\n\nclean:\n rm -rf ../headers\n rm -f some_binary\n反斜杠 ("\\") 字符使我们能够在命令过长时使用多行
\nsome_file:\n echo This line is too long, so \\\n it is broken up into multiple lines\n将 .PHONY 添加到目标将防止 Make 将虚假目标与文件名混淆。在此示例中，如果创建了文件 clean，make clean 仍将运行。从技术上讲，我应该在每个带有 all 或 clean 的示例中使用它，但我想保持示例的简洁。此外，“虚假”目标的名称通常很少是文件名，实际上许多人会跳过此步骤。
some_file:\n touch some_file\n touch clean\n\n.PHONY: clean\nclean:\n rm -f some_file\n rm -f clean\n如果命令返回非零退出状态，make 工具将停止运行规则（并将传播回先决条件）。\nDELETE_ON_ERROR 将在规则以这种方式失败时删除规则的目标。这将适用于所有目标，而不仅仅是它之前的目标，例如 PHONY。始终使用此功能是个好主意，尽管出于历史原因 make 没有这样做。
.DELETE_ON_ERROR:\nall: one two\n\none:\n touch one\n false\n\ntwo:\n touch two\n false\n让我们来看一个非常棒的 Make 示例，它非常适用于中型项目。
\n这个 makefile 的巧妙之处在于它会自动为您确定依赖关系。您所要做的就是将 C/C++ 文件放入 src/ 文件夹中。
# Thanks to Job Vranish (https://spin.atomicobject.com/2016/08/26/makefile-c-projects/)\nTARGET_EXEC := final_program\n\nBUILD_DIR := ./build\nSRC_DIRS := ./src\n\n# Find all the C and C++ files we want to compile\n# Note the single quotes around the * expressions. The shell will incorrectly expand these otherwise, but we want to send the * directly to the find command.\nSRCS := $(shell find $(SRC_DIRS) -name '*.cpp' -or -name '*.c' -or -name '*.s')\n\n# Prepends BUILD_DIR and appends .o to every src file\n# As an example, ./your_dir/hello.cpp turns into ./build/./your_dir/hello.cpp.o\nOBJS := $(SRCS:%=$(BUILD_DIR)/%.o)\n\n# String substitution (suffix version without %).\n# As an example, ./build/hello.cpp.o turns into ./build/hello.cpp.d\nDEPS := $(OBJS:.o=.d)\n\n# Every folder in ./src will need to be passed to GCC so that it can find header files\nINC_DIRS := $(shell find $(SRC_DIRS) -type d)\n# Add a prefix to INC_DIRS. So moduleA would become -ImoduleA. GCC understands this -I flag\nINC_FLAGS := $(addprefix -I,$(INC_DIRS))\n\n# The -MMD and -MP flags together generate Makefiles for us!\n# These files will have .d instead of .o as the output.\nCPPFLAGS := $(INC_FLAGS) -MMD -MP\n\n# The final build step.\n$(BUILD_DIR)/$(TARGET_EXEC): $(OBJS)\n $(CXX) $(OBJS) -o $@ $(LDFLAGS)\n\n# Build step for C source\n$(BUILD_DIR)/%.c.o: %.c\n mkdir -p $(dir $@)\n $(CC) $(CPPFLAGS) $(CFLAGS) -c $< -o $@\n\n# Build step for C++ source\n$(BUILD_DIR)/%.cpp.o: %.cpp\n mkdir -p $(dir $@)\n $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c $< -o $@\n\n\n.PHONY: clean\nclean:\n rm -r $(BUILD_DIR)\n\n# Include the .d makefiles. The - at the front suppresses the errors of missing\n# Makefiles. Initially, all the .d files will be missing, and we don't want those\n# errors to show up.\n-include $(DEPS)\n从源码运行一个普通脚本：首先创建上下文对象，然后创建 vm.Script 对象，最后执行之。
\n上下文对象是通过使一个普通对象 “contextify” 来创建的，可通过 vm.isContext 判断一个对象是否是 contextified 对象。
import vm from "node:vm";\n\nconst script = new vm.Script(\n /*js*/ `\n function add(a, b) {\n // console 实际上是 globalThis.console \n console.log("Called times: " + globalThis.count++);\n return a + b;\n }\n \n const x = add(1, 2);\n const y = add(3, 4);\n "eXpression";\n`,\n {\n // 所有选项都是可选的\n filename: "evalmachine.<anonymous>",\n lineOffset: 0,\n columnOffset: 0,\n },\n);\n\nconst context: vm.Context = vm.createContext(\n { count: 666, console },\n {\n name: "VM Context 0",\n origin: "file://test.js",\n codeGeneration: {\n strings: true,\n wasm: true,\n },\n microtaskMode: "afterEvaluate",\n },\n);\n\n// 返回表达式的值\nconst result = script.runInContext(context, {\n displayErrors: true,\n timeout: 1234,\n});\nconsole.log(result); // => "eXpression"\n也可以从源码编译一个函数。
\nconst parsingContext: vm.Context = vm.createContext(vm.constants.DONT_CONTEXTIFY);\nparsingContext["console"] = console;\nconst fn: Function = vm.compileFunction(`return console.log(a + b)`, ["a", "b"] as const, {\n parsingContext, // 编译该函数的上下文对象\n contextExtensions: [],\n produceCachedData: false,\n cachedData: Buffer.from("nope"),\n});\n\nfn("Hello, ", "World!"); // => Hello, World!\nvm.runInThisContext() 与 [eval()][https://tc39.es/ecma262/#sec-eval-x] 的区别在于 vm.runInThisContext() 无权访问本地作用域，但 eval() 则可以。
因此 vm.runInThisContext() 类似于 indirect eval() call
const vm = require("node:vm");\nlet localVar = "initial value";\n\nconst vmResult = vm.runInThisContext('localVar = "vm";');\nconsole.log(`vmResult: '${vmResult}', localVar: '${localVar}'`);\n// => vmResult: 'vm', localVar: 'initial value'\n\nconst evalResult = eval('localVar = "eval";');\nconsole.log(`evalResult: '${evalResult}', localVar: '${localVar}'`);\n// => evalResult: 'eval', localVar: 'eval'\n所有在 Node.js 中执行的 JavaScript 代码都在“上下文”的范围内运行。根据 V8 嵌入器指南：
\n在 V8 中，上下文是一个执行环境，它允许独立的、不相关的 JavaScript 应用程序在单个 V8 实例中运行。必须显式指定要运行任何 JavaScript 代码的上下文。\n当传入对象来调用方法 vm.createContext() 时，contextObject 参数将用于包装 V8 上下文新实例的全局对象（如果 contextObject 是 undefined，则将在 contextified 之前从当前上下文创建一个新对象）。
此 V8 上下文为使用 node:vm 模块的方法运行的代码提供了一个隔离的全局环境，代码可以在其中运行。创建 V8 上下文并将其与外部上下文中的 contextObject 关联的过程就是“contextifying”对象。
contextifying 会给上下文中的 globalThis 值引入一些怪异之处。例如，它不能被冻结，并且它与外部上下文中的 contextObject 的引用不相等。
const vm = require("node:vm");\n\n// `contextObject` 选项指定为 undefined，来使全局对象 contextified。\nconst context = vm.createContext();\nconsole.log(vm.runInContext("globalThis", context) === context); // false\n// 一个 contextified 的全局对象不能被冻结。\ntry {\n vm.runInContext("Object.freeze(globalThis);", context);\n} catch (e) {\n console.log(e); // TypeError: Cannot freeze\n}\nconsole.log(vm.runInContext("globalThis.foo = 1; foo;", context)); // 1\n要创建一个具有普通全局对象的上下文，并在外部上下文中访问一个怪异之处较少的全局代理，可将 contextObject 参数指定为 vm.constants.DONT_CONTEXTIFY。
vm.Module 表示 Module Recordvm.SourceTextModule Source Text Module Recordvm.SyntheticModule Synthetic Module RecordclassDiagram\n vm.Module <|-- vm.SourceTextModule\n vm.Module <|-- vm.SyntheticModule\n执行流程如下，与 ECMA262 一致。
\nstateDiagram-v2\n [*] --> unlinked\n unlinked --> linking : module.link()\n linking --> linked : All linker Promises resolved\n linked --> evaluating : module.evaluate()\n evaluating --> evaluated : Successfully evaluated\n evaluating --> errored : Exception thrown\n evaluated --> [*]\n errored --> [*]\n\n\n备注：通过
\nnode --experimental-vm-modules --experimental-strip-types demo.ts运行下面的代码
import vm from "node:vm";\nimport type { ImportAttributes } from "node:module";\n\nconst contextifiedObject = vm.createContext({\n secret: 42,\n print: console.log,\n});\n\n// Step 1\n//\n// 通过构造一个新的 `vm.SourceTextModule` 对象来创建一个模块。\n// 这会解析提供的源代码文本，如果出现任何问题，则抛出一个 `SyntaxError`。\n// 默认情况下，模块是在顶层上下文中创建的。但在这里，我们指定 `contextifiedObject` 作为此模块所属的上下文。\n//\n// 这里，我们尝试从模块 "foo" 中获取默认导出，并将其放入本地绑定 "secret" 中。\nconst bar: vm.Module = new vm.SourceTextModule(\n /*js*/ `\n import s from 'foo';\n s;\n print(s);\n export let abc = import.meta['abc']; // -> 123\n import("s")\n`,\n {\n // 所有选项都是可选的\n context: contextifiedObject,\n identifier: "vm:module(0)",\n initializeImportMeta(meta, module: vm.SourceTextModule): void {\n meta["abc"] = 123; // <-\n console.assert(module === bar);\n },\n async importModuleDynamically(specifier: string, script, importAttributes): Promise<vm.Module> {\n console.log(specifier, script, importAttributes);\n throw new Error(`Dynamic import not supported: ${specifier}`);\n },\n },\n);\n// Cyclic Module Record [[Status]]\nconsole.assert(bar.status === "unlinked");\nconsole.assert(bar.context === contextifiedObject);\nconsole.assert(bar.identifier === "vm:module(0)");\n// Cyclic Module Record [[RequestedModules]]\nconsole.log(bar.dependencySpecifiers); // => ["foo"]\n\n// Step 2\n//\n// 将此模块导入的依赖项“链接”到它。\n//\n// 提供的链接回调（“linker”）接受两个参数：父模块（在本例中为 `bar`）和作为导入模块标识符的字符串。\n// 回调应返回与提供的标识符相对应的模块，并满足 `module.link()` 中记录的某些要求。\n//\n// 如果返回的模块尚未开始链接，则将在返回的模块上调用相同的 linker 回调。\n//\n// 即使是没有依赖项的顶层模块也必须显式链接。但是，提供的回调永远不会被调用。\n//\n// link() 方法返回一个 Promise，当 linker 返回的所有 Promise 都解析时，该 Promise 将被解析。\n//\n// 注意：这是一个人为的例子，因为 linker 函数每次调用时都会创建一个新的 "foo" 模块。\n// 在一个成熟的模块系统中，可能会使用缓存来避免重复的模块。\n\n// Cyclic Module Record Link()\nasync function linker(\n specifier: string,\n referencingModule: vm.Module,\n extra: {\n attributes: ImportAttributes;\n },\n): Promise<vm.Module> {\n if (specifier === "foo") {\n return new vm.SourceTextModule(\n /*js*/ `\n // "secret" 变量指的是我们在创建上下文时添加到 "contextifiedObject" 的全局变量。\n export default secret;`,\n // 这里使用 `contextifiedObject` 代替 `referencingModule.context` 也可以。\n { context: referencingModule.context },\n );\n }\n throw new Error(`Unable to resolve dependency: ${specifier}`);\n}\nawait bar.link(linker);\nconsole.assert(bar.status === "linked");\n\n// Step 3\n//\n// 评估模块。evaluate() 方法返回一个 promise，该 promise 将在模块完成评估后 resolve。\n\n// 打印 42。\nawait bar.evaluate();\nconsole.assert(bar.status === "evaluated");\n// GetModuleNamespace 返回 Module Namespace Object：包含所有导出绑定\nconsole.log(bar.namespace); // => { abc: 123 }\n\nif (bar.status === "errored") {\n // Cyclic Module Record [[EvaluationError]]\n console.error(bar.error);\n}\n合成模块（vm.SyntheticModule）的作用是提供一个通用接口，使非 JavaScript 源代码能够暴露于 ECMAScript 模块图中。
\nimport vm from "node:vm";\nconst source = `{ "a": 1 }`;\nconst module = new vm.SyntheticModule(["default"], function (this: vm.SyntheticModule) {\n const obj = JSON.parse(source);\n this.setExport("default", obj);\n});\n\nawait module.link((specifier, referencingModule, { attributes }) => {});\nawait module.evaluate();\nconsole.log(module.namespace); // => [Module: null prototype] { default: { a: 1 } }\n\n\n下面纯翻译 https://github.com/nodejs/node/blob/main/doc/api/vm.md
\n
Promise 和 async function 可以异步地调度由 JavaScript 引擎运行的任务。默认情况下，这些任务在当前堆栈上的所有 JavaScript 函数执行完毕后运行。这允许绕过 timeout 和 breakOnSigint 选项的功能。
例如，以下代码由 vm.runInNewContext() 执行，超时时间为 5 毫秒，它调度一个无限循环在 promise resolve 之后运行。 计划的循环永远不会被超时中断：
const vm = require("node:vm");\n\nfunction loop() {\n console.log("entering loop");\n while (1) console.log(Date.now());\n}\n\nvm.runInNewContext("Promise.resolve().then(() => loop());", { loop, console }, { timeout: 5 });\n// 这会在 'entering loop' *之前* 打印 (!)\nconsole.log("done executing");\n可以通过将 microtaskMode: 'afterEvaluate' 传递给创建 Context 的代码来解决此问题：
const vm = require("node:vm");\n\nfunction loop() {\n while (1) console.log(Date.now());\n}\n\nvm.runInNewContext(\n "Promise.resolve().then(() => loop());",\n { loop, console },\n { timeout: 5, microtaskMode: "afterEvaluate" },\n);\n在这种情况下，通过 promise.then() 调度的微任务将在从 vm.runInNewContext() 返回之前运行，并且将被 timeout 功能中断。 这仅适用于在 vm.Context 中运行的代码，因此例如 vm.runInThisContext() 不采用此选项。
Promise 回调被输入到创建它们的上下文的微任务队列中。 例如，如果在上面的示例中将 () => loop() 替换为 loop，则 loop 将被推送到全局微任务队列中，因为它是一个来自外部（主）上下文的函数，因此也能够逃避超时。
如果异步调度函数（例如 process.nextTick()、queueMicrotask()、setTimeout()、setImmediate() 等）在 vm.Context 中可用，则传递给它们的函数将被添加到全局队列中，这些队列由所有上下文共享。 因此，传递给这些函数的回调也不能通过超时来控制。
import() 的支持以下 API 支持 importModuleDynamically 选项，以在 vm 模块编译的代码中启用动态 import()。
new vm.Scriptvm.compileFunction()new vm.SourceTextModulevm.runInThisContext()vm.runInContext()vm.runInNewContext()vm.createContext()此选项仍然是实验性模块 API 的一部分。 我们不建议在生产环境中使用它。
\nimportModuleDynamically 选项时如果未指定此选项，或者如果它是 undefined，则包含 import() 的代码仍然可以由 vm API 编译，但是当编译后的代码被执行并且它实际调用 import() 时，结果将拒绝并返回 ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING。
importModuleDynamically 为 vm.constants.USE_MAIN_CONTEXT_DEFAULT_LOADER 时vm.SourceTextModule 当前不支持此选项。
使用此选项，当在编译后的代码中启动 import() 时，Node.js 将使用主上下文中的默认 ESM 加载器来加载请求的模块并将其返回给正在执行的代码。
这使编译后的代码可以访问 Node.js 内置模块，例如 fs 或 http。 如果代码在不同的上下文中执行，请注意，从主上下文加载的模块创建的对象仍然来自主上下文，而不是新上下文中内置类的 instanceof。
import { Script, constants } from "node:vm";\n\nconst script = new Script('import("node:fs").then(({readFile}) => readFile instanceof Function)', {\n importModuleDynamically: constants.USE_MAIN_CONTEXT_DEFAULT_LOADER,\n});\n\n// false: 从主上下文加载的 URL 不是新上下文中 Function 类的实例。\nscript.runInNewContext().then(console.log);\n此选项还允许脚本或函数加载用户模块：
\nimport { Script, constants } from "node:vm";\nimport { resolve } from "node:path";\nimport { writeFileSync } from "node:fs";\n\n// 将 test.js 和 test.txt 写入当前脚本正在运行的目录。\nwriteFileSync(resolve(import.meta.dirname, "test.mjs"), 'export const filename = "./test.json";');\nwriteFileSync(resolve(import.meta.dirname, "test.json"), '{"hello": "world"}');\n\n// 编译一个加载 test.mjs 然后加载 test.json 的脚本\n// 就像脚本放置在同一目录中一样。\nconst script = new Script(\n `(async function() {\n const { filename } = await import('./test.mjs');\n return import(filename, { with: { type: 'json' } })\n })();`,\n {\n filename: resolve(import.meta.dirname, "test-with-default.js"),\n importModuleDynamically: constants.USE_MAIN_CONTEXT_DEFAULT_LOADER,\n },\n);\n\n// { default: { hello: 'world' } }\nscript.runInThisContext().then(console.log);\n使用主上下文中的默认加载器加载用户模块存在一些注意事项：
\nvm.Script 或 vm.compileFunction() 的 filename 选项。 该解析可以使用 filename，该 filename 是绝对路径或 URL 字符串。 如果 filename 是既不是绝对路径也不是 URL 的字符串，或者如果它是未定义的，则解析将相对于进程的当前工作目录。 在 vm.createContext() 的情况下，解析始终相对于当前工作目录，因为此选项仅在没有引用脚本或模块时使用。filename，一旦进程设法从该路径加载特定模块，结果可能会被缓存，并且随后从同一路径加载同一模块将返回相同的内容。 如果 filename 是 URL 字符串，则如果它具有不同的搜索参数，则不会命中缓存。 对于不是 URL 字符串的 filename，目前没有办法绕过缓存行为。importModuleDynamically 是一个函数时当 importModuleDynamically 是一个函数时，当在编译后的代码中调用 import() 时，将调用它，以便用户可以自定义应如何编译和评估请求的模块。 目前，必须使用 --experimental-vm-modules 标志启动 Node.js 实例，此选项才能工作。 如果未设置该标志，则将忽略此回调。 如果评估的代码实际调用 import()，则结果将拒绝并返回 ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING_FLAG。
回调 importModuleDynamically(specifier, referrer, importAttributes) 具有以下签名：
specifier {string} 传递给 import() 的说明符referrer {vm.Script|Function|vm.SourceTextModule|Object}\n对于 new vm.Script、vm.runInThisContext、vm.runInContext 和 vm.runInNewContext，referrer 是编译后的 vm.Script。 对于 vm.compileFunction，它是编译后的 Function，对于 new vm.SourceTextModule，它是编译后的 vm.SourceTextModule，对于 vm.createContext()，它是上下文 Object。importAttributes {Object} 传递给 [optionsExpression][https://tc39.es/proposal-import-attributes/#sec-evaluate-import-call] 可选参数的 "with" 值，如果没有提供值，则为空对象。phase {string} 动态导入的阶段（"source" 或 "evaluation"）。vm.Module，以便利用错误跟踪，并避免包含 then 函数导出的命名空间的问题。import { Script, SyntheticModule } from "node:vm";\n\nconst script = new Script('import("foo.json", { with: { type: "json" } })', {\n async importModuleDynamically(specifier, referrer, importAttributes) {\n console.log(specifier); // 'foo.json'\n console.log(referrer); // 编译后的脚本\n console.log(importAttributes); // { type: 'json' }\n const m = new SyntheticModule(["bar"], () => {});\n await m.link(() => {});\n m.setExport("bar", { hello: "world" });\n return m;\n },\n});\nconst result = await script.runInThisContext();\nconsole.log(result); // { bar: { hello: 'world' } }\n不妨从 @type/node 定义入手。
观察 @type/node 包的 package.json，可以发现其入口文件为 index.d.ts。
{\n "name": "@types/node",\n "types": "index"\n}\n入口文件的部分如下：
\n/// <reference lib="es2020" />\n/// <reference path="globals.d.ts" />\n/// <reference path="fs.d.ts" />\n/// <reference path="fs/promises.d.ts" />\n/// <reference path="process.d.ts" />\n显然，reference path 语法的作用是从指定文件模块中引入类型。reference lib 则是引入内置库。
\n\n注：使用
\n/// <reference types="vite/client" />语法则可以从指定包中引入类型。
内置库的特点就是其定义的类型会变成 globalThis 全局模块中的类型，细节这里先按下不表。
/// <reference no-default-lib="true"/>\n\n/// <reference lib="es2019" />\n/// <reference lib="es2020.bigint" />\n/// <reference lib="es2020.date" />\n/// <reference lib="es2020.number" />\n/// <reference lib="es2020.promise" />\n/// <reference lib="es2020.sharedmemory" />\n/// <reference lib="es2020.string" />\n/// <reference lib="es2020.symbol.wellknown" />\n/// <reference lib="es2020.intl" />\n/// <reference no-default-lib="true"/>\n\n/// <reference lib="es2020" />\n/// <reference lib="dom" />\n/// <reference lib="webworker.importscripts" />\n/// <reference lib="scripthost" />\n/// <reference lib="dom.iterable" />\n/// <reference lib="dom.asynciterable" />\n/// <reference no-default-lib="true"/>\n\ninterface Window {\n readonly window: Window & typeof globalThis;\n}\n\ndeclare var Window: {\n prototype: Window;\n new (): Window;\n};\n\ndeclare var window: Window & typeof globalThis;\n\ntype WindowProxy = Window;\n@types/node 定义全局空间的方法如下：
export {}; // Make this a module\ndeclare global {\n var global: typeof globalThis;\n var process: NodeJS.Process;\n var console: Console;\n}\n@types/node 也定义了各个内置模块：
declare module "fs" {\n import { URL } from "node:url";\n export type PathLike = string | Buffer | URL;\n import * as promises from "node:fs/promises";\n export { promises };\n}\ndeclare module "node:fs" {\n export * from "fs";\n}\ndeclare module "fs/promises" {}\ndeclare module "process" {\n global {\n var process: NodeJS.Process;\n namespace NodeJS {\n interface Process extends EventEmitter {}\n }\n }\n export = process;\n // 过时语法，等价于\n // export default process\n}\ndeclare module "node:process" {\n import process = require("process");\n export = process;\n // 过时语法，等价于\n // export * from "process"\n}\ndeclare module 语法仅能在 .d.ts 文件中使用，不能在 .ts 文件中使用：
declare module "module-name" {\n global {\n interface PromiseConstructor {\n deferred<T>(): PromiseWithResolvers<T>;\n }\n }\n}\n下面的语法可以在 .d.ts 中使用，也可以在 .ts 文件中使用：
declare global {\n interface PromiseConstructor {\n deferred<T>(): PromiseWithResolvers<T>;\n }\n}\nexport {}; // This is required to make this file a module\n注意到 typeof globalThis 等价于 module globalThis。
如果我们手动定义 globalThis 模块，实际上是定义 module "globalThis" 模块，
而非全局空间 module globalThis 模块（注意多余的引号）。
declare module "globalThis" {}\nimport globalThis2 from "globalThis";\ntype UserDefined = typeof globalThis2; // (alias) module "globalThis"\ntype BuiltIn = typeof globalThis; // module globalThis\n直接通过 interface 关键字定义的接口不会与全局空间的同名接口合并（而是表现为覆盖同名全局标识符）。
type SimpleEqual<X, Y> = [X, Y] extends [Y, X] ? true : false;\n\n// prettier-ignore\ninterface ObjectConstructor { // [!code ++]\n foo: "bar"; // [!code ++]\n} // [!code ++]\n\ntype Test = SimpleEqual<ObjectConstructor, { foo: "bar" }>; // false // [!code --]\ntype Test = SimpleEqual<ObjectConstructor, { foo: "bar" }>; // true // [!code ++]\n因此可以简单的认为，declare 关键字的作用就是用于向全局空间添加类型。
然而，declare 与 declare global 是不等价的！
简单来说：
declare 的语义是向当前模块空间内添加变量类型declare global 的语义是向 module globalThis 模块中添加变量类型我们看看下面的情况：
\n// 这里无论有没有 declare 效果相同\n/** declare */ interface PromiseConstructor {\n deferred<T>(): PromiseWithResolvers<T>;\n}\ntype PromiseDeferred = PromiseConstructor["deferred"]; // OK\nconst promiseDeferred = Promise.deferred; // Property 'deferred' does not exist on type 'PromiseConstructor'.\ntype PromiseAll = PromiseConstructor["all"]; // Property 'all' does not exist on type 'PromiseConstructor'.\nconst promiseAll = Promise.all; // OK\n上述情况容易理解，因为 Promise 的类型为 globalThis.PromiseConstructor，而非我们定义的 interface PromiseConstructor。
因此，要修改 globalThis.PromiseConstructor，需使用 declare global 语法
declare global {\n interface PromiseConstructor {\n deferred<T>(): PromiseWithResolvers<T>;\n }\n}\ntype PromiseDeferred = PromiseConstructor["deferred"]; // OK\nconst promiseDeferred = Promise.deferred; // OK\n要说明 declare 与 declare global 的区别，给出如下示例：
\n\n注意 TypeScript 的这些概念与目标模块环境（compilerOptions.module）相关，本文模块环境统一为 ES 模块
\n
declare const declareVar: "declareVar";\ndeclare function declareFunction(): "declareFunction";\ndeclare class DeclareClass {\n static declareClass: "declareClass";\n}\ndeclare global {\n const declareGlobalVar: "declareGlobalVar";\n function declareGlobalFunction(): "declareGlobalFunction";\n class DeclareGlobalClass {\n static declareGlobalClass: "declareGlobalClass";\n }\n}\n\ntype A = Equal<typeof declareVar, "declareVar">;\ntype B = Equal<typeof declareFunction, () => "declareFunction">;\ntype C = Equal<typeof DeclareClass.declareClass, "declareClass">;\n\ntype D = Equal<typeof declareGlobalVar, "declareGlobalVar">;\ntype E = Equal<typeof declareGlobalFunction, () => "declareGlobalFunction">;\ntype F = Equal<typeof DeclareGlobalClass.declareGlobalClass, "declareGlobalClass">;\n\ntype _ = Equal<typeof globalThis.foobar, any>; // 类型为 any，不会报错\ntype G = Equal<typeof globalThis.declareVar, any>; // 类型为 any，而不是 "declareVar"\ntype H = Equal<typeof globalThis.declareFunction, any>; // 类型为 any，而不是 () => "declareFunction"\ntype I = Equal<typeof globalThis.DeclareClass.declareClass, any>; // 类型为 any，而不是 () => "declareFunction"\n// @ts-expect-error: Property 'declareGlobalVar' does not exist on type 'typeof globalThis'.\ntype J = Equal<typeof globalThis.declareGlobalVar, "declareGlobalVar">; // 报错\ntype K = Equal<typeof globalThis.declareGlobalFunction, () => "declareGlobalFunction">;\n//@ts-expect-error: Property 'DeclareGlobalClass' does not exist on type 'typeof globalThis'.\ntype L = Equal<typeof globalThis.DeclareGlobalClass.declareGlobalClass, "declareGlobalClass">; // 报错\n\ntype Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;\n观察上例，我们可以得到一个不符合直觉（但确实是事实）的结论：globalThis 变量上访问任意属性，得到的类型为 any，但使用 declare global 定义类型后，该属性则无法找到（报错），然而 declare global function 是一个特例。
interface Message {\n role: "system" | "user" | "assistant";\n content: string;\n}\n\ninterface Context {\n messages: Message[];\n}\n\ndeclare function chatCompletion(context: Context): string;\nRAG 和 Function Call 都是（在无需重新训练模型的情况下）实现 Agent (智能体) 的方式。
\n由于 LLM 主要依赖其训练数据来生成回答。这会导致：
\nRAG（Retrieval-Augmented Generation）做的工作显然是通过知识库（Knowledge Base）插入额外的上下文。它做的工作可以抽象为：
\n// 通过知识库，增强给定上下文\ndeclare function rag(db: Database, context: Context): Context;\n\ninterface Database {\n // ?\n}\n问题其实在于 RAG 是如何插入文本的？关键字是向量嵌入 (Vector Embeddings) 。
\n将文本转换为向量，这就将文本相似度问题转换为向量相似度问题。
根据下面的演示代码可以发现，关键的文本转换为向量这一过程也是由 LLM 完成的。
import OpenAI from "openai";\nconst openai = new OpenAI();\nconst EMBEDDING_MODEL = "text-embedding-3-small"; // 选择嵌入模型\nconst KNOWLEDGE_BASE = [\n "RAG（Retrieval-Augmented Generation）结合了检索系统和生成模型，以提高回答的准确性和时效性。",\n "微调（Fine-tuning）是指在一个预训练模型的基础上，使用特定任务的数据继续训练模型，使其更适应特定领域。",\n "向量数据库（Vector Database）专门用于存储和高效查询高维向量数据，常用于相似性搜索。",\n "在RAG流程中，首先根据用户查询从知识库检索相关文档片段，然后将这些片段作为上下文提供给LLM生成最终答案。",\n "与微调相比，RAG的主要优势在于能够轻松更新知识库以反映最新信息，且无需重新训练大模型。",\n "常见的向量相似度计算方法包括余弦相似度、点积和欧氏距离。",\n];\nconst TOP_K = 2; // 我们想要检索的最相关的 K 个文档块\n\n// 计算余弦相似度\nfunction cosineSimilarity(vecA: number[], vecB: number[]) {\n let dotProduct = 0;\n let magnitudeA = 0;\n let magnitudeB = 0;\n for (let i = 0; i < vecA.length; i++) {\n dotProduct += vecA[i] * vecB[i];\n magnitudeA += vecA[i] * vecA[i];\n magnitudeB += vecB[i] * vecB[i];\n }\n magnitudeA = Math.sqrt(magnitudeA);\n magnitudeB = Math.sqrt(magnitudeB);\n if (magnitudeA === 0 || magnitudeB === 0) return 0;\n else return dotProduct / (magnitudeA * magnitudeB);\n}\n\n// 获取文本嵌入\nasync function getEmbedding(text: string) {\n const response = await openai.embeddings.create({\n model: EMBEDDING_MODEL,\n input: text,\n });\n return response.data[0].embedding;\n}\n\nasync function ragExample(userQuery: string) {\n // 在实际应用中，这一步通常是预处理并存储在向量数据库中\n const knowledgeBaseEmbeddings = await Promise.all(\n KNOWLEDGE_BASE.map(async (text) => {\n const embedding = await getEmbedding(text); // 生成嵌入向量\n return { text, embedding };\n }),\n );\n\n const userQuery = "RAG 和微调有什么不同？";\n const queryEmbedding = await getEmbedding(userQuery);\n\n // 计算查询向量与知识库向量的相似度\n const similarities = knowledgeBaseEmbeddings.map((kbItem) => ({\n text: kbItem.text,\n similarity: cosineSimilarity(queryEmbedding, kbItem.embedding),\n }));\n\n // 按相似度降序排序\n similarities.sort((a, b) => b.similarity - a.similarity);\n\n // 获取 Top-K 结果\n const relevantChunks = similarities.slice(0, TOP_K);\n\n // 返回最相关的文档片段\n return relevantChunks.map((item) => item.text).join("\\n");\n}\n生产环境下往往可以考虑使用向量数据库优化索引和检索。这些基础设施不在本文考虑的范围之内。
\nFunction Calling 允许 LLM 调用外部函数。这使得 LLM 不仅可以生成文本，还可以与外部世界交互，执行特定任务。
\n可以抽象为：
\ninterface FunctionDefinition {\n name: string;\n description: string;\n parameters: {\n type: "object";\n properties: { [name: string]: ParameterDefinition };\n required: string[];\n };\n}\n\ninterface ParameterDefinition {\n type: "string" | "number" | "boolean" | "array" | "object";\n description: string;\n enum?: string[];\n}\n\ninterface FunctionCallContext extends Context {\n availableFunctions?: { [name: string]: (...args: any[]) => any };\n type?: "function";\n function_call?: {\n name: string;\n arguments: string; // JSON string\n };\n}\n\ndeclare function chatCompletionWithFunctionCall(context: FunctionCallContext): FunctionCallContext;\nOpenAI 的 Function calling 机制很显然需要 LLM 的 API\n支持。
\nimport { OpenAI } from "openai";\n\nconst openai = new OpenAI();\nconst model = "gpt-4.1";\n\nconst tools = [\n {\n type: "function",\n function: {\n name: getWeather.name,\n description: "Get current temperature for provided coordinates in celsius.",\n parameters: {\n type: "object",\n properties: {\n latitude: { type: "number" },\n longitude: { type: "number" },\n },\n required: ["latitude", "longitude"],\n additionalProperties: false,\n },\n strict: true,\n },\n },\n];\n\nasync function getWeather(latitude: number, longitude: number) {\n const response = await fetch(\n `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t=temperature_2m,wind_speed_10m&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m`,\n );\n const data = await response.json();\n return data.current.temperature_2m;\n}\n\nconst messages = [\n {\n role: "user",\n content: "What's the weather like in Paris today?",\n },\n];\n\nconst completion = await openai.chat.completions.create({\n model,\n messages,\n tools,\n store: true,\n});\nmessages.push(completion.choices[0].message);\n\nconst toolCall = completion.choices[0].message.tool_calls[0];\n/*{\n "id": "call_12345xyz",\n "type": "function",\n "function": {\n "name": "getWeather",\n "arguments": "{\\"latitude\\":48.8566,\\"longitude\\":2.3522}"\n }\n}*/\nconst args = JSON.parse(toolCall.function.arguments);\nconst result = await getWeather(args.latitude, args.longitude);\nmessages.push({\n role: "tool",\n tool_call_id: toolCall.id,\n content: result.toString(),\n});\n\nconst completion2 = await openai.chat.completions.create({\n model,\n messages,\n tools,\n store: true,\n});\n\nconsole.log(completion2.choices[0].message.content);\n// -> "The current temperature in Paris is 14°C (57.2°F)."\n显然，为了执行 Function Calling，必须额外调用一次 API。
\nModel Context Protocol (MCP) 是 anthropic 开源的协议。它是 客户端-主机-服务器架构。
\n每个主机可运行多个客户端实例。
\n服务器为客户端提供：
\n客户端可向服务器提供：
\n\n\n取样（Sampling）指客户端有能力与 AI 模型交互，而服务端请求在客户端上执行 AI 功能。（AI 模型由客户端维护，服务端无需了解 AI 模型）
\n
sequenceDiagram\n participant Server\n participant Client\n participant User\n participant LLM\n\n Note over Server,Client: 服务器发起采样\n Server->>Client: sampling/createMessage\n\n Note over Client,User: 人工参与循环审查\n Client->>User: 呈现请求以供批准\n User-->>Client: 审查并批准/修改\n\n Note over Client,LLM: 模型交互\n Client->>LLM: 转发已批准的请求\n LLM-->>Client: 返回生成结果\n\n Note over Client,User: 响应审查\n Client->>User: 呈现响应以供批准\n User-->>Client: 审查并批准/修改\n\n Note over Server,Client: 完成请求\n Client-->>Server: 返回已批准的响应\nMCP 以 JSON-RPC 为消息格式，以 stdio（此时主机上同时运行客户端和服务器）或流式 HTTP（通用）通信，
提供了一个有状态会话协议，重点关注客户端和服务器之间的上下文交换和采样协商。
sequenceDiagram\n participant Host\n participant Client\n participant Server\n\n Host->>+Client: 初始化客户端\n Client->>+Server: 使用指定功能初始化会话\n Server-->>Client: 响应支持的功能\n\n Note over Host,Server: 具有协商功能的活动会话\n\n loop 客户端请求\n Host->>Client: 用户或模型发起的动作\n Client->>Server: 请求 (工具/资源)\n Server-->>Client: 响应\n Client-->>Host: 更新UI或响应模型\n end\n\n loop 服务器请求\n Server->>Client: 请求 (采样)\n Client->>Host: 转发给AI\n Host-->>Client: AI响应\n Client-->>Server: 响应\n end\n\n loop 通知\n Server--)Client: 资源更新\n Client--)Server: 状态改变\n end\n\n Host->>Client: 终止\n Client->>-Server: 结束会话\n deactivate Server\n使用 stdio 通信时，MCP 服务器进程从 stdin 读取 JSON-RPC 消息，响应消息到 stdout。消息以换行符分隔。
\n\n\n此时主机上同时运行客户端和服务器，无需身份验证。
\n
sequenceDiagram\n participant Client\n participant Server Process\n\n Client->>+Server Process: 启动子进程\n loop 消息交换\n Client->>Server Process: 写入 stdin\n Server Process->>Client: 写入 stdout\n Server Process--)Client: stderr 上的可选日志\n end\n Client->>Server Process: 关闭 stdin，终止子进程\n deactivate Server Process\n使用流式 HTTP 通信时，客户端与服务器之间建立有状态的 SSE 连接。
\n\n\n使用 OAuth 2.0 鉴权，具体见specification
\n
sequenceDiagram\n participant Client\n participant Server\n\n note over Client, Server: 初始化\n\n Client->>+Server: POST InitializeRequest\n Server->>-Client: InitializeResponse<br>Mcp-Session-Id: 1868a90c...\n\n Client->>+Server: POST InitializedNotification<br>Mcp-Session-Id: 1868a90c...\n Server->>-Client: 202 Accepted\n\n note over Client, Server: 客户端请求\n Client->>+Server: POST ... 请求 ...<br>Mcp-Session-Id: 1868a90c...\n\n alt 单个 HTTP 响应\n Server->>Client: ... 响应 ...\n else 服务器打开 SSE 流\n loop 当连接保持打开时\n Server-)Client: ... 来自服务器的 SSE 消息 ...\n end\n Server-)Client: SSE event: ... 响应 ...\n end\n deactivate Server\n\n note over Client, Server: 客户端通知/响应\n Client->>+Server: POST ... 通知/响应 ...<br>Mcp-Session-Id: 1868a90c...\n Server->>-Client: 202 Accepted\n\n note over Client, Server: 服务器请求\n Client->>+Server: GET<br>Mcp-Session-Id: 1868a90c...\n loop 当连接保持打开时\n Server-)Client: ... 来自服务器的 SSE 消息 ...\n end\n deactivate Server\n了解规范后容易发现，MCP 规范不处理客户端与 AI 模型的交互。例如，MCP 也提供函数调用功能，但客户端 AI 模型如何调用函数则需要自己实现。
\n关于具体代码则参见 MCP SDK。
\n","tags":["ai"]},{"id":"type-vs-interface","url":"https://yieldray.fun/posts/type-vs-interface","title":"Type vs interface","date_published":"2025-03-31T14:27:21.000Z","date_modified":"2025-03-31T14:27:21.000Z","content_text":"接口本质是类型的一种，这就像原始类型、对象类型、联合类型、交叉类型、条件类型也属于类型一样。
\n接口，是面向对象观点的一种类型，它本质上还是在表达对象类型。从类型论的观点看，它们应该可以是等价的。
\n我们知道：接口的特性是继承，而继承可以通过交叉对象类型来表达。
\n总之，讨论这之间的区别实际上是讨论两个问题：
\n接口具有声明合并的特性。允许在任意处声明同名接口，使用时使用的是合并后的结果。
这个性质实际上很关键，正因为要实现此特性：类型具有隐式索引签名，而接口类型没有。
interface Interface {\n k1: string;\n k2: number;\n}\n\nconst obj1: Interface = {\n k1: "hello",\n k2: 42,\n k3: true,\n};\n\nconst obj2: Obj = {\n k1: "hello",\n k2: 42,\n k3: true,\n};\n\ninterface Interface {\n k3: boolean;\n}\n\ntype Obj = {\n [key: string]: string | number | boolean;\n};\n\n// Type 'Interface' is not assignable to type 'Obj'.\n// Index signature for type 'string' is missing in type 'Interface'. ts(2322)\nconst obj3: Obj = obj1; // 💥\n\n// interface Interface {\n// [key: string]: string | number | boolean;\n// }\n根据上面的例子可知，由于接口 Interface 可在任意时刻增加属性，它不具有隐式的\n{[key: string]: string | number | boolean} 签名。因此解决方法是像最后的注释代码一样，手动添加索引约束。
type 关键字用于定义任意类型，interface 关键字专门用于表达对象类型。
interface 可通过 extends 表示对象类型的扩展关系。显然从类型本身的角度来说只有交叉关系，没有继承和扩展关系。这是面向对象的观点。
注意： 从 TS 2.1 起，类可以 implements 接口类型和对象类型。此前只能 implements 接口类型。
由于现在使用的版本远超过 2.1，因此现在类不能 implements 对象类型的说法是错误的。
同理，接口也可以同时 extends 接口和对象类型。
直观上来看，我们期望下面的方式表达同样的类型：
\ninterface Interface$Partial {\n k1: string;\n k2: number;\n}\n\ninterface Interface extends Interface$Partial {\n k3: boolean;\n}\n\ntype Obj = {\n k1: string;\n k2: number;\n k3: boolean;\n};\n\ntype Intersection = {\n k1: string;\n k2: number;\n} & {\n k3: boolean;\n};\n如果做过 type-challenges 2757 PartialByKeys，就会发现，对象类型的交叉类型不会直接被类型系统认为是对象类型。
\ntype PartialByKeys<T, K = any> = {\n [P in keyof T as P extends K ? P : never]?: T[P];\n} & {\n [P in keyof T as P extends K ? never : P]: T[P];\n}; // 💥\n\ntype IntersectionToObj<T> = { [K in keyof T]: T[K] };\ntype PartialByKeys<T, K = any> = IntersectionToObj<\n {\n [P in keyof T as P extends K ? P : never]?: T[P];\n } & {\n [P in keyof T as P extends K ? never : P]: T[P];\n }\n>; // ✅\n因此解法是手动告知类型系统，将交叉类型转换为对象类型，如上面的解法。
不过，这是类型系统类型层面的问题，在实例化时实际上是没有区别的。
此外，当然接口还受到上面提到的 没有隐式索引类型 的限制：
\nconst x: Interface =\n // 💥 可以是 Obj 和 Intersection 类型，但不能是 Interface 类型\n {\n k1: "string",\n k2: 123,\n k3: true,\n };\n\nconst _: Record<string, string | number | boolean> = x;\nhttps://www.totaltypescript.com/type-vs-interface-which-should-you-use
https://www.alvseven.com/type-vs-interface
\n\n\n
HTTP 缓存机制
\nService-Worker 缓存（建议使用库，代码仅演示）
\nconst addResourcesToCache = async (resources) => {\n const cache = await caches.open("v1");\n await cache.addAll(resources);\n};\n\nself.addEventListener("install", (event) => {\n event.waitUntil(addResourcesToCache(["/", "/index.html", new Request("/style.css")]));\n});\n\nself.addEventListener("fetch", (event) => {\n event.respondWith(caches.match(event.request));\n});\n\n\nService Worker 具备很多缓存高级特性，超出本文范畴
\n
![\"performance-navigation-timing-timestamp-diagram\"](\"https://wsrv.nl/?url=https://web.dev/static/articles/ttfb/image/performance-navigation-timing-timestamp-diagram.svg\")
避免重定向（如 HSTS）
\n使用 CDN，边缘服务器
\n使用 HTTP/2 HTTP/3 （队头阻塞问题）
\n服务器使用流式响应，无论是否是 SSR
\n![\"http2-and-http3-stacks-comparison.png\"](\"https://s2.loli.net/2025/03/24/UPVRo1Bf2TituWA.png\")
<link rel="dns-prefetch" href="https://fonts.googleapis.com">\n<link rel="preconnect" href="https://example.com">\n<link rel="preload" href="/lcp-image.jpg" as="image">\n<link rel="modulepreload" href="script.mjs" />\n下面属于预渲染，非首次请求
\n<link rel="prefetch" href="/next-page.css" as="style">\n<script type="speculationrules">\n {\n "prerender": [],\n "prefetch": []\n }\n</script>\nHTTP/2 资源推送（成本可能较高）
\n避免导致无法资源发现，如：CSS @import，动态创建 script 标签等
\n使用 HTTP 压缩机制（Content-Encoding）：gzip / deflate / br / zstd
\n压缩代码，图片等资源。使用压缩效果更好的格式，如 webp
\n代码拆分，避免请求首屏不需要的代码：
\n树摇，移除未使用的脚本和样式（对于 Webpack/Rollup 的脚本，必须使用 ESM）
\n减少请求数量：考虑内联图片，内联关键 CSS；使用 bundler 合并代码（即使是 HTTP/2），减少对不同源的请求
\n正确使用 polyfill（渐进式增强），可使用 browserslist 工具确定目标浏览器
\n优化渲染关键路径，减少阻塞（主线程）渲染的资源，尽快呈现内容（减少白屏时间）
\n![\"optimize-resource-loading\"](\"https://wsrv.nl/?url=https://web.dev/learn/performance/optimize-resource-loading/image/fig-2.svg\")
避免 DOM 规模过大，降低 CSS 选择器的复杂性，减少要设置样式的元素数量
\n考虑 SSR，预渲染（指构建 HTML 骨架屏）等
\n懒加载/延迟加载非关键资源 <img loading="lazy"> <iframe loading="lazy">（Intersection Observer 或相关 JS 库）
请求优先级，合理使用 fetchPriority
避免 DOM 规模过大（无论是 SPA 还是 SSR/MPA，可考虑分页）
\n![\"a-page-load-timeline-show\"](\"https://wsrv.nl/?url=https://web.dev/static/articles/tti/image/a-page-load-timeline-show-762f93f25ad4b.svg\")
\n\nSSR 等技术可能会导致网页出现以下情况：看上去可互动（即屏幕上会显示链接和按钮），但实际上不是可交互的，因为主线程处于阻塞或因为控制这些元素的 JavaScript 代码尚未加载。
\n
SSR 水合 (Hydration) 优化：
\n避免由于图片等资源未正确分配空间导致的布局偏移（Layout Shift）
\n避免 FOUC，保证样式、字体资源加载顺序合理（font-display: swap）
使用高性能动画（即提升渲染到合成器层），避免使用会触发布局或绘制（回流重绘）的属性
\n\n\nINP 指标已替代 FID 指标
\n
优先使用 CSS 动画而不是 JS 动画
\n避免在同一帧中多次变更 DOM 并查询布局（强制回流），这会导致破坏布局快速路径，导致布局抖动（Layout Thrashing）（方法：考虑使用 requestAnimationFrame）
\n避免使用 useLayoutEffect，防止阻塞当前帧渲染
将 DOM 无关的高昂计算操作卸载到 Web Worker
\n考虑使用防抖与节流
\n使用 KeepAlive 缓存 DOM（优化路由切换），对于 React 则正确使用 useMono，useCallback 等机制
\n考虑使用虚拟滚动（避免 DOM 规模过大）
\n任务调度/拆解，使用 Prioritized Task Scheduling API（或类似 React Scheduler 的调度机制）
\nweb-vitals：LCP CLS INP (TTFB FCP)
\n\nLighthouse、WebPageTest 工具
第三方 Real User Monitoring (RUM) 工具监控
https://web.dev/learn/performance
https://developer.chrome.com/docs/lighthouse/performance/
案例研究：
https://largeapps.dev/case-studies/advanced/
微前端可用于实现多前端应用的集成。应用分为主应用（基座应用）和多个子应用（微应用），主应用一般相当于底座，控制哪个或哪些应用的呈现。
\n何谓微前端应用？在微前端中，应用都是 SPA，因此可以简单的认为应用就是一个 HTML 页面。
页面为这个单独的应用提供独立的渲染上下文，就像进程之于操作系统。
应用指的是 SPA 的这个 A。
应当注意微前端和微服务是很大程度上不同的。在很多场景下，微服务的最小维度是服务，微前端的最小维度是前端应用。
这也就是说，微前端中各个应用往往更具独立性，微服务往往则需要注册中心。
微前端提供什么优势？我觉得主要提供的功能在于独立构建部署和独立页面上下文。
事实上，直接构建多个独立应用也可以提供这些功能。我们想要的其实就是拿回这些功能。
此外，我们可能还希望：
\n因此，微前端解决方案（框架）都会提供应用隔离、路由与渲染生命周期、共享状态管理等功能。
\n此外，微前端的很多场景都是管理系统，额外的请求延迟和渲染延迟是可以接受的。
并且我们只考虑 SPA，完全不考虑 SSR。
在很多情况下我们使用“页面”一词，这有时不够精确。因为某些微前端中我们可能会考虑 iframe。
\n根据 HTML 规范：
\nDocumentOrShadowRoot <- ShadowRoot
\n不同微前端框架提供的运行时方案可能是不同的。
\n例如，wujie 可直接通过 iframe 访问子应用的 window，那么子应用就可以通过自己的 window 向主应用暴露生命周期。
\nqiankun/Single-SPA 不使用 iframe，通过模块系统暴露生命周期。
\n（本文只是以 wujie 和 qiankun 两种不同原理的实现方式举例说明）
\n显然，目标其实是一样的，即需要让主应用通过路由控制子应用的生命周期。
\n下面是一个非常简单的例子，使用 ES 模块，可以方便的暴露生命周期。
\n\n\n\n
let microApp = undefined;\n\nexport function mount(target) {\n microApp = target;\n addEventListener("hashchange", onHashChange);\n microApp.innerHTML = `<h1>I'm microApp</h1>`;\n}\n\nexport function unmount(target) {\n target.innerHTML = "";\n removeEventListener("hashchange", onHashChange);\n}\n\nfunction onHashChange() {\n let hash = location.hash.slice(1); // 去除前导 # 字符\n // 假设路由前缀为 microApp/，若为子应用则去除前缀\n if (window.__IS_MICRO_FRONT_END__) hash = hash.replace(/^microApp\\//, "");\n microApp.innerHTML = `microApp is at location of "${hash}"`;\n}\n\nif (!window.__IS_MICRO_FRONT_END__) {\n mount(document.body);\n}\n子应用必须对路由做处理，并且与主应用约定一致。
\n<script>\n window.__IS_MICRO_FRONT_END__ = true;\n</script>\n<script type="module">\n import { mount as mountMicroApp, unmount as unmountMicroApp } from "./microApp.js";\n\n document.body.innerHTML = /*html*/ `\\\n<nav>\n <a href="#/">Home</a>\n <a href="#microApp/">microApp</a>\n</nav>\n\n<div id="microApp"></div>\n`;\n\n const registry = {\n "microApp/" /* <- 约定的路由前缀 */: {\n isMounted: false,\n mount: mountMicroApp,\n unmount: unmountMicroApp,\n container: document.getElementById("microApp"),\n },\n };\n\n function onHashChange() {\n let hash = location.hash.slice(1); // 去除前导 # 字符\n\n for (const [prefix, app] of Object.entries(registry)) {\n if (!hash.startsWith(prefix) && app.isMounted) {\n app.unmount(app.container);\n app.isMounted = false;\n }\n }\n\n for (const [prefix, app] of Object.entries(registry)) {\n if (hash.startsWith(prefix) && !app.isMounted) {\n app.mount(app.container);\n app.isMounted = true;\n }\n }\n }\n\n onHashChange();\n addEventListener("hashchange", onHashChange);\n</script>\nmicroApp 也可以作为一个独立应用。
\n<script type="module">\n import "./microApp.js";\n</script>\n可以看出：在这个架构中，实际只存在一个文档。
\n如果想利用 iframe 做微前端，很容易想到两个缺点：
\nwujie 文档上说其利用了 web components，实际上它只需要利用的是 ShadowRoot。
\n隐式根（ShadowRoot）是一个类似于 Document 的对象，如果我们不将子应用渲染在 iframe 下，而是渲染在隐式根下，
则能够同时享受到隐式根提供的样式隔离 和 iframe 提供的全局对象隔离。
对于路由问题，我们可以通过 iframe.contentWindow.history.pushState 等方法将主应用的路由同步到 iframe 上。
不妨直接看看其源码中是怎么做处理的：https://github.com/Tencent/wujie/blob/master/packages/wujie-core/src/sync.ts
使用影子 DOM（ShadowDOM）时，当然需要关注一些特定问题，例如事件边界。
qiankun 的 strictStyleIsolation 样式隔离方案也是基于影子 DOM 的，这里的问题都是类似的。
剩下的问题其实很显然了，即我们希望在 iframe 下使用的 document location 等对象是主应用提供的，
wujie 通过 Proxy 替换 iframe 下的对象：https://github.com/Tencent/wujie/blob/master/packages/wujie-core/src/proxy.ts
当然，wujie 还有一套降级方案，这里就不讨论了。
在不考虑降级的情况下，wujie 的核心解决方案是很简单的，可以发现它的很多代码都是在做代理的边界处理。
默认情况下 qiankun 使用基于 Proxy 的沙盒，沙盒用于隔离全局环境。观察源码可以发现其做的操作基本为共享全局对象的边界处理。
源码：https://github.com/umijs/qiankun/blob/master/src/sandbox/proxySandbox.ts
若不支持 Proxy，则降级到快照沙箱（本质上就是记录修改了哪些属性，然后可以恢复，因此只支持单实例）。
源码：https://github.com/umijs/qiankun/blob/master/src/sandbox/snapshotSandbox.ts
单实例情况下，只需保证激活时挂载样式，并在卸载时移除样式，即可解决大部分样式问题，这也是 qiankun 的默认行为。
此外，qiankun 使用 strictStyleIsolation 配置，将样式注入影子 DOM 内部实现隔离。
使用 experimentalStyleIsolation 配置时，qiankun 会在运行时改写CSS选择器，
即 .selector {} 变为 [data-qiankun-react16] .selector {}
实现方法很简单，修改已有的 CSSOM 即可。
源码：https://github.com/umijs/qiankun/blob/master/src/sandbox/patchers/css.ts
如果子应用构建时使用 Scoped CSS 或 selector-namespace，那么无需微前端框架做运行时处理。
\n对于加载入口，qiankun 抽象了 npm 包 import-html-entry，用于从 HTML 字符串中提取脚本和样式入口。
\n\n\nTODO\n预加载，子应用保活。。。
\n
瀑布式请求：主应用启动之后，才开始启动子应用，子应用才能发起请求，加大了请求瀑布问题。
对于此问题，往往可以采用很多简单有效的方法，比如 prefetch
应用间依赖复用：Module Federation？微前端的主要优势是解耦，依赖复用的本质是耦合，这实际上增大了维护难度。
需要依赖复用则说明公共逻辑比较多。因为如果只是共享公共依赖，其实使用直接使用公共 CDN 即可实现。
Module Federation 反而给工程化带来很多挑战（当然框架已解决了部分问题）。
现代基于模块化的前端开发中，全局污染、样式冲突都比较可控。使用微前端，同时实现独立部署和微前端部署确实是优势。
\n如果无需考虑同时显示多个子应用，牺牲一些模块共享和路由一致性，构建为多页应用也不失为一种稳妥的方案。
\n","tags":[]},{"id":"js-modules","url":"https://yieldray.fun/posts/js-modules","title":"js模块机制","date_published":"2025-02-28T12:00:00.000Z","date_modified":"2025-02-28T12:00:00.000Z","content_text":"假设读者已熟悉 esm/cjs 语义，若不了解，参考：
\n\n服务器环境只以 Node.js 为例。
\n本文不涉及具体运行时实现，仅考虑标准。关于 Node.js 的模块实现，见Node.js模块处理机制。
\n对于 bundler 部分，只以 webpack（对于 cjs→cjs） 和 rollup（对于 esm→esm） 为例，这是它们优先支持的模块系统。
\n概况性地说，es 模块流程如下：
\n其中，宿主负责语法解析前的操作，引擎负责之后的工作。
\nesm 的特点是静态模块发现（生成模块依赖图）可以在语法解析时完成（而无需在执行时）。
若处理动态导入，只需再创建一个单独的模块依赖图即可（这一点非常重要）。
\n\ncjs 是为本地文件系统设计的模块系统，而 esm 则需要单独考虑模块获取流程。
\n
esm 通过语言规范引入了新的语义，该语义为静态分析（即语法解析）暴露出模块系统。
这种静态特性不仅优化了请求瀑布（实现并发加载），对构建系统也很有帮助。
\n\n不要误解解释器和ES代码的同步或异步执行。对于ES代码，简单来说，只有立即推入执行上下文堆栈执行才是同步。
\n
而解释器的异步流程很可能根本无法在ES代码中观测到，换言之，解释器的异步流程对ES脚本来说可以是同步。对并发问题也是如此。
timeline：
\nimport() export * as ns from 'module' import.meta\n\n有一些异步执行的提案还在推进中，如defer-import-eval
\n
see also https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
\n| 字段名称 | \n值类型 | \n含义 | \n
|---|---|---|
[[Realm]] | \n一个 Realm Record | \n创建此模块的 Realm。 | \n
[[Environment]] | \n一个 Module Environment Record 或 empty | \n包含此模块的顶层绑定的 Environment Record。 此字段在模块链接时设置。 | \n
[[Namespace]] | \n一个 Object 或 empty | \n如果已为此模块创建模块命名空间对象（28.3），则为该对象。 | \n
[[HostDefined]] | \n任何类型（默认值为 undefined） | \n保留字段，供需要将附加信息与模块关联的宿主环境使用。 | \n
| 字段名称 | \n值类型 | \n含义 | \n
|---|---|---|
[[Status]] | \nnew, unlinked, linking, linked, evaluating, evaluating-async, 或 evaluated | \n初始状态为 new。随着模块在其生命周期中的进展，依次转换为 unlinked, linking, linked, evaluating，可能为 evaluating-async，以及 evaluated。 evaluating-async 表示此模块已排队等待其异步依赖项完成后执行，或者它是一个 [[HasTLA]] 字段为 true 的模块，该模块已执行并正在等待顶层完成。 | \n
[[EvaluationError]] | \n一个 throw completion 或 empty | \n一个 throw completion，表示求值期间发生的异常。如果未发生异常或 [[Status]] 不是 evaluated，则为 undefined。 | \n
[[DFSIndex]] | \n一个 integer 或 empty | \n仅在 Link 和 Evaluate 期间使用的辅助字段。如果 [[Status]] 是 linking 或 evaluating，则此非负数记录了在深度优先遍历依赖关系图期间首次访问该模块的点。 | \n
[[DFSAncestorIndex]] | \n一个 integer 或 empty | \n仅在 Link 和 Evaluate 期间使用的辅助字段。如果 [[Status]] 是 linking 或 evaluating，则这要么是模块自身的 [[DFSIndex]]，要么是同一强连通分量中“更早”模块的 [[DFSIndex]]。 | \n
[[RequestedModules]] | \n一个由字符串组成的 List | \n一个 List，包含此记录所代表的模块用于请求导入模块的所有 ModuleSpecifier 字符串。List 按照源代码文本出现的顺序排列。 | \n
[[LoadedModules]] | \n一个由 Records 组成的 List，其中包含字段 [[Specifier]] (一个字符串) 和 [[Module]] (一个 Module Record) | \n一个从该记录所代表的模块用于请求导入模块的 specifier 字符串到已解析的 Module Record 的映射。该列表不包含两个具有相同 [[Specifier]] 的不同 Records。 | \n
[[CycleRoot]] | \n一个 Cyclic Module Record 或 empty | \n循环中第一个被访问的模块，即强连通分量的根 DFS 祖先。对于不在循环中的模块，这将是模块本身。一旦 Evaluate 完成，模块的 [[DFSAncestorIndex]] 就是其 [[CycleRoot]] 的 [[DFSIndex]]。 | \n
[[HasTLA]] | \n一个 Boolean | \n此模块是否是单独异步的（例如，如果它是一个包含顶层 await 的 Source Text Module Record）。具有异步依赖项并不意味着此字段为 true。此字段在模块解析后不得更改。 | \n
[[AsyncEvaluation]] | \n一个 Boolean | \n此模块本身是否是异步的，或者是否具有异步依赖项。注意：设置此字段的顺序用于对排队的执行进行排序，请参见 16.2.1.5.3.4。 | \n
[[TopLevelCapability]] | \n一个 PromiseCapability Record 或 empty | \n如果此模块是某个循环的 [[CycleRoot]]，并且已对该循环中的某个模块调用了 Evaluate()，则此字段包含该整个求值的 PromiseCapability Record。它用于解决从 Evaluate() 抽象方法返回的 Promise 对象。对于该模块的任何依赖项，此字段将为空，除非已为其中一些依赖项启动了顶层 Evaluate()。 | \n
[[AsyncParentModules]] | \n一个由 Cyclic Module Records 组成的 List | \n如果此模块或依赖项的 [[HasTLA]] 为 true，并且执行正在进行中，则这会跟踪此模块的顶层执行作业的父导入器。这些父模块不会在此模块成功完成执行之前开始执行。 | \n
[[PendingAsyncDependencies]] | \n一个 integer 或 empty | \n如果此模块有任何异步依赖项，则这会跟踪此模块剩余要执行的异步依赖模块的数量。当此字段达到 0 并且没有执行错误时，将执行具有异步依赖项的模块。 | \n
动态导入有单独的运行时表示，这正确的保证了命名空间是密封、可枚举的。
\n| 内部插槽 | \n类型 | \n描述 | \n
|---|---|---|
[[Module]] | \n一个 Module Record | \n此命名空间公开其导出的 Module Record。 | \n
[[Exports]] | \n一个由字符串组成的 List | \n一个 List，其元素是作为此对象自身属性公开的导出名称的字符串值。该列表按照词典编码单元顺序排序。 | \n
这里以 HTML标准 和 ECMA262 加以说明，浏览器环境：
\nhttps://html.spec.whatwg.org/multipage/webappapis.html#scripting-processing-model
\n\n根据规范，只考虑静态导入导出，简单来说：
\n\n\n对于浏览器来说，bundler 还是很有必要的。使用
\n<link rel="modulepreload">虽然可以优化请求瀑布问题，还是 bundler 来实现移除死代码和代码压缩。
以 rollup 为例，rollup 自身实现了语法解析器，AST 格式遵循 estree 规范。
\nhttps://stackblitz.com/edit/rollup-bundle-demo-ed8ygxp9?file=src%2Findex.js
\nbundler 的特点在于它不需要执行模块，但需要合并和生成模块。
因此，显然也需要记录模块依赖图、检查导入导出的标识符。无需执行。
bundler 也需要考虑解释器无需处理的问题，例如，如何生成模块文件，如何处理多入口模块。
下面我们考虑实现一个简单的 esm bundler，给定（可以是多个）入口文件，首先递归解析出所有模块。模块表示如下：
\ninterface Module {\n /** 文件系统绝对路径 */\n path: string;\n /** AST */\n ast: any;\n /** 表示是否是入口文件，入口文件必须生成对应输出模块 */\n isEntry: boolean;\n}\n首先考虑最简单的情况：
\nimport "./entry.js";\nimport entry from "./entry.js";\nimport * as a from "./entry.js";\nimport { a, b } from "./entry.js";\n由于 entry.js 是入口文件，打包后也存在 entry.js，因此 import 语句可以保留。这种情况下无需处理。
\n若不是入口文件，假设 not_entry.js 只被此模块引入，则 not_entry.js 不存在对应的输出模块。
\nimport "./not_entry.js";\nimport { a, b } from "./not_entry.js";\nimport * as a from "./not_entry.js";\nimport not_entry from "./not_entry.js";\n考虑 not_entry.js 中的 export 语句如下：
\nconst str = "not_entry.js";\nconsole.log(str);\nexport { str };\nexport default str;\n若不考虑支持 tree-shaking，可以将 import 改写为：
\nconst bundled$not_entry = ((exports = {}) => {\n const str = "not_entry.js";\n console.log(str);\n exports.str = str;\n exports.default = str;\n return exports;\n})();\n\nconst { a, b } = bundled$not_entry;\nconst a = bundled$not_entry;\nconst { default: not_entry } = bundled$not_entry;\nnot_entry.js 模块中也可以包含 import，若导入的是入口文件，直接将 import 提升即可，否则可以递归处理。
\n这种方式相当于 webpack 模块中心实现，可以实现模块只执行一次的预期效果。
然而，这种改写方法有局限性：无法实现 esm 的 live-binding 效果，因为导出变成了赋值行为，而非预期的绑定行为。
要实现 tree-shaking，语法解析时，需要确定何处使用了导入的变量，然后改写变量名称即可。
对于未使用的标识符（未被导入，且不被模块副作用引用），其声明和赋值语句都可以直接删除。
假设 not_entry.js 被多个入口模块引入，则必须为该模块生成单独的 chunk 模块，而不能采取替换方法。
因为需要保证导入方导入的是同一个模块。
综上可以发现，这些 chunk 生成的模式最终都可以通过一种有向图算法来描述。
\nesm 中，同一个模块标识符的模块只运行一次。由于模块可以有副作用，因此 Bundler 需要考虑模块执行顺序。
bundler 相比于实际执行，只是少了实例化和执行阶段，因此它也是从入口模块出发，深度优先。
bundler 也是保守的，因为需要最大程度保证产物与输入的执行结果一致（特别是实际执行顺序）。
由于语法限制加上 bundler语义 本身的局限，并非所有输入情况都可以编译出运行结果一致的产物。
esm bundler 天生可以处理循环依赖，因为同标识符模块仅执行一次。
由于仅执行一次，非入口模块被替换时，代码顺序自然在更上方，这同时满足了执行顺序和声明作用域问题。
不过存在一些模块输入情况，解释器会报错，然而此时 bundler 根本无法完成代码生成：
\nimport { a } from "./a.js"; // SyntaxError: Detected cycle while resolving name 'a' in './a.js'\nexport { a };\nimport { a } from "./a.js";\nconst aPlusOne = a + 1; // ReferenceError: Cannot access 'a' before initialization\nexport { aPlusOne as a };\n此语法限制 + 外部依赖可能出现问题，例如：
\n// main.js\nimport "./polyfill.js";\nimport "external";\nconsole.log("main");\n\n// polyfill.js\nconsole.log("polyfill");\nesm 执行是先构建模块依赖图，然后按依赖图执行。
换言之，是语法解析->确定依赖关系->按依赖顺序执行。而非等遇见 import 语句再执行。
这相当于，import 语句会提升到顶部！
\n\n\n注意：这与 var/函数声明提升原理完全不同，因为 import/export 模块依赖图解析发生在代码执行之前，然后按图顺序执行，只是表现上看起来像是提升了。
\n
// output.js\nconsole.log("polyfill");\nimport "external"; // 由于 import 语句会提升到顶部，因此 polyfill 在 external 模块后执行\nconsole.log("main");\n<script type="importmap">\n {\n "imports": {\n "square": "./module/shapes/square.js",\n "shapes/": "./module/shapes/",\n "modules/shapes/": "./module/src/shapes/",\n "modules/square": "./module/src/other/shapes/square.js",\n "https://example.com/modules/square.js": "./module/src/other/shapes/square.js",\n "../modules/shapes/": "/modules/shapes/"\n },\n "scopes": {\n "/modules/customshapes/": {\n "square": "https://example.com/modules/shapes/square.js"\n }\n }\n }\n</script>\ncjs 是在无需 ecma262 改动下支持的，换言之，它没有改变语言本身的任何语义。这也意味着运行时本身必须对其做一些支持。
\ncjs 导出单个值，而 esm 导出一个不可变命名空间，其中包含一组绑定（因此需要语义支持）。
由于 esm 导入不可变绑定，其对循环依赖的处理是很自然的。
cjs 对循环依赖的处理简单粗暴，但由于只支持导出单个值，导入/导出方必须对共享值做特殊支持。
\n//------ a.js ------\nconsole.log('a: before require("./b")');\nconst b = require("./b");\nconsole.log('a: after require("./b")');\n\nfunction foo() {\n b.bar();\n}\n\nmodule.exports.foo = foo;\nconsole.log("a: end");\n\n//------ b.js ------\nconsole.log('b: before require("./a")');\nconst a = require("./a");\nconsole.log('b: after require("./a")');\n\nfunction bar() {\n if (Math.random()) {\n a.foo();\n }\n}\n\nmodule.exports.bar = bar;\nconsole.log("b: end");\n若先执行 a.js，实际流程是：
\na: before require("./b")\n b: before require("./a")\n b: after require("./a")\n b: end\na: after require("./b")\na: end\n因此 cjs 模块导入时，导出方可能还未完成导出过程（还没运行完）。
这也是为什么在循环导入时有必要导入（引用）整个导出值。
简单来说：cjs 模块导出默认是空对象（这很重要，这里我们称为早期绑定），require 导入的值是导出方当前导出值的拷贝。
\nwebpack 源码：https://github.com/webpack/webpack/blob/main/lib/javascript/JavascriptModulesPlugin.js
\n例子：https://stackblitz.com/edit/webpack-bundle-demo?file=src%2Findex.js
\n//prettier-ignore\n/******/ (() => { // webpackBootstrap\n/******/ \tvar __webpack_modules__ = ({\n\n/***/ "./src/a.js":\n/*!******************!*\\\n !*** ./src/a.js ***!\n \\******************/\n/***/ ((module, __unused_webpack_exports, __webpack_require__) => {\n\nconsole.log('a: before require("./b")');\nconst b = __webpack_require__(/*! ./b */ "./src/b.js");\nconsole.log('a: after require("./b")');\n\nfunction foo() {\n b.bar();\n}\n\nmodule.exports.foo = foo;\nconsole.log("a: end");\n\n/***/ }),\n\n/***/ "./src/b.js":\n/*!******************!*\\\n !*** ./src/b.js ***!\n \\******************/\n/***/ ((module, __unused_webpack_exports, __webpack_require__) => {\n\nconsole.log('b: before require("./a")');\nconst a = __webpack_require__(/*! ./a */ "./src/a.js");\nconsole.log('b: after require("./a")');\n\nfunction bar() {\n if (!Math.random()) {\n a.foo();\n }\n}\n\nmodule.exports.bar = bar;\nconsole.log('b: end');\n\n\n/***/ }),\n\n/***/ "./src/index.js":\n/*!**********************!*\\\n !*** ./src/index.js ***!\n \\**********************/\n/***/ ((module, __unused_webpack_exports, __webpack_require__) => {\n\nmodule.exports.index = function () {\n (__webpack_require__(/*! ./a */ "./src/a.js").foo)();\n};\n\n\n/***/ })\n\n/******/ \t});\n/************************************************************************/\n/******/ \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/ \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tvar cachedModule = __webpack_module_cache__[moduleId];\n/******/ \t\tif (cachedModule !== undefined) {\n/******/ \t\t\treturn cachedModule.exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId] = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t// Execute the module function\n/******/ \t\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/ \t\n/************************************************************************/\n/******/ \t\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/ \t// This entry module used 'module' so it can't be inlined\n/******/ \tvar __webpack_exports__ = __webpack_require__("./src/index.js");\n/******/ \tvar __webpack_export_target__ = exports;\n/******/ \tfor(var __webpack_i__ in __webpack_exports__) __webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];\n/******/ \tif(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });\n/******/ \t\n/******/ })()\n;\n原理很简单，模拟 node 运行时逻辑。
\n__webpack_modules__: 一个对象，包含了所有模块定义。键为模块 ID，值为模块包装函数__webpack_module_cache__: 一个对象，作为模块缓存。键为模块 ID，值是已加载的模块对象__webpack_require__: 模块加载器函数。负责加载、缓存和执行模块exports 对象function __webpack_require__(moduleId) {\n // 检查模块是否在缓存中\n var cachedModule = __webpack_module_cache__[moduleId];\n if (cachedModule !== undefined) {\n // 若已缓存，则直接返回\n return cachedModule.exports;\n }\n // 执行模块并放入缓存\n var module = (__webpack_module_cache__[moduleId] = {\n exports: {},\n });\n\n // 此处执行\n __webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n // 返回模块导出\n return module.exports;\n}\n优化产物体积就在于消除一些保守的部分（如副作用）。
\n显然，esm 天生适合 tree-shaking，因为导出和（静态）导入只能发生在顶级作用域，因此所有导入导出的标识符都是确定的，并且不能动态修改。
\nrollup 以 tree-shaking 而闻名，在 webpack 中支持 tree-shaking 也需要保证输入是 es 模块。
并且支持一些约定，以进行优化。
注意，cjs 只导出单个值（esm 为多值），可在任意时刻修改导出（esm 仅允许静态导出），并在导入时是复制行为（esm 为绑定行为）。
理论上说，cjs 也能够一定程度支持 tree-shaking，因为导入行为可以看作是静态的。
由于 esm 支持动态导入，lazy loading 就非常简单了。对于 bundler，将被动态导入的模块也视为入口模块即可。
\n另一种场景则是为 bundler 手动配置分块，处理方式也是类似的。
\nsee also: https://rollupjs.org/faqs/#why-do-additional-imports-turn-up-in-my-entry-chunks-when-code-splitting
\nhttps://web.developers.google.cn/articles/use-long-term-caching?hl=zh-cn#lazy-loading
\n热模块替换比热重载的优点就是能够保留应用的状态，这需要应用本身做支持，bundler 只是通知应用程序模块发生了变更。
\n显然，HMR 并非 bundler 的本职工作，而是开发服务器实现的。
\n理论上来说可以很简单，开发服务器和浏览器建立单向连接（SSE/WS都可以实现），开发服务器记录依赖状态并在依赖变更时发送通知即可。
开发服务器还需要为框架做支持，例如如果是 react 组件，为保留组件状态，可以创建代理组件保证实际的组件，状态提升到代理组件上，从而避免状态丢失。
see also: https://webpack.js.org/concepts/hot-module-replacement/
\nsee also https://github.com/vite-plugin/vite-plugin-commonjs/blob/main/commonjs.zh-CN.md
\nexport var foo = 1;\n\nexport function bar() {\n return foo++;\n}\n\nexport default function baz() {\n return bar();\n}\n注意到 __esModule，这标记 esm 使用了默认导出。
"use strict";\n\nObject.defineProperty(exports, "__esModule", { value: true });\n\nexports.foo = 1;\n\nfunction bar() {\n return exports.foo++;\n}\n\nfunction baz() {\n return bar();\n}\n\nexports.bar = bar;\nexports.default = baz;\n导入的转换也可以很简单
\nimport foo from "./foo"; // 假设 foo 是 esm 编译出的 cjs 模块\n// ↓↓↓↓\nconst { default: foo } = require("./foo");\n\nimport * as foo from "./foo";\n// ↓↓↓↓\nconst foo = require("./foo");\n\nimport { bar, baz } from "./foo";\n//↓↓↓↓\nconst { bar, baz } = require("./foo");\n\nfunction func(name) {\n const foo = import(`./${name}`);\n //↓↓↓↓\n const foo = Promise.resolve(require(`./${name}`));\n}\n强烈建议阅读 @rollup/plugin-commonjs 文档。文档中讨论了 rollup 的 cjs 转换 esm 实现。
该插件能够配置处理各种依赖情况，包括循环依赖和混合依赖。
下面我们以 vite Pre-Bundling 为例，它是一种简单但有效的方法。做如下转换：
\n// add.js\nexports.add = (a, b) => a + b;\n\n// minus.js\nexports.minus = (a, b) => a - b;\n\n// math.js\nexports.calc = (a, b, operate) => {\n const calc =\n operate === "+" // condition require\n ? require("./add").add(a, b)\n : require("./minus").minus(a, b);\n return calc(a, b);\n};\n转换为
\nvar __commonJS = (cb, module = { exports: {} }) =>\n function __require2() {\n const cjs_wrapper = Object.values(cb)[0]; // wrapper function\n cjs_wrapper(module.exports, module); // inject exports, module\n return module.exports;\n };\n\n// add.js\nvar require_add = __commonJS({\n "add.js"(exports, module) {\n exports.add = (a, b) => a + b;\n },\n});\n\n// minus.js\nvar require_minus = __commonJS({\n "minus.js"(exports, module) {\n exports.minus = (a, b) => a - b;\n },\n});\n\n// math.js\nvar require_math = __commonJS({\n "math.js"(exports, module) {\n exports.calc = (a, b, operate) => {\n const calc =\n operate === "+" // condition require\n ? require_add().add(a, b)\n : require_minus().minus(a, b);\n return calc(a, b);\n };\n },\n});\n\nexport default require_math(); // -> { calc: Function }\n这样即可利用 cjs 唯一导出的特性。可以看出，打包后的 esm 也导出单值（默认导出）。
\nconst math = require("./math");\n//↓↓↓↓\nimport math from "./math";\n\nconst { calc } = require("./math");\n//↓↓↓↓\nimport math from "./math";\nconst { calc } = math;\ncjs 本身可能是 esm 的编译结果，此时 __esModule 就起作用了。
// mod.cjs\nexports.default = 3;\n// mod-compiled.cjs\nexports.__esModule = true;\nexports.default = 3;\n\n// main1.mjs\nimport foo from "./mod.cjs";\nimport bar from "./mod-compiled.cjs";\nconsole.log(foo); // -> { default: 3 }\nconsole.log(bar); // -> 3\n\n// main2.mjs\nimport * as foo from "./mod.cjs";\nimport * as bar from "./mod-compiled.cjs";\nconsole.log(foo); // -> { default: 3 }\nconsole.log(bar); // -> { default: 3, __esModule: true }\n本文的目标是对一些同步机制做一下高层次表述，附上一些抽象的实现。
如果从比较理论的角度来看待这些话题，一般就以资源为抽象视角，但这里的视角是物理内存。
我们首先希望考虑在裸机上编程（以 risc-v 为例），所以是不存在操作系统的。
\n因此这里定义一个类Linux的非常简单的模型：线程是调度的最小单位；进程只是共享内存的线程组。
\n调度简单来说，分为主动放弃CPU（暂时没有任务可以做了）和被动放弃CPU（如时间片耗尽）。
好的调度很复杂，还需要考虑不同的设计目标（比如实时/公平性），所以这里就从略了（包括比如锁唤醒等等调度场景也从略）。
同步考虑的是一个内存一致性问题。
\n把任务的执行抽象为两种：
\n\n\n\n\n
目标是任务完成前，避免任务需要的某些内存被意外修改了。（任务一旦开始，往往说任务“持有”资源）
\n#include <stdint.h>\n\n// 原子加\nuint32_t atomic_add(volatile uint32_t *addr, uint32_t value) {\n uint32_t result;\n asm volatile (\n "amoadd.w %[result], %[value], (%[addr])"\n : [result] "=r" (result)\n : [value] "r" (value), [addr] "r" (addr)\n : "memory"\n );\n return result;\n}\n\n// 原子交换\nuint32_t atomic_swap(volatile uint32_t *addr, uint32_t value) {\n uint32_t result;\n asm volatile (\n "amoswap.w %[result], %[value], (%[addr])"\n : [result] "=r" (result)\n : [value] "r" (value), [addr] "r" (addr)\n : "memory"\n );\n return result;\n}\n\n// 原子比较并交换 (Compare and Swap - CAS)\nuint32_t atomic_compare_and_swap(volatile uint32_t *addr, uint32_t expected, uint32_t new_value) {\n uint32_t result;\n asm volatile (\n "1: lr.w %[result], (%[addr])\\n"\n " bne %[result], %[expected], 2f\\n"\n " sc.w %[result], %[new_value], (%[addr])\\n"\n " bnez %[result], 1b\\n"\n "2:"\n : [result] "=&r" (result)\n : [new_value] "r" (new_value), [expected] "r" (expected), [addr] "r" (addr)\n : "memory"\n );\n return result; // 返回0表示成功，非0表示失败\n}\n#include <stdbool.h>\n\ntypedef struct {\n volatile uint32_t locked; // 0: unlocked, 1: locked\n} mutex_t;\n\nvoid mutex_init(mutex_t *mutex) {\n mutex->locked = 0;\n}\n\nvoid mutex_lock(mutex_t *mutex) {\n uint32_t expected = 0;\n uint32_t new_value = 1;\n\n // 自旋等待\n while (atomic_compare_and_swap(&mutex->locked, expected, new_value) != 0) {\n yield(); // 切换到其它进程/线程\n }\n}\n\nvoid mutex_unlock(mutex_t *mutex) {\n mutex->locked = 0; // 直接赋值，因为解锁时我们知道它是锁定的\n // 可选：加入内存屏障，确保解锁操作对其它核心可见\n asm volatile ("fence rw,w" ::: "memory");\n}\ntypedef struct {\n volatile int32_t count;\n} semaphore_t;\n\nvoid semaphore_init(semaphore_t *sem, int32_t initial_count) {\n sem->count = initial_count;\n}\n\nvoid semaphore_wait(semaphore_t *sem) {\n while (1) {\n int32_t current_count = sem->count;\n if (current_count > 0) {\n if (atomic_compare_and_swap(&sem->count, current_count, current_count - 1) == 0) {\n break; // 获取信号量成功\n }\n } else {\n // 信号量为0，需要阻塞当前线程\n // ... (实现线程阻塞和加入等待队列的逻辑) ...\n // 例如：\n // block_current_thread(sem->wait_queue);\n // yield(); // 切换到其它线程\n }\n }\n}\n\nvoid semaphore_signal(semaphore_t *sem) {\n atomic_add(&sem->count, 1);\n // ... (唤醒等待队列中的一个线程) ...\n // 例如：\n // unblock_thread(sem->wait_queue);\n // yield(); // 考虑是否需要切换线程\n}\ntypedef struct {\n // ... (等待队列等数据结构) ...\n} condvar_t;\n\nvoid condvar_init(condvar_t *cv) {\n // ... (初始化等待队列) ...\n}\n\nvoid condvar_wait(condvar_t *cv, mutex_t *mutex) {\n // 1. 释放互斥锁\n mutex_unlock(mutex);\n\n // 2. 将当前线程加入条件变量的等待队列\n // ... (将当前线程加入 cv->wait_queue) ...\n // block_current_thread(cv->wait_queue);\n\n // 3. 调度到其它线程\n // yield();\n\n // 4. 重新获取互斥锁 (在线程被唤醒后)\n mutex_lock(mutex);\n}\n\nvoid condvar_signal(condvar_t *cv) {\n // 唤醒等待队列中的一个线程\n // ... (从 cv->wait_queue 中移除一个线程并唤醒) ...\n // unblock_thread(cv->wait_queue);\n}\n\nvoid condvar_broadcast(condvar_t *cv) {\n // 唤醒等待队列中的所有线程\n // ... (唤醒 cv->wait_queue 中的所有线程) ...\n}\n// 假设的线程结构体 (根据操作系统实现定义)\ntypedef struct {\n uint32_t thread_id;\n // ... 其它线程相关信息 ...\n} thread_t;\n\ntypedef struct {\n volatile uint32_t threshold; // 需要等待的线程数量\n volatile uint32_t count; // 当前已到达屏障的线程数量\n volatile uint32_t phase; // 屏障的阶段 (用于唤醒线程)\n // 等待队列 (用于存放被阻塞的线程)\n // ... (需要实现一个线程等待队列) ...\n} barrier_t;\n\nvoid barrier_init(barrier_t *barrier, uint32_t threshold) {\n barrier->threshold = threshold;\n barrier->count = 0;\n barrier->phase = 0;\n // 初始化等待队列\n // ... (barrier->wait_queue = create_wait_queue();) ...\n}\n\nvoid barrier_wait(barrier_t *barrier) {\n uint32_t current_phase = barrier->phase;\n\n // 原子性地增加计数器\n uint32_t new_count = atomic_add(&barrier->count, 1) + 1; // atomic_add 返回的是旧值，所以要 + 1\n\n if (new_count == barrier->threshold) {\n // 最后一个到达的线程负责重置屏障并唤醒所有等待的线程\n\n // 重置计数器\n barrier->count = 0;\n\n // 增加屏障阶段 (用于唤醒等待的线程)\n atomic_add(&barrier->phase, 1);\n\n // 唤醒所有等待的线程\n // ... unblock_all_threads(barrier->wait_queue); ...\n // ... yield(); ... // 考虑是否需要切换线程\n // 实际情况可能需要遍历等待队列，逐个唤醒线程\n } else {\n // 其它线程需要等待\n\n // 将当前线程加入等待队列\n // ... block_current_thread(barrier->wait_queue); ...\n\n // 调度到其它线程\n // ... yield(); ...\n\n // 当线程被唤醒时，它会从这里继续执行\n // 确保线程是在正确的阶段被唤醒\n while (barrier->phase == current_phase) {\n // 自旋等待，直到屏障进入下一个阶段\n // 这种情况是为了防止假唤醒 (spurious wakeups)\n // 可以加入 yield() 或其它让步操作，避免过度占用CPU\n // 例如： asm volatile ("pause" ::: "memory");\n }\n }\n}\ntypedef struct {\n volatile uint32_t writer; // 0: no writer, 1: writer present\n volatile uint32_t readers; // Number of active readers\n // ... (等待队列，用于阻塞写线程和读线程) ...\n} rwlock_t;\n\nvoid rwlock_init(rwlock_t *rwlock) {\n rwlock->writer = 0;\n rwlock->readers = 0;\n // ... (初始化等待队列) ...\n}\n\nvoid rwlock_read_lock(rwlock_t *rwlock) {\n while (1) {\n // 检查是否有写线程正在写\n if (rwlock->writer == 0) {\n uint32_t current_readers = rwlock->readers;\n if (atomic_compare_and_swap(&rwlock->readers, current_readers, current_readers + 1) == 0) {\n // 获取读锁成功\n break;\n }\n } else {\n // 有写线程，需要阻塞当前读线程\n // ... (将当前线程加入读等待队列) ...\n // block_current_thread(rwlock->read_wait_queue);\n // yield();\n }\n }\n}\n\nvoid rwlock_read_unlock(rwlock_t *rwlock) {\n atomic_add(&rwlock->readers, -1);\n // ... (唤醒写等待队列中的一个线程，如果队列不为空) ...\n // if (rwlock->write_wait_queue is not empty) {\n // unblock_thread(rwlock->write_wait_queue);\n // yield(); // 考虑是否需要切换线程\n // }\n}\n\nvoid rwlock_write_lock(rwlock_t *rwlock) {\n while (1) {\n // 检查是否有读线程或写线程正在访问\n if (rwlock->writer == 0 && rwlock->readers == 0) {\n if (atomic_compare_and_swap(&rwlock->writer, 0, 1) == 0) {\n // 获取写锁成功\n break;\n }\n } else {\n // 有读线程或写线程，需要阻塞当前写线程\n // ... (将当前线程加入写等待队列) ...\n // block_current_thread(rwlock->write_wait_queue);\n // yield();\n }\n }\n}\n\nvoid rwlock_write_unlock(rwlock_t *rwlock) {\n rwlock->writer = 0;\n // ... (唤醒读等待队列中的所有线程，如果队列不为空) ...\n // unblock_all_threads(rwlock->read_wait_queue);\n // ... (唤醒写等待队列中的一个线程，如果队列不为空) ...\n // if (rwlock->write_wait_queue is not empty) {\n // unblock_thread(rwlock->write_wait_queue);\n // }\n // yield(); // 考虑是否需要切换线程\n}\ntypedef struct {\n volatile uint32_t locked; // 0: unlocked, 1: locked\n} spinlock_t;\n\nvoid spinlock_init(spinlock_t *lock) {\n lock->locked = 0;\n}\n\nvoid spinlock_lock(spinlock_t *lock) {\n uint32_t expected = 0;\n uint32_t new_value = 1;\n\n while (atomic_compare_and_swap(&lock->locked, expected, new_value) != 0) {\n // 自旋等待\n expected = 0; // 每次失败后重置expected\n // 可以考虑加入 yield() 或其它让步操作，避免过度占用CPU\n // 例如： asm volatile ("pause" ::: "memory"); // RISC-V 的 pause 指令\n }\n}\n\nvoid spinlock_unlock(spinlock_t *lock) {\n lock->locked = 0;\n asm volatile ("fence rw,w" ::: "memory"); // 确保解锁操作对其它核心可见\n}\n#include <stdint.h>\n#include <stdbool.h>\n\n// 假设的线程结构体 (需要根据你的操作系统实现定义)\ntypedef struct {\n uint32_t thread_id;\n // ... 其他线程相关信息 ...\n} thread_t;\n\ntypedef struct {\n volatile uint32_t owner_thread_id; // 持有锁的线程 ID (0 表示未持有)\n volatile uint32_t recursion_count; // 递归计数器\n // 等待队列 (用于存放被阻塞的线程)\n // ... (需要实现一个线程等待队列) ...\n} reentrant_lock_t;\n\nvoid reentrant_lock_init(reentrant_lock_t *lock) {\n lock->owner_thread_id = 0;\n lock->recursion_count = 0;\n // 初始化等待队列\n // ... lock->wait_queue = create_wait_queue(); ...\n}\n\nvoid reentrant_lock_lock(reentrant_lock_t *lock) {\n uint32_t current_thread_id = get_current_thread_id(); // 获取当前线程 ID\n\n // 循环尝试获取锁，直到成功\n while (1) {\n // 检查锁是否被持有\n if (lock->owner_thread_id == 0) {\n // 锁未被持有，尝试获取\n if (atomic_compare_and_swap(&lock->owner_thread_id, 0, current_thread_id) == 0) {\n // 获取锁成功\n lock->recursion_count = 1;\n return;\n }\n // 获取锁失败，重试\n } else if (lock->owner_thread_id == current_thread_id) {\n // 锁已被当前线程持有，增加递归计数器\n lock->recursion_count++;\n return;\n } else {\n // 锁已被其他线程持有，阻塞等待\n // ... block_current_thread(lock->wait_queue); ...\n // ... yield(); ...\n }\n }\n}\n\nvoid reentrant_lock_unlock(reentrant_lock_t *lock) {\n uint32_t current_thread_id = get_current_thread_id(); // 获取当前线程 ID\n\n // 检查当前线程是否持有锁\n if (lock->owner_thread_id != current_thread_id) {\n // 当前线程不持有锁，报错\n // ... error_handler("Current thread does not own the lock"); ...\n return;\n }\n\n // 减少递归计数器\n lock->recursion_count--;\n\n // 检查递归计数器是否为 0\n if (lock->recursion_count == 0) {\n // 释放锁\n lock->owner_thread_id = 0;\n\n // 唤醒等待线程\n // ... unblock_all_threads(lock->wait_queue); ...\n // ... yield(); ...\n }\n}\n同时满足：互斥 请求与保持 不可剥夺 循环等待
\n线程不断尝试获取资源，但由于其他线程也在不断尝试，导致所有线程都无法取得进展。
\n解决：
\n一个或多个线程长时间无法获得所需资源，导致无法执行。
\n解决：
\n| 特性 | \n乐观锁 | \n悲观锁 | \n
|---|---|---|
| 假设 | \n数据很少被修改 | \n数据总是会被修改 | \n
| 加锁时机 | \n更新时检查数据是否被修改 | \n读取时加锁，防止其他线程修改数据 | \n
| 冲突处理 | \n重试 (自旋) | \n阻塞等待锁释放 | \n
| 适用场景 | \n读多写少，冲突概率低 | \n写多读少，冲突概率高 | \n
| 优点 | \n并发性能高，锁开销小 | \n保证数据一致性 | \n
| 缺点 | \n存在 ABA 问题，自旋开销，冲突概率高 | \n并发性能低，锁开销大 | \n
\n\n同步机制之后有必要简单考虑一下异步机制
\n
上述同步机制中，任务在运行时获取的是所需资源的原始内存。若改成获取资源内存的拷贝，即消息机制（或事件通信），则本文不称为同步。
\n因此我们可以再对同步加以定义：即同步时，任务需锁定（或者说持有）资源的原始内存。
\n异步机制总是需要需要额外的内存，这存在以下情况：
\n同步机制虽然也需要额外内存，但可以发现，所需的都是常数级别内存，内存开销小。
\n| \n | 同步 | \n异步 | \n
|---|---|---|
| 资源排布 | \n场景越复杂就需要做越复杂的资源安排 | \n资源安排较为简单 | \n
| 内存开销 | \n内存开销小 | \n内存开销做不到最小 | \n
至于时间开销，则根据不同场景和异步机制而不同，本文略。
\n如果我们的观察维度是任务，那么分布式（计算），即联机（而非单机）计算任务结果，也与同步有关。
\n联机情况下需要考虑的有单点故障（物理机器故障，如物理磁盘和内存损坏），网络故障（影响通信，如数据包丢失、延迟、乱序、重复），负载均衡，弹性扩容等。 此外，由于分布式系统中的各个节点拥有独立的时钟，因此还存在时钟不同步的问题，这可能导致事件顺序判断错误。 分布式同步需要处理这些额外的复杂性，常用的技术包括：
\n分布式计算与单机上的编程必然是完全不同的。可以说，很多解决方案是在通过协调协议来模拟非分布式系统，对分布式本身的控制减少了。
\n在分布式计算中，同时更新数据的多个副本（复制数据的并发更新）而不进行协调可能导致不一致和冲突。分布式的一些通用解决方案的开销可能比较大。
\n无冲突复制数据类型（CRDT）是一种特殊的数据结构，其数学特性保证了并发更新的无冲突合并，从而确保最终一致性，无需协调。基于此，乐观复制允许所有更新，并在稍后解决潜在的不一致。这种模式直接针对数据冲突本身，因此可以说对是否分布式都适用，前提是数据能通过此种结构表示。（解决同步的方法就是不同步？）
\n","tags":["os"]},{"id":"react-some-patterns-and-optimization","url":"https://yieldray.fun/posts/react-some-patterns-and-optimization","title":"React：一些模式、优化及其实现","date_published":"2025-01-05T19:02:45.000Z","date_modified":"2025-01-05T19:02:45.000Z","content_text":"\n\n在 vue3 中，Render Props 可以通过 作用域插槽 模拟。
\n
vue3 的 作用域插槽 与 组合式API 和这里探讨的 Render Props 与 React Hooks 是类似的。
Render Props 是在旧版 React 文档就已经存在的一种模式。
其本质可以说是一种控制反转（IoC），因为在这种模式中，渲染权交给了使用方。
function Toggle({\n render,\n initialOn = false,\n}: {\n render: (props: { toggle: VoidFunction; on: boolean }) => React.ReactNode;\n}) {\n const [on, setOn] = useState(initialOn);\n return render({\n toggle: () => setOn(!on),\n on,\n });\n}\n\nfunction App() {\n return (\n <Toggle\n render={({ toggle, on }) => {\n return <button onClick={toggle}>{on ? "on" : "off"}</button>;\n }}\n />\n );\n}\n在只有 类组件 的时代，上例也可以使用类组件实现。
\n另一种方式是抽象为 hooks，hooks 的特点是完全没有 渲染权。
\nfunction useToggle(initialOn = false) {\n const [on, setOn] = useState(initialOn);\n const toggle = () => setOn(!on);\n return { on, toggle };\n}\n此时 render props 又可以看成是对 hooks 的抽象：
\nfunction Toggle({\n render,\n initialOn = false,\n}: {\n render: (props: { toggle: VoidFunction; on: boolean }) => React.ReactNode;\n}) {\n const props = useToggle(initialOn); // 1. 调用 hooks 得到 props\n return render(props); // 2. 在 jsx 中消费 props\n}\nCustom hooks 确实可以替代 Render props，但使用 hooks 时需要两步：
\n此时，状态和 UI 是分离的。而 render props 由于拥有渲染权，只需要在 jsx 中消费状态就可以了。
这可以说是使用 render props 的优势，实际使用时权衡利弊即可。
Tip
\n新版 React 文档中也写了一些逻辑复用方法，参见这里
\nRadix UI 是现在很流行的组件库，其使用方式是非常组合式的，即组件由多个子组件组合而成。
\n以 Dialog/Modal 组件为例：
\nimport React from "react";\nimport * as Dialog from "@radix-ui/react-dialog";\nimport { Cross2Icon } from "@radix-ui/react-icons";\nimport "./styles.css";\n\nconst DialogDemo = () => (\n <Dialog.Root>\n <Dialog.Trigger asChild>\n <button>Open Dialog</button>\n </Dialog.Trigger>\n <Dialog.Portal>\n <Dialog.Overlay />\n <Dialog.Content>\n <Dialog.Title>Title</Dialog.Title>\n <Dialog.Description>Description</Dialog.Description>\n <Dialog.Close asChild>\n <button>Close Dialog</button>\n </Dialog.Close>\n </Dialog.Content>\n </Dialog.Portal>\n </Dialog.Root>\n);\n\n\n也可以看出 Radix UI 默认情况是 Uncontrolled 的，本文对此探讨略。
\n
在不使用 context 的情况下，组件设计者可能将组件的各个部分使用 props 承载，这样只有一个组件：
\nimport React, { useState } from "react";\nimport { Button, Modal } from "antd";\n\nconst App = () => {\n const [open, setOpen] = useState(false);\n const showModal = () => setOpen(true);\n const handleCancel = () => setOpen(false);\n\n return (\n <>\n <Button type="primary" onClick={showModal}>\n Open Modal\n </Button>\n <Modal\n open={open}\n onCancel={handleCancel}\n title="Title"\n footer={[\n <Button key="back" onClick={handleCancel}>\n Close\n </Button>,\n <Button key="submit" type="primary">\n Submit\n </Button>,\n ]}\n >\n Description\n </Modal>\n </>\n );\n};\nRadix UI 这种方式在于，其根组件用于创建状态并作为 context 提供：
\nSource: https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/Dialog.tsx
\nconst Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {\n const { __scopeDialog, children, open: openProp, defaultOpen, onOpenChange, modal = true } = props;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const contentRef = React.useRef<DialogContentElement>(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId()}\n titleId={useId()}\n descriptionId={useId()}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n >\n {children}\n </DialogProvider>\n );\n};\n观察其实现可以发现，radix ui 每个组件是通过 createContextScope 来创建 context。
这种“作用域”机制是为了保证根组件创建的 context 只被自身类型的组件消费。
Source：https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
\nimport * as React from "react";\n\nfunction createContext<ContextValueType extends object | null>() {\n // ...\n return [Provider, useContext] as const;\n}\n\ntype Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | undefined;\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };\ninterface CreateScope {\n scopeName: string;\n (): ScopeHook;\n}\n\nfunction createContextScope(scopeName: string, createContextScopeDeps: CreateScope[] = []) {\n // ...\n return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)] as const;\n}\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n // ...\n return createScope;\n}\n\nexport { createContext, createContextScope };\nexport type { CreateScope, Scope };\n另一个模式是 asChild，这是通过 Slot 组件实现的。它将传给 Slot 的 props 都转发给其直接子元素。
\n其实现实际上很简单，但要注意正确合并 event handlers 和 ref，另外还对 className 和 style 的合并有特殊处理。
Source: https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
下面给出一个简单实现：
\nfunction Slot({\n children,\n ...props\n}: React.HTMLAttributes<HTMLElement> & {\n children?: React.ReactNode;\n}) {\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...props,\n ...children.props,\n });\n }\n if (React.Children.count(children) > 1) {\n React.Children.only(null);\n }\n return null;\n}\n以 zustand 为例，它使状态粒度变小的方法是传入一个状态选择器函数：
\n// 粒度大\nconst state = useBearStore();\n\n// 粒度小\nconst nuts = useBearStore((state) => state.nuts);\nconst honey = useBearStore((state) => state.honey);\nSource（见 createImpl、useStore 实现）：https://github.com/pmndrs/zustand/blob/main/src/react.ts
Source（见 useStore 实现）：https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts
下面给出一个简单实现：
\nfunction createStore<T>(initialState: T) {\n let state = initialState;\n const listeners = new Set<VoidFunction>();\n\n const subscribe = (listener: VoidFunction) => {\n listeners.add(listener);\n return () => listeners.delete(listener);\n };\n\n const setState = (newState: T) => {\n state = newState;\n listeners.forEach((listener) => listener());\n };\n\n const getState = () => state;\n\n const useStoreWithSelector = <U>(selector: (state: T) => U) => {\n return React.useSyncExternalStore(\n subscribe,\n () => selector(getState()),\n () => selector(initialState),\n );\n };\n\n return { useStoreWithSelector, setState, getState };\n}\n使用选择器函数还是有些繁琐，类似 @vue/reactivity 或 signal 机制可能更简单。\n对此 react 生态中也有 valtio 这样基于 Proxy 的状态管理。
\n不妨借助 Proxy 来减小状态粒度，下面修改自这里：
\nfunction create<T extends object>(initial: T) {\n const state = initial;\n type Listener = (state: T, key: keyof T) => void;\n const listeners = new Set<Listener>();\n\n function subscribe(listener: Listener) {\n listeners.add(listener);\n return () => listeners.delete(listener);\n }\n\n function setState<K extends keyof T>(key: K, value: T[K]) {\n if (!Object.is(state[key], value)) state[key] = value;\n listeners.forEach((listener) => listener(state, key));\n }\n\n function useStore() {\n const rerender = useState()[1];\n const tracked = useRef({} as Record<keyof T, boolean>);\n const stateRef = useRef(state);\n\n useLayoutEffect(\n subscribe((_, key) => {\n if (tracked.current[key]) rerender({});\n }),\n [],\n );\n\n return useMemo(() => {\n stateRef.current = state;\n\n return new Proxy({} as T, {\n get(_, property) {\n tracked.current[property] = true;\n return stateRef.current[property];\n },\n set(_, property, value) {\n setState(property as keyof T, value);\n return true;\n },\n });\n }, []);\n }\n\n return useStore;\n}\n\n\n","tags":["react"]},{"id":"boot-process-android-vs-linux","url":"https://yieldray.fun/posts/boot-process-android-vs-linux","title":"BOOT PROCESS: ANDROID vs. LINUX\n","date_published":"2024-12-28T19:49:35.000Z","date_modified":"2024-12-28T19:49:35.000Z","content_text":"WIP：本章待改进
\n
\n\n翻译自： https://xdaforums.com/t/info-boot-process-android-vs-linux.3785254/
\n
注意：\n我并非开发人员或 Android 专家。此处提供的所有信息均来自不同的互联网来源，并且是尽我所知悉的。对于因使用本文信息而对您或您的设备造成的任何损害，我概不负责。
\n在深入了解 Android 的启动过程之前，我们先来看看 Linux PC 的情况。
\nBIOS / UEFI 是硬编码在主板上的第一个软件代码，在我们按下电源按钮后运行。BIOS 在处理器的实模式（16 位）下运行，因此它无法寻址超过 2^20 字节的 RAM，即例程无法访问超过 1 MiB 的 RAM，这是一个严格的限制和主要的不便之处。
\n创建分区时，MBR 保存在 LBA0 中，GPT 标头保存在 LBA1 中，主 GPT 保存在 LBA2-33 中，LBA34（第 35 个）是第一个可用的扇区。备份或辅助 GPT 保存在最后 33 个 LBA 中，操作系统最后一个可用的扇区是（总 LBA 数 - 33）。分区软件将 GPT 分区对齐在较大的边界上，例如在 2,048 的倍数的 LBA 上对齐到 1,048,576 字节（512 字节 * 2048 = 1 MiB）的边界。因此，第一个分区的第一个扇区是 LBA 2048，以此类推。
\n当系统启动时，必须将文件系统的驱动程序加载到 RAM 中才能使用该文件系统，但驱动程序本身是一个文件，位于某个文件系统内部。这就像一个鸡生蛋蛋生鸡的场景。因此，解决方案是始终加载（作为 BIOS/UEFI 标准）可启动存储器上的第一个扇区（在较旧的方案中为 0/0/1 C/H/S，在较新的方案中为 LBA0），它是（传统的或保护性的）MBR。BIOS/UEFI 和存储介质之间的这种通信是通过特定于主机控制器的命令进行的，例如 PC 上具有 SATA/AHCI 接口的设备的 ATA 命令。
\n主引导记录（MBR）
\nDOS 兼容区域
\n卷引导记录（VBR）/分区引导记录（PBR）
\n引导分区（如果存在）
\n在 MBR 方案中，可以使用标志将分区标记为可启动/活动，通常是磁盘的第一个分区
\nWindows 第一阶段引导加载程序仅从 MBR 分区表中读取和加载“活动分区”
\n引导扇区或 VBR/PBR 由第一阶段或 1.5 阶段（GRUB2 上为 2 或 3）引导加载程序读取，该引导加载程序加载第二阶段（GRUB2 上为 4）或实际的引导加载程序
\nMBR / VBR 包含：
\n第一阶段或 1.5 阶段（或 GRUB2 上的 3）引导加载程序读取分区上的文件系统表（如 MFT / FAT），并将实际引导加载程序加载为常规文件
\n引导加载程序（实际）
\n由前一个引导加载程序从同一分区的文件系统中加载
\n加载所有必要的文件系统驱动程序（如果还需要）
\n配置是从数据库中读取的，例如 Linux 上的 /boot/grub/ (GRUB) 和 Windows 上的 <“系统保留”分区>/Boot/BCD (BOOTMGR)
\nWindows:
\nLinux：
\nInitramfs
\ninit > getty（在虚拟终端上）> login（程序）> motd > 登录 shell > bashrc / bash_profile
\n阅读更多关于LINUX 控制台和虚拟终端 的信息
\nUEFI
\n必读：
\n\n可能存在一个或多个引导加载程序（以提供有关如何启动的指示）。对于典型的 Android 设备（最常见的 Qualcomm SoC / ARM 处理器），启动顺序如下：
\n引导加载程序通过从 SoC 接管控制、执行必要的检查、加载所需的组件，然后将启动控制权移交给内核来促进设备的初始启动。在第一阶段检测到 RAM，以开始在其中加载其他硬件（如键盘、显示器等）的配置。\n存在（曾存在）多个由不同处理器、在具有不同（分区）名称的不同设备上执行的引导加载程序，如 RPM (PBL)、DBL（设备引导加载程序；CFG_DATA 或 sbl1）、SBL2、SBL3 (QCSBL) 和 OSBL（操作系统引导加载程序）等。
\n简而言之，在现代 ARM 设备（Qualcomm SoC）上：
\nBootROM / iROM 和 PBL
\niROM 在按下电源按钮时由 CPU0 运行，加载到 iRAM 中（在 RAM 初始化之前）\n它可以设置 RAM 并执行 RAM 中的 PBL，或将此留给 SBL。iROM/PBL 在 SoC 上硬编码，在 CPU 生产过程中写入，并且是闭源的。\n在支持从多个来源（如 eMMC/sdcard/USB/UART/网络）启动的设备（如开放板或某些平板电脑）上，与 PC BIOS 一样，在 iROM 和 PBL 之间有一个额外的阶段：
\nIBL（初始 BL）\n它也被加载到 iRAM 中。根据 iROM 通知的 CPU 引脚设置（隐藏和焊接或暴露以进行手动切换），IBL 将引导模式选择传递给 PBL，并且如果本身由 iROM 进行电子签名，则可以选择检查 PBL 的完整性。
\nSBL 或 XBL（预加载程序）\nIBL 从 eMMC/SDCard 调用 SBL，该 SBL 支持 LCD 输出。SBL 初始化 DDR RAM，加载可信固件 (TZ) 和 RPM 固件（如果 BootROM 未加载）。SBL 在自检设备后调用最终的引导加载程序。\nUboot 是用于嵌入式设备的开源辅助引导加载程序。但是，也可以从 Qualcomm 获取 SBL 的源代码。
\nABOOT（APPSBL；Little Kernel 的前身）
\nABOOT 加载分区表、内核、启动画面（徽标）和调制解调器。它还负责充电模式和快速启动模式。RAM 中用于启动/恢复分区的内存地址在 aboot 中硬编码。\n最终（即在内核之前）引导加载程序的其他示例包括 uboot（用于嵌入式设备的传统 Linux 引导加载程序）或制造商开发的 BL，如 hboot（由 HTC 使用）和 redboot 等。
\n制造商在此阶段设置其限制（例如网络运营商，即 SIM 卡锁和其他限制）。USB 协议不足以破解此类限制，与引导加载程序通信以破解此类限制需要特殊设备（通常称为刷机盒或维修盒），有时甚至需要像 JTAG 这样的协议，即直接与微处理器对话。\n按照惯例，所有这些阶段 1、2、3... 引导加载程序都简称为引导加载程序。而在某些设备上，根本没有引导加载程序分区，并且引导加载程序驻留在 SoC 上。
\n回到启动过程，在初始化启动过程后，引导加载程序（如果已锁定）检查 boot.img（正常启动）或 recovery.img（恢复启动）的完整性，将其加载到 RAM 中，并将控制权移交给内核，为它提供压缩（cpio，gzipped）initramfs 的“phys_initrd_start”地址。
\n一旦内核被引导加载程序加载并解压到 RAM 中以及参数，内核就开始执行。内核实际上是一个自包含的（静态）可执行二进制文件，由在编译时链接在一起的许多目标文件 (.o) 组成。一旦确定了架构和 CPU，就会根据从引导加载程序传递的参数执行依赖于架构的代码。然后执行独立于架构的阶段，其中包括设置驱动程序（显示、触摸等）、文件系统（如 rootfs、tmpfs、proc、ext4 等）以及初始化控制台（如果已配置）。在这里，内核空间结束，用户空间开始（他们称之为）。
\n内核在 rootfs（其本身是 ramfs 或 tmpfs）中解压压缩的 initramfs，并执行 /init 二进制文件，该二进制文件随后读取其配置文件 /init.rc 和其他以 Android 特定 init 语言编写的 /*.rc 文件。在内核的帮助下，init 挂载伪文件系统 /sys 和 /proc，并填充包含设备节点文件的 /dev 目录。然后，它挂载 /system 和所有其他分区（包括 /data，如果已加密，则也会解密），并设置（SELinux 安全）策略、系统属性和环境变量（PATH、EXTERNAL_STORAGE 等）。此外，init 还负责处理任何硬件更改 (ueventd) 和动态发生的启动服务更改（看门狗）。
\n最后，init 启动位于系统分区上的运行时。init 启动的主要最后一个进程之一是 Zygote（Java 虚拟机），它会编译应用程序以在特定的架构（主要是 arm / arm64）上运行。
\n设备树 Blob
\n设备树 Blob (DTB) - 由 DT 编译器 (DTC) 从 DT 源 (DTS) 文本创建 - 是板/SoC 上硬件组件的映射，通常是内核源代码的一部分。
\nPC 硬件通常支持通过 ACPI 进行硬件枚举，即内核可以查询（探测）总线 - PCI（内部设备）、USB（外部设备）、SCSI（存储设备）、HDMI/DVI/VGA（显示设备）等 - 哪些设备连接到它。
\n嵌入式设备（包括 Android 设备）上的总线大多不支持枚举（硬件发现），因为通常存在固定的一组设备，并且无法选择在设备上加载不同的操作系统。因此，需要通知操作系统所有连接的设备，这是通过向内核提供标准的 DTB 来完成的。DTB 由 SoC/主板供应商提供，通常是内核源代码的一部分。在启动过程中，DTB 由引导加载程序在启动时加载并传递给内核，以便内核可以发现硬件并相应地创建节点点。
\n我们可以通过以下方式查看 Adroid 设备上的设备树：
\n~# ls /sys/firmware/devicetree/base\n~# ls /proc/device-tree\nDTB 可以像 AOSP 指定的那样位于单独的 dtb/odm 分区上（并且是 Android 诞生之前针对基于 ARM 的嵌入式 Linux 设备提出的解决方案），但这并没有得到广泛的应用。通常，DTB 会附加到内核 zImage/Image.gz 或放置在 boot.img 内的第二阶段。
\n验证/安全启动
\n确保从开机到加载内核的信任链属于 SoC 供应商（Qualcomm、Intel 等）和 OEM 的领域。在启动过程中的任何时候注入一些恶意或有害的代码都会变得非常困难，以至于不可能实现。
\n为了确保安全的启动链，PBL 验证 SBL 的真实性，SBL 随后验证引导加载程序（TZ、RPM、DSP、HYP 和 aboot）的完整性，以避免加载未签名的映像（引导、恢复、系统等）。TZ 在由 SBL 加载后，还使用基于硬件的根证书验证 ABOOT。
\n具有验证/安全启动实施的引导加载程序通过将其签名与存储在“OEM 密钥库”（某些分区，如 CMNLIB、KEYMASTER 或其他名称）中的密钥进行匹配来验证 boot.img 或 recovery.img（内核、initramfs 和附加到内核或 boot.img 第二阶段的 DTB），该密钥库本身由 OEM 签名。一些供应商允许用自定义密钥库替换/附加此密钥库，以便可以刷写自定义签名映像，然后重新锁定引导加载程序。此处给出了一个简单的详细信息。
\n在此阶段，信任链被移交给存储在引导映像 initramfs 中的“dm-verity”密钥，该密钥负责 Google/AOSP 的“验证启动”过程。Dm-verity（Google 的验证启动的一部分，它实现Linux 设备映射器）是一项内核功能，即它在 boot 映像（内核和 ramdisk）加载到 RAM 中后生效。它会验证随后加载的块设备；/system、（如果存在，则为 /vendor）和可选的其他设备。
\n\nGoogle 建议从 验证启动 2 开始在引导加载程序中集成 libavb（用于验证 boot.img 完整性的本机代码）。
\n解锁引导加载程序
\n阅读此处以了解 BL 解锁的风险。
\n除非解锁引导加载程序，否则无法加载未签名的内核或恢复。要对操作系统进行任何修改，一个关键的过程是禁用 Android 引导加载程序 (aboot) 中内置的安全系统，该系统可保护只读分区免受意外（或故意）修改，以保护隐私、安全和 DRM。这就是所谓的“解锁 NAND”或“解锁引导加载程序”。您必须首先解锁引导加载程序才能修改分区“boot”或“recovery”并在 /system 上获得 root 访问权限。如果引导加载程序已锁定，则您只能对 /cache 和 /data 分区具有写入访问权限。设备上的其他所有内容都是只读的，并且引导加载程序会阻止将未签名的映像刷写到手机。解锁的引导加载程序会忽略 BootROM 启动的签名验证检查，然后转移到“SBL”，然后转移到“ABOOT”，同时加载内核或恢复。
\n一些较新的设备不允许在没有制造商许可的情况下直接解锁引导加载程序 (FRP)，以确保更高的安全性，即分区内容“devinfo”由 OEM 签名，未经其批准不得修改。获得许可后，提供了一种使用 PC 解锁 BL 的官方方法。尽管如此，由于解锁引导加载程序，某些与专有内容相关的功能可能会丢失。
\nDRM 用于保护内容不被复制。
\n\n\n由于移除了 DRM 安全密钥，设备上的某些预加载内容也可能无法访问。
\n
Android Root
\n必读：Root 用户和 Linux 功能：Linux 与 Android\n注意：解锁引导加载程序和 Root 会破坏“验证启动”。这可能是危险的。
\n为了在 Android 上执行某些特权任务，我们需要首先“root”该设备。由于无法从正在运行的 Android 操作系统中启动具有提升权限的进程，因此 root 通常涉及从具有所有功能的启动中运行 root 进程（su-守护进程）。超级用户请求由任何非特权程序通过执行“su”二进制文件提出，权限由应用程序管理。
\n在早期，root 通常涉及启动到自定义恢复模式，这反过来又挂载和修改 /system 文件。通常，某些守护进程的可执行二进制文件被替换为自定义脚本。为了解决因提高安全功能（SELinux、验证启动、SafetyNet 等）而导致的 OTA 和其他问题，引入了无系统 root 方法，该方法被最新的应用程序（如 Magisk）使用。它涉及修改 /boot 映像并将一些文件放在 /data 上。因此，注入了一个新的 init 服务，以满足新安全机制的所有必要要求。
\n在这两种情况下，锁定的引导加载程序都不会启动自定义恢复模式或修改后的内核 (boot.img)。请参阅验证启动。因此，需要解锁引导加载程序才能进行 root。\n但是，有时有可能在没有解锁引导加载程序的情况下获得 root 权限，但并非总是如此。
\n使用某种一键式 root 解决方案（KingRoot、Z4Root、KingoRoot 等）从正在运行的 ROM 中 root 手机的其他方法依赖于 Android 操作系统中的某些漏洞或漏洞利用。随着 Android 的每次新版本发布和改进的防御机制，制造此类安全漏洞变得越来越困难，尽管对于不同的供应商而言，情况也有所不同。最突出的是随着 Lollipop 和 Marshmallow 的发布，无系统方法不得不被引入，因为以前的方法无法工作。当使用这些不正确的 root 方法之一 root 手机时，很可能会在某个时候遇到“root 不完整”之类的消息。如果这样的 root 方法适用于您的设备，则令人震惊。此漏洞利用也是恶意软件进入您设备的一种方式。例如，请参阅 Magisk 安装 - 漏洞、此处 和 此处。一个非常流行的漏洞 dirty cow 后来被修补。
\n此外，对于某些设备，有一些技巧可以在不解锁引导加载程序的情况下刷写自定义恢复模式，这使用某种固件刷写工具（SPFlasher、MiFlasher 等）在下载模式下完成，因为下载模式甚至可以在加载引导加载程序/fastboot 之前访问设备。或者，如果您是编码专家，则可以模仿自定义恢复映像，使其看起来像工厂签名的固件，并通过库存恢复模式刷写它。但是，此漏洞利用也不是通用的解决方案。
\n因此，不需要任何漏洞利用的正确 root 方法是通过解锁的引导加载程序。在购买新手机时必须考虑这一点。让您远离 root 访问和解锁的引导加载程序有利于供应商。通过强迫您使用他们的 ROM（捆绑了一堆无用的膨胀软件应用程序），他们通过收集数据、显示广告和使用许多其他策略从您那里赚取大量资金（以及被迫的忠诚度）。选择提供内核源代码和解锁引导加载程序能力的品牌（当然是在客户承担责任且保修失效的情况下）。
\n固件更新协议（引导加载程序模式）
\n与 BL 类似，在每个设备上，可能存在一个或多个具有不同名称的 BL 模式，如引导加载程序模式、下载模式、紧急模式 (EDL)、ODIN (Samsung)、nvFlash 工具等。当我们在 BL 模式下启动时，设备卡在启动徽标上。一些工厂刷写器在这些模式下工作，例如 MiFlasher (Xiaomi) 和 SP Flash Tool（用于 MTK 设备）。即使设备软砖了，即如果无法访问恢复模式和/或 ROM，也可以访问引导加载程序或下载模式。
\n下载模式
\n下载模式（在设备开机时组合某些按钮；通常是音量上 + 音量下或音量下持续较长时间 + 电源）是许多供应商使用刷写器（软件）刷写工厂固件/更新的官方方法。紧急下载模式 (EDL)，正如它在小米设备上所称的那样，也可以通过 fastboot/adb 命令或使用某些跳线/跳线器访问。但是，为了确保更高的安全性，EDL 在某些较新的设备上被禁用。
\n下载模式是引导加载程序模式（在 PBL 或 SBL 阶段）的主要模式，可以在不解锁引导加载程序的情况下使用。\nOdin (Samsung)、QPST/QFIL 在下载模式（Qualcomm HS-USB QDloader 9008）下工作。\n当我们在下载模式下启动时，设备卡在空白屏幕上。
\n快速启动模式
\nFastboot - 由 ABOOT 提供 - 是一种软件开发工具和用于 Android 引导加载程序的标准通信协议。它是恢复刷写的替代方案，它在引导加载程序模式 (aboot) 下工作，并且捆绑在大多数最新的 ARM Qualcomm 设备上。它是一个通过命令行与设备进行交互的最小 UI，以防发生故障或修改/刷写分区。一些 OEM 提供的 fastboot 功能有限，例如 'fastboot oem' 命令不起作用，并且有些设备根本没有 fastboot。这取决于手机供应商的决定。
\n当设备通过 USB 连接到 PC 时，可以使用快速启动模式通过命令执行操作。即使手机未在恢复模式或 ROM 中打开，或者即使手机上未安装 Android，它也可以工作。您可以在此处阅读我们可以通过快速启动模式执行哪些操作。
\n在此阶段仅激活 NAND (eMMC) 和 USB 模块（驱动程序）。
\n\n由 INIT 挂载的文件系统树：Android 与 Linux
\n本节用于快速说明理解程序执行所需的前置知识
\ngraph TB\n %% 定义节点\n SourceCode["Source Code (源代码)"]\n Tokens["Tokens (词法单元)"]\n SyntaxTree["Syntax Tree (语法树)"]\n IR["Intermediate Representation (中间表示)"]\n ByteCode["Byte Code (字节码)"]\n MachineCode["Machine Code (机器码)"]\n HighLevelLanguage["High Level Language (高级语言)"]\n Evaluate["Evaluate (执行结果)"]\n\n %% 定义连接关系\n SourceCode --"Scanning (词法分析)"--> Tokens --"Parsing (语法分析)"--> SyntaxTree\n\n SyntaxTree --"Analysis (静态分析)"--> IR\n SyntaxTree --"Transpiling (转译)"--> HighLevelLanguage\n\n IR --"Optimizing (优化)"--> IR\n IR --"Code Generation (代码生成)"--> ByteCode\n IR --"Code Generation (代码生成)"--> MachineCode\n IR --"Transpiling (转译)"--> HighLevelLanguage\n\n SyntaxTree --"Tree Walk Interpreter (树遍历解释器)"--> Evaluate\n ByteCode --"Virtual Machine (虚拟机执行)"--> Evaluate\n MachineCode --> Evaluate\n简而言之：前端针对代码（语义），后端关注（物理）运行
\n根据局部性原理，树遍历解释器需要在树结构中（通过指针）来回跳转，造成缓存丢失。
字节码是一个理想化的幻想指令集。可以把字节码看作是AST的一种紧凑的序列化，因此对CPU缓存更友好。
Caution
\nv8 架构并非一成不变，目的在于参考其思路。
\n一个 v8 实例称为 Isolation，隔离 js 堆。
Isolate 对应于一个物理线程。Blink 中的 Isolate：物理线程 = 1：1。
主线程有自己的 Isolate。工作线程有自己的 Isolate。
Context 对应于一个全局对象（在 Frame 的情况下，它是 Frame 的 window 对象）。
由于每个框架都有自己的 window 对象，因此一个渲染器进程中有多个 Context。
ECMA262 规范中包含一个“执行上下文”的定义。和上述 Context 概念比较接近。
每个上下文包含 Realm，因此每个上下文的内置对象都是不同的。
gin用于简化 Chromium 与 v8 交互，还用于 ChromeExtension/PAC/PDFium。
Blink Bindings 用于 WebIDL 自动生成 v8 bindings。
Node.js 则直接使用 v8。
v8 整体流程如下
\ngraph TB\n NetworkCache["Network/Cache"] --> ScriptText["Script Text"]\n ScriptText --> Parser\n Parser --> AST\n AST --> Ignition\n Ignition --> Bytecode\n Bytecode --> Execution\n Execution <--> TypeFeedback["Type Feedback"]\n ObjectShapes["Object Shapes"] --> TypeFeedback\n Bytecode -.-> TurboFan\n TypeFeedback -.-> TurboFan\n TurboFan --> OptimizedCode["Optimized Code"]\n OptimizedCode -- deopt --> Bytecode\n\n subgraph Loading\n NetworkCache\n ScriptText\n end\n\n subgraph Parsing\n Parser\n AST\n end\n\n subgraph Interpreter\n Ignition\n Bytecode\n end\n\n subgraph Execution Phase\n Execution\n TypeFeedback\n ObjectShapes\n end\n\n subgraph Optimization\n TurboFan\n OptimizedCode\n end\n流式解析（后台线程）。字符流解析为 Token 流。
\nv8 使用手写递归下降解析，提供更好的错误处理。
\n\n\n\n
解析但不生成 AST。用于快速执行，跳过无需立即执行的内容（函数，因为可以惰性解析），从而加速和节约内存。
解析过程是必要的，因为语法检查是必要的。
\n\n\n
为了实际执行，则必须生成 AST（注意解析是流式的）。
\n因为 js 变量的语义（例如变量可以在声明前就被引用），还需做范围分析（即：变量提升）。
\n那么 v8 解析器实现没有使用单遍算法，因此做范围分析则需要多扫描一遍，以确定变量引用。
\n\n\n\n
Ignition 生成 High-Level 字节码，其语义与 JavaScript 类似。
\n字节码生成器生成字节码流，该字节码可以直接解释。
采用线程解释器（Threaded Interpreter）实现方式，每条指令直接跳转到下一条指令的实现代码，减少了查表和分派的开销。
不基于栈式虚拟机，而是虚拟寄存器。其优势在于寄存器在字节码中可以是隐含的，因此能够减小字节码体积
注意 JS 是解释型的，因此所有 IR 都存在内存，因此减小 IR 体积就是减小内存占用。
下面以这个简单的代码为例：
\nfunction foo(a) {\n if (a === 0) {\n let b = 1;\n return a;\n }\n}\n\n// 让 foo 变成热函数，否则不会 jit\nfor (let i = 0; i < 1e6; i++) foo();\n为了方便，使用 node.js 来输出函数 foo 的字节码。node --print-bytecode demo.js
\n\na 表示隐式寄存器 accumulator。所以 Lda 表示 load accumulator
\n
22 S> 0x3810d58db0e8 @ 0 : 0c LdaZero\n 28 E> 0x3810d58db0e9 @ 1 : 6c 03 00 TestEqualStrict a0, [0]\n 0x3810d58db0ec @ 4 : 99 08 JumpIfFalse [8] (0x3810d58db0f4 @ 12)\n 53 S> 0x3810d58db0ee @ 6 : 0d 01 LdaSmi [1]\n 0x3810d58db0f0 @ 8 : c4 Star0\n 63 S> 0x3810d58db0f1 @ 9 : 0b 03 Ldar a0\n 71 S> 0x3810d58db0f3 @ 11 : a9 Return\n 0x3810d58db0f4 @ 12 : 0e LdaUndefined\n 78 S> 0x3810d58db0f5 @ 13 : a9 Return\n\n\n\n
使用隐藏类是因为它比哈希表更快。
\n隐藏类记录对象的形状（对象有哪些字段），并当形状变更时，过渡为新形状。
\n用于（字节码）内联缓存（IC）。在隐藏类中查询字段则只需查询偏移量，无需哈希函数开销。
\nTurboFan 是基于 Sea of Nodes (SoN) 基于图的优化编译器。
\nCaution
\nv8 正在使用更传统的控制流图（CFG）中间表示法（IR）替代 SoN，并将其命名为 Turboshaft
\n数据/控制流/副作用被表示为节点，用于其它节点的输入。
复用 Ignition 字节码，函数独立编译，目标也是编译热函数。
JIT，通过推断的类型反馈生成内联优化代码。生成低级 IR，并编译为平台相关机器码。
由于 JS 语义是动态的，类型不匹配时（JIT 失效，就）需降级为字节码解释。
为了方便，下面使用 node.js 来输出函数 foo 的机器码。node --print-opt-code demo.js
注意只有热函数代码才会被 JIT（下例为 ARM64 平台）
0x1086cb700 0 f85c0050 ldur x16, [x2, #-64]\n0x1086cb704 4 b840f210 ldur w16, [x16, #15]\n0x1086cb708 8 36000070 tbz w16, #0, #+0xc (addr 0x1086cb714)\n0x1086cb70c c 580006b1 ldr x17, pc+212 (addr 0x00000001086cb7e0)\n0x1086cb710 10 d61f0220 br x17\n0x1086cb714 14 a9bf7bfd stp fp, lr, [sp, #-16]!\n0x1086cb718 18 910003fd mov fp, sp\n0x1086cb71c 1c a9be03ff stp xzr, x0, [sp, #-32]!\n0x1086cb720 20 a9016fe1 stp x1, cp, [sp, #16]\n0x1086cb724 24 f8520344 ldur x4, [x26, #-224]\n0x1086cb728 28 eb2463ff cmp sp, x4\n0x1086cb72c 2c 54000309 b.ls #+0x60 (addr 0x1086cb78c)\n0x1086cb730 30 d2800001 movz x1, #0x0\n0x1086cb734 34 580004e3 ldr x3, pc+156 (addr 0x00000001086cb7d0) ;; object: 0x011791a5b131 <FeedbackVector[1]>\n0x1086cb738 38 d280001b movz cp, #0x0\n0x1086cb73c 3c f9401fe0 ldr x0, [sp, #56]\n0x1086cb740 40 aa0103e2 mov x2, x1\n0x1086cb744 44 58000530 ldr x16, pc+164 (addr 0x00000001086cb7e8)\n0x1086cb748 48 d63f0200 blr x16\n0x1086cb74c 4c f9402f44 ldr x4, [x26, #88]\n0x1086cb750 50 eb04001f cmp x0, x4\n0x1086cb754 54 54000180 b.eq #+0x30 (addr 0x1086cb784)\n0x1086cb758 58 f9402340 ldr x0, [x26, #64]\n0x1086cb75c 5c f85e83a3 ldur x3, [fp, #-24]\n0x1086cb760 60 910003bf mov sp, fp\n0x1086cb764 64 a8c17bfd ldp fp, lr, [sp], #16\n0x1086cb768 68 f100087f cmp x3, #0x2 (2)\n0x1086cb76c 6c 5400004a b.ge #+0x8 (addr 0x1086cb774)\n0x1086cb770 70 d2800043 movz x3, #0x2\n0x1086cb774 74 91000470 add x16, x3, #0x1 (1)\n0x1086cb778 78 927ffa10 and x16, x16, #0xfffffffffffffffe\n0x1086cb77c 7c 8b306fff add sp, sp, x16, lsl #3\n0x1086cb780 80 d65f03c0 ret\n0x1086cb784 84 f9401fe0 ldr x0, [sp, #56]\n0x1086cb788 88 17fffff5 b #-0x2c (addr 0x1086cb75c)\n0x1086cb78c 8c d2c00604 movz x4, #0x3000000000\n0x1086cb790 90 d10043ff sub sp, sp, #0x10 (16)\n0x1086cb794 94 f90007ff str xzr, [sp, #8]\n0x1086cb798 98 f90003e4 str x4, [sp]\n0x1086cb79c 9c f9000bfb str cp, [sp, #16]\n0x1086cb7a0 a0 d297c101 movz x1, #0xbe08\n0x1086cb7a4 a4 f2a06bc1 movk x1, #0x35e, lsl #16\n0x1086cb7a8 a8 f2c00021 movk x1, #0x1, lsl #32\n0x1086cb7ac ac d2800020 movz x0, #0x1\n0x1086cb7b0 b0 58000144 ldr x4, pc+40 (addr 0x00000001086cb7d8) ;; object: 0x1bd96a0c1151 <NativeContext[271]>\n0x1086cb7b4 b4 aa0403fb mov cp, x4\n0x1086cb7b8 b8 580001d0 ldr x16, pc+56 (addr 0x00000001086cb7f0)\n0x1086cb7bc bc d63f0200 blr x16\n0x1086cb7c0 c0 17ffffdc b #-0x90 (addr 0x1086cb730)\n0x1086cb7c4 c4 d503201f nop\n0x1086cb7c8 c8 5800017f constant pool begin (num_const = 11) ;; constant pool\n0x1086cb7cc cc d63f03e0 constant\n0x1086cb7d0 d0 91a5b131 constant\n0x1086cb7d4 d4 00000117 constant\n0x1086cb7d8 d8 6a0c1151 constant\n0x1086cb7dc dc 00001bd9 constant\n0x1086cb7e0 e0 038c55e0 constant\n0x1086cb7e4 e4 00000001 constant\n0x1086cb7e8 e8 0391a0e0 constant\n0x1086cb7ec ec 00000001 constant\n0x1086cb7f0 f0 039390a0 constant\n0x1086cb7f4 f4 00000001 constant\n0x1086cb7f8 f8 f8548350 ldur x16, [x26, #-184]\n0x1086cb7fc fc d61f0200 br x16\n0x1086cb800 100 97fffffe bl #-0x8 (addr 0x1086cb7f8) ;; debug: deopt position, script offset 'c'\n ;; debug: deopt position, inlining id 'ffffffff'\n ;; debug: deopt reason '(unknown)'\n ;; debug: deopt index 0\n\n\n另见：
\n
https://v8.dev/blog/turbofan-jit
https://v8.dev/blog/launching-ignition-and-turbofan
跟踪式 GC，分代堆布局。基于块的增量式、并发回收。
\n"Minor GC"（新生代垃圾回收）：仅新生代空间
\n"Major GC"（老年代垃圾回收）：所有空间
\n\n\n另见：
\n
https://v8.dev/blog/free-garbage-collection
https://v8.dev/blog/orinoco
https://v8.dev/blog/orinoco-parallel-scavenger
https://v8.dev/blog/concurrent-marking
https://v8.dev/blog/trash-talk
与 blink 垃圾回收配合，可以处理 Oilpan 对象和 v8 对象的循环引用。
\n实现跨 JS 和 C++ 边界回收（可达性分析）
\n\n\n\n
小整数（Smi）内联表示，其它值装箱，通过指针引用。
\n特性：
\n区分 Pointer 和 Smi
\nPointer:\n[offset (30 bits)][01]\n\nSmall integer (Smi):\n[int31 value (31 bits)][0]\n V8 instance data Allocated memory chunks\n ↓ ↓\n┌───┬──┬────────────────────────┬──┬───┬──┬───┬──┐\n│ │ │ │ │ │ │ │ │\n└───┴──┴────────────────────────┴──┴───┴──┴───┴──┘\n ←―――――― ~2GB ――――――→ ↑ ←―― ~2GB ――→\n base (4GB aligned)\n\nNote
\n该图显示了内存布局，其中 V8 实例数据和分配的内存块分布在一个 4GB 对齐的基址上，两侧大约各有 2GB 的区域。
\n\n\n另见：
\n
https://v8.dev/blog/pointer-compression
https://v8.dev/blog/oilpan-pointer-compression
Torque 是一种语言，目标是实现 v8 内置函数。Torque 编译器使用 CodeStubAssembler 将这些片段转换为高效的汇编代码。
\n下面举 Reflect.get 实现为例子：
namespace Reflect {\n// ES6 section 26.1.6 Reflect.get\ntransitioning javascript builtin\nReflectGet(js-implicit context: NativeContext)(...arguments): JSAny {\n const object: JSAny = arguments[0];\n const objectJSReceiver = Cast<JSReceiver>(object)\n otherwise ThrowTypeError(MessageTemplate::kCalledOnNonObject, 'Reflect.get');\n const propertyKey: JSAny = arguments[1];\n const name: AnyName = ToName(propertyKey);\n const receiver: JSAny =\n arguments.length > 2 ? arguments[2] : objectJSReceiver;\n return GetPropertyWithReceiver(\n objectJSReceiver, name, receiver, SmiConstant(kReturnUndefined));\n }\n}\n栈式虚拟机，一种架构无关的低级编译目标（但也不那么低层，因为基于抽象堆栈而非寄存器）。
数据类型很简单：i32/i64/f32/f64/v128（128位SIMD）
WASM 文件都是模块，包含头（function types, imports, function declaration, tables, memories, global varaiables, exports, start function and elements for table initialization），代码段和数据段
\n特点在于，（wasm）内存，表，全局变量都可通过外部控制。
\n\n\n\n
\n\n注意：函数级别编译，因此可在不同优化级别编译器中过渡
\n
流式基线编译器
\n![\"\"](\"/media/v8-wasm.svg\")
\n\n翻译自：https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html
\n
过时警告：原文编写于 2018/05/02
本文总结了当前和提议的类字段和方法语义。在撰写本文时，除了私有静态字段和方法外，所有描述的语义都已获得 TC39 的一致意见。
\n我将讨论下表中的特性。完整的特性集是各列的乘积。
\n| 可见性 | \n位置 | \n类元素 | \n
|---|---|---|
| 公共 | \n实例 | \n字段 | \n
| 私有 | \n静态 | \n方法 | \n
我将详细描述每一列的语义，以及它们彼此组合以及与现有 JS 语言特性的组合结果。
\nES6 已经提供了公共实例方法和静态方法。上述特性矩阵中的其余部分正在由三个独立的提案推进：
\nChrome 72 已经提供了公共实例字段和公共静态字段。字段的实现工作正在 Firefox 和 Safari 中进行中。
\n以下是上述各列的心智模型。下一节将通过具体的示例深入探讨语义，从而强化这些直觉。
\n公共元素是可写且可配置的属性。作为属性，公共元素参与原型继承。
\n私有元素仅可以通过词法作用域名称在具有特定来源的对象上访问。由于它们不是属性，因此它们也不参与原型继承。
\n换一种说法，私有的行为是公共行为的严格子集。封装正是通过词法作用域与对象分派来源限制的组合实现的。JS 中的私有概念是为 JS 设计的，与其他语言中的“私有”不同。
\n实例元素在类的实例上访问。
\n静态元素在类构造函数上访问。
\n字段是与类关联的状态，具有良好的声明式语法。实例字段是每个实例的状态。静态字段是每个类构造函数的状态。
\n方法是与类关联的某种行为，具有良好的声明式语法。实例方法和静态方法每个类评估只有一个标识。实例方法位于原型上，静态方法位于类构造函数上。
\n我希望通过以下示例阐明所有类元素的语义。每个示例之后都会简要解释突出显示的语义。
\n类可以声明公共字段，这些字段可以在实例上作为属性访问。
\n公共实例字段是由 Object.defineProperty 添加的属性。它们在对象的基本类构造时间，在构造函数体运行之前添加。
class Ex1 {\n publicField;\n\n constructor() {\n let desc = Object.getOwnPropertyDescriptor(this, "publicField");\n assert(desc.value === undefined);\n assert(desc.writable);\n assert(desc.enumerable);\n assert(desc.configurable);\n }\n}\n\nnew Ex1();\n对于子类，如果在调用 super() 之前访问 this，则会抛出 ReferenceError。[(*)] 因此，公共实例字段是在 super() 返回时添加的。
class Ex2_Base {\n basePublicField;\n}\n\nclass Ex2_Sub extends Ex2_Base {\n subPublicField;\n\n constructor() {\n super();\n\n assert(this.hasOwnProperty("basePublicField"));\n assert(this.hasOwnProperty("subPublicField"));\n }\n}\n\nnew Ex2_Sub();\nJavaScript 中的所有构造函数都可以返回不同的对象，从而覆盖 new 的结果以及来自 super() 的新绑定的 this 值。对于实例字段，如果超类构造函数返回不同的内容，则子类的字段仍然会被添加。
class Ex3_Base {\n basePublicField;\n}\n\nclass Ex3_ReturnTrickBase {\n trickyBasePublicField;\n\n constructor() {\n return new Ex3_Base();\n }\n}\n\nclass Ex3_ReturnTrickSub extends Ex3_ReturnTrickBase {\n trickySubPublicField;\n\n constructor() {\n super();\n\n assert(!this.hasOwnProperty("trickyBasePublicField"));\n assert(this.hasOwnProperty("basePublicField"));\n assert(this.hasOwnProperty("trickySubPublicField"));\n }\n}\n\nnew Ex3_ReturnTrickSub();\n公共字段名称可以像属性一样计算出来。它们在每个类评估时只计算一次。
\nlet count = 0;\nfunction makeEx4(sym) {\n return class Ex4 {\n [(count++, sym)];\n };\n}\n\nlet key = Symbol("key");\nlet Ex4 = makeEx4(key);\nassert(count === 0);\nlet ex4a = new Ex4();\nassert(ex4a.hasOwnProperty(key));\nassert(count === 1);\nlet ex4b = new Ex4();\nassert(ex4b.hasOwnProperty(key));\nassert(count === 1);\n类可以声明公共方法，这些方法可以通过原型在实例上访问。
\n公共实例方法在类评估时使用 Object.defineProperty 添加到类原型中。它们是可写的、不可枚举的和可配置的。
class Ex5 {\n publicMethod() {\n return 42;\n }\n}\n\nlet desc = Object.getOwnPropertyDescriptor(Ex5.prototype, "publicMethod");\nassert(desc.value === Ex5.prototype.publicMethod);\nassert(desc.writable);\nassert(!desc.enumerable);\nassert(desc.configurable);\n生成器函数、异步函数和异步生成器函数形式也可以是公共实例方法。
\nclass Ex6 {\n *publicGeneratorMethod() {}\n async publicAsyncMethod() {}\n async *publicAsyncGeneratorMethod() {}\n}\ngetter 和 setter 也是可以的。没有生成器、异步或异步生成器 getter 和 setter 形式。
\nclass Ex7 {\n get publicAccessor() {\n return 42;\n }\n set publicAccessor(x) {}\n}\n\nlet desc = Object.getOwnPropertyDescriptor(Ex7.prototype, "publicAccessor");\nassert(desc.value === undefined);\nassert(!desc.enumerable);\nassert(desc.configurable);\n在实例方法中，super 引用超类的 prototype 属性。以下是调用 Base.prototype.basePublicMethod。[^(†)]
class Ex8_Base {\n basePublicMethod() {\n return 42;\n }\n}\n\nclass Ex8_Sub extends Ex8_Base {\n subPublicMethod() {\n return super.basePublicMethod();\n }\n}\n\nassert(new Ex8_Sub().subPublicMethod() === 42);\n类可以声明私有字段，这些字段可以在类声明本身的词法作用域内从基类或子类的实例中访问。
\n私有实例字段用 # 名称（称为“哈希名称”）声明，这些标识符以 # 为前缀。虽然字符不同，但这遵循了使用 _ 前缀属性名称来表示私有的约定。
# 是新的 _，
封装由语言而不是约定强制执行。# 是名称本身的一部分，在声明和访问中都使用。
class Ex9 {\n #privateField;\n\n constructor() {\n this.#privateField = 42;\n }\n}\n\nnew Ex9();\n# 名称的词法作用域规则比标识符名称的词法作用域规则更严格。引用不在作用域内的 # 名称是语法错误。
class Ex10_A {\n #privateField;\n\n constructor() {\n this.#nonExistentField = 42; // 语法错误\n }\n}\nclass Ex10_B {\n #privateField;\n}\n\nnew Ex10_B().#privateField; // 语法错误\n与词法绑定一样，在相同作用域（即类声明）中具有多个同名 # 名称是语法错误，而通过嵌套作用域进行隐藏是允许的。
请注意，由于所有 # 名称都以 # 开头，而属性名称不能以 # 开头，因此两者不会冲突。
class Ex11_A {\n #privateField;\n #privateField; // 语法错误\n}\nclass Ex11_Outer {\n #privateField;\n\n constructor() {\n class Ex11_Inner {\n #privateField;\n\n privateFieldValue() {\n return this.#privateField;\n }\n\n constructor() {\n this.#privateField = 42;\n }\n }\n\n assert(new Ex11_Inner().privateFieldValue() === 42);\n assert(this.#privateField === undefined);\n }\n}\n\nnew Ex11_Outer();\ndelete # 名称也是语法错误。
class Ex12 {\n #privateField;\n constructor() {\n delete this.#privateField; // 语法错误\n }\n}\n私有字段访问严格比公共字段访问更严格。在没有具有该名称的私有字段的对象上获取 # 名称将引发 TypeError。设置 # 名称也是如此。私有字段不是属性，不参与原型继承之类的属性查找机制。这是为了启用封装，因为属性查找机制是可观察的，例如通过 Proxy。
私有字段将词法作用域与分派来源限制相结合。对于私有实例字段，来源是通过声明私有实例字段的类构造的，无论是作为基类还是子类。
\nclass Ex13 {\n #privateField;\n\n getField() {\n return this.#privateField;\n }\n setField(v) {\n this.#privateField = v;\n }\n}\n\nlet ex13 = new Ex13();\nlet onProto = Object.create(ex13);\nassertThrows(() => ex13.getField.call({}), TypeError);\nassertThrows(() => ex13.setField.call({}, 42), TypeError);\nassertThrows(() => ex13.getField.call(onProto), TypeError);\n# 名称可以通过直接 eval 访问，就像其他词法作用域的内容一样。
class Ex14 {\n #privateField;\n\n constructor() {\n eval("this.#privateField = 42");\n }\n}\n\nnew Ex14();\n私有字段与公共字段同时添加，在基类中在构造时间添加，或在子类中 super() 返回后添加。
class Ex15_Base {\n #basePrivateField;\n\n setBasePrivateField() {\n this.#basePrivateField = 42;\n }\n}\n\nclass Ex15_Sub extends Ex15_Base {\n #subPrivateField;\n\n constructor() {\n super();\n\n this.setBasePrivateField();\n this.#subPrivateField = 84;\n }\n}\n\nnew Ex15_Sub();\n与公共实例字段一样，如果 super() 覆盖返回值，则子类的私有字段仍将被添加。对于实现者而言，这意味着私有字段可以添加到任意对象中。
class Ex16_ReturnTrickBase {\n constructor() {\n return new Proxy({}, {});\n }\n}\n\nclass Ex16_ReturnTrickSub extends Ex16_ReturnTrickBase {\n #subPrivateField;\n\n constructor() {\n super();\n\n this.#subPrivateField = 42;\n }\n}\n\nnew Ex16_ReturnTrickSub();\n虽然 # 名称在语言中不是一等公民，但它们具有可观察的不同的每个类评估标识。一个类声明的评估不能访问同一声明的另一个评估的私有字段。
function makeEx17() {\n return class Ex17 {\n #privateField;\n\n getField() {\n return this.#privateField;\n }\n };\n}\n\nlet ex17a = new makeEx17();\nlet ex17b = new makeEx17();\nassertThrows(() => ex17a.getField.call(ex17b), TypeError);\nassertThrows(() => ex17b.getField.call(ex17a), TypeError);\n最后，请注意，目前没有访问 # 名称的简写表示法。它们的访问需要接收者。
私有实例方法类似于公共实例方法。它们的访问方式与私有实例字段相同。
\n这些方法被指定为类实例的不可写私有字段。与私有实例字段一样，它们在基类的构造时间添加，并在子类的 super() 返回后添加。
class Ex18 {\n #privateMethod() {\n return 42;\n }\n\n constructor() {\n assert(this.#privateMethod() === 42);\n assertThrows(() => (this.#privateMethod = null), TypeError);\n }\n}\n\nnew Ex18();\n生成器函数、异步函数和异步生成器函数形式也可以是私有实例方法。
\nclass Ex19 {\n *#privateGeneratorMethod() {}\n async #privateAsyncMethod() {}\n async *#privateAsyncGeneratorMethod() {}\n}\ngetter 和 setter 也是可以的。对于私有实例方法，没有生成器、异步或异步生成器 getter 和 setter 形式。
\n私有方法被指定为一个每个实例的 # 名称到属性描述符的映射列表。这保留了与公共实例方法的可表达形式的对称性，并强制执行私有字段附带的限制。
class Ex20 {\n get #privateAccessor() {\n return 42;\n }\n set #privateAccessor(x) {}\n\n constructor() {\n assert(this.#privateAccessor === 42);\n this.#privateAccessor = "ignored";\n }\n}\n\nnew Ex20();\n每个类评估只有一个私有实例方法的函数标识。即使它们被指定为每个实例的私有字段，实例方法也会在所有实例之间共享。
\nlet exfiltrated;\nclass Ex21 {\n #privateMethod() {}\n\n constructor() {\n if (exfiltrated === undefined) {\n exfiltrated = this.#privateMethod;\n }\n assert(exfiltrated === this.#privateMethod);\n }\n}\n\nnew Ex21();\n在私有实例方法中，super 和 this 遵循与公共实例方法相同的语义。由于私有字段和方法不会添加到原型中，因此下面的 #privateMethod() 会抛出异常。类似地，当将不兼容来源的对象作为接收者传递给实例私有方法时，私有字段查找会抛出异常。
class Ex22_Base {\n #privateMethod() { return 42; }\n}\n\nclass Ex22_Sub extends Ex22_Base {\n #privateMethod() {\n assertThrows(() => super.#privateMethod(), TypeError);\n }\n\n #privateMethodTwo() {\n this.#privateMethod();\n }\n\n publicMethod() {\n this.#privateMethodTwo();\n }\n\n constructor() {\n this.#privateMethod();\n }\n}\n\nassertThrows(() => (new Ex22_Sub).publicMethod.call({}), TypeError);\n所有字段都可以使用就地声明的初始化器表达式进行初始化。初始化器按声明顺序运行。实例字段初始化器表达式被指定为不可观察实例方法的主体，这决定了 this、new.target 和 super 的值。
没有初始化器的字段将初始化为 undefined。
class Ex23 {\n #privateField = 42;\n publicFieldOne = 84;\n publicFieldTwo;\n\n constructor() {\n assert(this.#privateField === 42);\n assert(this.publicFieldOne === 84);\n assert(this.publicFieldTwo === undefined);\n }\n}\n\nnew Ex23();\n字段初始化器在添加字段时按声明顺序运行，并且此顺序可由初始化器观察到。在评估 #privateField 的初始化器时，由于 publicField 尚未添加，因此 #privateField 为 false。由于 #privateField 之后是 publicField，因此使用 this.#privateField 初始化 publicField 也不会出错。
这些初始化器被指定为返回初始化器表达式结果的方法。在实现中不必对方法进行具体化，但这种规范的虚拟方法决定了 this 的值。在实例字段初始化器中，this 是正在构造的对象。在实例字段初始化器运行时，this 是可访问的。
class Ex24 {\n #privateField = this.hasOwnProperty("publicField");\n publicField = this.#privateField;\n\n constructor() {\n assert(!this.#privateField);\n assert(!this.publicField);\n }\n}\n\nnew Ex24();\n在同一个类声明中允许使用多个同名的公共字段和方法，并且它们的初始化器按顺序运行。由于公共方法和字段是使用 Object.defineProperty 添加的属性，因此最后一个字段或方法会覆盖所有之前的字段或方法。
对于私有字段和方法，这种情况不会发生，因为在相同作用域中使用多个同名的 # 名称是语法错误。
let log = "";\nclass Ex25 {\n publicField = ((log += "1"), 42);\n publicField = ((log += "2"), 84);\n publicField() {}\n}\n\nassert(typeof new Ex25().publicField === "function");\nassert(log === "12");\n实例方法在运行任何初始化器之前添加，因此所有实例方法都可以在实例字段初始化器中使用。
\nclass Ex26 {\n #privateField = this.#privateMethod();\n publicField = this.#privateField;\n\n #privateMethod() {\n return 42;\n }\n}\n\nassert(new Ex26().publicField === 42);\n在字段初始化器中，new.target 为 undefined。
class Ex27 {\n publicField = new.target;\n}\n\nassert(new Ex27().publicField === undefined);\n与实例方法一样，super 在实例字段初始化器中引用超类的原型。
class Ex28_Base {\n baseMethod() {\n return 42;\n }\n}\n\nclass Ex28_Sub extends Ex28_Base {\n subPublicField = super.baseMethod();\n}\n\nassert(new Ex28_Sub().subPublicField === 42);\n类体始终是严格代码，因此初始化器不能通过直接 eval 泄漏任何新的绑定。
class Ex29 {\n publicField = eval("var x = 42;");\n}\n\nnew Ex29();\nassertThrows(() => x, ReferenceError);\n在字段初始化器中使用 arguments 是语法错误。
// 语法错误\nclass Ex30 {\n publicField = arguments;\n}\n类可以声明公共静态字段，这些字段可以在类构造函数上作为属性访问。
\n公共静态字段在类评估时使用 Object.defineProperty 添加到类构造函数中。除此之外，它们的语义与公共实例字段相同。
class Ex31 {\n static PUBLIC_STATIC_FIELD;\n}\n\nlet desc = Object.getOwnPropertyDescriptor(Ex31, "PUBLIC_STATIC_FIELD");\nassert(desc.value === undefined);\nassert(desc.writable);\nassert(desc.enumerable);\nassert(desc.configurable);\n公共静态字段仅在其定义的类上初始化，而不是在子类上重新初始化。子类构造函数具有其超类作为其原型。超类的公共静态字段通过原型链访问。
\nclass Ex32_Base {\n static BASE_PUBLIC_STATIC_FIELD;\n}\n\nclass Ex32_Sub extends Ex32_Base {\n static SUB_PUBLIC_STATIC_FIELD;\n}\n\nassert(Ex32_Base.hasOwnProperty("BASE_PUBLIC_STATIC_FIELD"));\nassert(Ex32_Sub.hasOwnProperty("SUB_PUBLIC_STATIC_FIELD"));\nassert(Object.getPrototypeOf(Ex32_Sub) === Ex32_Base);\n公共静态方法声明为函数形式，并且像公共静态字段一样，也可以作为类构造函数上的属性访问。与公共实例方法一样，也接受生成器函数、异步函数、异步生成器函数、getter 和 setter 形式。
\n这些方法在类评估时使用 Object.defineProperty 添加到类构造函数中。与公共实例方法一样，它们是可写的、不可枚举的和可配置的。
class Ex33 {\n static publicStaticMethod() {\n return 42;\n }\n}\n\nlet desc = Object.getOwnPropertyDescriptor(Ex33, "publicStaticMethod");\nassert(desc.value === Ex33.publicMethod);\nassert(desc.writable);\nassert(!desc.enumerable);\nassert(desc.configurable);\n在静态方法中，super 引用超类构造函数，并且可以访问超类的公共静态方法。[^(‡)]
class Ex34_Base {\n static basePublicStaticMethod() {\n return 42;\n }\n}\n\nclass Ex34_Sub extends Ex34_Base {\n static subPublicStaticMethod() {\n return super.basePublicStaticMethod();\n }\n}\n\nassert(Ex34_Sub.subPublicStaticMethod() === 42);\n类可以声明私有字段，这些字段可以在类声明本身的词法作用域内从类构造函数中访问。
\n私有静态字段在类评估时添加到类构造函数中。
\nclass Ex35 {\n static #PRIVATE_STATIC_FIELD;\n\n static publicStaticMethod() {\n Ex35.#PRIVATE_STATIC_FIELD = 42;\n return Ex35.#PRIVATE_STATIC_FIELD;\n }\n}\n\nassert(Ex35.publicStaticMethod() === 42);\n私有静态字段的来源限制将访问限制为类构造函数。以下代码会抛出异常，因为 basePublicStaticMethod 的 this 值是子类构造函数，它没有 #BASE_PRIVATE_STATIC_FIELD 字段。这是私有字段来源限制与 this 动态性的组合的自然结果，尽管对某些人来说出乎意料。
可以通过始终使用类构造函数作为接收者来访问私有静态元素来避免此类错误。
\nclass Ex36_Base {\n static #BASE_PRIVATE_STATIC_FIELD;\n\n static basePublicStaticMethod() {\n return this.#BASE_PRIVATE_STATIC_FIELD;\n }\n}\n\nclass Ex36_Sub extends Ex36_Base {}\n\nassertThrows(() => Ex36_Sub.basePublicStaticMethod(), TypeError);\n私有静态方法类似于公共静态方法。它们的访问方式与私有静态字段相同。
\n这些方法被指定为类构造函数的不可写私有字段。与私有静态字段一样，它们在类评估时添加。
\n与所有方法一样，也接受生成器函数、异步函数、异步生成器函数、getter 和 setter 形式。
\nclass Ex37 {\n static #privateStaticMethod() {\n return 42;\n }\n\n constructor() {\n assertThrows(() => (Ex37.#privateStaticMethod = null), TypeError);\n assert(Ex37.#privateStaticMethod() === 42);\n }\n}\n\nnew Ex37();\n与公共静态方法一样，super 引用超类构造函数。
class Ex38_Base {\n static basePublicStaticMethod() {\n return 42;\n }\n}\n\nclass Ex38_Sub extends Ex38_Base {\n static #subStaticPrivateMethod() {\n assert(super.basePublicStaticMethod() === 42);\n }\n\n static check() {\n Ex38_Sub.#subStaticPrivateMethod();\n }\n}\n\nEx38_Sub.check();\n静态字段可以具有就地初始化器。与实例字段初始化器一样，它们也按声明顺序运行，并且表达式被指定为不可观察静态方法的主体。
\n与实例字段初始化器一样，静态方法在运行任何初始化器之前添加，因此所有静态方法都可以在静态字段初始化器中使用。
\n由于初始化器表达式被指定为静态方法主体，因此 super 引用超类构造函数，this 引用类构造函数。
class Ex39_Base {\n static BASE_PUBLIC_STATIC_FIELD = this;\n static basePublicStaticMethod() {\n return 42;\n }\n}\n\nclass Ex39_Sub extends Ex39_Base {\n static SUB_PUBLIC_STATIC_FIELD = super.basePublicStaticMethod();\n}\n\nassert(Ex39_Sub.BASE_PUBLIC_STATIC_FIELD === Ex39_Base);\nassert(Ex39_Sub.SUB_PUBLIC_STATIC_FIELD === 42);\n在评估静态字段初始化器时，类作用域内的类名绑定已初始化（即可以访问并且不会抛出 ReferenceError）。
class Ex40 {\n static #PRIVATE_STATIC_FIELD = 42;\n static PUBLIC_STATIC_FIELD = Ex40.#PRIVATE_STATIC_FIELD;\n}\n\nassert(Ex40.PUBLIC_STATIC_FIELD === 42);\n我们已经探讨了所有 JavaScript 类元素的语义。也许有些语义令人惊讶，而另一些则在意料之中。我相信私有字段不匹配直觉的一个常见原因是 # 名称的来源限制，我希望本文有助于更清楚地说明这一点。最后，我提供这两句格言：
# 是新的 _
并且
\n私有字段具有来源限制
\n我要感谢 Dan Ehrenberg 为类特性所做的不懈努力和对本文编辑的帮助，以及 Rob Palmer 的校对和建议。
\nthis 语义添加到示例 39。[^(*)]: 在子类构造函数中，this 处于 TDZ（时间死区），直到 super() 返回。
[^(†)]: 在实例方法中，[[HomeObject]] 是类原型。
\n[^(‡)]: 在静态方法中，[[HomeObject]] 是类构造函数。
\n","tags":["ecma262"]},{"id":"whats-new-in-react19","url":"https://yieldray.fun/posts/whats-new-in-react19","title":"React19.0已发布","date_published":"2024-12-09T00:20:20.000Z","date_modified":"2024-12-09T00:20:20.000Z","content_text":"https://react.dev/blog/2024/12/05/react-19
https://www.epicreact.dev/react-19-cheatsheet
React 18 引入 transitions，即低优先级 UI 变更。startTransition 中传入的函数称为 transitions。
function Comp({ onClick, children }) {\n const [isPending, startTransition] = useTransition(); // [!code highlight]\n if (isPending) return <button disabled>rendering...</button>;\n\n const onClick = () => {\n startTransition(() => {\n onClick();\n });\n };\n return <button onClick={onClick}>{children}</button>;\n}\n现在 React 19 支持异步 transitions， ，异步 transitions 称为 actions。
也就是说，startTransition 可以传入异步函数，而 useTransition 现在会考虑 Promise 的状态。
// Using pending state from Actions\nfunction UpdateName({}) {\n const [name, setName] = useState("");\n const [error, setError] = useState(null);\n const [isPending, startTransition] = useTransition(); // [!code highlight]\n\n const handleSubmit = () => {\n startTransition(async () => {\n const error = await updateName(name);\n if (error) {\n setError(error);\n return;\n }\n redirect("/path");\n });\n };\n\n return (\n <div>\n <input value={name} onChange={(event) => setName(event.target.value)} />\n <button onClick={handleSubmit} disabled={isPending}>\n Update\n </button>\n {error && <p>{error}</p>}\n </div>\n );\n}\n新增 useActionState 用于管理 <form> 的状态。
useActionState 接受一个函数（Action），并返回一个包装后的 Action 供调用。
调用封装后的 Action 时，useActionState 将返回 Action 的最后结果 data 和 Action 的待定状态 pending 。
\n\n可以看出，React 正在内置一些功能，避免什么事情都交给 useEffect
\n
// Using <form> Actions and useActionState\nfunction ChangeName({ name, setName }) {\n const [error, submitAction, isPending] = useActionState(async (previousState, formData) => {\n const error = await updateName(formData.get("name"));\n if (error) {\n return error;\n }\n redirect("/path");\n return null;\n }, null);\n\n return (\n <form action={submitAction}>\n <input type="text" name="name" />\n <button type="submit" disabled={isPending}>\n Update\n </button>\n {error && <p>{error}</p>}\n </form>\n );\n}\n引入 useFormStatus，可以读取父级 form 上次提交的状态（类似于 context）。
\nfunction Submit() {\n const { pending, data, method, action } = useFormStatus(); // [!code highlight]\n return <button disabled={pending}>Submit</button>;\n}\n\nexport default function App() {\n return (\n <form action={action}>\n <Submit />\n </form>\n );\n}\nuseOptimistic 已稳定
\nfunction ChangeName({ currentName, onUpdateName }) {\n const [optimisticName, setOptimisticName] = useOptimistic(currentName); // [!code highlight]\n\n const submitAction = async (formData) => {\n const newName = formData.get("name");\n setOptimisticName(newName); // [!code highlight]\n const updatedName = await updateName(newName);\n onUpdateName(updatedName);\n };\n\n return (\n <form action={submitAction}>\n <p>Your name is: {optimisticName}</p> // [!code highlight]\n <p>\n <label>Change Name:</label>\n <input\n type="text"\n name="name"\n disabled={currentName !== optimisticName} // [!code highlight]\n />\n </p>\n </form>\n );\n}\nuse 已稳定。注意它不是一个 hook，无需保证每次渲染的调用数量一致。
\n可用于读取：
\n\n\n可以发现，在一次性数据获取（异步请求）时，可以避免使用 useEffect
\n
import { use } from 'react';\n\nfunction MessageComponent({ messagePromise }) {\n const message = use(messagePromise);\n const theme = use(ThemeContext);\n // ...\n新增 react-dom/static 用于 SSG，而 react-dom/server 用于 SSR
\nimport { prerender } from "react-dom/static";\n\nasync function handler(request) {\n const { prelude } = await prerender(<App />, {\n bootstrapScripts: ["/main.js"],\n });\n return new Response(prelude, {\n headers: { "content-type": "text/html" },\n });\n}\nRSC 已稳定
另外新增 Server Functions，可以直接在 RSC 调用（实际上就是自动生成了后端接口）
async function updateName(name) {\n "use server";\n if (!name) {\n return { error: "Name is required" };\n }\n await db.users.updateName(name);\n}\n不需要 forwardRef 了，很方便
\nfunction MyInput({ placeholder, ref }) {\n return <input placeholder={placeholder} ref={ref} />;\n}\n\n//...\n<MyInput ref={ref} />;\n无需 .Provider 了
\n//@@prettier-ignore\nconst ThemeContext = createContext("");\n\nfunction App({ children }) {\n return <ThemeContext value="dark">{children}</ThemeContext>;\n // before: <ThemeContext.Provider>\n}\nref 支持返回 cleanup 函数
\n\n\nBreakingChanges：而不是通过 null 调用 ref 函数
\n
<input\n ref={(ref) => {\n // ref 创建时调用\n\n return () => {\n // ref 从 DOM 移除后调用\n };\n }}\n/>\nuseDeferredValue 支持初始值参数
\n\n\nuseDeferredValue 本身会导致渲染两次，上一次的值用于呈现，当前值用于后台（指主线程低优先级）渲染
\n
function Search({ deferredValue }) {\n // On initial render the value is ''.\n // Then a re-render is scheduled with the deferredValue.\n const value = useDeferredValue(deferredValue, "");\n return <Results query={value} />;\n}\n支持在 CSR/SSR 环境下组件中使用元数据标签，会自动调整到文档的 head
\nfunction BlogPost({ post }) {\n return (\n <article>\n <h1>{post.title}</h1>\n <title>{post.title}</title>\n <meta name="author" content="Josh" />\n <link rel="author" href="https://twitter.com/joshcstory/" />\n <meta name="keywords" content={post.keywords} />\n <p>Eee equals em-see-squared...</p>\n </article>\n );\n}\n\nfunction ComponentOne() {\n return (\n <Suspense fallback="loading...">\n <link rel="stylesheet" href="foo" precedence="default" />\n <link rel="stylesheet" href="bar" precedence="high" />\n <article class="foo-class bar-class">\n {...}\n </article>\n </Suspense>\n )\n}\n\nfunction ComponentTwo() {\n return (\n <div>\n <p>{...}</p>\n <link rel="stylesheet" href="baz" precedence="default" /> <-- will be inserted between foo & bar\n </div>\n )\n}\n\n\nfunction MyComponent() {\n return (\n <div>\n <script async={true} src="..." />\n Hello World\n </div>\n )\n}\n内置了资源预加载的支持
\nimport { prefetchDNS, preconnect, preload, preinit } from "react-dom";\nfunction MyComponent() {\n preinit("https://.../path/to/some/script.js", { as: "script" }); // loads and executes this script eagerly\n preload("https://.../path/to/font.woff", { as: "font" }); // preloads this font\n preload("https://.../path/to/stylesheet.css", { as: "style" }); // preloads this stylesheet\n prefetchDNS("https://..."); // when you may not actually request anything from this host\n preconnect("https://..."); // when you will request something but aren't sure what\n}\n支持 Custom Element，不过这部分的文档还没更新
\n\n\n注：不支持像 vue 这种编译为 WebComponent
\n
与 Custom Element 实例上的属性匹配的项将被指定为 properties，否则它们为 attributes
\n\n\n","tags":["react"]},{"id":"how-browser-render","url":"https://yieldray.fun/posts/how-browser-render","title":"浏览器：渲染管线","date_published":"2024-12-06T09:24:07.000Z","date_modified":"2024-12-12T12:12:12.000Z","content_text":"TODO：还没写完
\n
本节用于快速说明理解渲染所需的前置知识
\n\n\n全文以 Chromium/Blink 系为例
\n
Caution
\n标准和规范是向后兼容的（Don't break the Web），但实现并非一成不变。
因此实现可能最终会过时，但思路是值得参考的。
1 个浏览器进程
\nN 个 sandbox 渲染器进程（实现Site Isolation）
\n1 个 GPU 进程
\n1 个网络进程，实现网络堆栈
\n多个插件进程
\n浏览器与渲染器进程之间的通信是通过 Mojo 实现的
\n跨线程通信：基于 (blink) PostTask API 进行消息传递，很少共享内存
\n事件循环决定如何在主线程上调度任务。任务是不可打断（暂停）的。
\n任务队列实际是特殊的优先队列，用于排队任务。
\n绘制一帧之前（某些任务导致 UI 变更），必须优先运行渲染步骤任务（Style→Layout→Paint）。
\n渲染的终极目标是将标记语言/样式定义/脚本操作渲染为屏幕上的像素。
\n![\"\"](\"/media/loap-review.svg\")
渲染管线中有很多中间态，使重渲染（更新）更高效。
\n解析 HTML 为 DOM
\n解析并处理样式表，计算出用于渲染的最终值（ComputedStyle），并将样式附加到对应 DOM
规则：级联（cascading）与继承
对于任一CSS属性：
初始值：每个属性有自己规范定义的初始值
声明值：所有应用到当前元素的属性值
级联值：根据级联规则得到的获胜声明
指定值：若存在级联值，则是级联值；否则根据继承规则得到
计算值：将指定值绝对化，为继承做准备（注意：此时没有进行布局，所以可能是auto）
应用值：（完成布局，得到可以用于渲染的绝对值）若计算值无效，则为空
实际值：实际渲染使用的值（此时可能考虑到物理设备做一些舍入）
层叠顺序（省略未实际实现的样式来源）：
过渡 → 作者样式!important → 动画 → 作者样式 → 用户代理样式
这一步的目标是根据 CSS 声明的布局，遵循 CSS 规范地计算出每个布局矩形的坐标和尺寸，最终生成一颗 LayoutTree
\n\n\n参见 blink 源码。另：在 blink 中我们称为 LayoutTree，某些文章会称为 RenderTree
\n
每个 DOM 节点可能：
\n没有对应 LayoutObject：display:none
对应一个 LayoutObject：大部分情况
\n对应多个 LayoutObject：一个 LayoutObject 可以拥有块级子元素或内联子元素，但不能同时拥有两者。因此会生成匿名 LayoutObject 以满足规则。
\n\n\n个人理解这里主要是为一组相连的内联盒子创建包含块。
\n
Note
\n常规流：常规流中的盒子属于格式化上下文，可以是块级或内联级，但不能同时是两者。块级盒子参与块级格式化上下文，内联级盒子参与内联级格式化上下文。
\n\n
遍历 LayoutTree，对 LayoutObject 进行布局操作：计算多种边界矩形的坐标（例如：若内容溢出，则需要计算滚动边界，滚动条等）
\n绘制 LayoutObject。遵循层叠（stacking）顺序。这一步实际上是记录一系列绘制指令
\n\n
光栅化：Skia 将绘制指令转换为 OpenGL/vulkan 调用（把高层指令转换为底层指令），最终生成 bitmap
（GPU 进行光栅化，将生成的位图置于 GPU 内存，通过 OpenGL 纹理对象引用）
\n
运行整个渲染管线来渲染帧是昂贵的。流水线的每个阶段跟踪细粒度的异步无效操作，尽可能的复用前一帧的中间态。（双缓冲）
\n\n如果一个大区域进行变换（例如滚动一个容器），绘制(Paint) + 光栅化(raster)操作仍然是昂贵的...
由于 JS 是阻塞且不可中断的，一切发生在主线程的操作还要与 JS 竞争。总之主线程是很繁忙的。
主线程将页面分层（layer），层可以独立光栅化。每个合成器线程可独立绘制层，分担主线程压力
\n![\"\"](\"/media/loap-composing.svg\")
Warning
\n不要与层叠上下文混淆！
\n合成器线程可以（虽然并非总可以）处理浏览器线程的输入事件，而无需主线程参与
\n\n\n若用户输入会触发 DOM 已设置的监听器，则需要主线程来运行 JS，此时当然就不能只靠合成器线程处理了
\n题外话：
\n
不过现代浏览器对此也有一些默认优化。例如对于touchstart,touchmove,touchend,wheel（不含scroll）事件（默认行为会产生滚动）\n它们在WindowDocument和Document.body上默认为 passive，即浏览器默认不等待监听器执行完毕Related:
\n
Using passive listeners
csstouch-action
Smoother scrolling in Firefox 46 with APZ
![\"\"](\"/media/loap-threaded.svg\")
根据什么规则分层？（参见此处 Blink 源码）
\n![\"性能.png\"](\"https://s2.loli.net/2024/12/06/5ktKyqWiuaz79TY.png\")
overflow: scroll<video> <canvas>will-change: transformWarning
\ntranslateZ(0)。| \n | position: absolute | \ntransition :transform(<2d>) | \n
|---|---|---|
| 渲染阶段 | \nLayout | \nComposite | \n
| BFC | \n创建BFC | \n不创建BFC | \n
| 创建层叠上下文 | \nYes | \nYes | \n
| 文档流 | \n脱离文档流 | \n保持在文档流中 | \n
| 定位参考 | \n相对于最近的定位祖先元素 | \n相对于元素自身 | \n
布局完成后，主线程将图层任务分配给多个合成器线程
\n\n具体来说，composer 向图层（layer）应用不同的属性（移动，缩放，裁剪，etc），构建一棵属性树
\n当所有 paint 工作完成后，主线程阻塞一段时间以接收所有合成器线程的层和属性树
\n图层可以很大，而视口可能只显示层的一部分，因此完整地光栅化整个层是昂贵的
\n合成器线程将层分割为图块（tiles），图块是光栅化的最小单元，越接近视口的图块优先级越高
合成器将图块加入（GPU）线程池来进行光栅化
一旦所有图块都完成光栅化，合成线程就会生成绘制四边形（draw quads）
四边形类似于一个命令，用于在屏幕的特定位置绘制图块，同时需要考虑图层树应用的所有变换
每个四边形都会引用内存中对应图块的光栅化输出（此时像素还未显示在屏幕上）
这些四边形被封装在一个合成帧（compositor frame）对象中，然后提交给 GPU 进程
合成帧来自多个渲染器，也来自浏览器（浏览器有自己的用于UI的合成器
合成帧与表面（surface）相关联，表示它们将在屏幕上出现的位置
表面之间可以相互嵌入。浏览器UI可以嵌入渲染器。渲染器可以为跨源iframe嵌入其他渲染器
显示合成器在 GPU 进程的 Viz 合成线程上运行。它是 viz 服务（visuals 的简写）的一部分
显示合成器负责同步传入的帧，并理解嵌入表面之间的依赖关系（表面聚合）
在大多数平台上，显示合成器的输出是双缓冲的
图块绘制操作会绘制到后缓冲区，通过交换缓冲区来使其可见
最终，我们的像素显示在屏幕上了。:)
下面我们使用这个简单的模型，而非完整的 Style→Layout→Pre-Paint→Paint→Layerize→Commit（主线程）流程
\n![\"Render](\"https://s2.loli.net/2024/12/10/UEySZvphk35n28l.png\")
\n\n回流（reflow）是 Gecko（Firefox）术语。上文讨论 blink 时我们使用布局（layout）一词，但下文会按惯例使用“回流”。
\n
正常情况下，浏览器每帧只需执行一次渲染步骤任务，称为正常回流。
\n当 JavaScript 代码路径强制浏览器以超出其通常节奏的方式执行回流过程时，称为强制回流。
\n\n\n例如，
\nElement.getBoundingClientRect()需要布局引擎同步获取元素精确坐标信息，浏览器必须立即回流（强制同步布局）以计算出当前帧（指即将生成的帧）的信息（不能使用上一帧）。
参见 blink 源码。立即回流就是运行 style 和 layout 步骤，但注意这些步骤本身也有优化策略。下面会提到如何防止破坏优化路径。
当代码路径在一帧内快速连续多次执行强制回流时，称为布局抖动。
\n\n\n参见：https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing
\n
https://devhints.io/layout-thrashing
\n\nCSS 属性也可触发渲染步骤任务，见：https://csstriggers.com/
\n
初次渲染时，通过静态 HTML 得到静态 DOM 结构，此时渲染是增量的：遍历渲染树时，可以根据固定的上下文布局得到当前节点布局。
\n每次 JavaScript 需要查询当前帧布局信息时，都必须回流。多次查询就会导致多次回流。
\n![\"\"](\"https://s2.loli.net/2024/12/11/bN61zISHaYvdkte.png\")
当（JavaScript 操作导致）DOM 变更时，若变动的渲染节点层级越高，则需要重新计算的子树也就越多；
\n反之，若渲染树没有变更，则回流可以使用上一次的布局信息（快速路径）。
\n若同时变更 DOM 并立即查询其布局，则需要立即回流，且回流必须完成重新布局。
\n这就揭示出优化策略：避免在一帧中多次变更 DOM 并查询布局，这会导致破坏布局快速路径（布局抖动）
\n![\"绘制.png\"](\"https://s2.loli.net/2024/12/06/ugKiVT56SDJhYRy.png\")
const elements = [...document.querySelectorAll(".some-class")];\n\n// Bad\nfor (const element of elements) {\n element.classList.add("width-adjust"); // invalidate Layout Tree\n element.getBoundingClientRect(); // force a reflow\n}\n\n// Improved\nconst rects = elements.map((element) => element.getBoundingClientRect());\nelements.forEach((element) => element.classList.add("width-adjust"));\n// Bad\nfor (let i = 0; i < 10; i++) {\n elements[i].style.width = `${container.offsetWidth + 10}px`;\n}\n\n// Improved\nconst containerWidth = container.offsetWidth;\nfor (let i = 0; i < 10; i++) {\n elements[i].style.width = `${containerWidth + 10}px`;\n}\n或变更 DOM 后（通过 requestAnimationFrame）在下一帧读取其布局，避免强制回流。
\n这也是 React 的 useLayoutEffect 会影响性能的原因。它在提交 DOM 之前运行，阻塞当前帧渲染。
也可以使用 useEffect 或 ResizeObserver 来避免阻塞当前帧，但需要考虑布局偏移。
\nWarning
\n**布局抖动（Layout Thrashing）是在一帧内发生的。而布局偏移（Layout Shift）**是多次实际渲染导致的。
关于布局抖动，参见 INP 指标；关于布局偏移，参见 CLS 指标
let i = 0;\n\nfunction MeasureExample() {\n console.log(++i); // => 1 2 3\n const [height, setHeight] = useState(0);\n\n const measuredRef = (node: HTMLElement) => {\n const observer = new ResizeObserver(([entry]) => {\n setHeight(entry.contentRect.height);\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n };\n\n return (\n <>\n <h1 ref={measuredRef}>Hello, world ({i})</h1>\n <h2>The above header is {Math.round(height)}px tall</h2>\n </>\n );\n}\n/**\n * 通过 raf 调度的任务在 下一次重绘（帧）之前 运行\n */\ndeclare function requestAnimationFrame(callback: FrameRequestCallback): number;\n\ninterface FrameRequestCallback {\n /** 当前所处主线程帧的开始时间 */\n (time: DOMHighResTimeStamp): void;\n}\n![\"life-of-a-frame.png\"](\"https://s2.loli.net/2024/12/30/EYSbiu6Q1UFXKRg.png\")
\n![\"event-dispatch-diagram.png\"](\"https://s2.loli.net/2024/12/30/dcDFUNyBeTfH4wl.png\")
\n\n图片引用自：https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4
\n
MDN 上的说明目前比较简略，具体参见 HTML 标准 update the rendering 一节。
\n根据规范（run the animation frame callbacks），排队在同一帧的所有 raf 将会在实际调度 raf 阶段一口气同步执行。
\n举个例子：
\n<style>\n body {\n margin: 0;\n height: 100vh;\n background-size: 200% 200%;\n background-image: linear-gradient(135deg, #ff7c7c, #ffeb3b, #26c6da, #7e57c2);\n animation: glow 10s ease infinite;\n /* 背景颜色持续变化，因此浏览器会持续重绘 */\n }\n\n @keyframes glow {\n 0%,\n 100% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n }\n</style>\n\n<script>\n function loopRaf() {\n for (\n let i = 0;\n i < 50000; // 把这个值调大，效果更明显\n i++\n ) {\n requestAnimationFrame((currentFrame) => {\n console.log(currentFrame); // 当前帧开始时间，因此每次打印的值相同\n console.log(performance.now()); // 实际执行时间\n });\n }\n }\n\n setTimeout(loopRaf, 2000);\n</script>\n上例中，在同一帧中安排了非常多 raf，因为同一帧的所有 raf 会同步顺序执行，运行完后才能重绘，因此 raf 阶段会观测到明显卡顿。
\n当前帧排队的 raf 在下一帧之前运行，即当前帧的 ref 在当前帧运行。但 css 过渡则需要至少两帧才能过渡。
因此常见的模式是嵌套两个 raf：
const doubleRAF = (cb: () => unknown) => {\n requestAnimationFrame(() => requestAnimationFrame(() => cb()));\n};\ndeclare global {\n /** 用于使用优先级任务调度 API 的全局 {@link Scheduler} 入口点。*/\n const scheduler: Scheduler;\n\n interface Scheduler {\n /**\n * 将任务作为回调添加到调度程序，可选择指定优先级、延迟和/或用于中止任务的信号。\n * @param callback 实现任务的回调函数。回调的返回值用于 resolve 此函数返回的 Promise。\n * @param options {@link SchedulerPostTaskOptions} 选项。\n */\n postTask<T extends unknown>(callback: () => T, options?: SchedulerPostTaskOptions): Promise<T>;\n /** 返回一个 Promise，当 await 时，会让出事件循环，允许在新任务中继续执行。*/\n yield(): Promise<void>;\n }\n}\n\n/** 决定任务运行顺序的任务优先级。*/\ntype TaskPriority = "user-blocking" | "user-visible" | "background";\n\ntype SchedulerPostTaskOptions = {\n /**\n * 任务的不可变 {@link TaskPriority}。值为 `"user-blocking"`、`"user-visible"` 或 `"background"` 之一。\n * 若设置，则此优先级将用于任务的整个生命周期，并将忽略在 `signal` 上设置的优先级。\n */\n priority?: TaskPriority;\n /** 一个 {@link AbortSignal} 或 {@link TaskSignal}，可用于中止或重新确定任务的优先级（通过其关联的控制器）。若设置了 `priority`，则信号的优先级将被忽略。*/\n signal?: AbortSignal | TaskSignal;\n /**\n * 将任务添加到调度程序队列后的最短时间（以毫秒为单位）。\n * 实际延迟可能高于指定值，但不会低于指定值。默认延迟为 0。\n */\n delay?: number;\n};\ndeclare global {\n /** 扩展 AbortController，允许设置和更改关联 TaskSignal 的优先级。*/\n class TaskController extends AbortController {\n constructor(options?: TaskControllerOptions);\n /** 与此控制器关联的 TaskSignal。*/\n readonly signal: TaskSignal;\n /** 设置关联 TaskSignal 的优先级。*/\n setPriority(priority: TaskPriority): void;\n }\n\n /** 当 TaskSignal 的优先级更改时触发的事件。*/\n class TaskPriorityChangeEvent extends Event {\n constructor(type: string, init: TaskPriorityChangeEventInit);\n /** 更改前的优先级。*/\n readonly previousPriority: TaskPriority;\n }\n\n /** 扩展 AbortSignal 以包含优先级信息和 prioritychange 事件。*/\n class TaskSignal extends AbortSignal {\n /** 此信号的当前优先级。*/\n readonly priority: TaskPriority;\n /** 当此信号的优先级更改时触发的事件处理程序。*/\n onprioritychange: (event: TaskPriorityChangeEvent) => void;\n }\n}\n\ntype TaskControllerOptions = {\n /** TaskController 创建时 TaskSignal 的初始优先级。*/\n priority?: TaskPriority;\n};\n\ninterface TaskPriorityChangeEventInit extends EventInit {\n /** 更改前的优先级。*/\n previousPriority: TaskPriority;\n}\n优化耗时长的任务的本质是防止主线程阻塞。
\n\n\n主线程一次只能处理一个任务。任何用时超过 50 毫秒的任务都是耗时较长的任务。对于耗时超过 50 毫秒的任务，任务的总时间减去 50 毫秒称为任务的阻塞时段。
\n
scheduler.yield 提供一种简洁的机制，允许我们显式将主线程让出给（浏览器）事件循环。
\nasync function slowTask() {\n firstHalfOfWork();\n await scheduler.yield(); // 让出主线程\n secondHalfOfWork();\n}\nscheduler.yield 可以简单的看作是 scheduler.postTask 的封装
\n// from https://github.com/GoogleChromeLabs/scheduler-polyfill\nfunction schedulerYield() {\n // Use 'user-blocking' priority to get similar scheduling behavior as\n // scheduler.yield(). Note: we can't reliably inherit priority and abort since\n // we lose context if async functions are spread across multiple tasks.\n return self.scheduler.postTask(() => {}, { priority: "user-blocking" });\n}\nscheduler.postTask 允许我们向某些（浏览器实现的）任务队列提交任务，并允许指定任务优先级为以下三个之一：
\nuser-blocking
阻止用户与页面交互的任务。这包括将页面渲染到可以使用的程度，或响应用户输入。
user-visible（默认值）
用户可见但不一定会阻止用户操作的任务。这可能包括呈现页面的非必要部分，如非必要的图像或动画。
background
时间不紧迫的任务。这可能包括日志处理或初始化渲染不需要的第三方库。
还可以通过 TaskController/TaskSignal 实现可变优先级。
\nfunction saveSettings() {\n // Validate the form at high priority\n scheduler.postTask(validateForm, { priority: "user-blocking" });\n\n // Show the spinner at high priority:\n scheduler.postTask(showSpinner, { priority: "user-blocking" });\n\n // Update the database in the background:\n scheduler.postTask(saveToDatabase, { priority: "background" });\n\n // Update the user interface at high priority:\n scheduler.postTask(updateUI, { priority: "user-blocking" });\n\n // Send analytics data in the background:\n scheduler.postTask(sendAnalytics, { priority: "background" });\n}\n![\"\"](\"https://s2.loli.net/2024/12/01/ersvlyJ2RK3QEgM.png\")
可以简单的将三种优先级视为下面三种队列：
\nuser-blocking: MessageChannel.postMessage\nuser-visible: setTimeout\nbackground: requestIdleCallback
对于库来说，可能需要更粒度化的优先级，React scheduler 中包含\nNoPriority ImmediatePriority UserBlockingPriority NormalPriority LowPriority IdlePriority 优先级。实现所谓“时间切片”。
\n任务调度的入口函数如下：
\n// taskQueue: 最小堆，存储所有准备好执行的任务，按过期时间排序\n// timerQueue: 最小堆，存储延迟执行的任务，按开始时间排序\n\nfunction unstable_scheduleCallback(\n priorityLevel: PriorityLevel,\n callback: Callback,\n options?: { delay: number },\n): Task {\n var currentTime = getCurrentTime();\n\n var startTime;\n if (typeof options === "object" && options !== null) {\n var delay = options.delay;\n if (typeof delay === "number" && delay > 0) {\n startTime = currentTime + delay;\n } else {\n startTime = currentTime;\n }\n } else {\n startTime = currentTime;\n }\n\n var timeout;\n switch (priorityLevel) {\n case ImmediatePriority:\n // Times out immediately\n timeout = -1;\n break;\n case UserBlockingPriority:\n // Eventually times out\n timeout = userBlockingPriorityTimeout;\n break;\n case IdlePriority:\n // Never times out\n timeout = maxSigned31BitInt;\n break;\n case LowPriority:\n // Eventually times out\n timeout = lowPriorityTimeout;\n break;\n case NormalPriority:\n default:\n // Eventually times out\n timeout = normalPriorityTimeout;\n break;\n }\n\n var expirationTime = startTime + timeout;\n\n var newTask: Task = {\n id: taskIdCounter++,\n callback,\n priorityLevel,\n startTime,\n expirationTime,\n sortIndex: -1,\n };\n\n if (startTime > currentTime) {\n // This is a delayed task.\n newTask.sortIndex = startTime;\n push(timerQueue, newTask);\n if (peek(taskQueue) === null && newTask === peek(timerQueue)) {\n // All tasks are delayed, and this is the task with the earliest delay.\n if (isHostTimeoutScheduled) {\n // Cancel an existing timeout.\n cancelHostTimeout();\n } else {\n isHostTimeoutScheduled = true;\n }\n // Schedule a timeout.\n requestHostTimeout(handleTimeout, startTime - currentTime);\n }\n } else {\n newTask.sortIndex = expirationTime;\n push(taskQueue, newTask);\n // Schedule a host callback, if needed. If we're already performing work,\n // wait until the next time we yield.\n if (!isHostCallbackScheduled && !isPerformingWork) {\n isHostCallbackScheduled = true;\n requestHostCallback();\n }\n }\n\n return newTask;\n}\n任务调度过程如下：
\nunstable_scheduleCallback 函数，传入任务的优先级、回调函数和可选的延迟时间unstable_scheduleCallback 函数会创建一个 Task 对象，包含任务的优先级、回调函数、开始时间、过期时间等信息startTime (当前时间 + 延迟时间)，判断任务是否需要延迟执行timerQueue 中；否则添加到 taskQueue 中isHostCallbackScheduled 为 false 且 isPerformingWork 为 false），则调用 requestHostCallback 函数requestHostCallback 函数会将 performWorkUntilDeadline 函数添加到主线程的消息队列中performWorkUntilDeadline 函数performWorkUntilDeadline 函数会调用 flushWork 函数flushWork 函数会调用 workLoop 函数，循环执行 taskQueue 中的任务，直到队列为空或时间切片耗尽workLoop 的循环中，会调用 advanceTimers 函数，将 timerQueue 中到期的任务转移到 taskQueue 中\n\n在浏览器中，调度器基于
\nMessageChannel.postMessage实现。它可以看作是入队优先级较高的宏任务，而 setTimeout 会有（HTML 标准定义的）4ms 延迟时间问题。
另外，注意微任务执行完毕后，不会将控制权返回给事件循环。
另外可以发现，React schedular 源码 也在实验性使用 Scheduler postTask API。
\n","tags":["web"]},{"id":"whats-new-in-node22","url":"https://yieldray.fun/posts/whats-new-in-node22","title":"Node.js 22 新特性","date_published":"2024-11-29T22:22:22.000Z","date_modified":"2024-11-29T22:22:22.000Z","content_text":"Node.js 22 已成为 LTS 版本了。让我们快速过一下 Node22 相比 Node20 新增的实验特性和已稳定的实验级特性！
\n\n\n截止编写日期，下面以 Node 20.18.1 和 Node 22.11.0 为例
\n
可以看作是精简版的 npm run，支持搜寻上层目录的 package.json 和添加 ./node_modules/.bin 到 PATH。
不支持 pre 和 post hook。
另外，在传递额外参数时需要：
\nnode --run test -- --verbose\n对于 npm，则只对 - 开头的参数要求必须使用额外的 --。
\n\n简单起见，总是使用额外的
\n--就好。node 和 npm 解析命令行参数策略不同，本文就不深入了。
--watch 已稳定！
启用后，支持在 CommonJS 模块中使用 require() 导入同步 ES 模块
Node 实现了一个叫 amaro 的 @swc/wasm-typescript 包装层，实现了类型擦除。
启用此选项后支持导入和运行 .ts .mts .cts 脚本，仅做类型擦除（可以理解为将类型部分替换为空格）。
不支持 tsconfig.json，当然也不支持 .tsx。
TypeScript 5.7 之前需要启用 allowImportingTsExtensions 才支持导入 .ts 后缀。
并且 tsc 编译器实际上避免重写任何路径，因此开启 allowImportingTsExtensions 的同时必须同时启用 noEmit
TypeScript 5.7 支持 rewriteRelativeImportExtensions 来启用编译器对 .ts .tsx .cts .mts 后缀的相对导入路径改写。
必须满足ts 文件后缀和相对路径，才会改写！否则会保留原样。以下情况不会改写：
\nimport "some-package/file.ts";\n\nimport "#root/file.ts";\n// package.json\n{\n "name": "my-package",\n "imports": {\n "#root/*": "./dist/*"\n }\n}\n\nimport "@/file.ts";\n// tsconfig.json\n{\n "compilerOptions": {\n "module": "nodenext",\n // ...\n "paths": {\n "@/*": ["./src/*"]\n }\n }\n}\n等价于同时启用 --experimental-strip-types 和 --enable-source-maps
\n启用后，提供 node:sqlite3 模块。
\n\n看起来可能是 Node 内部之前用 sqlite3 支持了 WebStorage，现在正好做一个 sqlite3 的 binding。
\n
继支持 --test 后，也支持生成测试覆盖率了。另外 Node 也新增一些测试模块工具，这里不展开了。
\n原生支持 glob 函数
\n\n\n希望将来可以不用在 glob/fast-glob/picomatch 等一堆 glob 库里面做选择了。
\n
可以获取当前所有调用帧信息，很实用的工具函数
\n启用后，每当 Node.js 编译 CommonJS 或 ECMAScript 模块时，都会使用指定目录中的磁盘 V8 代码缓存来加快编译速度。
这可能会降低模块图的首次加载速度，但如果模块内容不变，同一模块图的后续加载速度可能会显著提高。
在此之前，除非显式指定（"type": "module" 或 .mjs），否则 Node 将脚本视为 CommonJS。
现在默认启用对未知脚本，自动检测是否是 CJS 或 ESM。
\n\n注：由于 Node 的策略是先将脚本视为 CJS，因此对于 CJS 应当无性能影响，对 ESM 则会稍微降低性能。
\n
既然实现了 --experimental-require-module。那么这个条件就可以让支持 CJS 导入同步 ESM 的运行时直接导入同一个脚本。
\n改进了与 Web API 的兼容性
\n\n\n不过这是提供一个客户端，没法 cover 服务端场景
\n
实验性支持 HTML 标准定义的 Navigator 接口。
\n\n\n","tags":["node.js"]},{"id":"vue-mount","url":"https://yieldray.fun/posts/vue-mount","title":"vue mount 琐谈","date_published":"2024-11-26T09:09:09.000Z","date_modified":"2024-11-26T09:09:09.000Z","content_text":"看来 Node 比 Deno 还先实现了这个 Web API
\n
不过对于服务端 js，还没有任何从 os 模块切换过来的理由
本文讨论仅 vue 3.5 使用 setup 时，mount 之前的生命周期。
注意 beforeCreate 和 create 不属于组合式 API 的生命周期钩子，因此下文不会探讨。
官方图例如下：
\n![\"Lifecycle](\"https://wsrv.nl/?url=https://raw.githubusercontent.com/vuejs-translations/docs-zh-cn/refs/heads/main/src/guide/essentials/images/lifecycle_zh-CN.png\")
本文仅考虑 mount。从 mountComponent 函数开始（源码：packages/runtime-core/src/renderer.ts）
graph TB\n %% 主要组件挂载流程\n M["mountComponent"] --> SC["setupComponent"]\n SC --> SSC["setupStatefulComponent"]\n SSC --> CS["component.setup"]\n CS --> SRE["setupRenderEffect"]\n SRE --> CUF["componentUpdateFn"]\n\n %% 首次挂载流程\n CUF --> NM{{"是否已挂载?"}}\n NM -->|未挂载| BM["beforeMount"]\n BM --> VNBM["onVnodeBeforeMount"]\n VNBM --> HBM["hook:beforeMount"]\n HBM --> RCR["renderComponentRoot"]\n RCR --> M1["mounted"]\n M1 --> VNM["onVnodeMounted"]\n VNM --> HM["hook:mounted"]\n HM --> IM["instance.isMounted = true"]\n\n %% 更新流程\n NM -->|已挂载| BU["beforeUpdate"]\n BU --> VNBU["onVnodeBeforeUpdate"]\n VNBU --> HBU["hook:beforeUpdate"]\n HBU --> RCR2["renderComponentRoot"]\n RCR2 --> U["updated"]\n U --> VNU["onVnodeUpdated"]\n VNU --> HU["hook:updated"]\n\n %% 标注异步队列的钩子\n subgraph "queuePostRenderEffect"\n M1\n VNM\n HM\n U\n VNU\n HU\n end\n\n %% 样式定义\n classDef default fill:#E6F3FF,stroke:#65C8FF,stroke-width:2px\n classDef async fill:#F2E6FF,stroke:#A585FF,stroke-width:2px\n classDef condition fill:#E6FFFA,stroke:#65E8FF,stroke-width:2px\n\n %% 应用样式\n class M1,VNM,HM,U,VNU,HU async\n class NM condition\n我们知道，组件实际 DOM 节点在 renderComponentRoot 中创建。
因此 setup 和 onBeforeMount 时，DOM 节点并未创建。
而当 onMounted 时，DOM 节点已经添加到文档。
简单验证：
\n<script setup>\nimport { getCurrentInstance, onBeforeMount, onMounted } from "vue";\nconst inDocument = document.contains.bind(document);\nconst instance = getCurrentInstance();\nconst log = (x) =>\n console.log(performance.now(), x, instance.isMounted, instance.vnode.el, inDocument(instance.vnode.el));\n\nlog("setup"); // false null false\nonBeforeMount(() => log("onBeforeMount")); // false null false\nonMounted(() => log("onMounted")); // true <h1>Hi</h1> true\n</script>\n\n<template>\n <h1 ref="h1">Hi</h1>\n</template>\n<script setup>\nimport Comp from "./Comp.vue";\nconst log = (x) => console.log(performance.now(), x);\n</script>\n\n<template>\n <Comp\n @vue:before-mount="log('vnode-before-mount')"\n @vue:before-unmount="log('vnode-before-unmount')"\n @vue:before-update="log('vnode-before-update')"\n @vue:mounted="log('vnode-mounted')"\n @vue:unmounted="log('vnode-unmounted')"\n @vue:updated="log('vnode-updated')"\n />\n</template>\n可以发现，setup 完成（组件已经完成了其响应式状态的设置）后几乎立即同步调用 onBeforeMount。
setup/onBeforeMount 与 onMount 的区别显而易见：只有 onMount 后，DOM 才被创建并挂载。
那么使用 setup 和 onBeforeMount 有什么区别？
个人认为主要的区别是 SSR 期间，onBeforeMount 不会被调用。那么区分 setup 和 onBeforeMount 则可以区分 SSR 和 CSR。
\n\nsetup 执行时间一般很短。那么这里除了可以忽略不计的先后顺序问题，其它问题暂未想到，待补充。。。
\n
setup 和 onBeforeMount 差异很小，考虑 CSR 数据获取的场景，如何选择在 setup 还是 onMounted 中发起请求？
需要获取 DOM 时，答案不言而喻。但绝大部分发起网络请求的场景不涉及 DOM，或者说与 DOM 无关。
当然，onMounted 不会在 SSR 期间调用，SSR 数据获取可参考 Nuxt.js 方案。下面只讨论 CSR。
<script setup>\nimport { onMounted } from "vue";\nimport { ref } from "vue";\nconst data = ref(null);\nconst callApi = () =>\n fetch("https://dummyjson.com/test")\n .then((res) => res.json())\n .then((d) => (data.value = d));\n\ncallApi();\n// OR\nonMounted(callApi);\n</script>\n\n<template>\n <h1>{{ data ? data.status : "loading..." }}</h1>\n</template>\nhttps://router.vuejs.org/zh/guide/advanced/data-fetching.html
\n不妨观察某些第三方库实现：
vue-use 的 useFetch 实现。
@tanstack/vue-query 实现在这方面也是一样的。
\n响应式数据需在 setup 中创建，因此它们实际发起异步请求都是在 setup 中，而不是 onMounted。
\n比较疑惑的点在于，一些博客教程坚持将请求放在 onMounted 发起，给出的说法是在生命周期中更直观/错误处理更好。
当然，使用回调函数确实有优点，如可以在函数作用域中创建临时变量。
总的来说，在无需 DOM 的场景下，坚持使用 onMounted 除了考虑代码风格外，很难有说服力。
由于 setup 发生在 onMounted 之前，且在这之间 vue 是同步创建 DOM 的，这要花一点时间。
因此使用 setup 能够更快的入队请求。虽然收益不会很高，但确实要快一些。
以下例为证：
\n<script setup lang="ts">\nimport { onMounted } from "vue";\nimport { ref } from "vue";\nconst data = ref(null);\nconst callApi = () =>\n fetch("https://worldtimeapi.org/api/timezone/Asia/Hong_Kong")\n .then((res) => res.json())\n .then(({ datetime }) => (data.value = datetime));\n\nconst props = defineProps<{\n on: "setup" | "mounted";\n}>();\n\nswitch (props.on) {\n case "setup":\n callApi();\n break;\n case "mounted":\n onMounted(callApi);\n break;\n}\n</script>\n\n<template>\n <h1>{{ data ?? "loading..." }}</h1>\n</template>\n<script setup>\nimport Comp from "./Comp.vue";\n</script>\n\n<template>\n <Comp on="setup" />\n <Comp on="mounted" />\n <Comp on="mounted" />\n <Comp on="setup" />\n</template>\n我们以 Function.prototype.call 为例，因为它的步骤最简单。
一个典型的 Function.prototype.call 的 polyfill 实现可以是如下：
function functionPrototypeCall(func: (...args: any[]) => any, thisArg: any, ...args: any[]) {\n // 计算出上下文对象\n const thisValue = ordinaryCallGetThis(thisArg);\n // 将函数设置为上下文对象的方法并调用\n return withTempKeyOf(thisValue, (thisValue, key) => thisValue[key](...args), func);\n}\n\nfunction ordinaryCallGetThis(thisArg: any) {\n if (thisArg === null || thisArg === undefined) {\n return globalThis;\n } else {\n return thisArg;\n }\n}\n\nfunction withTempKeyOf<R>(obj: any, cb: (thisValue: any, key: PropertyKey) => R, value?: any): R {\n const UNIQUE_KEY = Symbol();\n const thisValue = Object(obj);\n Object.defineProperty(thisValue, UNIQUE_KEY, { enumerable: false, value, configurable: true });\n const result = cb(thisValue, UNIQUE_KEY);\n delete thisValue[UNIQUE_KEY];\n return result;\n}\n问题在于， ordinaryCallGetThis 和 withTempKeyOf 函数的实现都不完美。
withTempKeyOfwithTempKeyOf 函数的目的是正确调用 Call(func, thisValue, argList)。
当执行 withTempKeyOf(thisValue, (thisValue, key) => thisValue[key](...args), func) 时，Call 抽象操作的所有参数都被正确传入了。
通过设置临时 Symbol 键，并使之不可枚举，已经将该临时键的其可见性降低到最小。
不过不可枚举当然不意味着无法列出，显然，Reflect.ownKeys 就会受影响。
ordinaryCallGetThis该 polyfill 的最大 miss 就是 ordinaryCallGetThis 的实现，即使它看起来很简单。
可以看出，当 thisArg 为 null 或 undefined 时，它返回 globalThis；否则原样返回。
\n这一步部分模拟了 OrdinaryCallBindThis(F, calleeContext, thisArgument) 抽象操作。
当函数 F 是非严格模式下才是此行为；对于严格函数，不会为 thisArg 为 null 或 undefined 做特殊处理。
但是，关键在于我们无法知道传入的函数 func 是否是严格模式！
\n// 此脚本必须在全局环境是非严格模式下运行\n\nfunction strict() {\n "use strict";\n console.log(this === globalThis);\n}\n\nfunction normal() {\n console.log(this === globalThis);\n}\n\nstrict(); // => false\nstrict.call(undefined); // => false\nfunctionPrototypeCall(strict, undefined); // => true\n\nnormal(); // => true\nnormal.call(undefined); // => true\nfunctionPrototypeCall(normal, undefined); // => true\n另外，假设已知函数 func 必然是严格函数，ordinaryCallGetThis 的调用能否省略呢？
显然也是不行的，因为 polyfill 是通过将函数设置为上下文对象的方法并调用来处理 this 的，
但是 Function.prototype.call 也能够正确处理严格模式下 this 不是对象的情况。
function strict2() {\n "use strict";\n console.log(this);\n}\n\nfunction functionPrototypeCall2(func: (...args: any[]) => any, thisArg: any, ...args: any[]) {\n return withTempKeyOf(thisArg, (key) => thisArg[key](...args), func);\n}\n\nstrict2.call(null);\nfunctionPrototypeCall2(strict2, null); // 报错\nTip
\n小知识：Reflect.apply 和 Function.prototype.call 不一样。
前者要求传入的参数列表必须是类数组对象，而后者允许使用 null 和 undefined 替代空数组。
v8 的报错信息为 CreateListFromArrayLike called on non-object，可以看出，v8 内部函数命名与规范一致
实际上，core-js 也没有提供 Function.prototype.call 函数的实现，毕竟它确实无法 polyfill。
\n","tags":["js"]},{"id":"js-structured-clone","url":"https://yieldray.fun/posts/js-structured-clone","title":"js深拷贝的另类实现","date_published":"2024-11-21T07:57:38.000Z","date_modified":"2024-11-21T07:57:38.000Z","content_text":"Window 接口上的 structuredClone() 方法根据结构化克隆算法，为指定值创建深拷贝。
这个函数可以说是深拷贝的模版，core-js 对之有一个遵循规范的 polyfill 实现。
\n根据 HTML 标准，structuredClone(value, options) 的操作步骤很简单：
serialized be ? StructuredSerializeWithTransfer(value, options["transfer"]).deserializeRecord be ? StructuredDeserializeWithTransfer(serialized, this's relevant realm).deserializeRecord.[[Deserialized]].本文不打算探讨 Transfer 对象，那么简单来说，忽略 options 参数，structuredClone 所做操作无非：先序列化 value，再将结果反序列化，最后返回。
\n\n\n注1：通过 StructuredSerializeInternal(value, forStorage [,memory]) 抽象操作
\n
注2：下文都不考虑 SharedArrayBuffer
在浏览器环境中，注意到 history.replaceState 函数的第一个参数实际上会被序列化。\n而 history.state 则返回反序列化的结果。
根据 HTML 标准，其序列化使用 StructuredSerializeForStorage(value) 抽象操作。
\n观察其步骤可以发现，在忽略 Transfer 对象的情况下，StructuredSerializeForStorage 等价于 StructuredSerializeWithTransfer。
这就给我们一个实现 polyfill 的思路，即通过 StructuredSerializeForStorage 来把浏览器实现的结构化克隆算法暴露出来。
\nfunction structuredClone(x: unknown) {\n const UNUSED = "";\n const saved = history.state;\n history.replaceState(x, UNUSED); // 序列化\n const cloned = history.state; // 反序列化\n history.replaceState(saved, UNUSED);\n return cloned;\n}\n在 ECMA262 中，实现深拷贝实际上需要做一些取舍，即区分哪些对象无法拷贝 和 对象的那些部分无法拷贝。
\n结构化克隆算法所做取舍如下：
\nES2015/ES2016 已支持 Generator，但不支持 async/await。
Typescript 编译器使用如下辅助函数降级 async/await 操作符。
var __awaiter =\n (this && this.__awaiter) || // 检查 this.__awaiter 是否已存在，若存在则直接使用，避免重复定义\n function (thisArg, _arguments, P, generator) {\n // thisArg: 绑定 Generator 函数的 this 上下文\n // _arguments: Generator 函数的参数 (通常不使用)\n // P: Promise 构造函数 (默认为全局 Promise)\n // generator: Generator 函数\n\n function adopt(value) {\n // 此函数完全等价于 Promise.resolve 静态方法\n return value instanceof P\n ? value\n : new P(function (resolve) {\n resolve(value);\n });\n }\n\n // 返回一个新的 Promise，用于包装 Generator 函数的执行\n return new (P || (P = Promise))(function (resolve, reject) {\n // resolve: 用于解决外部 Promise\n // reject: 用于拒绝外部 Promise\n\n function fulfilled(value) {\n // 处理 Promise 的 resolve 结果\n try {\n step(generator.next(value)); // 将 Promise 的 resolve 值传递给 Generator 的 next 方法\n } catch (e) {\n reject(e); // 如果 Generator 执行过程中出现错误，则拒绝外部 Promise\n }\n }\n\n function rejected(value) {\n // 处理 Promise 的 reject 结果\n try {\n step(generator["throw"](value)); // 将 Promise 的 reject 值传递给 Generator 的 throw 方法\n } catch (e) {\n reject(e); // 如果 Generator 执行过程中出现错误，则拒绝外部 Promise\n }\n }\n\n function step(result) {\n // 驱动 Generator 函数的执行\n result.done // 检查 Generator 是否执行完毕\n ? resolve(result.value) // 如果执行完毕，则用 Generator 的返回值解决外部 Promise\n : adopt(result.value).then(fulfilled, rejected); // 如果未执行完毕，则等待 yield 后面的 Promise 完成，然后继续执行 Generator\n }\n\n // 开始执行 Generator 函数\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n };\n降级过程如下：
\nasync function foo() {\n const p1 = new Promise((resolve) => setTimeout(() => resolve("1"), 1000));\n const p2 = new Promise((_, reject) => setTimeout(() => reject("2"), 500));\n const results = [await p1, await p2]; // 不要这么写！请使用 Promise.all 或 Promise.allSettled\n}\nasync function foo() {/*BODY*/} 会被转换为 function foo() { return __awaiter(this, void 0, void 0, function* () {/*BODY*/}) }
可以发现，await 都转为了 yield
function foo() {\n return __awaiter(this, void 0, void 0, function* () {\n const p1 = new Promise((resolve) => setTimeout(() => resolve("1"), 1000));\n const p2 = new Promise((_, reject) => setTimeout(() => reject("2"), 500));\n const results = [yield p1, yield p2]; // 不要这么写！请使用 Promise.all 或 Promise.allSettled\n });\n}\n对于 ES5，由于不支持 Generator，编译器还将使用 __generator 辅助函数转换 Generator
Generator 的本质是一个状态机，其 Polyfill 就比较复杂了
\n由于它不属于本文的核心部分，说明略
\n// prettier-ignore\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n // thisArg: Generator 函数的 this 上下文\n // body: Generator 函数的主体逻辑\n\n var _ = { \n label: 0, // 当前 label，用于跳转\n sent: function() { \n // 用于 yield* 表达式，获取 yield* 后 Generator 的返回值\n if (t[0] & 1) throw t[1]; // 如果 Generator 抛出异常，则重新抛出\n return t[1]; // 返回 Generator 的返回值\n },\n trys: [], // try 块的栈\n ops: [] // 操作的栈，用于循环、switch 和 finally 等\n },\n f, // 标记 Generator 是否正在执行\n y, // yield 后表达式的结果，或者 yield* 的 Generator 对象\n t, // 临时变量\n g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); // 创建一个迭代器对象\n\n\n // 定义 next、throw 和 return 方法\n return g.next = verb(0), \n g["throw"] = verb(1), \n g["return"] = verb(2), \n typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), // 实现 Symbol.iterator 接口\n g; // 返回生成的迭代器对象\n\n\n function verb(n) { return function (v) { return step([n, v]); }; }\n // verb 函数用于创建 next、throw 和 return 方法。\n // n 表示操作类型：0 为 next，1 为 throw，2 为 return。\n // v 表示传入的值。\n\n function step(op) {\n // 驱动 Generator 执行的核心函数\n if (f) throw new TypeError("Generator is already executing."); // 如果 Generator 正在执行，则抛出错误\n while (g && (g = 0, op[0] && (_ = 0)), _) try { // g 为迭代器对象，_ 为状态对象\n if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n // 处理 yield* 表达式，如果 yield* 后面的 Generator 还没有执行完毕，则返回 yield* 后 Generator 的返回值\n\n if (y = 0, t) op = [op[0] & 2, t.value]; // 将 yield 后表达式的结果赋值给 op[1]\n switch (op[0]) {\n case 0: case 1: t = op; break; // next 和 throw 操作\n case 4: _.label++; return { value: op[1], done: false }; // yield 表达式\n case 5: _.label++; y = op[1]; op = [0]; continue; // yield* 表达式\n case 7: op = _.ops.pop(); _.trys.pop(); continue; // try 块结束\n default:\n // 处理 try...catch...finally 块\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n // 如果不是 try 块，并且是 catch 或 finally 块，则跳出循环\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n // try 块中的跳转\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n // catch 块中的跳转\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n // finally 块中的跳转\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue; // 恢复 try 块之前的状态\n }\n op = body.call(thisArg, _); // 执行 Generator 函数的主体逻辑\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } // 处理异常和 finally 块\n if (op[0] & 5) throw op[1]; // 重新抛出异常\n return { value: op[0] ? op[1] : void 0, done: true }; // 返回 Generator 的最终结果\n }\n};\n\n\n\n
Blink 的开发工作并非易事。对于 Blink 新手开发者而言，Blink 引入了许多特有的概念和编码规范，旨在实现一个极速的渲染引擎，这需要一定的学习成本。即使是经验丰富的 Blink 开发者，由于 Blink 体量庞大，并且对性能、内存和安全极其敏感，开发工作也充满挑战。
\n本文旨在从宏观角度概述 Blink 的工作原理，希望能帮助 Blink 开发者快速熟悉其架构：
\n有关 Blink 开发的更多常规信息，请参阅 Chromium wiki 页面。
\nBlink 是 Web 平台的渲染引擎。概括地说，Blink 实现了浏览器选项卡内所有内容的渲染：
\n许多客户端（例如 Chromium、Android WebView 和 Opera）都通过 content public APIs 嵌入了 Blink。
\n![\"image1.png\"](\"https://s2.loli.net/2024/11/26/A18lyuSNcE6QxZz.png\")
从代码库的角度来看，“Blink”通常指 //third_party/blink/。从项目的角度来看，“Blink”通常指实现 Web 平台功能的项目。实现 Web 平台功能的代码涵盖了 //third_party/blink/、//content/renderer/、//content/browser/ 和其他位置。
Chromium 采用 多进程架构。Chromium 有一个浏览器进程和 N 个沙盒化的渲染器进程。Blink 运行在渲染器进程中。
\n渲染器进程是如何创建的？出于安全考虑，在跨站点文档之间隔离内存地址区域至关重要（这称为 站点隔离）。理论上，每个渲染器进程最多只能专用于一个站点。然而，实际上，当用户打开过多的选项卡或设备没有足够的内存时，将每个渲染器进程限制在一个站点有时会占用过多的资源。这时，一个渲染器进程可能会被来自不同站点的多个 iframe 或选项卡共享。这意味着一个选项卡中的 iframe 可能由不同的渲染器进程托管，而不同选项卡中的 iframe 可能由同一个渲染器进程托管。渲染器进程、iframe 和选项卡之间不存在 1:1 的映射关系。
\n由于渲染器进程在沙盒中运行，Blink 需要请求浏览器进程来分派系统调用（例如，文件访问、播放音频）和访问用户配置文件数据（例如，Cookie、密码）。这种浏览器与渲染器进程之间的通信是通过 Mojo 实现的。（注意：过去我们使用的是 Chromium IPC，并且许多地方仍在使用它。但是，它已被弃用，并在底层使用了 Mojo）在 Chromium 方面，服务化 正在进行中，并将浏览器进程抽象为一组“服务”。从 Blink 的角度来看，Blink 可以直接使用 Mojo 与服务和浏览器进程进行交互。
\n![\"image2.png\"](\"https://s2.loli.net/2024/11/26/mXvHOcLkg5G8UKt.png\")
如果你想了解更多信息：
\n一个渲染器进程中会创建多少个线程？
\nBlink 有一个主线程、N 个工作线程和几个内部线程。
\n几乎所有重要的事情都发生在主线程上。所有 JavaScript（除了 worker）、DOM、CSS、样式和布局计算都在主线程上运行。Blink 经过高度优化，可以在假设大多是单线程架构的情况下最大限度地提高主线程的性能。
\nBlink 可以创建多个工作线程来运行 Web Workers、ServiceWorker 和 Worklets。
\nBlink 和 V8 可能会创建几个内部线程来处理 webaudio、数据库、GC 等。
\n对于跨线程通信，你必须使用 PostTask API 进行消息传递。不鼓励使用共享内存编程，除非某些地方确实需要出于性能原因使用它。这就是为什么你在 Blink 代码库中看不到很多 MutexLocks 的原因。
\n![\"image3.png\"](\"https://s2.loli.net/2024/11/26/Y8G1EO4wnVgUFxb.png\")
如果你想了解更多信息：
\nBlink 通过 BlinkInitializer::Initialize() 初始化。在执行任何 Blink 代码之前，必须调用此方法。
另一方面，Blink 永远不会被终止；也就是说，渲染器进程会被强制退出而不会被清理。其中一个原因是性能。另一个原因是，通常很难以优雅有序的方式清理渲染器进程中的所有内容（而且这样做不值得）。
\nContent public APIs 是使嵌入器能够嵌入渲染引擎的 API 层。Content public APIs 必须仔细维护，因为它们暴露给嵌入器。
\nBlink public APIs 是将 //third_party/blink/ 中的功能暴露给 Chromium 的 API 层。该 API 层只是从 WebKit 继承的历史遗留物。在 WebKit 时代，Chromium 和 Safari 共享 WebKit 的实现，因此需要 API 层将 WebKit 的功能暴露给 Chromium 和 Safari。现在 Chromium 是 //third_party/blink/ 的唯一嵌入器，API 层已经没有意义了。我们正在积极减少 Blink public APIs 的数量，方法是将 Web 平台代码从 Chromium 移至 Blink（该项目称为 Onion Soup）。
![\"image4.png\"](\"https://s2.loli.net/2024/11/26/LgtTDluOs7rpo3A.png\")
//third_party/blink/ 包含以下目录。有关这些目录的更详细定义，请参阅此文档：
platform/core/ 中分离出来的。例如，几何和图形实用程序。core/ 和 modules/core/ 实现与 DOM 紧密耦合的功能。modules/ 实现更独立的功能。例如 webaudio、indexeddb。bindings/core/ 和 bindings/modules/bindings/core/ 是 core/ 的一部分，bindings/modules/ 是 modules/ 的一部分。大量使用 V8 API 的文件放在 bindings/{core,modules} 中。controller/core/ 和 modules/ 的高级库。例如，devtools 前端。依赖关系按以下顺序流动：
\nmodules/ 和 bindings/modules/ => core/ 和 bindings/core/ => platform/ => 低级原语，例如 //base、//v8 和 //ccBlink 仔细维护暴露给 //third_party/blink/ 的低级原语列表。
如果你想了解更多信息：
\nWTF 是一个“Blink 特定的基础”库，位于 platform/wtf/。我们正试图尽可能地统一 Chromium 和 Blink 之间的编码原语，因此 WTF 应该很小。需要这个库是因为有许多类型、容器和宏确实需要针对 Blink 的工作负载和 Oilpan（Blink GC）进行优化。如果类型是在 WTF 中定义的，则 Blink 必须使用 WTF 类型而不是在 //base 或 std 库中定义的类型。最常用的类型是向量、哈希集、哈希映射和字符串。Blink 应使用 WTF::Vector、WTF::HashSet、WTF::HashMap、WTF::String 和 WTF::AtomicString，而不是 std::vector、std::*set、std::*map 和 std::string。
如果你想了解更多信息：
\n就 Blink 而言，你需要注意三种内存分配器：
\n你可以使用 USING_FAST_MALLOC() 在 PartitionAlloc 的堆上分配对象：
class SomeObject {\n USING_FAST_MALLOC(SomeObject);\n static std::unique_ptr<SomeObject> Create() {\n return std::make_unique<SomeObject>(); // 在 PartitionAlloc 的堆上分配\n }\n};\n由 PartitionAlloc 分配的对象的生命周期应由 scoped_refptr<> 或 std::unique_ptr<> 管理。强烈建议不要手动管理生命周期。Blink 中禁止手动删除。
你可以使用 GarbageCollected 在 Oilpan 的堆上分配对象：
class SomeObject : public GarbageCollected<SomeObject> {\n static SomeObject* Create() {\n return new SomeObject; // 在 Oilpan 的堆上分配\n }\n};\n由 Oilpan 分配的对象的生命周期由垃圾收集器自动管理。你必须使用特殊指针（例如，Member<>、Persistent<>）来持有 Oilpan 堆上的对象。请参阅此 API 参考 以熟悉有关 Oilpan 的编程限制。最重要的限制是，你不允许在 Oilpan 对象的析构函数中触及任何其他 Oilpan 对象（因为不能保证销毁顺序）。
如果你既不使用 USING_FAST_MALLOC() 也不使用 GarbageCollected，则对象将在系统 malloc 的堆上分配。强烈建议不要在 Blink 中这样做。所有 Blink 对象都应由 PartitionAlloc 或 Oilpan 分配，如下所示：
std::unique_ptr<> 或 scoped_refptr<> 足够时，2）在 Oilpan 上分配对象会引入很多复杂性时，或者 3）在 Oilpan 上分配对象会给垃圾收集运行时带来很多不必要的压力时，才使用 PartitionAlloc。无论你使用 PartitionAlloc 还是 Oilpan，都必须非常小心，不要创建悬空指针（注意：强烈建议不要使用原始指针）或内存泄漏。
\n如果你想了解更多信息：
\n为了提高渲染引擎的响应速度，Blink 中的任务应尽可能异步执行。不鼓励使用同步 IPC/Mojo 和任何其他可能需要几毫秒的操作（尽管有些是不可避免的，例如用户的 JavaScript 执行）。
\n渲染器进程中的所有任务都应使用正确的任务类型发布到 Blink 调度器，如下所示：
\n// 使用 kNetworking 的任务类型将任务发布到帧的调度器\nframe->GetTaskRunner(TaskType::kNetworking)->PostTask(..., WTF::Bind(&Function));\nBlink 调度器维护多个任务队列，并智能地确定任务的优先级，以最大限度地提高用户感知的性能。指定正确的任务类型 非常重要，这样 Blink 调度器才能正确且智能地调度任务。
\n如果你想了解更多信息：
\n\n页面（Page）、框架（Frame）、文档（Document）、ExecutionContext 和 DOMWindow 是以下概念：
\n渲染器进程：Page = 1：N。
\nPage：Frame = 1：M。
\nFrame：DOMWindow：Document（或 ExecutionContext）= 1：1：1 在任何时间点，但映射可能会随着时间而改变。例如，考虑以下代码：
\niframe.contentWindow.location.href = "https://example.com";\n在这种情况下，将为 https://example.com 创建一个新的 DOMWindow 和一个新的文档。但是，可以重复使用该框架。
\n（注意：准确地说，在某些情况下会创建一个新文档，但会重复使用 DOMWindow 和框架。还有更复杂的情况）
\n如果你想了解更多信息：
\n站点隔离 使事情更安全，但也更复杂。:) 站点隔离的思想是每个站点创建一个渲染器进程。（站点 是页面的可注册域 + 1 个标签及其 URL 方案。例如，https://mail.example.com 和 https://chat.example.com 位于同一站点，但 https://noodles.com 和 https://pumpkins.com 不位于同一站点）如果一个页面包含一个跨站点 iframe，则该页面可能由两个渲染器进程托管。考虑以下页面：
\n<!-- https://example.com -->\n<body>\n <iframe src="https://example2.com"></iframe>\n</body>\n主框架和 <iframe> 可能由不同的渲染器进程托管。渲染器进程本地的框架由 LocalFrame 表示，而非渲染器进程本地的框架由 RemoteFrame 表示。
从主框架的角度来看，主框架是一个 LocalFrame，而 <iframe> 是一个 RemoteFrame。从 <iframe> 的角度来看，主框架是一个 RemoteFrame，而 <iframe> 是一个 LocalFrame。
LocalFrame 和 RemoteFrame（可能存在于不同的渲染器进程中）之间的通信通过浏览器进程处理。
\n如果你想了解更多信息：
\n框架/文档可能处于分离状态。考虑以下情况：
\ndoc = iframe.contentDocument;\niframe.remove(); // iframe 从 DOM 树中分离\ndoc.createElement("div"); // 但是你仍然可以在分离的框架上运行脚本\n棘手的事实是，你仍然可以在分离的框架上运行脚本或 DOM 操作。由于框架已被分离，大多数 DOM 操作将失败并引发错误。不幸的是，分离框架的行为在浏览器之间并没有真正的互操作性，在规范中也没有明确定义。基本上，期望是 JavaScript 应该继续运行，但大多数 DOM 操作应该失败并抛出一些适当的异常，如下所示：
\nvoid someDOMOperation(...) {\n if (!script_state_->ContextIsValid()) { // 框架已分离\n …; // 设置异常等\n return;\n }\n}\n这意味着在通常情况下，当框架分离时，Blink 需要执行许多清理操作。你可以通过继承 ContextLifecycleObserver 来做到这一点，如下所示：
\nclass SomeObject : public GarbageCollected<SomeObject>, public ContextLifecycleObserver {\n void ContextDestroyed() override {\n // 在这里执行清理操作\n }\n ~SomeObject() {\n // 在这里执行清理操作不是一个好主意，因为这已经太晚了。此外，析构函数不允许触及 Oilpan 堆上的任何其他对象\n }\n};\n当 JavaScript 访问 node.firstChild 时，将调用 node.h 中的 Node::firstChild()。它是如何工作的？让我们来看看 node.firstChild 是如何工作的。
首先，你需要根据规范定义一个 IDL 文件：
\ninterface Node : EventTarget {\n [...] readonly attribute Node? firstChild;\n};\nWeb IDL 的语法在 Web IDL 规范 中定义。[...] 称为 IDL 扩展属性。一些 IDL 扩展属性在 Web IDL 规范中定义，其他是 Blink 特定的 IDL 扩展属性。除了 Blink 特定的 IDL 扩展属性外，IDL 文件应以符合规范的方式编写（即，只需从规范中复制和粘贴）。
其次，你需要为 Node 定义一个 C++ 类并为 firstChild 实现一个 C++ getter：
class EventTarget : public ScriptWrappable { // 所有暴露给 JavaScript 的类都必须继承自 ScriptWrappable\n ...;\n};\n\nclass Node : public EventTarget {\n DEFINE_WRAPPERTYPEINFO(); // 所有具有 IDL 文件的类都必须具有此宏\n Node* firstChild() const { return first_child_; }\n};\n通常情况下，就是这样。当你构建 node.idl 时，IDL 编译器 会自动为 Node 接口和 Node.firstChild 生成 Blink-V8 绑定。自动生成的绑定在 //src/out/{Debug,Release}/gen/third_party/blink/renderer/bindings/core/v8/v8_node.h 中生成。当 JavaScript 调用 node.firstChild 时，V8 调用 v8_node.h 中的 V8Node::firstChildAttributeGetterCallback()，然后调用你在上面定义的 Node::firstChild()。
如果你想了解更多信息：
\n当你编写涉及 V8 API 的代码时，了解 Isolate、Context 和 World 的概念非常重要。它们在代码库中分别由 v8::Isolate、v8::Context 和 DOMWrapperWorld 表示。
Isolate 对应于一个物理线程。Blink 中的 Isolate：物理线程 = 1：1。主线程有自己的 Isolate。工作线程有自己的 Isolate。
\nContext 对应于一个全局对象（在 Frame 的情况下，它是 Frame 的 window 对象）。由于每个框架都有自己的 window 对象，因此一个渲染器进程中有多个 Context。当你调用 V8 API 时，必须确保你位于正确的上下文中。否则，v8::Isolate::GetCurrentContext() 将返回错误的上下文，在最坏的情况下，最终会导致对象泄漏并导致安全问题。
World 是一个支持 Chrome 扩展程序的内容脚本的概念。World 不对应于 Web 标准中的任何内容。内容脚本希望与网页共享 DOM，但出于安全原因，内容脚本的 JavaScript 对象必须与网页的 JavaScript 堆隔离。（此外，一个内容脚本的 JavaScript 堆必须与另一个内容脚本的 JavaScript 堆隔离）为了实现隔离，主线程为网页创建一个主 World，并为每个内容脚本创建一个隔离的 World。主 World 和隔离的 World 可以访问相同的 C++ DOM 对象，但它们的 JavaScript 对象是隔离的。这种隔离是通过为一个 C++ DOM 对象创建多个 V8 包装器来实现的；即，每个 World 一个 V8 包装器。
\n![\"image5.png\"](\"https://s2.loli.net/2024/11/26/bsE4YnaDWzPvgek.png\")
Context、World 和 Frame 之间的关系是什么？
\n假设主线程上有 N 个 World（一个主 World + (N - 1) 个隔离的 World）。那么一个 Frame 应该有 N 个 window 对象，每个 window 对象用于一个 World。Context 是对应于 window 对象的概念。这意味着当我们有 M 个 Frame 和 N 个 World 时，我们有 M * N 个 Context（但 Context 是延迟创建的）。
\n在 worker 的情况下，只有一个 World 和一个全局对象。因此只有一个 Context。
\n再次强调，当你使用 V8 API 时，你应该非常小心使用正确的上下文。否则，最终会导致 JavaScript 对象在隔离的 World 之间泄漏，并导致安全灾难（例如，来自 A.com 的扩展程序可以操纵来自 B.com 的扩展程序）。
\n如果你想了解更多信息：
\n\n在 //v8/include/v8.h 中定义了许多 V8 API。由于 V8 API 是低级的并且难以正确使用，因此 platform/bindings/ 提供了许多包装 V8 API 的辅助类。你应该尽可能多地使用这些辅助类。如果你的代码必须大量使用 V8 API，则文件应放在 bindings/{core,modules} 中。
V8 使用句柄指向 V8 对象。最常见的句柄是 v8::Local<>，它用于从机器堆栈指向 V8 对象。v8::Local<> 必须在机器堆栈上分配 v8::HandleScope 后使用。v8::Local<> 不应在机器堆栈外使用：
void function() {\n v8::HandleScope scope;\n v8::Local<v8::Object> object = ...; // 这是正确的\n}\n\nclass SomeObject : public GarbageCollected<SomeObject> {\n v8::Local<v8::Object> object_; // 这是错误的\n};\n如果要从机器堆栈外指向 V8 对象，则需要使用 包装器跟踪。但是，你必须非常小心，不要用它创建引用循环。通常，V8 API 很难使用。如果你不确定自己在做什么，请咨询 blink-review-bindings@。
\n如果你想了解更多信息：
\n每个 C++ DOM 对象（例如，Node）都有其对应的 V8 包装器。准确地说，每个 C++ DOM 对象每个 World 都有其对应的 V8 包装器。
\nV8 包装器对其对应的 C++ DOM 对象具有强引用。但是，C++ DOM 对象对其 V8 包装器只有弱引用。因此，如果你想将 V8 包装器保持活动状态一段时间，则必须明确地执行此操作。否则，V8 包装器将被过早收集，并且 V8 包装器上的 JS 属性将丢失...
\ndiv = document.getElementById("div");\nchild = div.firstChild;\nchild.foo = "bar";\nchild = null;\ngc(); // 如果我们什么都不做，|firstChild| 的 V8 包装器将被 GC 收集\nassert(div.firstChild.foo === "bar"); //...这将失败\n如果我们什么都不做，child 将被 GC 收集，因此 child.foo 将丢失。为了使 div.firstChild 的 V8 包装器保持活动状态，我们必须添加一种机制，“只要 div 所属的 DOM 树可以从 V8 访问，就使 div.firstChild 的 V8 包装器保持活动状态”。
有两种方法可以使 V8 包装器保持活动状态：ActiveScriptWrappable 和 包装器跟踪.
\n如果你想了解更多信息：
\n从 HTML 文件交付给 Blink 到像素显示在屏幕上，这是一个漫长的旅程。渲染流水线的架构如下。
\n![\"image6.png\"](\"https://s2.loli.net/2024/11/26/HTajLiDvwlrZFBk.png\")
阅读这篇精彩的幻灯片 以了解渲染流水线的每个阶段都做了什么。（我认为我无法写出比这更好的解释了 :-)）
\n如果你想了解更多信息：
\n你可以将任何问题提交至 blink-dev@chromium.org（一般问题）或 platform-architecture-dev@chromium.org（与架构相关的问题）。我们随时乐意提供帮助！:D
\n","tags":["chromium"]},{"id":"chromium-multi-process-architecture","url":"https://yieldray.fun/posts/chromium-multi-process-architecture","title":"Chromium 的多进程架构","date_published":"2024-10-26T00:00:00.000Z","date_modified":"2024-10-26T00:00:00.000Z","content_text":"\n\n翻译自：https://www.chromium.org/developers/design-documents/multi-process-architecture/
\n
本文档描述了 Chromium 的高层架构以及它如何在多种进程类型之间划分。
\n构建一个永不崩溃或永不卡死的渲染引擎几乎是不可能的。构建一个绝对安全的渲染引擎也几乎是不可能的。
\n在某些方面，2006 年左右的网络浏览器状态类似于过去的单用户协作式多任务操作系统。正如在这样的操作系统中，一个行为不当的应用程序可能会导致整个系统崩溃，一个行为不当的网页也可能会导致网络浏览器崩溃。只需要一个渲染引擎或插件错误就可以导致整个浏览器及其所有当前运行的标签页崩溃。
\n现代操作系统更加健壮，因为它们将应用程序放入彼此隔离的独立进程中。一个应用程序的崩溃通常不会损害其他应用程序或操作系统的完整性，并且每个用户对其他用户数据的访问受到限制。Chromium 的架构旨在实现这种更健壮的设计。
\nChromium 使用多个进程来保护整个应用程序免受渲染引擎或其他组件中的错误和故障的影响。它还限制了每个渲染引擎进程对其他进程和系统其余部分的访问。在某些方面，这为网络浏览带来了内存保护和访问控制为操作系统带来的好处。
\n我们将运行 UI 并管理渲染器和其他进程的主进程称为“浏览器进程”或“浏览器”。同样，处理网页内容的进程称为“渲染器进程”或“渲染器”。渲染器使用 Blink 开源布局引擎来解释和布局 HTML。
\n![\"\"](\"https://www.chromium.org/developers/design-documents/multi-process-architecture/arch.png\")
每个渲染器进程都有一个全局 RenderProcess 对象，用于管理与父浏览器进程的通信并维护全局状态。浏览器为每个渲染器进程维护一个对应的 RenderProcessHost，用于管理渲染器的浏览器状态和通信。浏览器和渲染器使用 Mojo 或 Chromium 的传统 IPC 系统 进行通信。
每个渲染器进程都有一个或多个 RenderFrame 对象，它们对应于包含内容的文档的框架。浏览器进程中相应的 RenderFrameHost 管理与该文档关联的状态。每个 RenderFrame 都被赋予一个路由 ID，用于区分同一渲染器中的多个文档或框架。这些 ID 在一个渲染器内部是唯一的，但在浏览器中不是唯一的，因此识别一个框架需要 RenderProcessHost 和路由 ID。浏览器与渲染器中特定文档之间的通信是通过这些 RenderFrameHost 对象完成的，这些对象知道如何通过 Mojo 或传统 IPC 发送消息。
在渲染器进程中：
\nRenderProcess 处理与浏览器中相应 RenderProcessHost 的 Mojo 设置和传统 IPC。每个渲染器进程只有一个 RenderProcess 对象。RenderFrame 对象与其在浏览器进程中相应的 RenderFrameHost（通过 Mojo）和 Blink 层进行通信。此对象表示标签页或子框架中一个网页文档的内容。在浏览器进程中：
\nBrowser 对象表示一个顶级浏览器窗口。RenderProcessHost 对象表示单个浏览器 ↔ 渲染器 IPC 连接的浏览器端。浏览器进程中每个渲染器进程都有一个 RenderProcessHost。RenderFrameHost 对象封装了与 RenderFrame 的通信，而 RenderWidgetHost 处理浏览器中 RenderWidget 的输入和绘制。有关此嵌入工作原理的更多详细信息，请参阅Chromium 如何显示网页设计文档。
\n通常，每个新窗口或标签页都会在一个新进程中打开。浏览器将生成一个新进程并指示它创建一个 RenderFrame，该 RenderFrame 可能会在页面中创建更多 iframe（可能在不同的进程中）。
有时，在标签页或窗口之间共享渲染器进程是必要或可取的。例如，Web 应用程序可以使用 window.open 创建另一个窗口，如果新文档属于同一来源，则它必须共享同一进程。如果进程总数过大，Chromium 也有策略将新标签页分配给现有进程。这些考虑因素和策略在进程模型 中进行了描述。
与浏览器进程的每个 Mojo 或 IPC 连接都会监视进程句柄。如果这些句柄发出信号，则渲染器进程已崩溃，受影响的标签页和框架将收到崩溃通知。Chromium 会显示一个“悲伤标签页”或“悲伤框架”图像，通知用户渲染器已崩溃。可以通过按下重新加载按钮或启动新的导航来重新加载页面。发生这种情况时，Chromium 会注意到没有渲染器进程，并创建一个新的渲染器进程。
\n鉴于渲染器在单独的进程中运行，我们有机会通过 沙盒化 限制其对系统资源的访问。例如，我们可以确保渲染器只能通过 Chromium 的网络服务访问网络。同样，我们可以使用主机操作系统的内置权限限制其对文件系统的访问，或限制其对用户显示和输入的访问。这些限制极大地限制了受损渲染器进程所能完成的操作。
\n由于渲染器在单独的进程中运行，因此将隐藏的标签页视为低优先级变得很简单。通常，Windows 上最小化的进程会将其内存自动放入“可用内存”池中。在内存不足的情况下，Windows 会将此内存交换到磁盘，然后再交换出更高优先级的内存，从而帮助保持用户可见程序的响应速度。我们可以将相同的原则应用于隐藏的标签页。当渲染器进程没有顶级标签页时，我们可以释放该进程的“工作集”大小，作为提示系统在必要时首先将该内存交换到磁盘的提示。因为我们发现减少工作集大小也会降低用户在两个标签页之间切换时的标签页切换性能，所以我们逐渐释放此内存。这意味着，如果用户切换回最近使用的标签页，则该标签页的内存比最近未使用过的标签页更有可能被分页。拥有足够内存来运行所有程序的用户根本不会注意到此过程：Windows 只会在需要时实际回收此类数据，因此在内存充足时不会出现性能损失。
\n这有助于我们在内存不足的情况下获得更佳的内存占用。与很少使用的后台标签页关联的内存可以完全交换出去，而前台标签页的数据可以完全加载到内存中。相比之下，单进程浏览器会将其所有标签页的数据随机分布在其内存中，并且无法如此清晰地分离已使用和未使用的的数据，从而浪费内存和性能。
\nChromium 还将许多其他组件拆分到单独的进程中，有时以特定于平台的方式进行。例如，它现在具有单独的 GPU 进程、网络服务和存储服务。沙盒化的实用程序进程也可用于小型或高风险任务，作为满足安全双重规则 的一种方法。
\n","tags":["chromium"]},{"id":"http-protocols","url":"https://yieldray.fun/posts/http-protocols","title":"HTTP 规范解读","date_published":"2024-10-23T21:43:23.000Z","date_modified":"2024-11-02T21:37:00.000Z","content_text":"省略 HTTP/0.9，因为它没有被 RFC 标准化。
\n\n\n\n
HTTP/1.0 是一个基于 TCP 的简单请求-响应式协议。
\nRFC 规定每个连接都由客户端在请求之前建立，并在发送响应后由服务器关闭。
\n注意 RFC 全文中并没有表述 Connection: keep-alive 标头，也没有规定长连接机制。（因此网络上的说法是无迹可寻的）
不过根据 RFC9112 C.2.2，这确实属于实验性功能。
RFC 正文中仅定义了 HEAD/GET/POST 方法。\n注意 HTTP/1.0 已支持正文编码（即 Content-Encoding，用于对内容编码以压缩数据），但不支持响应分块。
\n另外注意 RFC 中已经对代理/网关等角色做了表述，不过在 HTTP/1.1 增加了更多标头来做精细化控制。
此外，RFC 附录中包含一些方法和标头的扩展。
\n\n1997 RFC2068
\n
1999 RFC2616
2014 RFC7230-7235
2022 RFC9110-9112
下文基于现行 RFC9110-9112
读者可参考：https://yieldray.github.io/rfc-http/
HTTP/1.1 强制要求客户端发送 Host 标头。
\nHTTP/1.1 通过 Transfer-Encoding 支持响应分块。
与 Content-Encoding 不同，Transfer-Encoding 指定的是 HTTP 消息本身如何在网络上逐跳（单次连接）传输（而代理不应重传或缓存）。
特殊点在于通过 Transfer-Encoding: chunked 能够支持分块传输。
相对于 HTTP/1 主要依赖于 Expires 头部字段，HTTP/1.1 引入了更精细的缓存控制机制，
包括 Cache-Control 头部字段，支持更多缓存指令，如 max-age、no-cache、private 等，可更灵活地控制缓存行为。
默认情况下 HTTP/1.1 使用持久化连接，无需 keep-alive，但允许指定 Connection: close 来关闭。
注意 RFC 没有表述 HTTP 是如何通过底层的传输协议连接的。
由于发生在一个连接上， HTTP/1.1 是串行的（即请求流水线）。规范要求请求和响应必须相关联，因此对于非法响应，客户端必须断开连接。
\n\n\n2015 RFC7540
\n
2020 RFC8740
2022 RFC9113
HTTP/2 引入头部压缩（HPACK）和多路复用（多流并发），可更有效地利用网络资源（减少 TCP 连接数）并减少延迟。
多路复用即将每个 HTTP 请求/响应交换与流关联起来，多流并发自然又带来了流量控制（WINDOW_UPDATE）和请求优先级的问题。
如何建立 HTTP/2 连接呢？
对于 HTTPS，客户端发送的 TLS 请求带有应用层协议协商（ALPN）扩展（使用 h2 为标识符）。
对于 HTTP，对 HTTP/2 的服务发现实际上比较困难，规范弃用了 Upgrade: h2c 标头的做法。
另外注意，所有主流浏览器都只实现了 HTTP/2 over HTTPS。
HTTP/2 帧是 HTTP/2 协议的基本单位，所有在客户端和服务器之间传输的数据都被封装在帧中。帧提供了在单个 TCP 连接上多路复用多个请求和响应的功能。
\n一个 HTTP/2 帧由一个 9 字节的帧头和可变长度的有效载荷组成。
\nDATA Frame {\n Length (24),\n Type (8) = 0x00,\n\n Unused Flags (4),\n PADDED Flag (1),\n Unused Flags (2),\n END_STREAM Flag (1),\n\n Reserved (1),\n Stream Identifier (31),\n\n [Pad Length (8)],\n Data (..),\n Padding (..2040),\n}\nHEADERS Frame {\n Length (24),\n Type (8) = 0x01,\n\n Unused Flags (2),\n PRIORITY Flag (1),\n Unused Flag (1),\n PADDED Flag (1),\n END_HEADERS Flag (1),\n Unused Flag (1),\n END_STREAM Flag (1),\n\n Reserved (1),\n Stream Identifier (31),\n\n [Pad Length (8)],\n [Exclusive (1)],\n [Stream Dependency (31)],\n [Weight (8)],\n Field Block Fragment (..),\n Padding (..2040),\n}\nPRIORITY Frame {\n Length (24) = 0x05,\n Type (8) = 0x02,\n\n Unused Flags (8),\n\n Reserved (1),\n Stream Identifier (31),\n\n Exclusive (1),\n Stream Dependency (31),\n Weight (8),\n}\nRST_STREAM Frame {\n Length (24) = 0x04,\n Type (8) = 0x03,\n\n Unused Flags (8),\n\n Reserved (1),\n Stream Identifier (31),\n\n Error Code (32),\n}\nSETTINGS Frame {\n Length (24),\n Type (8) = 0x04,\n\n Unused Flags (7),\n ACK Flag (1),\n\n Reserved (1),\n Stream Identifier (31) = 0,\n\n Setting (48) ...,\n}\n\nSetting {\n Identifier (16),\n Value (32),\n}\nPUSH_PROMISE Frame {\n Length (24),\n Type (8) = 0x05,\n\n Unused Flags (4),\n PADDED Flag (1),\n END_HEADERS Flag (1),\n Unused Flags (2),\n\n Reserved (1),\n Stream Identifier (31),\n\n [Pad Length (8)],\n Reserved (1),\n Promised Stream ID (31),\n Field Block Fragment (..),\n Padding (..2040),\n}\nPING Frame {\n Length (24) = 0x08,\n Type (8) = 0x06,\n\n Unused Flags (7),\n ACK Flag (1),\n\n Reserved (1),\n Stream Identifier (31) = 0,\n\n Opaque Data (64),\n}\nGOAWAY Frame {\n Length (24),\n Type (8) = 0x07,\n\n Unused Flags (8),\n\n Reserved (1),\n Stream Identifier (31) = 0,\n\n Reserved (1),\n Last-Stream-ID (31),\n Error Code (32),\n Additional Debug Data (..),\n}\nWINDOW_UPDATE Frame {\n Length (24) = 0x04,\n Type (8) = 0x08,\n\n Unused Flags (8),\n\n Reserved (1),\n Stream Identifier (31),\n\n Reserved (1),\n Window Size Increment (31),\n}\nCONTINUATION Frame {\n Length (24),\n Type (8) = 0x09,\n\n Unused Flags (5),\n END_HEADERS Flag (1),\n Unused Flags (2),\n\n Reserved (1),\n Stream Identifier (31),\n\n Field Block Fragment (..),\n}\n\n\n2022 RFC9114
\n
参考：https://www.infoq.cn/article/Lddlsa5f21StY04LI3hP
HTTP/3 通过 QUIC 协议承载。QUIC 基于 UDP，这样就可以完成在用户态对协议栈的实现（相对于 TCP 集成在了内核态实现）。
\nQUIC 提供协议协商、基于流的复用和流量控制。
\n对于传统的 HTTPS，实际上是 TLS over TCP，因此需要做 TCP 和 TLS 两次握手。
\nQUIC 建立在 TLS>=1.3 之上，并将这两个握手合并。
\n另外，HTTP/2 虽解决了 HTTP 队头阻塞，但没有解决 TCP 队头阻塞。使用 UDP 也能够解决此问题。
\n如何建立 HTTP/3 连接？
服务端通过 HTTP/2 ALTSVC 帧 或 响应头 Alt-Svc: h3=":端口号"，可通告 HTTP/3 端点可用。
HTTP/3 使用 QPACK（HPACK 的一种变体）实现头部压缩。
HTTP/3 为请求定义了以下伪标头字段：:method :scheme :authority :path\n为响应定义了 :status 伪标头。
HTTP 帧由 QUIC 流承载。HTTP/3 帧与 HTTP/2 类似，但也存在区别。
\nhttps://developer.mozilla.org/docs/Web/HTTP/Evolution_of_HTTP
\nhttps://www.ruanyifeng.com/blog/2016/08/http.html
\n","tags":["http"]},{"id":"build-your-own-sqlite","url":"https://yieldray.fun/posts/build-your-own-sqlite","title":"Build your own SQLite","date_published":"2024-10-19T17:22:33.000Z","date_modified":"2024-10-19T17:22:33.000Z","content_text":"让我们从建立一个简单的是数据库文件开始（通过 sqlite3）
\nsqlite3 minimal_test.db\nsqlite> create table table1(id integer);\nsqlite> create table table2(id integer);\nsqlite> .exit\n这将创建两个表，只含 id 列。
\nsqlite3 minimal_test.db\nsqlite> .tables\ntable1 table2\nsqlite> .exit\n我们创建一个 rust 项目，并添加 anyhow 为依赖：
\ncargo new rsqlite\ncd rsqlite\ncargo add anyhow\nSQLite 的文件格式定义在 SQlite3 文档：Database File Format 中。
\ngraph TD\n subgraph "SQLite Database File"\n subgraph "Database Header (100 bytes)"\n A1["Magic Header String (16 bytes)"]\n A2["Page Size (2 bytes)"]\n A3["File Format Write Version (1 byte)"]\n A4["File Format Read Version (1 byte)"]\n A5["Reserved Bytes Per Page (1 byte)"]\n A6["Payload Fractions (3 bytes)"]\n A7["File Change Counter (4 bytes)"]\n A8["In-Header Database Size (4 bytes)"]\n A9["Free Page List (8 bytes)"]\n A10["Schema Cookie (4 bytes)"]\n A11["Schema Format Number (4 bytes)"]\n A12["Suggested Cache Size (4 bytes)"]\n A13["Incremental Vacuum Settings (8 bytes)"]\n A14["Text Encoding (4 bytes)"]\n A15["User Version Number (4 bytes)"]\n A16["Application ID (4 bytes)"]\n A17["Reserved for Expansion (20 bytes)"]\n A18["Version-Valid-For Number (4 bytes)"]\n A19["SQLite Version Number (4 bytes)"]\n end\n\n subgraph "Lock-Byte Page (512 bytes)"\n B1["Reserved for VFS Locking"]\n end\n\n subgraph "Page 1 (Table B-Tree Root Page)"\n C1["Database Header"]\n C2["B-Tree Page Header"]\n C3["Cell Pointer Array"]\n C4["Unallocated Space"]\n C5["Cell Content Area"]\n C6["Reserved Region"]\n end\n\n subgraph "Other Pages"\n subgraph "B-Tree Page"\n D1["B-Tree Page Header"]\n D2["Cell Pointer Array"]\n D3["Unallocated Space"]\n D4["Cell Content Area"]\n D5["Reserved Region"]\n end\n subgraph "Freelist Trunk Page"\n E1["Next Trunk Page Number (4 bytes)"]\n E2["Number of Leaf Pages (4 bytes)"]\n E3["Leaf Page Numbers (4 bytes each)"]\n end\n subgraph "Freelist Leaf Page"\n F1["No Content"]\n end\n subgraph "Overflow Page"\n G1["Next Overflow Page Number (4 bytes)"]\n G2["Overflow Content"]\n end\n subgraph "Ptrmap Page"\n H1["Ptrmap Entries (5 bytes each)"]\n end\n end\n end\n\n C1 --> A2\n A2 --> D1\n A2 --> E1\n A2 --> F1\n A2 --> G1\n A2 --> H1\n A9 --> E1\n D1 --> G1\n D1 --> H1\n H1 --> D1\n简单来说：
\nSQLite 数据库文件是单个文件，包含数据库的所有数据和元数据。
这个文件被组织成一系列的页 (page)，每个页的大小通常是 4KB (4096 字节)，但也可以是 512 字节到 64KB 之间的任何 2 次幂。
页 (Page) 类型
\nB 树页结构
\nB 树页是 SQLite 数据库文件中最常见的页类型，用于存储数据库中的表数据。每个 B 树页包含：
\n数据单元 (Cell)
\n每个数据单元 (cell) 代表数据库表中的一行数据，包含：
\ngraph TD\n A["SQLite 数据库文件 (.db)"] --> B["页(Page)"]\n B --> B1["数据库头页\n (Database Header Page)"]\n B --> B2["空闲页列表页\n (Freelist Page)"]\n B --> B3["B 树页\n (B-tree Page)"]\n B --> B4["溢出页\n (Overflow Page)"]\n\n B3 --> C1["页头\n (Page Header)"]\n B3 --> C2["单元指针数组\n (Cell Pointer Array)"]\n B3 --> C3["单元内容区\n (Cell Content Area)"]\n\n C3 --> D1["数据单元\n (Cell)"]\n D1 --> E1["单元头\n (Cell Header)"]\n D1 --> E2["数据\n (Data)"]\n这里我们将只对 table btree leaf 页面（B 树页）感兴趣，因为它存储的是实际的表数据。
\ngraph TD\n subgraph "根节点 (Root Node)"\n A["键1 | 指针1 | 键2 | 指针2 | 键3 | 指针3"]\n end\n subgraph "中间节点 (Intermediate Node)"\n B["键4 | 指针4 | 键5 | 指针5"]\n C["键6 | 指针6 | 键7 | 指针7"]\n D["键8 | 指针8 | 键9 | 指针9"]\n end\n subgraph "叶子节点 (Leaf Node)"\n E["数据记录1"]\n F["数据记录2"]\n G["数据记录3"]\n H["数据记录4"]\n I["数据记录5"]\n J["数据记录6"]\n K["数据记录7"]\n L["数据记录8"]\n M["数据记录9"]\n end\n A --> B\n A --> C\n A --> D\n B --> E\n B --> F\n C --> G\n C --> H\n C --> I\n D --> J\n D --> K\n D --> L\n D --> M\nSQLite 数据库存储在单个文件中，文件分为多页，每页大小相同：2 的幂次，介于 512 和 65536 字节之间。
第一页的前 100 个字节包含数据库头，其中包括页面大小和文件格式版本等信息。
我们的首要任务是实现一个 Pager 结构，用于读取和缓存数据库文件中的页面。
但在此之前，我们必须从数据库头中读取页面大小。
我们定义这些需要的结构如下：
\n// 数据库头，可读取页面大小\n#[derive(Debug, Copy, Clone)]\npub struct DbHeader {\n pub page_size: u32,\n}\n\n// 页面可以有多种类型，这里我们只对 table btree leaf 页面感兴趣，因为它存储的是实际的表数据。\n#[derive(Debug, Copy, Clone)]\npub enum PageType {\n TableLeaf,\n}\n\n#[derive(Debug, Copy, Clone)]\npub struct PageHeader {\n // 表示页面类型的字节。对于 table btree-leaf 页面，它是 0x0D。\n pub page_type: PageType,\n // 2 字节整数，代表页面中第一个空闲区块的偏移量，如果没有空闲区块，则为 0。\n pub first_freeblock: u16,\n // 2 字节整数，代表页面中的单元格数。\n pub cell_count: u16,\n // 2 字节整数，代表第一个单元格的偏移量。\n pub cell_content_offset: u32,\n // 1 字节整数，代表页面中零散的空闲字节数（我们暂时不会使用它）。\n pub fragmented_bytes_count: u8,\n}\n\n#[derive(Debug, Clone)]\npub enum Page {\n TableLeaf(TableLeafPage),\n}\n\n// table btree-leaf 页以一个 8 字节的 header 开始，\n// 随后是一串 "单元格指针"，其中包含页面中每个单元格的偏移量。\n// 单元格包含表数据，我们可以将其视为键值对，\n// 其中键是一个以 varint (rowid) （即可变长度）编码的 64 位整数，\n// 值是代表行数据的任意字节序列。\n#[derive(Debug, Clone)]\npub struct TableLeafPage {\n pub header: PageHeader,\n pub cell_pointers: Vec<u16>,\n pub cells: Vec<TableLeafCell>,\n}\n\n// 每个单元格包含表中一行的值，使用 SQLite 记录格式编码。\n#[derive(Debug, Clone)]\npub struct TableLeafCell {\n pub size: i64,\n pub row_id: i64,\n pub payload: Vec<u8>,\n}\n我们实现一系列解析函数，最终组装出目标结构。
\nuse std::{\n collections::HashMap,\n io::{Read, Seek, SeekFrom},\n};\n\nuse anyhow::Context;\n\nuse crate::page;\n\npub const HEADER_SIZE: usize = 100;\nconst HEADER_PREFIX: &[u8] = b"SQLite format 3\\0";\nconst HEADER_PAGE_SIZE_OFFSET: usize = 16;\n\nconst PAGE_MAX_SIZE: u32 = 65536;\nconst PAGE_LEAF_HEADER_SIZE: usize = 8;\n\nconst PAGE_LEAF_TABLE_ID: u8 = 13;\n\nconst PAGE_FIRST_FREEBLOCK_OFFSET: usize = 1;\nconst PAGE_CELL_COUNT_OFFSET: usize = 3;\nconst PAGE_CELL_CONTENT_OFFSET: usize = 5;\nconst PAGE_FRAGMENTED_BYTES_COUNT_OFFSET: usize = 7;\n\npub fn parse_header(buffer: &[u8]) -> anyhow::Result<page::DbHeader> {\n // 数据库头以 magic string `SQLite format 3\\0` 开头\n if !buffer.starts_with(HEADER_PREFIX) {\n let prefix = String::from_utf8_lossy(&buffer[..HEADER_PREFIX.len()]);\n anyhow::bail!("invalid header prefix: {prefix}");\n }\n\n // 紧跟着一个 2 字节大端整数，表示页面大小（是2的幂次）\n let page_size_raw = read_be_word_at(buffer, HEADER_PAGE_SIZE_OFFSET);\n let page_size = match page_size_raw {\n 1 => PAGE_MAX_SIZE, // 由于最大页面大小无法用 2 字节整数表示，因此使用页面大小为 1 来表示最大页面大小\n n if n.is_power_of_two() => n as u32,\n _ => anyhow::bail!("page size is not a power of 2: {}", page_size_raw),\n };\n\n Ok(page::DbHeader { page_size })\n}\n\nfn parse_page(buffer: &[u8], page_num: usize) -> anyhow::Result<page::Page> {\n // 第一页包含数据库头，此时从偏移量 100 开始解析页面\n let ptr_offset = if page_num == 1 { HEADER_SIZE as u16 } else { 0 };\n\n match buffer[0] {\n PAGE_LEAF_TABLE_ID => parse_table_leaf_page(buffer, ptr_offset),\n _ => Err(anyhow::anyhow!("unknown page type: {}", buffer[0])),\n }\n}\n\nfn parse_table_leaf_page(buffer: &[u8], ptr_offset: u16) -> anyhow::Result<page::Page> {\n let header = parse_page_header(buffer)?;\n\n let content_buffer = &buffer[PAGE_LEAF_HEADER_SIZE..];\n let cell_pointers = parse_cell_pointers(content_buffer, header.cell_count as usize, ptr_offset);\n\n let cells = cell_pointers\n .iter()\n .map(|&ptr| parse_table_leaf_cell(&buffer[ptr as usize..]))\n .collect::<anyhow::Result<Vec<page::TableLeafCell>>>()?;\n\n Ok(page::Page::TableLeaf(page::TableLeafPage {\n header,\n cell_pointers,\n cells,\n }))\n}\n\nfn parse_table_leaf_cell(mut buffer: &[u8]) -> anyhow::Result<page::TableLeafCell> {\n let (n, size) = read_varint_at(buffer, 0);\n buffer = &buffer[n as usize..];\n\n let (n, row_id) = read_varint_at(buffer, 0);\n buffer = &buffer[n as usize..];\n\n let payload = buffer[..size as usize].to_vec();\n\n Ok(page::TableLeafCell {\n size,\n row_id,\n payload,\n })\n}\n\nfn parse_page_header(buffer: &[u8]) -> anyhow::Result<page::PageHeader> {\n let page_type = match buffer[0] {\n 0x0d => page::PageType::TableLeaf,\n _ => anyhow::bail!("unknown page type: {}", buffer[0]),\n };\n\n let first_freeblock = read_be_word_at(buffer, PAGE_FIRST_FREEBLOCK_OFFSET);\n let cell_count = read_be_word_at(buffer, PAGE_CELL_COUNT_OFFSET);\n let cell_content_offset = match read_be_word_at(buffer, PAGE_CELL_CONTENT_OFFSET) {\n 0 => 65536,\n n => n as u32,\n };\n let fragmented_bytes_count = buffer[PAGE_FRAGMENTED_BYTES_COUNT_OFFSET];\n\n Ok(page::PageHeader {\n page_type,\n first_freeblock,\n cell_count,\n cell_content_offset,\n fragmented_bytes_count,\n })\n}\n\nfn parse_cell_pointers(buffer: &[u8], n: usize, ptr_offset: u16) -> Vec<u16> {\n let mut pointers = Vec::with_capacity(n);\n for i in 0..n {\n pointers.push(read_be_word_at(buffer, 2 * i) - ptr_offset);\n }\n pointers\n}\n\n// Varint 的编码规则是：\n// 每个字节的最高位 (MSB) 用作标志位：\n// 1 表示还有后续字节\n// 0 表示这是最后一个字节\n// 每个字节的低 7 位存储整数的一部分，从低位到高位排列\npub fn read_varint_at(buffer: &[u8], mut offset: usize) -> (u8, i64) {\n let mut size = 0;\n let mut result = 0;\n\n // varint 最多占用 8 个字节。当前字节的最高位为 0，表示这是最后一个字节\n while size < 8 && buffer[offset] >= 0b1000_0000 {\n result |= ((buffer[offset] as i64) & 0b0111_1111) << (7 * size);\n offset += 1;\n size += 1;\n }\n\n result |= (buffer[offset] as i64) << (7 * size);\n\n (size + 1, result)\n}\n\nfn read_be_double_at(input: &[u8], offset: usize) -> u32 {\n u32::from_be_bytes(input[offset..offset + 4].try_into().unwrap())\n}\n\nfn read_be_word_at(input: &[u8], offset: usize) -> u16 {\n u16::from_be_bytes(input[offset..offset + 2].try_into().unwrap())\n}\n\n#[derive(Debug, Clone)]\npub struct Pager<I: Read + Seek = std::fs::File> {\n input: I,\n page_size: usize,\n pages: HashMap<usize, page::Page>,\n}\n\nimpl<I: Read + Seek> Pager<I> {\n pub fn new(input: I, page_size: usize) -> Self {\n Self {\n input,\n page_size,\n pages: HashMap::new(),\n }\n }\n\n pub fn read_page(&mut self, n: usize) -> anyhow::Result<&page::Page> {\n if self.pages.contains_key(&n) {\n return Ok(self.pages.get(&n).unwrap());\n }\n\n let page = self.load_page(n)?;\n self.pages.insert(n, page);\n Ok(self.pages.get(&n).unwrap())\n }\n\n fn load_page(&mut self, n: usize) -> anyhow::Result<page::Page> {\n let offset = HEADER_SIZE + n.saturating_sub(1) * self.page_size;\n\n self.input\n .seek(SeekFrom::Start(offset as u64))\n .context("seek to page start")?;\n\n let mut buffer = vec![0; self.page_size];\n self.input.read_exact(&mut buffer).context("read page")?;\n\n parse_page(&buffer, n)\n }\n}\n我们现在有了读取页面和访问页面单元格的方法。但如何解码单元格的值呢？
\n每个单元格包含表中一行的值，使用 SQLite 记录（Record）格式编码。
记录格式非常简单：记录由标题和字段值序列组成。
header 以一个代表其字节大小的 varint 开始，后面是一个 varint 序列（每列一个）用于表示类型。
use std::borrow::Cow;\n\nuse crate::{page::Page, pager::Pager, value::Value};\n\n#[derive(Debug, Copy, Clone)]\npub enum RecordFieldType {\n Null,\n I8,\n I16,\n I24,\n I32,\n I48,\n I64,\n Float,\n Zero,\n One,\n String(usize),\n Blob(usize),\n}\n\n#[derive(Debug, Clone)]\npub struct RecordField {\n pub offset: usize,\n pub field_type: RecordFieldType,\n}\n\n#[derive(Debug, Clone)]\npub struct RecordHeader {\n pub fields: Vec<RecordField>,\n}\n\nfn parse_record_header(mut buffer: &[u8]) -> anyhow::Result<RecordHeader> {\n // header 以一个代表其字节大小的 varint 开始，后面是一个 varint 序列\n let (varint_size, header_length) = crate::pager::read_varint_at(buffer, 0);\n buffer = &buffer[varint_size as usize..header_length as usize];\n\n let mut fields = Vec::new();\n let mut current_offset = header_length as usize;\n\n while !buffer.is_empty() {\n let (discriminant_size, discriminant) = crate::pager::read_varint_at(buffer, 0);\n buffer = &buffer[discriminant_size as usize..];\n\n // 确定每一列的类型\n let (field_type, field_size) = match discriminant {\n 0 => (RecordFieldType::Null, 0),\n 1 => (RecordFieldType::I8, 1),\n 2 => (RecordFieldType::I16, 2),\n 3 => (RecordFieldType::I24, 3),\n 4 => (RecordFieldType::I32, 4),\n 5 => (RecordFieldType::I48, 6),\n 6 => (RecordFieldType::I64, 8),\n 7 => (RecordFieldType::Float, 8), // 64 位 IEEE 浮点数\n 8 => (RecordFieldType::Zero, 0), // 整数 0\n 9 => (RecordFieldType::One, 0), // 整数 1\n // 10 和 11：保留给内部使用\n n if n >= 12 && n % 2 == 0 => {\n // n 偶数且 n > 12：大小为 (n - 12) / 2 的 BLOB\n let size = ((n - 12) / 2) as usize;\n (RecordFieldType::Blob(size), size)\n }\n n if n >= 13 && n % 2 == 1 => {\n // n 为奇数且 n > 13：大小为 (n - 13) / 2 的 TEXT\n let size = ((n - 13) / 2) as usize;\n (RecordFieldType::String(size), size)\n }\n n => anyhow::bail!("unsupported field type: {}", n),\n };\n\n fields.push(RecordField {\n offset: current_offset,\n field_type,\n });\n\n current_offset += field_size;\n }\n\n Ok(RecordHeader { fields })\n}\n为了更方便地处理记录，我们将定义一个 Value 类型（表示字段值）和一个 Cursor 结构（唯一标识数据库文件中的记录）。
Cursor 将暴露一个 field 方法，返回记录第 n 个字段的值：
#[derive(Debug)]\npub struct Cursor<'p> {\n header: RecordHeader,\n pager: &'p mut Pager,\n page_index: usize,\n page_cell: usize,\n}\n\nimpl<'p> Cursor<'p> {\n pub fn field(&mut self, n: usize) -> Option<Value> {\n let record_field = self.header.fields.get(n)?;\n\n let payload = match self.pager.read_page(self.page_index) {\n Ok(Page::TableLeaf(leaf)) => &leaf.cells[self.page_cell].payload,\n _ => return None,\n };\n\n match record_field.field_type {\n RecordFieldType::Null => Some(Value::Null),\n RecordFieldType::I8 => Some(Value::Int(read_i8_at(payload, record_field.offset))),\n RecordFieldType::I16 => Some(Value::Int(read_i16_at(payload, record_field.offset))),\n RecordFieldType::I24 => Some(Value::Int(read_i24_at(payload, record_field.offset))),\n RecordFieldType::I32 => Some(Value::Int(read_i32_at(payload, record_field.offset))),\n RecordFieldType::I48 => Some(Value::Int(read_i48_at(payload, record_field.offset))),\n RecordFieldType::I64 => Some(Value::Int(read_i64_at(payload, record_field.offset))),\n RecordFieldType::Float => Some(Value::Float(read_f64_at(payload, record_field.offset))),\n RecordFieldType::String(length) => {\n let value = std::str::from_utf8(\n &payload[record_field.offset..record_field.offset + length],\n )\n .expect("invalid utf8");\n Some(Value::String(Cow::Borrowed(value)))\n }\n RecordFieldType::Blob(length) => {\n let value = &payload[record_field.offset..record_field.offset + length];\n Some(Value::Blob(Cow::Borrowed(value)))\n }\n _ => panic!("unimplemented"),\n }\n }\n}\n\nfn read_i8_at(input: &[u8], offset: usize) -> i64 {\n input[offset] as i64\n}\n\nfn read_i16_at(input: &[u8], offset: usize) -> i64 {\n i16::from_be_bytes(input[offset..offset + 2].try_into().unwrap()) as i64\n}\n\nfn read_i24_at(input: &[u8], offset: usize) -> i64 {\n (i32::from_be_bytes(input[offset..offset + 3].try_into().unwrap()) & 0x00FFFFFF) as i64\n}\n\nfn read_i32_at(input: &[u8], offset: usize) -> i64 {\n i32::from_be_bytes(input[offset..offset + 4].try_into().unwrap()) as i64\n}\n\nfn read_i48_at(input: &[u8], offset: usize) -> i64 {\n i64::from_be_bytes(input[offset..offset + 6].try_into().unwrap()) & 0x0000FFFFFFFFFFFF\n}\n\nfn read_i64_at(input: &[u8], offset: usize) -> i64 {\n i64::from_be_bytes(input[offset..offset + 8].try_into().unwrap())\n}\n\nfn read_f64_at(input: &[u8], offset: usize) -> f64 {\n f64::from_be_bytes(input[offset..offset + 8].try_into().unwrap())\n}\nuse std::borrow::Cow;\n\n#[derive(Debug, Clone)]\npub enum Value<'p> {\n Null,\n String(Cow<'p, str>),\n Blob(Cow<'p, [u8]>),\n Int(i64),\n Float(f64),\n}\n\nimpl<'p> Value<'p> {\n pub fn as_str(&self) -> Option<&str> {\n if let Value::String(s) = self {\n Some(s.as_ref())\n } else {\n None\n }\n }\n}\n为了简化对页面记录的迭代，我们还将实现一个 Scanner 结构，它可以封装页面，并允许我们为每条记录获取一个 Cursor 结构：
\n\n#[derive(Debug)]\npub struct Scanner<'p> {\n pager: &'p mut Pager,\n page: usize,\n cell: usize,\n}\n\nimpl<'p> Scanner<'p> {\n pub fn new(pager: &'p mut Pager, page: usize) -> Scanner<'p> {\n Scanner {\n pager,\n page,\n cell: 0,\n }\n }\n pub fn next_record(&mut self) -> Option<anyhow::Result<Cursor>> {\n let page = match self.pager.read_page(self.page) {\n Ok(page) => page,\n Err(e) => return Some(Err(e)),\n };\n\n match page {\n Page::TableLeaf(leaf) => {\n let cell = leaf.cells.get(self.cell)?;\n\n let header = match parse_record_header(&cell.payload) {\n Ok(header) => header,\n Err(e) => return Some(Err(e)),\n };\n\n let record = Cursor {\n header,\n pager: self.pager,\n page_index: self.page,\n page_cell: self.cell,\n };\n\n self.cell += 1;\n\n Some(Ok(record))\n }\n }\n }\n}\n在完成了大部分前期工作后，我们就可以回到最初的目标：列出表。
SQLite 将数据库的模式（Schema）存储在一个名为 sqlite_schema 的特殊表中。
该表用于表示 schema 对象。
CREATE TABLE sqlite_schema(\n type text,\n name text,\n tbl_name text,\n rootpage integer,\n sql text\n);\n表字段的含义如下：
\ntype：可为 table，index，view 或 trigger。我们这里只有表，因此只会是 tablename：schema 对象的名称tbl_name：schema 对象关联的表名称，如果是表，则与 name 相同rootpage：表的根页面，稍后我们将使用它来读取表的内容sql：用于创建表的 SQL 语句sqlite> select * from sqlite_schema;\ntable|table1|table1|2|CREATE TABLE table1(id integer)\ntable|table2|table2|3|CREATE TABLE table2(id integer)\n由于我们的简单数据库目前只处理基本 schema，因此我们可以假定整个 schema 都包含在数据库文件的第一页中。
为了列出数据库中的表，我们需要：
use std::{io::Read, path::Path};\n\nuse anyhow::Context;\n\nuse crate::{cursor::Scanner, page::DbHeader, pager, pager::Pager};\n\npub struct Db {\n pub header: DbHeader,\n pager: Pager,\n}\n\nimpl Db {\n pub fn from_file(filename: impl AsRef<Path>) -> anyhow::Result<Db> {\n let mut file = std::fs::File::open(filename.as_ref()).context("open db file")?;\n\n let mut header_buffer = [0; pager::HEADER_SIZE];\n file.read_exact(&mut header_buffer)\n .context("read db header")?;\n\n let header = pager::parse_header(&header_buffer).context("parse db header")?;\n\n let pager = Pager::new(file, header.page_size as usize);\n\n Ok(Db { header, pager })\n }\n\n pub fn scanner(&mut self, page: usize) -> Scanner {\n Scanner::new(&mut self.pager, page)\n }\n}\n实现支持 tables 命令的基本 REPL 非常简单：
\nuse std::io::{stdin, BufRead, Write};\n\nuse anyhow::Context;\n\nmod cursor;\nmod db;\nmod page;\nmod pager;\nmod value;\n\nfn main() -> anyhow::Result<()> {\n let database = db::Db::from_file(std::env::args().nth(1).context("missing db file")?)?;\n cli(database)\n}\n\nfn cli(mut db: db::Db) -> anyhow::Result<()> {\n print_flushed("rqlite> ")?;\n\n let mut line_buffer = String::new();\n\n while stdin().lock().read_line(&mut line_buffer).is_ok() {\n match line_buffer.trim() {\n ".exit" => break,\n ".tables" => display_tables(&mut db)?,\n _ => {\n println!("Unrecognized command '{}'", line_buffer.trim());\n }\n }\n\n print_flushed("\\nrqlite> ")?;\n\n line_buffer.clear();\n }\n\n Ok(())\n}\n\nfn display_tables(db: &mut db::Db) -> anyhow::Result<()> {\n let mut scanner = db.scanner(1);\n\n while let Some(Ok(mut record)) = scanner.next_record() {\n let type_value = record\n .field(0)\n .context("missing type field")\n .context("invalid type field")?;\n\n if type_value.as_str() == Some("table") {\n let name_value = record\n .field(1)\n .context("missing name field")\n .context("invalid name field")?;\n\n print!("{} ", name_value.as_str().unwrap());\n }\n }\n\n Ok(())\n}\n\nfn print_flushed(s: &str) -> anyhow::Result<()> {\n print!("{}", s);\n std::io::stdout().flush().context("flush stdout")\n}\n\n\n","tags":["db"]},{"id":"react-closures","url":"https://yieldray.fun/posts/react-closures","title":"Sneaky React Memory Leaks: How `useCallback` and closures can bite you\n","date_published":"2024-10-18T00:26:19.000Z","date_modified":"2024-10-18T00:26:19.000Z","content_text":"改编自：https://blog.sylver.dev/build-your-own-sqlite-part-1-listing-tables
\n
另见：https://blog.jabid.in/2024/11/24/sqlite.html\nto be continued...
\n\n原文：https://www.schiener.io/2024-03-03/react-closures
\n
原文包含一节 关于闭包的简要回顾，为保持简略此处没有保留。
在 React 中，我们重度依赖闭包来实现所有函数组件、hooks 和事件处理程序。
每当创建一个新函数，需要访问组件作用域内的变量（如状态或属性）时，实际上就是在创建闭包。
以下是一个示例：
\nimport { useState, useEffect } from "react";\n\nfunction App({ id }) {\n const [count, setCount] = useState(0);\n\n const handleClick = () => {\n setCount(count + 1); // 这是一个对 count 变量的闭包\n };\n\n useEffect(() => {\n console.log(id); // 这是一个对 id 属性的闭包\n }, [id]);\n\n return (\n <div>\n <p>{count}</p>\n <button onClick={handleClick}>Increment</button>\n </div>\n );\n}\n在大多数情况下，这本身并不是问题。在上面的例子中，每次 App 渲染时都会重新创建闭包，旧的闭包会被垃圾回收。
这可能意味着一些不必要的分配和释放操作，但这些操作通常都非常快。
然而，当我们的应用程序变得庞大，并开始使用 useMemo 和 useCallback 等记忆化技术来避免不必要的重新渲染时，就需要格外注意了。
useCallback使用记忆化 hooks，我们以增加内存使用量为代价来换取更好的渲染性能。只要依赖项没有改变，useCallback 就会一直持有对函数的引用。让我们来看一个例子：
import React, { useState, useCallback } from "react";\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n const handleEvent = useCallback(() => {\n setCount(count + 1);\n }, [count]);\n\n return (\n <div>\n <p>{count}</p>\n <ExpensiveChildComponent onMyEvent={handleEvent} />\n </div>\n );\n}\n在这个例子中，我们希望避免 ExpensiveChildComponent 的重新渲染。我们可以尝试保持 handleEvent() 函数引用的稳定性来实现这一点。
我们使用 useCallback 记忆 handleEvent()，以便仅在 count 状态发生变化时才重新分配新值。
然后，我们可以将 ExpensiveChildComponent 包裹在 React.memo() 中，以避免在父组件 App 渲染时重新渲染。
到目前为止，一切顺利。
但是，让我们稍微修改一下这个例子：
\nimport { useState, useCallback } from "react";\n\nclass BigObject {\n public readonly data = new Uint8Array(1024 * 1024 * 10); // 10MB 的数据\n}\n\nfunction App() {\n const [count, setCount] = useState(0);\n const bigData = new BigObject();\n\n const handleEvent = useCallback(() => {\n setCount(count + 1);\n }, [count]);\n\n const handleClick = () => {\n console.log(bigData.data.length);\n };\n\n return (\n <div>\n <button onClick={handleClick} />\n <ExpensiveChildComponent2 onMyEvent={handleEvent} />\n </div>\n );\n}\n你能猜到会发生什么吗？
\n由于 handleEvent() 创建了一个对 count 变量的闭包，它将持有对组件上下文对象的引用。
而且，即使我们从未在 handleEvent() 函数中访问 bigData，handleEvent() 仍然会通过组件的上下文对象持有对 bigData 的引用。
所有闭包都共享一个从创建时就存在的共同上下文对象。由于 handleClick() 闭包捕获了 bigData，因此 bigData 将被此上下文对象引用。
这意味着，只要 handleEvent() 被引用，bigData 就永远不会被垃圾回收。这个引用将一直保持到 count 发生变化并且 handleEvent() 被重新创建。
![\"捕获大型对象\"](\"https://s2.loli.net/2024/10/18/NwFQ6LrhPH5MgEo.png\")
\n\n译注：组件上下文对象简单来说就是 React Fiber 对象
\n
读者可参考 useCallback 相关源码 和 React Fiber 类源码
useCallback + 闭包 + 大型对象的无限内存泄漏让我们看最后一个例子，它将上述所有内容发挥到了极致。这个例子是我在我们的应用程序中遇到的一个简化版本。
因此，尽管这个例子可能看起来有些刻意，但它很好地展示了普遍存在的问题。
import { useState, useCallback } from 'react';\n\nclass BigObject {\n public readonly data = new Uint8Array(1024 * 1024 * 10);\n}\n\nexport const App = () => {\n const [countA, setCountA] = useState(0);\n const [countB, setCountB] = useState(0);\n const bigData = new BigObject(); // 10MB 的数据\n\n const handleClickA = useCallback(() => {\n setCountA(countA + 1);\n }, [countA]);\n\n const handleClickB = useCallback(() => {\n setCountB(countB + 1);\n }, [countB]);\n\n // 这段代码仅仅是为了演示问题\n const handleClickBoth = () => {\n handleClickA();\n handleClickB();\n console.log(bigData.data.length);\n };\n\n return (\n <div>\n <button onClick={handleClickA}>Increment A</button>\n <button onClick={handleClickB}>Increment B</button>\n <button onClick={handleClickBoth}>Increment Both</button>\n <p>\n A: {countA}, B: {countB}\n </p>\n </div>\n );\n};\n在这个例子中，我们有两个记忆化的事件处理程序 handleClickA() 和 handleClickB()。
我们还有一个函数 handleClickBoth()，它调用这两个事件处理程序并记录 bigData 的长度。
你能猜到当我们交替点击“Increment A”和“Increment B”按钮时会发生什么吗？
\n让我们来看看在 Chrome 开发者工具中，点击每个按钮 5 次后的内存使用情况：
\n![\"BigObject](\"https://s2.loli.net/2024/10/18/VIDHmqkjtYTKuLz.png\")
看起来 bigData 从未被垃圾回收。每次点击都会导致内存使用量持续增长。
在我们的例子中，应用程序持有对 11 个 BigObject 实例的引用，每个实例大小为 10MB。
一个用于初始渲染，其余的每次点击都会创建一个。
保留树为我们提供了一些线索。看起来我们正在创建一个不断重复的引用链。让我们一步一步地分析它。
\n0. 首次渲染：
\n当 App 首次渲染时，它会创建一个闭包作用域，该作用域持有对所有变量的引用，因为我们在至少一个闭包中使用了所有这些变量。
这包括 bigData、handleClickA() 和 handleClickB()。我们在 handleClickBoth() 中引用了它们。我们将这个闭包作用域称为 AppScope#0。
![\"闭包链](\"https://s2.loli.net/2024/10/18/3UqpM4zPwsDRrSt.png\")
1. 点击“Increment A”：
\nhandleClickA() 被重新创建，因为我们改变了 countA - 我们将新的闭包称为 handleClickA()#1。handleClickB()#0 不会 被重新创建，因为 countB 没有改变。handleClickB()#0 仍然会持有对先前 AppScope#0 的引用。handleClickA()#1 将持有对 AppScope#1 的引用，AppScope#1 又持有对 handleClickB()#0 的引用。![\"闭包链](\"https://s2.loli.net/2024/10/18/rOpeiX4Hl63NoTc.png\")
2. 点击“Increment B”：
\nhandleClickB() 被重新创建，因为我们改变了 countB，从而创建了 handleClickB()#1。handleClickA()，因为 countA 没有改变。handleClickB()#1 将持有对 AppScope#2 的引用，AppScope#2 持有对 handleClickA()#1 的引用，handleClickA()#1 持有对 AppScope#1 的引用，AppScope#1 持有对 handleClickB()#0 的引用。![\"闭包链](\"https://s2.loli.net/2024/10/18/H1iTrChXwG4LB65.png\")
3. 第二次点击“Increment A”：
\n以此类推，我们可以创建一个无休止的闭包链，它们相互引用并且永远不会被垃圾回收，同时还拖着一个独立的 10MB bigData 对象，因为它在每次渲染时都会被重新创建。
![\"闭包链\"](\"https://s2.loli.net/2024/10/18/kB6om48Xy5gfGWT.png\")
问题的本质在于，单个组件中的不同 useCallback hooks 可能会通过闭包作用域相互引用，以及引用其它占用大量内存的数据。
然后，这些闭包会一直保存在内存中，直到 useCallback hooks 被重新创建。
在一个组件中拥有多个 useCallback hook 会使得我们很难推断出哪些内容被保存在内存中，以及何时会被释放。
拥有的回调越多，就越有可能遇到这个问题。
以下是一些让你更容易遇到这个问题的因素：
\n\n\n译注：组件存活时间越长，就越有时间从其它闭包中捕获各种变量（比如一些需要在组件树中提升的状态）。这通常是组件树顶端的问题。
\n
useCallback 来最小化重新渲染。如果你不需要处理任何大型对象，那么引用几个额外的字符串或数字可能不是问题。
大多数情况下，这些闭包交叉引用会在足够多的属性发生变化后被清除。
只是要注意，你的应用程序占用的内存可能会比你预期的要多。
useCallback 导致的内存泄漏？以下是我可以提供的一些避免此问题的技巧：
\n技巧 1：尽可能缩小闭包作用域。
\nJavaScript 中难以发现所有被捕获的变量。避免持有过多变量的最佳方法是减少闭包周围的函数大小。这意味着：
\n技巧 2：避免捕获其它闭包，尤其是记忆化的闭包。
\n尽管这看起来很明显，但 React 很容易让人掉入这个陷阱。如果你编写了相互调用的较小函数，那么一旦你添加了第一个 useCallback，组件作用域内的所有被调用函数都会发生连锁反应，从而被记忆化。
技巧 3：在没有必要的情况下避免记忆化。
\nuseCallback 和 useMemo 是避免不必要重新渲染的好工具，但它们是有代价的。只有当你注意到由于渲染而导致性能问题时才使用它们。
技巧 4（紧急出口）：对大型对象使用 useRef。
这可能意味着你需要自己处理对象的声明周期并正确地清理它。这不是最佳选择，但总比内存泄漏要好。
\n闭包是 React 中一种常用的模式，它们允许我们的函数记住组件上次渲染时作用域内的属性和状态。
当与 useCallback 等记忆化技术结合使用时，这可能会导致意外的内存泄漏，尤其是在处理大型对象时。
为了避免这些内存泄漏，请尽可能缩小闭包作用域，在非必要情况下避免使用记忆化，并可以考虑对大型对象使用 useRef。
Big thanks to David Glasser for his 2013 article A surprising JavaScript memory leak found at Meteor that pointed me in the right direction.
\nDo you think I missed something or got something wrong? Maybe you have a better solution to the problem or never encountered it in the first place.
\nIf you have any questions or comments, please feel free to reach out to me on LinkedIn or X/Twitter.
\nHappy debugging!
\n兼容性：https://caniuse.com/mdn-css_at-rules_property
\n@property 用于注册自定义属性。注册后的自定义属性称为已注册自定义属性（registered custom property）。区分与在此特性之前的自定义属性被称为未注册自定义属性（unregistered custom properties）
\n已注册自定义属性有一个实用特性就是它在使用 var() 函数后会被替换为计算值，而非用于生成该值的原始标记序列（对于未注册自定义属性）。
@property <custom-property-name> {\n <declaration-list>\n}\n与普通选择器一样，包含一组声明列表。不过列表中不是样式声明（qualified rule），而是只允许 syntax inherits initial-value 三个描述符。
其中 syntax 可指定为字符串表示的语法规则，参见规范。
可以简单理解为数据类型语法。
declare namespace CSS {\n /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSS/registerProperty_static) */\n function registerProperty(definition: PropertyDefinition): void;\n}\ninterface PropertyDefinition {\n /** A string representing the name of the property being defined. */\n name: string;\n /** A string representing the expected syntax of the defined property. Defaults to "*". */\n syntax?: string;\n /** A boolean value defining whether the defined property should be inherited (`true`), or not (`false`). Defaults to `false`. */\n inherits: boolean;\n /** A string representing the initial value of the defined property. */\n initialValue?: string;\n}\nCSS 动画和过渡依赖于动画性（animatable）属性这一概念。
\n\n\n翻译自：https://blogsystem5.substack.com/p/windows-nt-vs-unix-design
\n
Windows NT vs. Unix: A design comparison — by Julio Merino
\n\nNT 经常被吹捧为“非常先进”的操作系统。这是为什么呢？是什么让 NT 比 Unix 更好？现在还是这样吗？
\n
多年来，我反复听说 Windows NT 是一个非常先进的操作系统，作为一名 Unix 用户，我一直被不知道 为什么 （它很先进）而困扰。多年来，我一直想回答这个问题，现在我可以回答了，这意味着我想向你们介绍我的发现。
\n我对 NT 内部结构的渴望始于 2006 年，当时我申请了 Google Summer of Code 计划来开发 Boost.Process。我需要为 ATF 开发这样一个库，但我也将该项目视为学习 Win32 API 的机会。然后，这段旅程在 2020 年继续，我在 Google 工作了很长时间后选择加入 Microsoft，并在 2021 年购买了 Windows Internals 第 5 版书（由于其令人难以置信的细节和篇幅，我从未完全阅读过这本书）。然而，这些都没有让我学到我想要的东西：NT 与 Unix 的根本区别（如果有的话）。
\n![\"\"](\"https://s2.loli.net/2024/09/26/h5KmzSNRLf8EBFq.jpg\")
然后，在 2023 年底，Showstopper 这本书再次激发了（我的）这种好奇心。很快，一个新的想法浮现在脑海中：Windows Internals 第 5 版这本书太晦涩了，但是……第一版呢？当然，这本书肯定更容易消化，因为上世纪 90 年代初的系统要简单得多。于是，我搜索到了这一版本，并在标题 Inside Windows NT 下找到了它，从头到尾读了一遍，并做了笔记，来评估 NT 与 Unix 的对比。
\n这就是我写这篇文章的初衷 —— 将 NT 的设计（1993 年 7 月）与当代 Unix 系统（如 4.4BSD 系统（1994 年 6 月）或 Linux 1.0 系统（1994 年 3 月））进行比较的一些想法。请注意，由于我的背景，这篇文章是从一个 Unix “专家”和一个 NT “无知者”的角度来写的，因此它侧重于描述 NT 的不同之处。
\nUnix 的历史很长 —— 比 NT 的历史要长得多。Unix 的开发始于 1969 年，其主要目标是为程序员提供一个方便的平台。Unix 的灵感来自 Multics，但与其它系统相比，Unix 专注于简单性，这是它战胜 Multics 的一个特质。不过，可移植性和多任务处理并不是 Unix 设计的最初目标：这些功能在几年后 Unix 的许多 “分叉” 和重塑中得到了改造。
\n反观 Microsoft 这边，MS-DOS 的第一个版本于 1981 年 8 月推出，“旧版 Windows”（基于 DOS 的版本）的第一个版本于 1985 年 11 月推出。虽然 MS-DOS 取得了广泛的成功，但直到 1990 年 5 月的 Windows 3.0 才真正开始变得重要。Windows NT 构思于 1989 年，并在 1993 年 7 月问世发布 NT 3.1。
\n这个时间线给了 Microsoft 一个优势：NT 的设计比 Unix 晚了 20 年，凭借 MS-DOS 和旧版 Windows，Microsoft 已经拥有庞大的用户群。设计 NT 的 Microsoft 团队对这些发展有后见之明，以前有开发其它操作系统的经验，并且可以使用更现代的技术，因此他们可以在创建 NT 时“一步登天”。
\n特别是，作为其使命的一部分，NT 从以下设计目标开始，这些目标与 Unix 的形成鲜明对比：
\n这些目标不容小觑，这意味着 NT 从一开始就有着坚实的设计准则。换句话说：这些功能从第一天起便已存在，而不像许多 Unix 系统那样在后期才被添加进去。
\n现在我们知道了其中一些设计目标和约束，让我们看看它们实现的细节。
\n除了 Minix 或 GNU Hurd 等少数例外，Unix 是作为宏内核实现的，它暴露一系列系统调用来与操作系统提供的功能进行交互。另一方面，NT 是宏内核和微内核的混合体：其特权组件，被称为 执行体（executive），以模块化组件的集合形式呈现给用户空间 子系统（subsystems）。用户空间子系统是特殊的进程，它将应用程序使用的 API（POSIX、OS/2 等）“翻译”为执行体的系统调用。
\nNT 执行体的一个重要部分是硬件抽象层（HAL），这是一个提供抽象原语以访问机器硬件的模块，也是内核其余部分的基础。这一层是让 NT 能在各种架构上运行的关键，包括 i386、Alpha 和 PowerPC。要理解 HAL 的重要性，我们可以看看同时期的 Unix：是的，Unix 作为一个概念是可移植的，因为存在许多针对不同机器的不同变体，但其实现并不可移植。 SunOS 最初只支持 Motorola 68000；386BSD 是首个移植到 Intel 架构的 BSD；IRIX 是为 Silicon Graphic 基于 MIPS 的工作站设计的 Unix 变体；诸如此类。这解释了为什么 NetBSD 主要关注通过在硬件之上提供最小 shim 来实现可移植性，在当时是如此有趣：除了 NT ，其它操作系统内部都没有这种清晰的设计，而 NT 在这方面早已有了领先。
\nNT 执行体的另一个重要组成部分是它对多处理系统的支持和它的抢占式内核。内核有各种中断级别（在 BSD 术语中称为 SPLs ）来决定什么可以中断什么（例如，时钟中断比磁盘中断有更高的优先级），但更重要的是，内核线程可以被其它内核线程抢占。这“当然”是如今每个高性能 Unix 系统所做的，但这并不是许多 Unix 系统最初的样子：最初的内核不支持抢占也不支持多处理；然后添加了对用户空间多处理的支持；最后才添加了内核抢占。后者是所有步骤中最困难的，这解释了 FreeBSD 5.0 的惨痛经历。因此，看到 NT 从一开始就有正确的基础是很有趣的。
\nNT 是面向对象的内核。你可能会认为 Unix 也是：毕竟，进程是由结构体定义的，文件系统实现处理的是 vnode（“虚拟节点”，不要与 inode 混淆，后者是特定于文件系统的实现细节）。但这与 NT 所做的并不完全相同：NT 强制所有这些不同的对象在系统中有一个共同的表示方式。
\n你可能会对此持怀疑态度，因为……如何能对进程和文件句柄这样截然不同的东西提供一个有意义的抽象呢？实际上是很难做到的，但 NT 强制所有这些都继承自一个共同的对象类型，令人惊讶的是，这带来了一些不错的特性：
\n集中式访问控制：对象只能由 对象管理器 创建，这意味着在代码中只有一个地方来执行策略。这很强大，因为例如权限检查的语义可以只在一个位置定义，并在整个系统中统一应用。NetBSD 也得出这是个好主意的结论，但直到 2001 年才获得其内核授权（kauth）框架。
\n共同身份：对象有身份，它们都在一个单一的树中表示。这意味着所有对象都有一个唯一的命名空间，无论我们谈论的是进程、文件句柄还是管道。树中的对象可以通过名称（路径）来寻址，树的不同部分可以由不同的子系统拥有。例如，树的一部分可以代表一个挂载的文件系统，因此遍历该子树的根节点将导致文件系统解析路径的剩余部分。这类似于 Unix 系统的 VFS 层，区别在于 VFS 专门用于文件系统，而对象树是关于每一个内核对象的。诚然，Unix 试图通过 /proc/、/sys/ 等将其它类型的非文件对象塞进文件系统，但与 NT 提供的相比，这些感觉像是事后想法。
统一的事件处理：所有对象类型都有一个“信号状态”，其语义对每种对象类型都是特定的。例如，当进程退出时，进程对象进入信号状态；当 I/O 请求完成时，文件句柄对象进入信号状态。这使得在用户空间编写事件驱动代码（咳咳，异步代码）变得很简单，因为单个等待式系统调用可以等待一组对象改变它们的状态 — 无论它们是什么类型。试图在 Unix 系统上同时等待 I/O 和进程完成是非常痛苦的。
\n对象是 NT 特有的构造，然而它们并不能很好地泛化到 NT 打算支持的所有 API。POSIX 子系统就是一个例子：POSIX 没有与 NT 相同的对象概念，但 NT 必须为 POSIX 应用程序提供某种兼容性。因此，虽然 POSIX 子系统从执行体分配对象，但这个子系统必须保持自己的簿记（译注：bookkeeping）来表示相应的 POSIX 实体，并在运行时进行两者之间的逻辑转换。另一方面，Win32 子系统则直接将对象交给客户端，没有中间层。
\n进程在 NT 和 Unix 中都是常见的实体，但它们并不完全相同。在 Unix 中，进程以树状结构表示，这意味着每个进程都有一个父进程，且一个进程可以有零个或多个子进程。然而在 NT 中，并不存在这种关系：进程可以从其创建者“继承”资源 — 基本上是任何类型的对象 — 但在创建后它们就是独立的实体。
\n在 NT 设计时，线程并不常见：Mach 在 1985 年成为第一个集成线程的类 Unix 内核，这意味着其它 Unix 系统后来才采用这个概念，并不得不将其改造到现有的设计中。例如，Linux 在 1996 年 6 月发布的 2.0 版本中选择将线程表示为进程，每个线程都有自己的 PID；而 NetBSD 直到 2004 年的 2.0 版本才引入线程，将其表示为与进程分离的实体。与 Unix 相反，NT 从一开始就选择支持线程，因为知道线程是 SMP 机器（译注：多处理器系统）上高性能计算的必要条件。
\nNT 在传统 Unix 意义上并没有信号。然而，它确实有 alert（警报），并且可以分为内核态和用户态。用户态警报像其它对象一样必须被等待，而内核态警报对进程是不可见的。POSIX 子系统使用内核态警报来模拟信号。值得注意的是，信号在 Unix 中常被称为一种缺陷，因为它们会干扰进程的执行：正确处理信号是一项非常困难的任务，所以 NT 的替代方案看起来更优雅。
\n在 NT 领域中最近一个有趣的发展是引入了 picoprocess（微进程）。在添加这个功能之前，NT 中的进程是相当笨重的：新进程在启动时会将一大堆 NT 运行库映射到它们的地址空间中。在微进程中，进程与 Windows 架构的联系极少，这种设计被用来在 WSL 1 中实现与 Linux 兼容的进程。某种意义上，微进程比原生 Windows 进程更接近 Unix 进程，但由于向 WSL 2 的过渡，微进程目前的应用已经不多了，尽管它们自 2016 年 8 月才存在。
\n最后，尽管我们经常批评 Windows 的安全问题，NT 起初在早期互联网标准方面就采用了先进的安全设计，因为该系统基本上是一个基于能力（capability-based）的系统。登录后启动的第一个用户进程会从内核中获得一个访问令牌，代表用户会话的权限，该进程及其子进程必须向内核提供此令牌以断言它们的权限。这与 Unix 不同，Unix 进程只具有标识符，内核需要在进程表中跟踪每个进程的权限。
\n正如简介中提到的，NT 的一个主要目标是与为旧版 Windows、DOS、OS/2 和 POSIX 编写的应用程序兼容。其中一个原因是技术上的，因为这迫使系统具有优雅的设计；另一个原因是政治上的，因为 NT 是与 IBM 的联合开发，NT 必须支持 OS/2 应用程序，即使 NT 最终成为 Windows。
\n这种对兼容性的需求迫使 NT 的设计与 Unix 的设计截然不同。在 Unix 中，用户空间应用程序通过其系统调用接口直接与内核通信，这个接口就是Unix 接口。通常（ 但并非总是 ），C 库提供了调用内核的粘合剂（胶水代码），而应用程序本身从不发出系统调用，但这只是一个小细节。
\n与此相反，在 NT 中，应用程序不直接与执行体（内核）通信。相反，每个应用程序都与一个特定的受保护子系统通信，而这些子系统是实现 NT 希望与之兼容的各种操作系统的 API 的子系统。这些子系统作为用户空间服务器实现（它们不在 NT “微内核”中）。对 Windows 应用程序的支持来自 Win32 服务器，这很特殊，因为它是唯一一个用户可以直接看到的服务器：它控制控制台程序和 DOS 终端，并且出于性能原因具有某些权限。
\n与传统的 Unix 相比，NT 的设计非常不同，因为 BSD 和 Linux 具有宏内核。这些内核通过系统调用接口向用户空间应用程序暴露，使它们可以直接与系统交互。然而，BSD 系统长期以来提供了运行不同二进制文件的支持，所有这些都在宏内核中完成：其工作原理是根据正在运行的二进制文件向用户空间暴露不同的系统调用表，然后将这些“外来的”系统调用翻译成内核可以理解的形式。Linux 也通过 personality 提供了有限的支持。
\n尽管 BSD 的方法与 NT 处理其它系统的方式大不相同，WSL 1 的设计却非常相似，并不符合子系统的原始定义。在 WSL 1 中，NT 内核将 Linux 进程标记为微进程（picoprocess），然后向它们暴露不同的系统调用接口。在 NT 内核中，这些特定于 Linux 的系统调用被转换为 NT 操作，并在同一内核中提供，就像 BSD 的 Linux 兼容性一样。唯一的问题是，NT 不是 Unix，它对 Linux 的“模拟”很棘手，而且比 BSD 所能提供的要慢得多。遗憾的是，WSL 2 失去了这种设计的精髓，转而采用了全面的 VM 设计……
\n在结束这一节之前，还有两个有趣的细节：NT 设计的一个目标是允许在单个 shell 中实现子系统之间的无缝 I/O 重定向；子系统通过 port 暴露给应用程序，这些 port 当然是 NT 对象，类似于 Mach 允许进程和服务器之间通信的方式。
\nNT 和 Unix 一样，依赖于内存管理单元（MMU）和分页来提供跨进程的保护和虚拟内存。在用户空间进程中进行分页是一种常见机制，可以使它们拥有比机器上的物理内存更大的地址空间。但是，NT 提前于当代 Unix 系统的一件事是内核本身也可以被分页到磁盘上。显然不是整个内核 —— 如果所有内容都可以分页，那么当解析内核页错误时，可能需要从已分页的文件系统驱动程序中获取代码 —— 但其中的大部分是可以分页的。这在当今并不特别有趣，因为与机器上典型的安装内存相比，内核很小，但在过去，每个字节都是宝贵的，这当然会产生很大的差异。
\n此外，虽然我们现在认为虚拟内存和分页的工作方式是理所当然的，但在设计 NT 时，这是一个重要的研究领域。旧的 Unix 实现为文件系统和虚拟内存分别设置了内存缓存，直到 1987 年 SunOS 才实现了统一的虚拟内存架构，以减少这种旧设计的开销。
\n相比之下，NT 从一开始就采用了统一的内存架构。你可能会说这很容易做到，因为他们可以看到 Unix 中发现的低效率，并且在 NT 设计开始之前就可以看到 SunOS 实现的解决方案。但是不管怎样，这使得 NT 在当时比许多其它操作系统“更先进”，必须指出的是，其它系统如 NetBSD 直到 2002 年才在 NetBSD 1.6 中实现了 统一缓冲区缓存（UBC）。
\nNT 和 Unix 之间一个有趣的区别是它们如何管理和表示共享内存。在 NT 中，共享内存段是（令人惊讶的）对象，因此受到与任何其它对象相同的访问验证检查的影响。此外，它们可以像任何其它对象一样寻址，因为它们是单个对象树的一部分。与之相反，Unix 中的这个特性是后来添加的：共享内存对象有一个不同的命名空间。
\nUnix 的早期版本仅支持一种文件系统。例如，直到 1990 年的 4.3BSD 版本，BSD 才获得了虚拟文件系统 （VFS） 抽象，以支持 UFS 之外的其它文件系统。另一方面，NT 一开始就采用了允许多种文件系统的设计。
\n为了支持多种文件系统，内核必须以某种方式公开它们的命名空间。Unix 通过挂载点将文件系统组合在一个文件层次结构下：VFS 层提供了识别哪些节点对应于文件系统根目录的机制，并在遍历路径时将请求重定向到这些文件系统驱动程序。NT 有类似的设计，即使从标准用户界面来看，文件系统看起来像是不连续的驱动器：在内部，执行体将文件系统表示为对象树中的对象，每个对象负责解析路径的其余部分。这些文件系统对象被重新映射为 DOS 驱动器，以便用户空间可以访问它们。而且，你猜怎么着？DOS 驱动器也是一个单独子树下的对象，它将 I/O 重定向到它们引用的文件系统。
\n对于文件系统，NT 最终使用了 NTFS。NTFS 在当时是一个非常先进的文件系统，即使我们喜欢因其性能差而抨击它（其实这是 一个错误的说法）。NT 的 I/O 子系统与 NTFS 相结合，带来了 64 位寻址、日志记录，甚至是 Unicode 文件名。Linux 直到 1990 年代末才获得了 64 位文件支持，直到 2001 年 ext3 的推出才获得了日志记录。FreeBSD 直到 1998 年才出现了另一种容错机制 Soft updates。并且 Unix 将文件名表示为 nul 结尾的字节数组，而非 Unicode。
\nNT 在发布时包含的其它功能包括磁盘分割和镜像（我们今天所知道的 RAID）和设备热插拔。鉴于 SunOS 自 1990 年代初以来就确实包括 RAID 支持，这些功能并不是什么新鲜事，但有趣的是，这些功能都是作为 NT 原始设计的一部分考虑的。
\n在更高层次上，使 NT 的 I/O 子系统比 Unix 的 I/O 子系统先进得多的是，它的接口是异步的，并且从一开始就是这样。从这方面来看，FreeBSD 直到 1998 年的 FreeBSD 3.0 才支持 aio(7)，Linux 也是直到 2002 年的 Linux 2.5 才支持。即使异步 I/O 的支持在 Unix 系统中已经存在了 20 多年，它仍然不是普遍的：很少有人知道这些 API，绝大多数应用程序不使用它们，且它们的性能很差。Linux 的 io_uring 是一个相对较新的功能，它改进了异步 I/O，但它一直是安全漏洞的一个重要来源，而且并没有得到广泛使用。
\n今天互联网无处不在，但在设计 NT 时，情况并非如此。回顾微软生态系统，DOS 3.1（1987 年）包含了 FAT 文件系统中的文件共享基础，但“操作系统”本身并未提供任何网络功能：一个名为 Microsoft Networks（MS-NET）的单独产品提供了这些功能。Windows 3.0（1990 年）包含了对 NetBIOS 的支持，这允许在本地网络上进行原始的打印机和文件共享，但是对 TCP/IP 的支持却无处可寻。
\n相比之下，Unix 简直就是互联网：所有基础互联网协议都是为它编写、用它编写的。因此，在设计 NT 时，考虑到良好的网络支持至关重要，事实上 NT 确实带有网络功能。因此，NT 支持互联网协议和传统的 LAN 协议，这使其在企业环境中领先于 Unix。
\n以 NT 的网络域为例。在 Unix 中，网络管理员通常手动跨计算机同步用户帐户，他们可能会使用 X.500 目录协议（1988 年）和 Kerberos（1980 年代）进行用户身份验证，像 SunOS 这样的系统实现了这些技术，但这些技术并不特别简单。相反，NT 从一开始就提供了域，它集成了目录和身份验证功能，我认为这些在公司网络中“赢得了胜利”，因为它们更容易设置，并且内置在系统中。
\n同步用户帐户的目标是跨计算机共享资源，主要是文件，当共享时，表示权限的方式很重要。很长一段时间以来，Unix 只为每个文件提供了简单的读/写/执行权限集。另一方面，NT 从一开始就提供了高级 ACL — 这在 Unix 上仍然是一个痛点。尽管 Linux 和 BSD 现在也有 ACL，但它们的接口在系统之间不一致，感觉像是对系统设计的外来附加组件。在 NT 上，ACL 在对象级别工作，这意味着它们在所有内核功能中始终保持一致。
\n说到共享文件，我们必须谈论网络文件系统。在 Unix 中，事实上的文件系统是 NFS，而在 NT 上是 SMB。SMB 是从 MS-NET 和 LAN Manager 继承而来的，并通过一个名为 重定向器（redirector） 的组件在内核中实现。本质上，重定向器“只是”另一个文件系统，就像 NFS 在 Unix 上一样，它会捕获文件操作并将其发送到网络上，这使我们可以比较 RPC 系统。
\n尽管 protobuf 和 gRPC 可能由于广泛使用而看起来像新颖的想法，但它们是基于旧想法的。在 Unix 上，我们从 1980 年代初就有了 Sun RPC，主要用于支持 NFS。同样，NT 通过自己的 DSL（称为 MIDL）提供了内置的 RPC 支持，用于指定接口定义并为远程过程生成代码，以及实现 RPC 客户端和服务器的自己的工具。
\n从堆栈中往下看，Unix 系统从来都不擅长支持任意驱动程序：请记住 Unix 系统通常与特定的机器和供应商耦合。另一方面，NT 旨在成为“任何”机器的操作系统，并由软件公司出售，因此支持他人编写的驱动程序至关重要。因此，NT 配备了网络驱动程序接口规范（NDIS），这是一个轻松支持网卡驱动程序的抽象层。直到今天，制造商提供的驱动程序在 Linux 上依然很少见，这带来了像 ndiswrapper 这样的有趣解决方案，这是 2000 年代初非常流行的一个 shim，可以在 Linux 上重用 Windows 驱动程序的 WiFi 卡。
\n最后，NT 和 Unix 之间的另一个区别在于它们对命名管道的实现。在 Unix 中，命名管道是一个本地构造：它们为同一台机器上的两个进程提供了一种机制，使它们可以通过磁盘上的持久文件名相互通信。NT 具有相同的功能，但其命名管道可以通过网络操作。通过将命名管道放在共享文件系统上，不同计算机上的两个应用程序可以相互通信，而无需担心网络细节。
\n我保证，我们已经接近尾声了。这里仅简单介绍几个用户空间的主题：
\n配置：NT 将系统和应用程序配置集中在一个名为“注册表”的数据库中，摆脱了旧的 CONFIG.SYS、AUTOEXEC.BAT 和传统 Windows 使用的无数 INI 文件。这让一些人很生气，但最终，统一的配置接口对每个人都有好处：应用程序更容易编写，因为只有一个基础需要支持，用户更容易调整系统，因为只有一个地方需要查看。
另一方面，Unix 仍然受到数十种 DSL 和不一致的文件位置的困扰。每个支持配置文件的程序都有自己编制的语法，知道程序读取的位置很困难，而且并不总是有很好的文档。Linux 生态系统通过 XDG 和 dconf（以前是 GConf）推动了一种更像 NT 的方法，但是……这是一场艰苦的战斗：虽然桌面组件专门使用这些技术，但系统的基础组件可能永远不会采用它们，留下不一致的混乱。
\n国际化：作为一家已经在全球范围内交付 Windows 3.x 的大公司，微软理解本地化的重要性，并从一开始就使 NT 支持这一功能。相比之下，Unix 直到 1990 年代末才开始支持 UTF ，支持不同语言是通过可选的 gettext 附加组件实现的。
C 语言：FreeBSD 和 NetBSD 等 Unix 系统一直梦想自己创造一种 C 语言方言，以更安全地实现内核。然而，除了 Linux 依赖的 GCC 专有扩展，这种设想从未取得过实质性进展。另一方面，微软拥有 C 编译器的特权，因此他们确实在 NT 中使用了这种方法，NT 是用 Microsoft C 编写的。例如，NT 依赖于结构化异常处理（SEH），这是一种添加 try/except 子句以处理软件和硬件异常的功能。我不会说这是一个很大的优点，但这确实是一个区别。
\nNT 在推出时是一项开创性的技术。正如我上面所介绍的，自 NT 诞生以来，许多我们今天在系统设计中认为理所当然的功能都已经存在，而几乎所有其它 Unix 系统都必须随着时间的推移慢慢获得这些功能。因此，这些功能并不总是与 Unix 的理念无缝集成。
\n然而，今天，我不清楚 NT 是否真的比 Linux 或 FreeBSD 等更“先进”。的确，NT 在开始时具有更可靠的设计原则和更多功能，而且比其同时代的操作系统更多，但是现在……差异变得模糊。是的，NT 是先进的，但并不比现代 Unix 先进得多。
\n我发现令人失望的是，尽管 NT 已经制定了所有这些可靠的设计原则……UI 中的臃肿不会让设计大放异彩。即使在超级强大的机器上，操作系统的迟缓也是令人痛苦的，甚至可能导致该操作系统的消亡。
\n我将为您留下用于撰写本文的书籍，以便您可以了解我的学习之旅。正如您可以想象的那样，我不得不跳过大量有趣的细节，因此这些值得一读：
\n\n如果您想继续我的旅程并真正深入研究现代 NT 和 Unix 的每一部分是如何工作的，那么新版是必读的：
\n\n\n\n
Go 调度器的职责是在运行在一个或多个处理器上的多个工作 OS 线程之间分配可运行的 goroutine。在多线程计算中，出现了两种调度范式：工作共享和工作窃取。
\n与工作共享相比，工作窃取的线程迁移频率更低。当所有处理器都有工作要运行时，就不会进行线程迁移。一旦出现空闲处理器，就会考虑进行迁移。
\n自 1.1 版本以来，Go 就采用了由 Dmitry Vyukov 贡献的工作窃取调度器。本文将深入解释什么是工作窃取调度器，以及 Go 是如何实现它的。
\nGo 有一个 M:N 调度器，它也可以利用多个处理器。任何时候，都需要在最多 GOMAXPROCS 个处理器上运行的 N 个操作系统线程上调度 M 个 goroutine。Go 调度器对 goroutine、线程和处理器使用以下术语：
\n每个 P 都有一个本地 goroutine 队列和一个全局 goroutine 队列。每个 M 都应该分配给一个 P。如果 P 被阻塞或处于系统调用中，则它可能没有 M。任何时候，P 的数量最多为 GOMAXPROCS 个。任何时候，每个 P 上只能运行一个 M。如果需要，调度器可以创建更多 M。
\n![\"调度器基础\"](\"https://s2.loli.net/2024/09/16/fzDNovlcSgQE467.png\")
每一轮调度只是找到一个可运行的 goroutine 并执行它。在每一轮调度中，搜索按以下顺序进行：
\nruntime.schedule() {\n // 只有 1/61 的时间会检查全局可运行队列中是否有 G。\n // 如果没有找到，则检查本地队列。\n // 如果还没有找到，\n // 尝试从其他 P 窃取。\n // 如果仍然没有找到，则再次检查全局可运行队列。\n // 如果还是没有找到，则轮询网络。\n}\n一旦找到可运行的 G，就会一直执行它，直到它被阻塞。
\n注意：看起来全局队列比本地队列更有优势，但偶尔检查全局队列对于避免 M 只从本地队列调度直到没有本地排队的 goroutine 非常重要。
\n当创建一个新的 G 或一个现有的 G 变为可运行状态时，它会被推送到当前 P 的可运行 goroutine 列表中。当 P 完成执行 G 后，它会尝试从自己的可运行 goroutine 列表中弹出一个 G。如果列表现在为空，P 会随机选择另一个处理器 (P)，并尝试从其队列中窃取一半的可运行 goroutine。
\n![\"P2](\"https://s2.loli.net/2024/09/16/F9ARXBgMnbf15Uj.png\")
在上面的例子中，P2 找不到任何可运行的 goroutine。因此，它随机选择另一个处理器 (P1)，并将三个 goroutine 窃取到自己的本地队列中。P2 将能够运行这些 goroutine，并且调度器的工作将在多个处理器之间更公平地分配。
\n调度器总是希望将尽可能多的可运行 goroutine 分配给 M，以充分利用处理器，但与此同时，我们需要停放过多的工作以节省 CPU 和电源。与此相反，调度器也应该能够扩展到高吞吐量和 CPU 密集型程序。
\n持续的抢占既昂贵，如果性能至关重要，对高吞吐量程序来说也是一个问题。操作系统线程不应该频繁地在彼此之间传递可运行的 goroutine，因为这会导致延迟增加。此外，在存在系统调用的情况下，操作系统线程需要不断地被阻塞和解除阻塞。这是很昂贵的，并且会增加很多开销。
\n\n\n译注：
\n\n
\n- 注重速度: 如果目标是快速响应（考虑占用），那么低延迟更重要。
\n- 注重效率: 如果目标是完成尽可能多的工作，那么高吞吐量更重要。
\n
为了最大限度地减少传递，Go 调度器实现了“自旋线程”。自旋线程会消耗一点额外的 CPU 资源，但它们最大限度地减少了操作系统线程的抢占。在以下情况下，线程处于自旋状态：
\n任何时候最多只能有 GOMAXPROCS 个自旋的 M。当一个自旋线程找到工作时，它就会退出自旋状态。
\n如果有没有 P 分配的空闲 M，则具有 P 分配的空闲线程不会阻塞。当创建新的 goroutine 或 M 被阻塞时，调度器会确保至少有一个自旋的 M。这确保了没有可以运行的可运行 goroutine；并避免了过多的 M 阻塞/解除阻塞。
\nGo 调度器通过窃取将它们调度到正确和未充分利用的处理器，以及实现“自旋”线程以避免频繁发生阻塞/解除阻塞转换，从而做了很多工作来避免过度抢占操作系统线程。
\n调度事件可以通过 执行跟踪器 进行跟踪。如果你碰巧认为你的处理器利用率很低，你可以调查一下发生了什么。
\nhttps://goguide.ryansu.tech/guide/concepts/golang/20-gmp.html
\n","tags":["go"]},{"id":"coroutine-and-fiber","url":"https://yieldray.fun/posts/coroutine-and-fiber","title":"协程与纤程","date_published":"2024-09-16T14:09:26.000Z","date_modified":"2024-09-16T14:09:26.000Z","content_text":"纤程 (Fiber) 和 协程 (Coroutine) 可用于实现并发编程（这又可实现异步 I/O）。它们之间的共同点在于：
\n区别:
\n调度控制:
\n\n\n注：由于这里是概念性叙述，不太能对底层堆栈加以描述
\n
\n\n协程可能更接近异步编程，因为无需（一般也不允许手动）管理上下文（切换），低层库提供的 API 背后可能使用多个线程（比如线程池），也可能包装了操作系统提供的非阻塞 I/O 接口
\n
异步很大程度上是通过事件驱动，而这又可以基于状态机。协程天然带有这种状态转移的特性。
实现方式:
\n栈式协程: 拥有自己的调用栈，类似于轻量级线程，可以在函数调用之间保存状态。
\n非栈式协程: 没有自己的调用栈，状态保存在编译器生成的协程对象中。
\n非对称纤程： 纤程只能将控制权让给调用方，因为纤程需主动让出控制权。
\n对称纤程： 纤程启动后，调用方获得控制器，用于控制纤程的暂停和恢复。
\n一句话来说，纤程在于轻量化线程，而协程在于子程序的自动调度。
\n参考：
https://www.open-std.org/jtc1/sc22/wg21/docs/papers/2014/n4024.pdf
Goroutine 的模型可能类似于纤程，但 goroutine 栈（创建，销毁和自动增长）和 goroutine 切换是 runtime 自动调度的。
\n\n\n线程栈需要手动控制：pthread_attr_setstack
\n
其特点在于没有共享内存，个人认为其通过信道通信的方式很大程度上模拟了协程的挂起和恢复。
\nucontext 库提供用户进程内部的 context 控制，可视为更先进的 setjmp/longjmp。（参考）
\n// in ucontext.h\n\n/* Userlevel context. */\ntypedef struct ucontext_t\n {\n unsigned long __ctx(uc_flags);\n struct ucontext_t *uc_link; // uc_link指向当前context 结束时待恢复的上下文\n stack_t uc_stack; // context 使用的栈\n sigset_t uc_sigmask; // context 要阻塞的信号合集\n mcontext_t uc_mcontext; // 机器特定的 context 表示\n } ucontext_t;\n#include <ucontext.h>\n#include <iostream>\n\nucontext_t mainContext, fiberContext;\n\nvoid FiberFunc() {\n for (int i = 0; i < 5; ++i) {\n std::cout << "Fiber: " << i << std::endl;\n swapcontext(&fiberContext, &mainContext); // 切换回主上下文\n }\n}\n\nint main() {\n // 初始化纤程上下文\n getcontext(&fiberContext);\n fiberContext.uc_stack.ss_sp = malloc(64 * 1024);\n fiberContext.uc_stack.ss_size = 64 * 1024;\n fiberContext.uc_link = &mainContext;\n makecontext(&fiberContext, FiberFunc, 0);\n\n // 切换到纤程上下文\n swapcontext(&mainContext, &fiberContext);\n\n // 主上下文逻辑\n for (int i = 0; i < 3; ++i) {\n std::cout << "Main: " << i << std::endl;\n swapcontext(&mainContext, &fiberContext);\n }\n\n // 释放内存\n free(fiberContext.uc_stack.ss_sp);\n\n return 0;\n}\nWin32 提供 Fiber API
\n#include <Windows.h>\n#include <iostream>\n\nvoid FiberProc(void* parameter) {\n for (int i = 0; i < 5; ++i) {\n std::cout << "Fiber: " << i << std::endl;\n SwitchToFiber(parameter); // 切换回主纤程\n }\n}\n\nint main() {\n // 创建纤程栈\n void* fiberStack = VirtualAlloc(nullptr, 64 * 1024, MEM_COMMIT, PAGE_READWRITE);\n\n // 创建纤程\n void* fiber = CreateFiber(0, FiberProc, nullptr);\n\n // 切换到纤程\n SwitchToFiber(fiber);\n\n // 主纤程逻辑\n for (int i = 0; i < 3; ++i) {\n std::cout << "Main: " << i << std::endl;\n SwitchToFiber(fiber);\n }\n\n // 清理纤程\n DeleteFiber(fiber);\n VirtualFree(fiberStack, 0, MEM_RELEASE);\n\n return 0;\n}\nBoost.Fiber
\n#include <boost/fiber/all.hpp>\n#include <iostream>\n\nvoid fiber_function() {\n for (int i = 0; i < 5; ++i) {\n std::cout << "Fiber: " << i << std::endl;\n boost::this_fiber::yield(); // 切换到其他纤程\n }\n}\n\nint main() {\n boost::fibers::fiber f(fiber_function);\n for (int i = 0; i < 3; ++i) {\n std::cout << "Main: " << i << std::endl;\n f.join(); // 等待纤程 f 结束\n }\n return 0;\n}\nC++20 Coroutines / Boost.Coroutine
\n#include <iostream>\n#include <coroutine>\n\nstruct Task {\n struct promise_type {\n std::suspend_always initial_suspend() { return {}; }\n std::suspend_always final_suspend() noexcept { return {}; }\n void return_void() {}\n void unhandled_exception() {}\n Task get_return_object() { return {}; }\n };\n};\n\nTask foo() {\n std::cout << "foo() begin" << std::endl;\n co_await std::suspend_always{};\n std::cout << "foo() end" << std::endl;\n}\n\nint main() {\n auto f = foo();\n std::cout << "main() continues" << std::endl;\n return 0;\n}\n#include <iostream>\n#include <coroutine>\n\nstruct CountingCoroutine {\n struct promise_type {\n int current_value = 0;\n CountingCoroutine get_return_object() { return CountingCoroutine(std::coroutine_handle<promise_type>::from_promise(*this)); }\n std::suspend_always initial_suspend() { return {}; }\n std::suspend_always final_suspend() noexcept { return {}; }\n void return_void() {}\n void unhandled_exception() {}\n std::suspend_always yield_value(int value) {\n current_value = value;\n return {};\n }\n };\n std::coroutine_handle<promise_type> coroutine;\n CountingCoroutine(std::coroutine_handle<promise_type> handle) : coroutine(handle) {}\n ~CountingCoroutine() {\n if (coroutine)\n coroutine.destroy();\n }\n int getValue() const {\n return coroutine.promise().current_value;\n }\n void resume() {\n coroutine.resume();\n }\n};\n\nCountingCoroutine generateNumbers() {\n for (int i = 0; i < 10; ++i) {\n //移交控制权\n co_yield i;\n }\n}\n\nint main() {\n CountingCoroutine counter = generateNumbers();\n while (counter.coroutine) {\n std::cout << "Value: " << counter.getValue() << std::endl;\n //回到 co_yield 继续执行\n counter.resume();\n }\n return 0;\n}\n事件机制为发布订阅模式，属于观察者模式的变种。
观察者模式，简单来说，存在两类：目标（发布者）和观察者（订阅者），目标持有其所有观察者的引用和状态，观察者提供一个接受目标的接口（以消费目标的状态）。
发布订阅模式在目标和观察者之间引入了一个消息代理 (Message Broker)或事件总线 (Event Bus)（事件=消息）。事件总线负责接收和分发事件，发布和订阅者双方都完全不需要知道对方的存在。
这里展示几个轻量级的库作为演示
\n\n\n源码中包含 d.ts 类型
\n
nanoevents 库只能作为一个实现示例，但我个人不建议在生产中使用它。
\n//prettier-ignore\nexport let createNanoEvents = () => ({\n emit(event, ...args) {\n for (\n let i = 0,\n callbacks = this.events[event] || [],\n length = callbacks.length;\n i < length;\n i++\n ) {\n callbacks[i](...args)\n }\n },\n events: {},\n on(event, cb) {\n ;(this.events[event] ||= []).push(cb)\n return () => {\n this.events[event] = this.events[event]?.filter(i => cb !== i)\n }\n }\n})\n\n\n源码为 ts 实现，为缩短篇幅转换为 js
\n
mitt 库支持通配符，类型支持完善，适用于普通场景。
\nexport default function mitt(all) {\n all = all || new Map();\n return {\n all,\n on(type, handler) {\n const handlers = all.get(type);\n if (handlers) {\n handlers.push(handler);\n } else {\n all.set(type, [handler]);\n }\n },\n\n off(type, handler) {\n const handlers = all.get(type);\n if (handlers) {\n if (handler) {\n // n >>> 0 这里的有符号右移 0 位对非负数肯定是无影响的\n // 对于负数，这里只可能是 -1\n // -1 >>> 0 = 4294967295\n handlers.splice(handlers.indexOf(handler) >>> 0, 1);\n } else {\n all.set(type, []);\n }\n }\n },\n\n emit(type, evt) {\n let handlers = all.get(type);\n if (handlers) {\n // .slice() 防止直接在原数组上迭代\n // 处理在事件处理过程中修改 handlers 数组情况\n handlers.slice().map((handler) => {\n handler(evt);\n });\n }\n handlers = all.get("*");\n if (handlers) {\n handlers.slice().map((handler) => {\n handler(type, evt);\n });\n }\n },\n };\n}\n可以看出，实现基础的发布订阅机制非常简单
\n核心在于两个基类 EventTarget Event
注意它们曾经只是接口，但现在（在现代浏览器中）可直接通过 new 构造，特别是 Event 的子类
为了区分性，提供一个 CustomEvent，以表示任意应用程序事件
\n\nWHATWG Reference
\n
Event EventTarget
class EventTarget {\n /**\n * 为类型属性值为 `type` 的事件添加事件监听器。`callback` 参数设置事件分发时将被调用的回调函数。\n *\n * `options` 参数设置监听器特定的选项。为了兼容性，它可以是一个布尔值，在这种情况下，方法的行为与将值指定为 `options` 的 `capture` 相同。\n *\n * `options` 的 `capture` 为 `true` 表示阻止事件的 `eventPhase` 属性值为 `BUBBLING_PHASE` 时调用 `callback`。\n * 为 `false`（或不存在）时，`callback` 不会在事件的 `eventPhase` 属性值为 `CAPTURING_PHASE` 时被调用。\n * 无论哪种方式，如果事件的 `eventPhase` 属性值为 `AT_TARGET`，`callback` 将被调用。\n *\n * `options` 的 `passive` 为 `true` 表示回调函数不会通过调用 `preventDefault()` 来取消事件。这是用于启用 [§ 2.8 观察事件监听器](https://dom.spec.whatwg.org/#observing-event-listeners)中描述的性能优化。\n *\n * `options` 的 `once` 为 `true` 表示回调函数只会被调用一次，之后事件监听器就会被移除。\n *\n * 如果为 `options` 的 `signal` 传递了 `AbortSignal`，则当 `signal` 被中止时，事件监听器将被移除。\n *\n * 事件监听器被追加到 `target` 的事件监听器列表中，如果它具有相同的类型、回调函数和捕获方式，则不会被追加。\n */\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n /**\n * 将合成事件 `event` 分发到 `target`，如果事件的 `cancelable` 属性值为 `false` 或其 `preventDefault()` 方法没有被调用，则返回 `true`，否则返回 `false`。\n */\n dispatchEvent(event: Event): boolean;\n /**\n * 从 `target` 的事件监听器列表中移除具有相同类型、回调函数和选项的事件监听器。\n */\n removeEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: EventListenerOptions | boolean,\n ): void;\n}\n\ntype EventListenerOrEventListenerObject = EventListener | EventListenerObject;\ninterface EventListener {\n (evt: Event): void;\n}\ninterface EventListenerObject {\n handleEvent(object: Event): void;\n}\ninterface EventListenerOptions {\n capture?: boolean;\n}\n与事件相关的 Web API 基本都使用它们，但最具代表性的还是 DOM Events。
\n观察 Event 基类，事件具有 eventPhase 属性，可表示事件处于捕获或冒泡阶段（NONE/CAPTURING_PHASE/AT_TARGET/BUBBLING_PHASE）
这是为了实现事件委托机制：DOM 事件大部分都是先捕获阶段，然后才是目标阶段，最后是冒泡阶段。
我们只需考虑反例即可：
\n\n\n\n
\n- 一些较老的，非标准化的事件： 例如
\nfocus,blur,change等，这些事件在某些浏览器中可能不支持捕获阶段，或者行为不一致。- 一些特定类型的事件：
\n\n
\n- \n
load: 该事件在页面加载完成后触发，只会在目标阶段触发一次，没有捕获和冒泡阶段。- \n
unload: 该事件在页面卸载时触发，类似于load事件，也只会在目标阶段触发一次。- \n
scroll: 该事件在滚动条滚动时触发，通常只在目标阶段触发。- \n
resize: 该事件在窗口或元素大小发生改变时触发，通常只在目标阶段触发。- 直接在元素上触发的鼠标事件： 例如使用
\nelement.click()触发的click事件，只会执行目标阶段和冒泡阶段，没有捕获阶段。- 自定义事件： 默认情况下，使用
\ndispatchEvent触发的自定义事件只可能有冒泡阶段。
可以通过设置Event构造函数的bubbles参数为true来启用冒泡，但是无法启用捕获阶段。
根据 DOM 规范，每个 EventTarget 对象都关联一个 get the parent 算法，接受一个 Event 并返回 EventTarget。
显然，DOM 节点（Node） 等接口覆写了该算法。
而手动构造 EventTarget 的 get the parent 算法返回 null，并且不关联 activation 行为。
DOM 是树形结构，因此事件会参与这种树形结构。目前手动构造的 EventTarget 不参与树形结构，但规范也提到未来可能会允许自定义 get the parent 算法。
interface EventInit {\n bubbles?: boolean;\n cancelable?: boolean;\n composed?: boolean;\n}\n\nclass Event {\n constructor(type: string, eventInitDict?: EventInit);\n /**\n * 返回 true 或 false，具体取决于事件的初始化方式。如果事件按照逆向树序遍历其目标的祖先，则为 true，否则为 false。\n */\n readonly bubbles: boolean;\n /**\n * @deprecated\n */\n cancelBubble: boolean;\n /**\n * 返回 true 或 false，具体取决于事件的初始化方式。其返回值并不总是具有意义，但 true 可能表明事件分发过程中的一部分操作可以通过调用 preventDefault() 方法取消。\n */\n readonly cancelable: boolean;\n /**\n * 返回 true 或 false，具体取决于事件的初始化方式。如果事件调用其目标根节点的 ShadowRoot 节点以外的监听器，则为 true，否则为 false。\n */\n readonly composed: boolean;\n /**\n * 返回当前正在调用其事件监听器回调的函数的对象。\n */\n readonly currentTarget: EventTarget | null;\n /**\n * 如果成功调用 preventDefault() 以指示取消，则返回 true，否则返回 false。\n */\n readonly defaultPrevented: boolean;\n /**\n * 返回事件的阶段，可以是 NONE、CAPTURING_PHASE、AT_TARGET 和 BUBBLING_PHASE 之一。\n */\n readonly eventPhase: number;\n /**\n * 如果事件是由用户代理分发的，则返回 true，否则返回 false。\n */\n readonly isTrusted: boolean;\n /**\n * @deprecated\n */\n returnValue: boolean;\n /**\n * @deprecated\n */\n readonly srcElement: EventTarget | null;\n /**\n * 返回事件分发到的对象（其目标）。\n */\n readonly target: EventTarget | null;\n /**\n * 返回事件的时间戳，以相对于时间原点的毫秒数表示。\n */\n readonly timeStamp: DOMHighResTimeStamp;\n /**\n * 返回事件的类型，例如 "click"、"hashchange" 或 "submit"。\n */\n readonly type: string;\n /**\n * 返回事件路径的调用目标对象（将调用监听器的对象），除了 shadow 树中 shadow 根节点模式为 "closed" 的任何节点，这些节点无法从事件的 currentTarget 访问。\n */\n composedPath(): EventTarget[];\n /**\n * @deprecated\n */\n initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;\n /**\n * 如果在 cancelable 属性值为 true 时调用，并且在执行事件的监听器时 passive 设置为 false，则向导致事件分发操作发出信号，表明需要取消该操作。\n */\n preventDefault(): void;\n /**\n * 调用此方法可阻止事件到达当前事件运行完成后注册的任何事件监听器，并且当在树中分发时，还可阻止事件到达任何其他对象。\n */\n stopImmediatePropagation(): void;\n /**\n * 当在树中分发时，调用此方法可阻止事件到达除当前对象以外的任何对象。\n */\n stopPropagation(): void;\n readonly NONE: 0;\n readonly CAPTURING_PHASE: 1;\n readonly AT_TARGET: 2;\n readonly BUBBLING_PHASE: 3;\n}\n当通过编程方式触发 DOM 事件时，事件处理器是同步被调用的：
\nconst et = new EventTarget();\net.addEventListener("test", console.log);\net.dispatchEvent(new Event("test"));\net.dispatchEvent(new CustomEvent("test", { detail: "detail" }));\nconsole.log("main_thread");\n// Event -> CustomEvent -> main_thread\n\nconst el = document.createElement("a");\nel.addEventListener("click", console.log);\nel.click();\nel.dispatchEvent(new PointerEvent("click"));\nconsole.log("main_thread");\n// PointerEvent -> PointerEvent -> main_thread\n\nel.addEventListener("test", console.log);\nel.dispatchEvent(new Event("test"));\n// 可以监听和派发任意事件\nNode.js 也实现了 Web EventTarget 和 Event API，毕竟存在 Node.js 实现的其它 Web API 依赖于此。
\n关于 Node.js EventTarget 与 DOM EventTarget 的区别，参见官方文档即可。
\n本文的主题是 Web Events，因此会省略 Node.js 的事件机制。
\nNode.js 的 events 模块提供 EventEmitters 类对应于 EventTarget，但没有 Event 对应类。
\n","tags":["web-api","dom"]},{"id":"sec-headers","url":"https://yieldray.fun/posts/sec-headers","title":"Sec Headers","date_published":"2024-09-11T23:54:47.000Z","date_modified":"2024-09-11T23:54:47.000Z","content_text":"Sec = Security
\nSpecs(Fetch Metadata Request Headers) MDN Reference Web.dev Article
\nCH = Client Hints
\nSpecs(User-Agent Client Hints) MDN Reference Chrome Dev Blog
\n","tags":["http","web-api"]},{"id":"js-equality","url":"https://yieldray.fun/posts/js-equality","title":"ECMA262比较操作","date_published":"2024-09-10T00:00:00.000Z","date_modified":"2024-11-03T15:00:00.000Z","content_text":"\n\n截止编写日期，下面引用来源为：ECMAScript® 2025 Language Specification
\n
等式运算符作为二元运算符，但注意等式两边不满足等价关系。因为其满足自反性、对称性，但不满足传递性。
\n根据 ECMA262 给出的 4 个注释，我们可以再加以解释：
\n`${a}` == `${b}`+a == +b!a == !bA != B 等价于 !(A == B)A == B 等价于 B == A ，当然， A 与 B 的执行顺序除外new String("a") == "a" 和 "a" == new String("a") 都为 truenew String("a") == new String("a") 为 falsex, y) 为 false，返回 false。\n\n即按顺序判断是否都是 undefined, null, Boolean, Number, BigInt, Symbol, String, Object 类型
\n
x 是 Number，则\n\n注意 NaN 也属于 Number
\n
x, y)。\n\n与 IEEE754 一致，即 NaN!=NaN，+0=-0
\n
x, y)。\n\n此操作实际上就是将比较操作委托到具体类型。但注意由于输入参数已经是同类型，当 x 为 undefined 或 null 时直接返回 true
\n
x, y) 为 true, 则 1. 返回 IsStrictlyEqual(x, y).\n\n类型相同时，完全等同于严格比较
\n
x 为 null 且 y 为 undefined, 返回 true.x 为 undefined 且 y 为 null, 返回 true.\n\n这两步是对称的，表示 null 与 undefined 松散相等
\n
x 是一个 Number 且 y 是一个 String, 返回 ! IsLooselyEqual(x, ! ToNumber(y)).x 是一个 String 且 y 是一个 Number, 返回 ! IsLooselyEqual(! ToNumber(x), y).\n\n这两步是对称的，对于字符串与数字的比较，字符串总是转为数字
\n
x 是一个 BigInt 且 y 是一个 String, 则n 为 StringToBigInt(y).n 是 undefined, 返回 false.x, n).x 是一个 String 且 y 是一个 BigInt, 返回 ! IsLooselyEqual(y, x).\n\n这两步和上两步一致
\n
x 是一个 Boolean, 返回 ! IsLooselyEqual(! ToNumber(x), y).y 是一个 Boolean, 返回 ! IsLooselyEqual(x, ! ToNumber(y)).\n\n这两步是对称的，对于与布尔值的比较，总是转为数字再与布尔值比较
\n
x 为 String, Number, BigInt, 或 Symbol 中的一个且 y 是一个 Object, 返回 ! IsLooselyEqual(x, ? ToPrimitive(y)).x 是一个 Object 且 y 是 String, Number, BigInt, 或 Symbol 中的一个, 返回 ! IsLooselyEqual(? ToPrimitive(x), y).\n\n这两步是对称的，对于与对象的比较，对象总是会通过 ToPrimitive 抽象操作转为原始值
\n
在不考虑 Symbol.toPrimitive 的情况下相当于 OrdinaryToPrimitive(input, NUMBER)，即依次调用（包括在原型上的）valueOf 和 toString 方法
x 是一个 BigInt 且 y 是一个 Number, 或若 x 是一个 Number 且 y 是一个 BigInt, 则\n可以发现，原始值之间的比较几乎就是将双方转为数字（ToNumber）再比较。
若包含对象，对象也是先转为原始值（ToPrimitive），最后其实还是要转为数字来比较。
input is an Object, thenexoticToPrim be ? GetMethod(input, %Symbol.toPrimitive%).exoticToPrim is not undefined, thenpreferredType is not present, thenhint be "default".preferredType is string, thenhint be "string".preferredType is number.hint be "number".result be ? Call(exoticToPrim, input, « hint »).result is not an Object, return result.preferredType is not present, let preferredType be number.input, preferredType).input.value1, value2).\n\n\n
Object.is就是暴露了 SameValue 抽象操作，见下
本质上就是为了区别于 IsStrictlyEqual(x, y) 抽象操作，它视 NaN 与 NaN 相等，+0 与 -0 不相等（这与 IsStrictlyEqual 得到的结果正好相反）。
可以看出，唯一区别就是对 Number 类型的处理有差异，其余步骤是完全一致的。
\nx, y) 是 false, 返回 false.x 是 Number, 则x, y).x, y).数值有 Number（IEEE 754-2019 双精度浮点数， 𝔽）和 BigInt（任意整形，表示数学值，不含正负无穷和NaN，ℤ）两种类型。
Number 和 BigInt 之间不能直接比较（不会隐式转换），因为 Number 比较可能会丢失精度。
Number::equal(x, y)Number::sameValue(x, y)Number::sameValueZero(x, y)BigInt::equal(x, y)ℝ(x)表示 x 的数学值（在数学意义上的值，而非计算机表示）。
+0𝔽 和 -0𝔽 视为数学值 0。
+∞𝔽 和 -∞𝔽 和 NaN 的行为未定义。
https://evanhahn.com/re-implementing-javascript-double-equals-in-javascript/
\n","tags":["ecma262"]},{"id":"saml-oauth-oidc","url":"https://yieldray.fun/posts/saml-oauth-oidc","title":"SAML/OAuth/OIDC","date_published":"2024-09-07T19:15:44.000Z","date_modified":"2024-09-07T19:15:44.000Z","content_text":"单点登录 Single sign-on (SSO) 简单来说，就是通过一次登录，授权访问多个应用程序。
\n单点登录的好处显而易见：用户能够集中管理其身份。也可通过 MFA 加强安全性。
\n\n\n另见：
\n
https://www.cloudflare.com/zh-cn/learning/access-management/what-is-sso/
SAML (Security Assertion Markup Language) 基于 XML/HTTP/SOAP （现 SAML2.0），主要用于浏览器 SSO。
\n工作原理
\nsequenceDiagram\n participant ServiceProvider\n participant UserAgent\n participant IdentityProvider\n\n UserAgent->>ServiceProvider: Request target resource\n ServiceProvider-->>UserAgent: (Discover the IdP)\n ServiceProvider->>UserAgent: Redirect to SSO Service\n UserAgent->>IdentityProvider: Request SSO Service\n IdentityProvider-->>UserAgent: (Identify the user)\n IdentityProvider->>UserAgent: Respond with XHTML form\n UserAgent->>ServiceProvider: Request Assertion Consumer Service\n ServiceProvider->>UserAgent: Redirect to target resource\n UserAgent->>ServiceProvider: Request target resource\n ServiceProvider->>UserAgent: Respond with requested resource\n\n\n另见：\nhttps://www.sheshbabu.com/posts/visual-explanation-of-saml-authentication/
\n
https://www.cloudflare.com/zh-cn/learning/access-management/what-is-saml/
https://www.microsoft.com/zh-cn/security/business/security-101/what-is-security-assertion-markup-language-saml
https://ssoready.com/docs/saml/saml-technical-primer
OAuth (Open Auth) 主要用于授权第三方应用程序（通过令牌，代表用户来）访问用户的资源。
因此 OAuth 相比于 SAML，就会区分 Client（第三方应用程序） 和 ResourceOwner（拥有资源的人，即用户）。
sequenceDiagram\n participant Client\n participant ResourceOwner\n participant AuthorizationServer\n participant ResourceServer\n\n Client->>ResourceOwner: Authorization Request\n ResourceOwner-->>Client: Authorization Grant\n Client->>AuthorizationServer: Authorization Grant\n AuthorizationServer-->>Client: Access Token\n Client->>ResourceServer: Access Token\n ResourceServer-->>Client: Protected Resource\n\n\n另见：
\n
https://www.cloudflare-cn.com/learning/access-management/what-is-oauth/
https://www.microsoft.com/zh-cn/security/business/security-101/what-is-oauth
OpenID 是一种分布式的身份验证协议，它允许用户使用一个唯一的标识符（通常是一个URL）在不同的网站上登录，而无需在每个网站上重新注册。
OpenID 的核心在于提供一个可信赖的第三方身份验证服务（IdP），用户可以在这个服务上验证自己的身份，然后将这个验证结果带到其他网站上使用。
OpenID Connect（OIDC）是建立在OAuth 2.0 授权框架之上的一个身份认证层。它利用 OAuth 2.0 的授权机制，为客户端提供了一种更简单、更安全的方法（REST/JSON 消息流）来验证用户身份。OIDC 通过在 OAuth 2.0 的基础上增加了一个 ID Token，来明确表示用户的身份信息。
\nsequenceDiagram\n participant User as 用户\n participant SP as 服务提供商 (SP)\n participant IdP as 身份提供商 (IdP)\n\n User ->> SP: 访问资源\n SP ->> User: 重定向到IdP进行身份验证\n User ->> IdP: 提交认证信息\n IdP ->> User: 返回SAML断言\n User ->> SP: 使用SAML断言访问资源\n SP ->> User: 提供访问权限\nsequenceDiagram\n participant User as 用户\n participant Client as 客户端 (第三方应用)\n participant AuthServer as 授权服务器\n participant ResourceServer as 资源服务器\n\n User ->> Client: 请求访问资源\n Client ->> AuthServer: 重定向用户进行授权 (授权请求)\n AuthServer ->> User: 询问用户授权同意\n User ->> AuthServer: 同意授权\n AuthServer ->> Client: 返回授权码\n Client ->> AuthServer: 用授权码换取访问令牌\n AuthServer ->> Client: 返回访问令牌\n Client ->> ResourceServer: 使用访问令牌请求资源\n ResourceServer ->> Client: 返回资源\nsequenceDiagram\n participant User as 用户\n participant Client as 客户端 (第三方应用)\n participant OIDCServer as OIDC 服务器\n participant ResourceServer as 资源服务器\n\n User ->> Client: 请求访问资源\n Client ->> OIDCServer: 重定向用户进行身份验证 (授权请求)\n OIDCServer ->> User: 询问用户同意\n User ->> OIDCServer: 同意并提交身份验证信息\n OIDCServer ->> Client: 返回授权码和ID Token\n Client ->> OIDCServer: 用授权码换取访问令牌\n OIDCServer ->> Client: 返回访问令牌\n Client ->> ResourceServer: 使用访问令牌请求资源\n ResourceServer ->> Client: 返回资源\n从 HTML 开始
\n<table>\n <!-- caption 元素用于总结表格的内容，若存在则必须为表格的第一个元素 -->\n <caption>\n Annual surface temperature change in 2022\n </caption>\n <!-- thread 和 tbody 分别包含表格的头部和主体行 -->\n <!-- tr 形成行，其中包含 th（头部）和 td（主体）单元格 -->\n <thead>\n <tr>\n <th scope="column">Country</th>\n <th scope="column">Mean temperature change (°C)</th>\n </tr>\n </thead>\n <!-- 对于 th，可以存在可选的 scope 属性，值为 row 或 column，以推断标题所属的轴 -->\n <tbody>\n <tr>\n <th scope="row">United Kingdom</th>\n <td>1.912</td>\n </tr>\n <tr>\n <th scope="row">Afghanistan</th>\n <td>2.154</td>\n </tr>\n <tr>\n <th scope="row">Australia</th>\n <td>0.681</td>\n </tr>\n <tr>\n <th scope="row">Kenya</th>\n <td>1.162</td>\n </tr>\n <tr>\n <th scope="row">Honduras</th>\n <td>0.945</td>\n </tr>\n <tr>\n <th scope="row">Canada</th>\n <td>1.284</td>\n </tr>\n </tbody>\n <tfoot>\n <tr>\n <th scope="row">Global average</th>\n <td>1.4</td>\n </tr>\n </tfoot>\n</table>\n不要忘记浏览器默认样式如下
\ntable {\n display: table;\n border-collapse: separate;\n box-sizing: border-box;\n text-indent: initial;\n unicode-bidi: isolate;\n border-spacing: 2px;\n border-color: gray;\n}\n\ncaption {\n display: table-caption;\n text-align: -webkit-center;\n unicode-bidi: isolate;\n}\n\nthead {\n display: table-header-group;\n vertical-align: middle;\n unicode-bidi: isolate;\n border-color: inherit;\n}\n\ntbody {\n display: table-row-group;\n vertical-align: middle;\n unicode-bidi: isolate;\n border-color: inherit;\n}\n\ntfoot {\n display: table-footer-group;\n vertical-align: middle;\n unicode-bidi: isolate;\n border-color: inherit;\n}\n\ntr {\n display: table-row;\n vertical-align: inherit;\n unicode-bidi: isolate;\n border-color: inherit;\n}\n\nth {\n display: table-cell;\n vertical-align: inherit;\n font-weight: bold;\n text-align: -internal-center;\n unicode-bidi: isolate;\n}\n\ntd {\n display: table-cell;\n vertical-align: inherit;\n unicode-bidi: isolate;\n}\n\n\nFYI
\n
把 table 的 display 设置为 grid，就因为能让样式更容易？
这会破坏浏览器免费提供的内置辅助功能，使得通过辅助技术访问的用户难以访问表格。
现在加入基本的样式（不要忘记浏览器的默认 CSS）
\nbody {\n font-family: "Open Sans", sans-serif;\n line-height: 1.5;\n}\n\ntable {\n text-align: left;\n border-collapse: collapse;\n}\n\nth,\ntd {\n border: 1px solid;\n}\n加入装饰性的样式
\n/* Text alignment */\nth,\ncaption {\n text-align: start;\n}\n\nthead th:not(:first-child),\ntd {\n text-align: end;\n}\n\n/* Headers and footers */\nthead {\n border-block-end: 2px solid;\n background: whitesmoke;\n}\n\ntfoot {\n border-block: 2px solid;\n background: whitesmoke;\n}\n\nth,\ntd {\n border: 1px solid lightgrey;\n padding: 0.25rem 0.75rem;\n}\n\n/* Colouring rows and columns */\ntable {\n --color: #d0d0f5;\n}\n\nthead,\ntfoot {\n background: var(--color);\n}\n\ntbody tr:nth-child(even) {\n background: color-mix(in srgb, var(--color), transparent 60%);\n}\n对于一个过宽的表格，其在水平方向可能超出视口。让用户移动整个视口往往不够好，解决办法也很简单：
通过一个 <div class="wrapper"> <table/> </div> wrapper 元素包裹表格，并设置 wrapper 元素的 overflow 即可。
固定第一列
\n\n\n表格的 table-layout 默认是 auto，浏览器会自动为我们调整每个列的宽度（CSS Tricks）
\n\n\n改编自：
Styling Tables the Modern CSS Way
引用：
Pure CSS scrolling shadows with background-attachment: local
Fixed Table Headers
JavaScript 的世界已存在迭代协议（ES2015: Symbol.iterator），内置对象的 Symbol.iterator 直接继承 %IteratorPrototype%，但该对象没有直接暴露为全局对象。
Iterator Helpers 提案（stage3，截止目前 Chrome112 已实现）将该对象暴露为 Iterator 全局对象，并在该对象的原型上提供一系列辅助函数。
\n因为 Iterator 类的原型提供 [Symbol.iterator]() 方法（即 Iterator 实例就是可迭代对象），通过继承 Iterator（并覆写其上的一些方法），就能方便地实现可迭代对象。
以一些内置迭代器为例，它们往往继承 Iterator 并覆写 next() 和 Symbol.toStringTag。
// 示例\nclass RangeIterator extends Iterator {\n private current: number;\n constructor(\n private start: number,\n private end: number,\n ) {\n super();\n this.current = start;\n }\n\n next() {\n if (this.current < this.end) {\n const value = this.current;\n this.current++;\n return { value, done: false };\n } else {\n return { done: true };\n }\n }\n}\n\nfor (const number of new RangeIterator(1, 5)) {\n console.log(number); // => 1 2 3 4\n}\n迭代器辅助方法类似于数组方法，但提供了一个很好的、也是标准库中曾缺失的惰性执行能力。
迭代器本身又是与流等其它 Web API 相关的，因此现在可以在不引入第三方库的情况下更容易实现流式/响应式编程。(个人认为引入 RxJS 这种库在各种方面都开销大)
我们知道，规范中已有 %AsyncIteratorPrototype%，但是不存在全局对象 AsyncIterator 被暴露，目前也没有提案给该原型上提供辅助函数。
这也很容易理解，因为迭代器迭代本来就是惰性的，因此无需区分同步和异步。
\n\n\n","tags":["js"]},{"id":"musttail-efficient-interpreters","url":"https://yieldray.fun/posts/musttail-efficient-interpreters","title":"Parsing Protobuf at 2+GB/s: How I Learned To Love Tail Calls in C\n","date_published":"2024-08-31T15:21:15.000Z","date_modified":"2024-08-31T15:21:15.000Z","content_text":"update 2024/9/11
\n
TypeScript 5.6 已为迭代器辅助方法提供类型，包括内置迭代器子类。
\n\n翻译自：https://blog.reverberate.org/2021/04/21/musttail-efficient-interpreters.html
\n
musttail 优化解释器循环一个令人兴奋的新特性刚刚合并到 Clang 编译器的主分支。使用 [[clang::musttail]] 或 __attribute__((musttail)) 语句属性，现在可以在 C、C++ 和 Objective-C 中获得保证的尾调用。
虽然尾调用通常与函数式编程风格相关联，但我对它们的兴趣纯粹出于性能原因。事实证明，在某些情况下，我们可以使用尾调用从编译器中获得比其他方法更好的代码 - 至少在当前的编译器技术下 - 并且无需降级到汇编语言。
\n将这种技术应用于 protobuf 解析已经产生了惊人的结果：我们已经成功地展示了超过 2GB/s 的 protobuf 解析速度，是之前最先进技术的两倍多。有多种技术促成了这种加速，因此“尾调用 == 2 倍加速”是一个错误的结论。但尾调用是使这种加速成为可能的关键部分。
\n在这篇博文中，我将描述为什么尾调用是一种如此强大的技术，我们是如何将其应用于 protobuf 解析的，以及这种技术如何推广到解释器。我认为，所有用 C 语言编写的主要语言解释器（Python、Ruby、PHP、Lua 等）都可以通过采用这种技术来获得显著的性能提升。主要缺点是可移植性：目前 musttail 是一个非标准的编译器扩展，虽然我希望它能流行起来，但要过一段时间才能广泛传播到足以让你系统的 C 编译器支持它。也就是说，在构建时，如果检测到 musttail 不可用，可以牺牲一些效率来换取可移植性。
尾调用是任何位于函数尾部的调用，即在函数返回之前要执行的最后一个动作。当进行 尾调用优化 时，编译器为尾调用发出一个 jmp 指令，而非 call 指令。这跳过了通常允许被调用者 g() 返回到调用者 f() 的 bookkeeping 操作，例如创建新的堆栈帧或压入返回地址。相反，f() 直接跳转到 g()，就好像它是同一个函数的一部分一样，而 g() 直接返回到调用 f() 的任何函数。这种优化是安全的，因为一旦尾调用开始，f() 的堆栈帧就不再需要了，因为它不再可能访问 f() 的任何局部变量。
虽然这看起来像是一个普通的优化，但它具有两个非常重要的特性，为我们能够编写的算法类型打开了新的可能性。首先，它将连续进行 n 次尾调用时的堆栈内存从 O(n) 降低到 O(1)，这很重要，因为堆栈内存是有限的，而且堆栈溢出会导致程序崩溃。这意味着某些算法实际上只有在执行了这种优化后才安全写入。其次，jmp 消除了 call 的性能开销，使得函数调用与任何其它分支一样高效。这两个特性使我们能够使用尾调用作为正常迭代控制结构（如 for 或 while）的有效替代方案。
这绝不是一个新想法，实际上它至少可以追溯到 1977 年，当时 Guy Steele 发表了一篇完整的论文，论证了过程调用比 GOTO 具有更简洁的设计，而尾调用优化可以使它们一样快。这是 “Lambda Papers” 之一，这些论文是在 1975 年到 1980 年间撰写的，期间发展了许多 Lisp 和 Scheme 的基础思想。
尾调用优化甚至对 Clang 来说也不是什么新鲜事：像 GCC 和许多其它编译器一样，Clang 已经能够优化尾调用。实际上，我们第一个示例中的 musttail 属性根本没有改变编译器的输出：Clang 已经可以在 -O2 下优化尾调用。
新的是 保证性。虽然编译器通常能够成功地优化尾调用，但这只是尽力而为，而不是可以依赖的东西。特别是，这种优化很可能不会在非优化构建中发生：
\n\n\n此处，尾调用被编译成真正的 call，所以我们又回到了 O(n) 堆栈空间。这就是我们需要 musttail 的原因：除非我们能从编译器那里得到保证，确保我们的尾调用将在所有构建模式下 始终 被优化，否则使用尾调用进行迭代的算法是不安全的。如果代码只有在启用优化时才能正常工作，那将是一个非常严重的限制。
编译器是令人难以置信的技术，但它们并不完美。LuaJIT 的作者 Mike Pall 决定用汇编语言而不是 C 语言编写 LuaJIT 2.x 的解释器，他将此决定视为解释 为什么 LuaJIT 的解释器如此快 的主要因素。他后来详细介绍了 为什么 C 编译器难以处理解释器主循环。他最核心的两点是：
\n这些观察结果与我们在优化 protobuf 解析时的经验非常吻合。好消息是尾调用可以帮助解决这两个问题。
\n将解释器循环与 protobuf 解析器进行比较可能看起来很奇怪，但 protobuf 的线格式的性质使它们比你想象的更相似。protobuf 的线格式是一系列标签/值对，其中标签包含字段编号和线类型。这个标签类似于解释器的操作码：它告诉我们需要执行什么操作来解析该字段的数据。与解释器操作码一样，protobuf 字段编号可以以任何顺序出现，因此我们必须准备好随时调度到代码的任何部分。
\n编写这种解析器的自然方法是让一个 while 循环围绕一个 switch 语句，实际上，这基本上是 protobuf 解析的最新技术，从 protobuf 存在的那一刻起就是如此。例如，以下是一些来自 protobuf 当前 C++ 版本的解析代码。如果我们以图形方式表示控制流，我们会得到类似于以下内容：
![\"\"](\"https://s2.loli.net/2024/08/31/TaEyUWIC14Vz8Lc.png\")
但这是不完整的，因为几乎在每个阶段都可能出现问题。线类型可能错误，或者我们可能看到一些损坏的数据，或者我们可能只是碰巧到达了当前缓冲区的末尾。所以完整的控制流图看起来更像这样。
\n![\"\"](\"https://s2.loli.net/2024/08/31/a6RCkDr3VbePpLK.png\")
我们希望尽可能地停留在快速路径（蓝色）上，但当我们遇到一个困难的情况时，我们必须执行一些回退代码来处理它。这些回退路径通常比快速路径更大、更复杂，涉及更多数据，并且通常甚至进行对其他函数的越界调用来处理更复杂的情况。
\n理论上，这种控制流图与配置文件相结合，应该能为编译器提供生成最优代码所需的所有信息。在实践中，当一个函数如此庞大且相互关联时，我们经常发现自己与编译器作斗争。在我们需要它将重要变量保存在寄存器中时，它却溢出了那个变量。它提升了我们想缩放到回退函数调用的堆栈帧操作。它合并了我们希望为了分支预测原因而保持分离的相同代码路径。这种体验最终可能会让人感觉像戴着手套弹钢琴一样。
\n上面的分析主要只是对 Mike 关于 解释器主循环的观察 的复述。但是，我们并没有像 Mike 使用 LuaJIT 2.x 那样降低到汇编语言，而是发现面向尾调用的设计可以为我们提供从 C 语言获得几乎最佳代码所需的控制。我和我的同事 Gerben Stavenga 一起研究了这个问题，他提出了大部分的设计。我们的方法类似于 wasm3 WebAssembly 解释器 的设计，该解释器将这种模式描述为一个 “元机器”。
\n我们 2+GB/s protobuf 解析器的代码提交给了 upb，这是一个用 C 语言编写的 小型 protobuf 库，在 pull/310 中提交。虽然它完全可以工作，并且通过了所有 protobuf 兼容性测试，但它还没有在任何地方推出，并且该设计也没有在 protobuf 的 C++ 版本中实现。但现在 musttail 在 Clang 中可用（并且 upb 已更新为使用它），完全生产化快速解析器的最大障碍之一已经消除。
我们的设计不再使用单个大型解析函数，而是为每个操作提供一个自己的小型函数。每个函数都尾调用下一个操作序列。例如，以下是一个用于解析单个定长字段的函数。（这段代码是从 upb 中的实际代码简化而来的；有很多设计细节我在这篇文章中没有提到，但希望在未来的文章中涵盖）。
\n#include <stdint.h>\n#include <stddef.h>\n#include <string.h>\n\ntypedef void *upb_msg;\nstruct upb_decstate;\ntypedef struct upb_decstate upb_decstate;\n\n// 传递给每个解析函数的标准参数集。\n// 由于 x86-64 的调用约定，这些参数将通过寄存器传递。\n#define UPB_PARSE_PARAMS \\\n upb_decstate *d, const char *ptr, upb_msg *msg, intptr_t table, \\\n uint64_t hasbits, uint64_t data\n#define UPB_PARSE_ARGS d, ptr, msg, table, hasbits, data\n\n#define UNLIKELY(x) __builtin_expect(x, 0)\n#define MUSTTAIL __attribute__((musttail))\n\nconst char *fallback(UPB_PARSE_PARAMS);\nconst char *dispatch(UPB_PARSE_PARAMS);\n\n// 解析使用 1 字节标签（字段 1-15）的 4 字节定长字段的代码\nconst char *upb_pf32_1bt(UPB_PARSE_PARAMS) {\n // 解码“data”，其中包含关于该字段的信息\n uint8_t hasbit_index = data >> 24;\n size_t ofs = data >> 48;\n\n if (UNLIKELY(data & 0xff)) {\n // 线类型不匹配（dispatch 函数将预期的线类型与实际的线类型进行异或运算，因此 data & 0xff == 0 表示匹配）\n MUSTTAIL return fallback(UPB_PARSE_ARGS);\n }\n\n ptr += 1; // 跳过标签\n\n // 将数据存储到消息中\n hasbits |= 1ull << hasbit_index;\n memcpy((char*)msg + ofs, ptr, 4);\n\n ptr += 4; // 跳过数据\n\n // 调用 dispatch 函数，该函数将读取下一个标签，并分支到正确的字段解析函数。\n MUSTTAIL return dispatch(UPB_PARSE_ARGS);\n}\n对于这样一个小型而简单的函数，Clang 为我们提供了几乎无法超越的代码。
\nupb_pf32_1bt: # @upb_pf32_1bt\n mov rax, r9\n shr rax, 24\n bts r8, rax\n test r9b, r9b\n jne .LBB0_1\n mov r10, r9\n shr r10, 48\n mov eax, dword ptr [rsi + 1]\n mov dword ptr [rdx + r10], eax\n add rsi, 5\n jmp dispatch # TAILCALL\n.LBB0_1:\n jmp fallback # TAILCALL\n请注意，没有序言或尾声指令，没有寄存器溢出，实际上根本没有使用堆栈。唯一的出口是来自两个尾调用的 jmp，但不需要任何代码来转发参数，因为参数已经位于正确的寄存器中。我们几乎唯一希望的改进是获得尾调用的条件跳转，jne fallback，而不是 jne 后面跟着 jmp。
\n\n译注：
\n
序言（prologue）指令位于函数体的开头，用于保存上下文并创建栈帧，例如：\npush ebp ; 保存调用者的栈帧指针\nmov ebp, esp ; 将当前栈指针设置为新的栈帧指针\nsub esp, N ; 为局部变量保留N字节的栈空间\npush ebx ; 保存需要使用的寄存器（比如ebx）\npush esi\npush edi\n尾声（epilogue）指令位于函数体的末尾，用于清理和恢复在 prologue 中保存的状态，例如：
\n\npop edi ; 恢复寄存器\npop esi\npop ebx\nmov esp, ebp ; 恢复栈指针\npop ebp ; 恢复栈帧指针\nret ; 返回调用点\n另见：X86调用约定
\n
如果你查看这段代码的汇编指令，而没有符号信息，你将没有理由知道这是一个完整的函数。它也可能是来自更大函数的基本块。而这本质上正是我们正在做的事情。我们正在将一个在概念上是一个大型复杂函数的解释器循环分解成块，并通过尾调用将控制流从一个块转移到另一个块。我们在每个块边界（至少对于六个寄存器）都完全控制寄存器分配，并且通过对每个函数使用相同的一组参数，我们消除了在一次调用到下一次调用之间来回移动任何值的必要性。只要函数足够简单，不会溢出这六个寄存器，我们就实现了将最重要的状态始终保存在所有快速路径中的寄存器中的目标。
\n我们可以独立地优化每个指令序列，而且至关重要的是，编译器也会将每个序列视为独立的，因为它们位于不同的函数中（如果需要，我们可以使用 noinline 阻止内联）。这解决了我们之前描述的问题，即回退路径中的代码会降低快速路径的代码质量。如果我们将慢速路径放在与快速路径完全不同的函数中，我们可以保证快速路径不会受到影响。我们上面看到的漂亮的汇编序列实际上是冻结的，不受我们在解析器其他部分所做的任何更改的影响。
如果我们将这种模式应用于 Mike 来自 LuaJIT 的示例，我们或多或少可以 用只有轻微代码质量缺陷的手写汇编指令来匹配他的代码：
\n#define PARAMS unsigned RA, void *table, unsigned inst, \\\n int *op_p, double *consts, double *regs\n#define ARGS RA, table, inst, op_p, consts, regs\ntypedef void (*op_func)(PARAMS);\nvoid fallback(PARAMS);\n\n#define UNLIKELY(x) __builtin_expect(x, 0)\n#define MUSTTAIL __attribute__((musttail))\n\nvoid ADDVN(PARAMS) {\n op_func *op_table = table;\n unsigned RC = inst & 0xff;\n unsigned RB = (inst >> 8) & 0xff;\n unsigned type;\n memcpy(&type, (char*)®s[RB] + 4, 4);\n if (UNLIKELY(type > -13)) {\n return fallback(ARGS);\n }\n regs[RA] += consts[RC];\n inst = *op_p++;\n unsigned op = inst & 0xff;\n RA = (inst >> 8) & 0xff;\n inst >>= 16;\n MUSTTAIL return op_table[op](ARGS);\n}\n生成的汇编指令是：
\nADDVN: # @ADDVN\n movzx eax, dh\n cmp dword ptr [r9 + 8*rax + 4], -12\n jae .LBB0_1\n movzx eax, dl\n movsd xmm0, qword ptr [r8 + 8*rax] # xmm0 = mem[0],zero\n mov eax, edi\n addsd xmm0, qword ptr [r9 + 8*rax]\n movsd qword ptr [r9 + 8*rax], xmm0\n mov edx, dword ptr [rcx]\n add rcx, 4\n movzx eax, dl\n movzx edi, dh\n shr edx, 16\n mov rax, qword ptr [rsi + 8*rax]\n jmp rax # TAILCALL\n.LBB0_1:\n jmp fallback\n我在这里看到的唯一改进机会，除了前面提到的 jne fallback 问题之外，是编译器出于某种原因不想生成 jmp qword ptr [rsi + 8*rax]。相反，它更喜欢加载到 rax 中，然后跟随 jmp rax。这些是轻微的代码生成问题，希望可以在 Clang 中通过并不太大的工作量来解决。
这种方法最大的问题之一是，如果存在任何非尾调用，这些漂亮的汇编序列就会被灾难性地悲观化。任何非尾调用都会导致创建堆栈帧，并且大量数据会溢出到堆栈中。
\n#define PARAMS unsigned RA, void *table, unsigned inst, \\\n int *op_p, double *consts, double *regs\n#define ARGS RA, table, inst, op_p, consts, regs\ntypedef void (*op_func)(PARAMS);\nvoid fallback(PARAMS);\n\n#define UNLIKELY(x) __builtin_expect(x, 0)\n#define MUSTTAIL __attribute__((musttail))\n\nvoid ADDVN(PARAMS) {\n op_func *op_table = table;\n unsigned RC = inst & 0xff;\n unsigned RB = (inst >> 8) & 0xff;\n unsigned type;\n memcpy(&type, (char*)®s[RB] + 4, 4);\n if (UNLIKELY(type > -13)) {\n // 当我们省略 "return" 时，事情会变得非常糟糕。\n fallback(ARGS);\n }\n regs[RA] += consts[RC];\n inst = *op_p++;\n unsigned op = inst & 0xff;\n RA = (inst >> 8) & 0xff;\n inst >>= 16;\n MUSTTAIL return op_table[op](ARGS);\n}\n这导致了非常不幸的结果：
\nADDVN: # @ADDVN\n push rbp\n push r15\n push r14\n push r13\n push r12\n push rbx\n push rax\n mov r15, r9\n mov r14, r8\n mov rbx, rcx\n mov r12, rsi\n mov ebp, edi\n movzx eax, dh\n cmp dword ptr [r9 + 8*rax + 4], -12\n jae .LBB0_1\n.LBB0_2:\n movzx eax, dl\n movsd xmm0, qword ptr [r14 + 8*rax] # xmm0 = mem[0],zero\n mov eax, ebp\n addsd xmm0, qword ptr [r15 + 8*rax]\n movsd qword ptr [r15 + 8*rax], xmm0\n mov edx, dword ptr [rbx]\n add rbx, 4\n movzx eax, dl\n movzx edi, dh\n shr edx, 16\n mov rax, qword ptr [r12 + 8*rax]\n mov rsi, r12\n mov rcx, rbx\n mov r8, r14\n mov r9, r15\n add rsp, 8\n pop rbx\n pop r12\n pop r13\n pop r14\n pop r15\n pop rbp\n jmp rax # TAILCALL\n.LBB0_1:\n mov edi, ebp\n mov rsi, r12\n mov r13d, edx\n mov rcx, rbx\n mov r8, r14\n mov r9, r15\n call fallback\n mov edx, r13d\n jmp .LBB0_2\n为了避免这种情况，我们尝试遵循一个规则，即只通过内联或尾调用来调用其他函数。如果一个操作有多个点可能发生不寻常的情况，而这些情况不是错误，这可能会变得很烦人。例如，当我们解析 protobuf 时，快速而常见的情况是 varint 只有一个字节长，但更长的 varint 不是错误。如果回退代码太复杂，那么在内联中处理不寻常的情况可能会影响快速路径的质量。但尾调用到回退函数没有简单的方法在处理完不寻常情况后恢复操作，因此回退函数必须能够向前推进并完成操作。这会导致代码重复和复杂性。
\n理想情况下，这个问题可以通过在回退函数中添加 __attribute__((preserve_most))，然后正常调用它们，而不进行尾调用来解决。preserve_most 属性使被调用者负责几乎所有寄存器的保存，这将寄存器溢出的成本转移到我们想要的回退函数中。我们对此属性进行了一些实验，但遇到了一些神秘的问题，我们无法弄清楚是什么原因造成的。这可能是我们的错误；重新审视这一点是未来的工作。[更新：2023-03-14: 事实上，这是一个 Clang 中的 bug，两个月前已修复]
另一个主要限制是 musttail 不可移植。我非常希望这个属性能流行起来，传播到 GCC、Visual C++ 和其他流行的编译器，甚至有一天能被标准化。但那一天还很遥远，那么在此期间该怎么办？
当 musttail 不可用时，我们需要为每个概念上的循环迭代执行至少一个真正的 return，而不进行尾调用。我们还没有在 upb 中实现这个回退，但我预计它将涉及一个宏，该宏根据 musttail 的可用性，要么尾调用到 dispatch，要么只是返回。
\n\n翻译自：https://build-your-own.org/blog/20240813_css_vertical_center/
\n
align-content 在 2024 年的默认布局中起作用，允许使用一个 CSS 属性进行垂直居中。
<div style="align-content: center; height: 100px;">\n <code>align-content</code> just works!\n</div>\nalign-content 就是这么好用！
自何时起支持: Chrome: 123 |
Firefox: 125 |
Safari: 17.4
CSS 对齐的现状是 flexbox 或 grid，因为 align-content 在默认布局（流）中不起作用。在 2024 年，浏览器已经实现了 流布局 的 align-content。这有一些优势：
<!-- Works -->\n<div style="display: grid; align-content: center;">\n Content.\n</div>\n<!-- FAIL! -->\n<div style="display: grid; align-content: center;">\n Content with *multiple* nodes.\n</div>\n<!-- Works with the content wrapper -->\n<div style="display: grid; align-content: center;">\n <div> <!-- The extra wrapper -->\n Content with *multiple* nodes.\n </div>\n</div>\n<!-- Works without the content wrapper -->\n<div style="align-content: center;">\n Content with *multiple* nodes.\n</div>\n令人惊叹的是，CSS 经过几十年的发展，终于拥有了一个单个属性来控制垂直对齐！
\n浏览器很有趣，像对齐这样的基本需求长期以来都没有简单的答案。以下是在 LibreOffice 中如何居中内容：
\n![\"LibreOffice](\"https://s2.loli.net/2024/08/24/xvCuYR9fcz5ae8J.png\")
以下是在浏览器中如何进行垂直居中（水平居中是另一个主题）：
\n心智：⭐️⭐️⭐️☆☆
\n有四种主要布局：流（默认）、表格、flexbox、grid。如何对齐内容取决于容器的布局。flexbox 和 grid 是比较晚才添加的，因此表格是第一个方法。
\n<div style="display: table;">\n <div style="display: table-cell; vertical-align: middle;">\n Content.\n </div>\n</div>\n表格可以完全通过 CSS 创建，但很可惜需要这样的间接的方式。
\n心智：☆☆☆☆☆
\n我很不理解。人们总是不断发明更多间接的方法。
\n<div style="position: relative;">\n <div style="position: absolute; top: 50%; transform: translateY(-50%);">\n Content.\n </div>\n</div>\n此方法使用绝对定位来绕过布局，因为流布局对我们没有帮助：
\nposition: relative 标记参考容器。position: absolute; top: 50% 将内容的边缘放置在中心。transform: translateY(-50%) 将内容中心偏移到边缘。心智：☆☆☆☆☆
\n虽然流布局对内容对齐没有帮助，但它允许在一行内进行垂直对齐。那么为什么不将一行设置得与容器一样高呢？
\n<div class="container">\n ::before\n <div class="content">Content.</div>\n</div>\n.container::before {\n content: '';\n height: 100%;\n display: inline-block;\n vertical-align: middle;\n}\n.content {\n display: inline-block;\n vertical-align: middle;\n}\n这种方法有一些缺陷：除了牺牲一个伪元素之外，开头还有一个零宽度“撑杆”字符，可能会搞砸一些东西。
\n心智：⭐️⭐️⭐️☆☆
\nflexbox 在 Web 兴起后 20 年才广泛可用。它有两种模式：单行和多行。在单行模式（默认）下，一行会填满垂直空间，并且 align-items 会对齐行中的内容。
<div style="display: flex; align-items: center;">\n <div>Content.</div>\n</div>\n或者，将一行设置为列状，并使用 justify-content 对齐 items。
<div style="display: flex; flex-flow: column; justify-content: center;">\n <div>Content.</div>\n</div>\n心智：⭐️⭐️⭐️☆☆
\n在多行 flexbox 中，一行不再填满垂直空间，因此一行（只有一项）可以使用 align-content 对齐。
<div style="display: flex; flex-flow: row wrap; align-content: center;">\n <div>Content.</div>\n</div>\n心智：⭐️⭐️⭐️⭐️☆
\n网格出现得更晚。对齐变得更简单。
\n<div style="display: grid; align-content: center;">\n <div>Content.</div>\n</div>\n心智：⭐️⭐️⭐️⭐️☆
\n请注意与上一个方法的细微差别：
\nalign-content 将单元格居中到容器。align-items 将内容居中到单元格，而单元格会拉伸以适应容器。<div style="display: grid; align-items: center;">\n <div>Content.</div>\n</div>\n似乎有许多方法可以做同一件事。
\n心智：⭐️⭐️⭐️☆☆
\n在流布局中，margin: auto 可以水平居中，但不能垂直居中。flexbox 和 grid 没有这种缺陷。
<div style="display: grid;">\n <div style="margin-block: auto;">\n Content.\n </div>\n</div>\n尽管如此，边距也被设计用于控制对齐，这一点让我感到困惑。
\n心智：⭐️⭐️⭐️⭐️⭐️
\n为什么浏览器一开始没有添加这个功能？
\n<div style="align-content: center;">\n <code>align-content</code> just works!\n</div>\n表格单元格（方法 1），就像这种方法一样，也不需要内容包装器（尽管它需要表格包装器）。我们又回到了起点！
\n所有垂直居中方法都可以在这个Codepen 中找到。
\n是否有一个单个属性用于水平对齐？align-content 的对应项是什么？让我们看看各种对齐属性：
| \n | flow | \nflexbox | \ngrid | \n
|---|---|---|---|
align-content | \nblock axis | \ncross axis (line) | \nblock axis (grid) | \n
justify-content | \nno effect | \nmain axis | \ninline axis (grid) | \n
align-items | \nno effect | \ncross axis (item) | \nblock axis (cell) | \n
justify-items | \nno effect | \nno effect | \ninline axis (cell) | \n
block 轴 通常是垂直的，而 inline 轴 是水平的。需要这些术语是因为vertical writing-mode 是存在的，因此block 轴和 inline 轴相对于文本方向。这类似于主轴和交叉轴相对于 flexbox items 方向。
从属性名称可以推断出 CSS 的设计方式：
\nalign-* 通常是垂直的，而 justify-* 通常是水平的。*-content 和 *-items 控制不同级别的对象？justify-content 是 align-content 的对应项，在网格布局中很方便，但在流布局中没有效果。place-content 简写 可以同时设置这两个属性。
为什么“Align”和“justify”会在 CSS 中指的是轴？justify-* 是受文本对齐的启发吗？这很混乱，考虑到还有 text-align: justify。
通常情况下，当人们说“Align”时，他们的意思是单个对象的放置，而“justify”是指多个对象的分布。
\n虽然在 CSS 中，justify-* 和 align-* 都类似于文本对齐，因为它们接受诸如 space-between 之类的值；但它们只是表示不同的轴！
如何记忆：文本对齐是水平的，justify-* 也是如此。
在 flexbox 中，“Content”和“items”令人困惑：
\njustify-content 控制 items，而 justify-items 没有效果。结论：“items”用于可以单独对齐的东西。在主轴上，flex items 不能单独对齐，因此它是“Content”。
\n即使忽略历史遗留问题，CSS 对于我们中的大多数人来说仍然过于混乱。它有数百种命名不佳的属性，每个属性都可能以不直观的方式影响结果。
\n这是一个关于软件设计范例的案例研究：
\n早期的万维网只是链接文档。CSS 被用来样式化文档，而不考虑布局。随着时间的推移，CSS 获得了一些随机的布局功能，但没有连贯的愿景。
\n通常情况下，在 CSS 中有很多方法可以做某事，但却没有正确的功能来理智地完成它。这篇整个文章都是关于一个新功能，用于更理智地进行垂直对齐，而水平轴仍然不同。
\n相比之下，LibreOffice 遵循正交、可组合基本元素的范例：
\nhttps://ungoogled-software.github.io/
\nGoogle Chromium 去谷歌服务构建版本
\n\n不过数据默认会在 %USERPROFILE%\\AppData\\Local\\Chromium 目录下写入（只测试过 Windows）
https://www.chromium.org/Home/
\n\n命令行选项可改变数据目录
参见官方博客、文档 和 命令行 flags 列表
Firefox 隐私增强版
\n数据会写入到同目录下的 Profiles 目录
基于 Qt 和 Webkit 的浏览器
\n\n最后 commit 在 2013 年，实际上已经无法使用
\nhttps://help.vivaldi.com/desktop/install-update/standalone-version-of-vivaldi/
\nWindows 安装时可指定独立安装
\nhttps://github.com/brave/brave-browser/releases
\n官网未提供，但 Release 有提供
\nhttps://portableapps.com/apps/internet
https://portapps.io/apps/
微前端是一种前端网页开发模式，允许将单个应用程序构建自不同的独立构建模块。
它类似于微服务架构，但适用于用 JavaScript 编写的客户端单页应用（SPA）。它是针对多个前端应用程序分解和路由的解决方案。
可以想到，一个复杂的单体前端应用（当然，后端应用也是如此），代码上要基于一套代码去支持多个业务，这限制了新业务的技术栈，还会困于已有的技术债。
\n微前端和微服务的软件工程思路大致一致，将应用根据团队或业务模块做拆解（即单体架构→垂直架构），不过前端应用本质上是一个单独的 GUI 应用，技术上实现子应用的独立（解耦）并不容易。
\n此外，对于这样一个复杂的单体前端应用，其背后的后端应用也是数量庞大的微服务集群。微前端可以对应微服务，最终团队实现从UI实现到数据库设计这样端到端的跨职能人员构成。
\nMicro Frontends - extending the microservice idea to frontend development 一文探讨了微前端架构下如何实现不同团队开发的页面模块的组合和交互，并提出了使用 Custom Elements、DOM 事件和 Server Side Includes 等技术方案，以解决页面渲染、数据获取、跨团队通信等技术难题。
\n\n\n抛开前后端如何集成来自于不同开发框架的代码这个问题本身，还有很多其他值得讨论的话题：用来隔离js作用域的机制，避免css样式冲突，按需加载资源，团队之间共用资源的共享，处理获取数据的流程以及因此产生的如何通过更好的加载状态管理来为用户带来更好的体验。
\n
微前端（MFE）可以通过以下方法实现：
\n\n\n\n
注册中心/主应用：整体布局，子应用的注册和加载（生命周期管理）
\n隔离 JavaScript：隔离全局环境/副作用（例如通过 Proxy/new Function），例如劫持 DOM，全局事件，样式，localStorage 等，不妥善处理将导致内存泄露
\n隔离样式：传统 CSS modules，Shadow DOM 引入的 CSS Scoping 等
\n虽然微前端得到了独立部署的好处（例如通过模块联邦，子应用只需将自身打包成模块，无需考虑其它应用），但相比于微服务，微前端所有应用共享一个浏览器页面的资源。虽然某些微前端框架/库为我们做了隔离处理，本质上来说所有应用还是在共享资源。
与微服务不同，我们必须面对这些问题，导致微前端应用不太能像普通单体应用一样自由。
此外，微前端可能没有解决代码膨胀的问题（相比于 MPA），因为应用间仍有可能需要 数据传输 和 依赖共享，而运行在浏览器中的微前端根本就不如微服务一般自由（例如通信和隔离）。
因此，必须权衡其利弊：例如，需要微前端提供的哪些必要能力？使用后收益真的高于多页应用吗？
iframe有利点：
\niframe不利点：
\n\n\niframe 通信方法\n直接调用：
\n\n
\n- window.frames 或 HTMLIFrameElement.contentWindow/contentDocument
\n事件通信：
\n\n
\n- 跨源通信 postMessage 和 Window: message event
\n- 利用 localStorage 或 sessionStorage 对应的 Window: storage event
\n- 创建和触发自定义事件
\n
Shadow DOM 有利点：
\nShadow DOM 不利点：
\n另见：
\nhttps://lianpf.github.io/posts/frontend-develop/microfrontend_framework_compare/
https://github.com/empjs/emp/wiki/%E3%80%8A%E4%BB%80%E4%B9%88%E6%98%AF%E5%BE%AE%E5%89%8D%E7%AB%AF%E3%80%8B
https://www.cnblogs.com/everfind/p/microfrontend.html
\n\n原文：https://sunsetglow.net/posts/frontend-build-systems.html
\n
其它翻译：https://juejin.cn/post/7398480670445895743
开发者编写 JavaScript；浏览器运行 JavaScript。从根本上说，前端开发无需构建步骤。那么，为何在现代前端开发中我们需要构建步骤呢？
\n随着前端代码库的不断扩大，同时开发者的使用体验变得越来越重要，若直接将 JavaScript 源代码发送到客户端会导致两个主要问题：
\n不支持的语言特性： 由于 JavaScript 运行在浏览器中，并且市面上存在各种版本的浏览器，每使用一个新的语言特性都会减少能够执行你的 JavaScript 的客户数量。
此外，像 JSX 这样的语言扩展并不是有效的 JavaScript，在任何浏览器中都无法运行。
性能问题： 浏览器必须单独请求每个 JavaScript 文件。在一个大型代码库中，这可能会导致数千次 HTTP 请求来渲染一个页面。
在过去，在 HTTP/2 出现之前，这也会导致数千次 TLS 握手。
\n\n译注：这里的表述有误。在 HTTP/1.1 中，浏览器可以通过持久连接重用同一个 TCP 连接进行多个请求，但仍然会有一定数量的握手。HTTP/2 进一步优化了这种情况，通过单个连接并行传送多个请求，显著减少了握手的开销。
\n
此外，在所有 JavaScript 都加载完之前，可能需要几次连续的网络往返。例如，如果 index.js 导入 page.js，而 page.js 导入 button.js，那么需要三次连续的网络往返才能完全加载 JavaScript。这被称为瀑布问题。
源文件的体积也可能由于长变量名和空白缩进字符而变得不必要的大，增加了带宽使用和网络加载时间。
\n前端构建系统处理源代码，并生成一个或多个优化后可发送到浏览器的 JavaScript 文件。最终的构建产物通常对人类来说是难以阅读的。
\n前端构建系统通常包括三个步骤：转译（transpilation）、打包（bundling）和压缩（minification）。
\n有些应用程序可能无需所有的三个步骤。例如，较小的代码库可能不需要打包或压缩，而开发服务器可能为了性能而跳过打包和/或压缩。也可以添加一些自定义步骤。
\n\n\n译注：
\n
例如，vite 的开发服务器基于原生 ESM 模块，它通过 esbuild 做依赖预打包以减少浏览器请求数量，并进行 CommonJS 到 ESM 的转换。
webpack 需要自行配置开发模式，若选择 webpack-dev-server，它通过将构建产物置于内存而非硬盘来优化访问速度。
有些工具实现了多个构建步骤。特别是，打包工具通常会实现所有三个步骤，单一的打包工具可能足以构建简单的应用程序。复杂的应用程序可能需要专门的工具来完成每个构建步骤，这些工具提供更强大的功能集。
\n转译通过将使用现代 JavaScript 版本编写的代码转换为较旧的 JavaScript 版本，解决了不支持的语言特性问题。目前，ES6/ES2015 是一个常见的目标。
\n框架和工具也可能引入转译步骤。例如，JSX 语法必须转译成 JavaScript。如果某个库提供了 Babel 插件，这通常意味着它需要一个转译步骤。此外，像 TypeScript、CoffeeScript 和 Elm 这样的语言必须转译成 JavaScript。
\nCommonJS 模块 (CJS) 也必须转译成浏览器兼容的模块系统。在 2018 年浏览器普遍支持 ES6 Modules (ESM) 之后，转译为 ESM 一般是推荐的。由于 ESM 的导入和导出是静态定义的，因此更容易优化和树摇。
\n目前常用的转译器有 Babel、SWC 和 TypeScript 编译器。
\nBabel（2014）是一个标准的转译器：使用 JavaScript 编写的单线程转译器。许多需要转译的框架和库通过 Babel 插件完成转译，这就需要 Babel 成为构建过程中不可或缺的一部分。然而，Babel 难以调试，并且常常令人困惑。
\nSWC（2020）是一个使用 Rust 编写的快速多线程转译器。它声称比 Babel 快 20 倍，因此被较新的框架和构建工具所使用。它支持转译 TypeScript 和 JSX。如果你的应用程序不依赖 Babel，SWC 是一个更好的选择。
\nTypeScript 编译器 (tsc) 也支持转译 TypeScript 和 JSX。它是 TypeScript 的参考实现，也是唯一全功能的 TypeScript 类型检查器。然而，它非常慢。尽管 TypeScript 应用程序必须通过 TypeScript 编译器类型检查，但对于构建步骤，使用替代的转译器会更高效。
\n如果你的代码是纯 JavaScript 且使用 ES6 模块，则可能可以跳过转译步骤。
\n另一种解决不支持语言特性的方法是使用 polyfill。polyfill 在运行时执行，在执行主应用程序逻辑之前实现缺失的语言特性。然而，这增加了运行时开销，而且某些语言特性无法通过 polyfill 实现。参见 core-js。
\n所有打包工具本质上也是转译器，因为它们解析多个 JavaScript 源文件并生成一个新的打包的 JavaScript 文件。在此过程中，它们可以选择在其生成的 JavaScript 文件中使用哪些语言特性。有些打包工具还能够解析 TypeScript 和 JSX 源文件。如果你的应用程序有简单的转译需求，你可能不需要单独的转译器。
\n打包解决了需要许多网络请求和瀑布问题。打包工具将多个 JavaScript 源文件拼接为一个单一的 JavaScript 输出文件，称为 bundle，而不改变应用程序行为。这样，浏览器可以通过一次往返网络请求高效加载 bundle。
\n当前常用的打包工具有 Webpack、Parcel、Rollup、esbuild 和 Turbopack。
\n\n\n\n
Webpack（2014）在 2016 年左右变得非常流行，后来成为标准的打包工具。与当时常用的 Browserify 不同，Webpack 开创了可以在导入时转换源码文件的“loaders”，使得 Webpack 能够协同整个构建流水线。
\nLoaders 允许开发者在 JavaScript 文件中透明地导入静态资源，将所有的源码文件和静态资源组合成一个单一的依赖图。而在使用 Gulp 时，每种类型的静态资源都必须作为一个单独的任务构建。Webpack 还开箱即用的支持代码拆分，简化了其设置和配置。
\nWebpack 速度慢且是单线程的，用 JavaScript 编写。它高度可配置，但许多配置选项可能让人困惑。
\nRollup（2016）利用 ES6 模块的广泛浏览器支持及其优化能力（如树摇），生成的 bundle 比 Webpack 小得多，导致 Webpack 也后来采用了类似的优化。Rollup 是一个单线程的打包工具，用 JavaScript 编写，性能仅略优于 Webpack。
\nParcel（2018）是一个少配置的打包工具，旨在“开箱即用”，为构建过程的所有步骤和开发者工具需求提供合理的默认配置。它是多线程的，比 Webpack 和 Rollup 快得多。Parcel 2 在内部使用 SWC。
\nEsbuild（2020）是一个为并行处理和优化性能而设计的打包工具，用 Go 编写。它的性能比 Webpack、Rollup 和 Parcel 快数倍。Esbuild 实现了一个基本的转译器和一个压缩器，但功能不如其它打包工具，它提供了一个有限的插件 API，不能直接修改 AST。与其使用 esbuild 插件修改源文件，不如在传给 esbuild 之前先对文件进行转换。
\nTurbopack（2022）是一个支持增量重建的快速 Rust 打包工具。该项目由 Vercel 开发，Webpack 的创建者领导。目前处于 Beta 版，可在 Next.js 中可选使用。
\n如果你有非常少的模块或网络延迟非常低（如在 localhost 上），跳过打包步骤是合理的。有些开发服务器也选择不在开发时打包模块。
\n默认情况下，客户端 React 应用程序被转化为一个单一的 bundle 文件。对于具有许多页面和功能的大型应用程序，bundle 文件可能非常大，抵消了打包的原始性能优势。
\n将 bundle 文件划分为几个较小的 bundle 文件，即代码拆分，可以解决这个问题。一种常见的方法是将每个页面拆分为一个单独的 bundle 文件。使用 HTTP/2，可以将共享的依赖项也分离成独立的 bundle 文件，从而避免重复且几乎没有成本。此外，大型模块可以拆分为单独的 bundle 文件并按需懒加载。
\n代码拆分后，每个 bundle 文件的大小大大减少，但会需要额外的网络往返，这可能重新引入瀑布问题。因此代码拆分是一种权衡。
\n被 Next.js 普及的文件系统路由优化了代码拆分的权衡。Next.js 为每个页面创建单独的 bundle 文件，只在 bundle 文件中包含该页面导入的代码。加载一个页面时并行预加载该页面使用的所有 bundle 文件。这优化了 bundle 文件大小，而不会重新引入瀑布问题。文件系统路由通过为每个页面创建一个入口点（pages/**/*.jsx）来实现这一点，而不是传统客户端 React 应用程序的单一入口点（index.jsx）。
一个 bundle 文件由多个模块组成，每个模块包含一个或多个导出项。通常，一个给定的 bundle 文件只会使用其导入模块的一部分导出项。打包工具可以在一个称为树摇的过程中移除其模块中未使用的导出项。这优化了 bundle 文件大小，提高了加载和解析时间。
\n树摇依赖于对源文件的静态分析，因此当静态分析变得更具挑战性时会受到阻碍。两个主要因素影响树摇的效率：
\n模块系统： ES6 模块是静态导出和导入，而 CommonJS 模块是动态导出和导入。因此，打包工具在对 ES6 模块进行树摇时能够更加激进和高效。
\n副作用： package.json 的 sideEffects 属性声明模块在导入时是否有副作用。当存在副作用时，由于静态分析的限制，未使用的模块和导出项可能无法被树摇掉。
静态资源，如 CSS、图片和字体，通常在打包步骤中添加到产物中。它们也可以在压缩步骤中进行文件大小优化。
\n在 Webpack 出现之前，静态资源作为独立的构建任务从源码中单独构建。为了加载静态资源，应用程序必须通过其产物中的最终路径引用它们。因此，常常会根据 URL 约定来仔细组织资源（如 /assets/css/banner.jpg 和 /assets/fonts/Inter.woff2）。
Webpack 的“loaders”允许从 JavaScript 中导入静态资源，将代码和静态资源统一到一个依赖图中。在打包过程中，Webpack 会用其在产物中的最终路径替换静态资源导入。这一特性使静态资源可以与其相关组件一起在源码中组织，并创造了新的静态分析可能性，如检测不存在的资源。
\n需要注意的是，导入静态资源（非 JavaScript 或转译成 JavaScript 的文件）不是 JavaScript 语言的一部分。这需要配置支持该资源类型的打包工具。幸运的是，跟随 Webpack 的打包工具也采用了“loaders”模式，使这一特性普遍化。
\n压缩解决了文件不必要大的问题。压缩工具在不影响文件行为的前提下减小文件大小。对于 JavaScript 代码和 CSS 资源，压缩工具可以缩短变量、消除空白和注释、消除无用代码，并优化语言特性的使用。对于其它静态资源，压缩工具可以进行文件大小优化。压缩工具通常在构建流程结束时对 bundle 文件运行。
\n目前常用的 JavaScript 压缩工具有 Terser、esbuild 和 SWC。
Terser 是 fork 自不维护的 uglify-es ，用 JavaScript 编写，速度比较慢。Esbuild 和 SWC 在前文提到，这两者除了其它功能外，还实现了压缩器，比 Terser 更快。
常用的 CSS 压缩工具有 cssnano、csso 和 Lightning CSS。
Cssnano 和 csso 是用 JavaScript 编写的纯 CSS 压缩工具，速度较慢。Lightning CSS 是用 Rust 编写的，声称比 cssnano 快 100 倍。Lightning CSS 还支持 CSS 转换和打包。
上述基本的前端构建流水线足以创建一个优化的生产构建产物。还有几类工具可以增强基本的构建流水线并改善开发者体验。
\n前端领域以选择“正确”包的挑战而著称。例如，上述五个打包工具中，你该选择哪一个？
\n元框架提供了一套已经选好的包组合，包括构建工具，这些包协同工作以实现特定的应用模式。例如，Next.js 专注于服务器端渲染 (SSR)，Remix 专注于渐进增强。
\n元框架通常提供预配置的构建系统，免去了你需要自己去拼装一个的麻烦。它们的构建系统为生产环境和开发服务器提供配置。
\n与元框架类似，构建工具如 Vite 提供用于生产和开发的预配置构建系统。然而，它们不强制采用特定的应用模式，适用于通用的前端应用程序。
\n构建流水线输出的产物可以说是人类不可读的。这使得发生错误时调试很困难，因为其错误堆栈指向难以理解的代码。
\n源映射解决了这个问题，通过将产物中的代码映射回其源码中的原始位置。浏览器和诊断工具（如 Sentry）使用源映射恢复并显示原始源码。在生产环境中，源映射通常隐藏在浏览器中，仅上传到诊断工具以避免公开源码。
\n构建流水线的每一步都可以生成一个源映射。如果使用多个构建工具来构建流水线，源映射将形成一个链（如 source.js -> transpiler.map -> bundler.map -> minifier.map）。要识别压缩代码对应的源代码，必须遍历源映射链。
然而，大多数工具无法解释源映射链；它们期望每个产物中的文件最多只有一个源映射。必须将源映射链展平成一个单一的源映射。预配置的构建系统会解决这个问题（参见 Vite 的 combineSourcemaps 函数）。
\n开发服务器通常提供热重载功能，当源代码改变时自动重建一个新的 bundle 文件并重新加载浏览器。尽管比手动重建和重载要好许多，但它仍然有些慢，并且重新加载时所有客户端状态都会丢失。
\n热模块替换（Hot Module Replacement，HMR）改进了热重载（Hot Reload），通过在运行中的应用程序中就地替换更改的 bundle 文件。这样保留了未改变模块的客户端状态，并减少了代码变更和应用程序更新之间的延迟时间。
\n然而，每次代码更改都会触发所有导入它的 bundle 文件的重建。这在 bundle 文件大小上具有线性时间复杂度。因此，在大型应用程序中，热模块替换可能因为重建成本的增长而变得缓慢。
\n当前由 Vite 推崇的无打包范式（no-bundle paradigm），通过不在开发服务器中打包来应对这一问题。取而代之的是 Vite 将 ESM 模块，每个模块对应一个源文件，直接服务于浏览器。在这种范式下，每次代码更改都会触发前端单个模块的替换。这使得相对于应用程序大小，刷新时间复杂度几乎保持不变。然而，如果你有许多模块，初始页面加载可能会更长。
\n在有多个团队或多个应用程序的组织中，前端可能分成多个 JavaScript 包，但保持在一个代码库中。在这样的架构中，每个包都有自己的构建步骤，它们一起形成一个包的依赖图。应用程序位于依赖图的根部。
\nMonorepo 工具协调依赖图的构建。它们通常提供增量重建、并行处理和远程缓存等特性。借助这些特性，大型代码库可以享受小型代码库的构建时间。
\n业界标准的更广泛的 monorepo 工具，如 Bazel，支持广泛的语言、复杂的构建图（complicated build graphs）和透明的执行（hermetic execution）。然而，JavaScript 对前端来说是最难完全集成到这些工具中的生态系统之一，目前几乎没有现成的案例。
\n幸运的是，存在专门为前端设计的若干 monorepo 工具。不幸的是，它们缺乏 Bazel 等工具的灵活性和稳健性，尤其是透明执行。
\n目前常用的前端特定 monorepo 工具是 Nx 和 Turborepo。Nx 更成熟且功能更强，而 Turborepo 是 Vercel 生态系统的一部分。过去，Lerna 是将多个 JavaScript 包链接在一起并发布到 NPM 的标准工具。2022 年，Nx 团队接管了 Lerna，现在 Lerna 在内部使用 Nx 来驱动构建。
\n\n\n另有：Bit
\n
新的构建工具是用编译语言编写的，强调性能。2019 年的前端构建速度非常慢，但现代工具已经大大加快了速度。然而，现代工具功能集较小，有时与库不兼容，因此旧代码库通常无法轻易切换到它们。
\n服务器端渲染 (SSR) 在 Next.js 兴起后变得更加流行。SSR 并不会给前端构建系统带来任何根本性的不同。SSR 应用程序也必须向浏览器提供 JavaScript，因此它们执行相同的构建步骤。
\nState of JavaScript 2024 构建工具: https://2024.stateofjs.com/zh-Hans/libraries/build_tools/
\n\n\n非原文部分
\n
Webpack: bundler, dev_server
\nParcel: dev_server
\nRollup: bundler
\nVite: dev_server
\nPrettier: formatter
\nESLint: linter
\nBabel: transformer
\nterser: minifier
\nPostCSS: css
\nUglifyJS: minifier
\nEsbuild: transformer, bundler, minifier
\nswc: transformer, bundler, minifier
\nBiome: formatter, linter
\nOxc: parser, linter, transformer, formatter, minifier
\ndprint: formatter
\nLightning CSS: css
\nRspack: webpack
\nRsbuild: dev_server
\nFarm: vite
\nMako: bundler
\n\n\n\n
从解释器实现角度看，运行时调用一个函数的本质是执行以下抽象操作：
\n\n[[Call]] 方法\n\n\n可以发现：除了要提供参数列表，还需要提供 this 参数
\n
OrdinaryCallBindThis(F, calleeContext, thisArgument) 抽象操作，来指定当前执行环境的 this 值[[ThisMode]] 内部槽来决定如何绑定 this。分为严格模式、非严格模式和箭头函数情况[[ThisValue]]）最后通过 OrdinaryCallEvaluateBody(F, argumentsList) 抽象操作来执行代码（委托 EvaluateCall 抽象操作）
当执行函数体时，this 只不过是一个关键字，解释器对其求值即调用 ? ResolveThisBinding() 抽象操作
该抽象操作会在上层 Environment Record 中寻找已保存的 this 值（规范术语 this binding），详细参见 补充一节
那么上述抽象操作中的 this 是怎么得来的？关键在于最后的 EvaluateCall(func, ref, arguments, tailPosition) 抽象操作。
首先看看该抽象操作最初是如何被调用的，从语法解析完毕开始，即我们执行一个 CallExpression : CallExpression Arguments 表达式：
ref 为 ? 对 CallExpression 的求值结果。func 为 ? GetValue(ref)。thisCall 为当前的 CallExpression。tailCall 为 IsInTailPosition(thisCall)。func, ref, Arguments, tailCall)。现在执行 EvaluateCall 抽象操作：
\n结合上面的信息，可知（我们忽略 with 表达式的情况）：
\n如果执行 CallExpression 得到 Reference Record 且它还是 PropertyReference（即其 [[Base]] 是 Environment Record），\n在此情况下：若它是 SuperReference（即含 [[ThisValue]]）则返回它的 [[ThisValue]]，否则返回它的 [[Base]]
这里，核心问题在于 ref 是不是一个 Reference Record：
因为如果 ref 不是 Reference Record，那么 thisValue 就会是 undefined
事实是 ref 既可以是包含了函数的 Reference Record，也可以是直接是函数本身
例如，在下面的示例中，obj.fn 是 包含了函数的 Reference Record，而 (true && obj.fn) （求值后）是函数本身：
var fn = function () {\n // "use strict";\n return `this is ${this}`;\n};\nvar fn2 = () => `this is ${this}`;\n\nvar obj = { fn, fn2 };\n\nfn(); // this is [object global]\nobj.fn(); // this is [object Object]\nobj.fn2(); // this is [object global]\n(true && obj.fn)(); // this is [object global]\n(false || obj.fn)(); // this is [object global]\n箭头函数时，解释器算法传入 thisValue 也和普通情况别无二致，也就是说这时是不区分是否是箭头函数的。
但我们知道，箭头函数的内部槽 [[ThisMode]] 与其它函数不一样：它是 LEXICAL，表示 this 引用词法上包围的函数的 this 值。
还记得上面提到的 OrdinaryCallBindThis(F, calleeContext, thisArgument) 抽象操作吗？
这个操作非常重要：正是它最终为 Function Environment Record 绑定 thisValue（调用 BindThisValue(thisValue)）。
箭头函数的 [[ThisMode]] 是 LEXICAL，此时 OrdinaryCallBindThis 抽象操作中不会为其（指这个箭头函数的 Function Environment Record）绑定 this。
这就是为什么规范称箭头函数的 Function Environment Record 不会绑定 this。
因此在 GetThisEnvironment() 抽象操作中，会向上层 Environment Record 寻找，直至找到 this （规范术语 this binding）。
Tip
\n因为在此抽象操作中，必然会跳过当前 Function Environment Record，因此即使调用 Function.prototype.bind 来绑定当前 Function Environment Record 的 this 也是没有意义的
这就是为什么对箭头函数调用 .bind() 没有效果
非严格模式下，函数的 [[ThisMode]] 是 GLOBAL，这时如果 thisArgument 是 undefined 或 null，
thisValue 就为 globalEnv.[[GlobalThisValue]]。
Warning
\n最顶层 EnvironmentRecord 分两种情况：模块环境（ModuleEnvironmentRecord）和非模块环境（GlobalEnvironmentRecord） （注：模块总是严格模式）GlobalEnvironmentRecord.GetThisBinding(): 返回当前 [[GlobalThisValue]] 内部槽\nGlobalEnvironmentRecord.[[GlobalThisValue]] : The value returned by this in global scope. Hosts may provide any ECMAScript Object value.ModuleEnvironmentRecord.GetThisBinding(): 返回 undefined
根据规范，非模块环境的 [[GlobalThisValue]] 值由实现定义
在浏览器中，它是 window；在 Node.js 中，它指向 module.exports 的初始值，而不是 global
注意这与 globalThis 的机制不同
Node.js 注意：cjs 模块代码本质是运行在一个包装函数内，其 this 被指定为 cjsModuleInstance 并通过 runScriptInThisContext 运行
\nlet wrap = function (script) {\n return Module.wrapper[0] + script + Module.wrapper[1];\n};\n\nconst wrapper = ["(function (exports, require, module, __filename, __dirname) { ", "\\n});"];\nNode.js 模块细节不在本文探讨范围内，见https://yieldray.fun/posts/nodejs-modules
\n示例：
创建两个文件，test.cjs 和 test.mjs，内容均为 "use strict"; console.log(this)
执行 node test.cjs，结果为 {}
执行 node test.mjs，结果为 undefined
创建 index.html，内容为 <script src="./test.cjs"></script><script src="./test.mjs" type="module"></script>
打开 index.html，结果为 window 和 undefined
严格模式下，函数的 [[ThisMode]] 是 STRICT，这时不会因为 thisArgument 是 undefined 或 null 而做特殊处理，
即 thisArgument 就是 CallExpression 那一步得到的 thisCall，否则就是 undefined 了。
现在我们来看，Function.prototype.apply 和 Function.prototype.call 就非常简单了：
这两个函数都接受 thisArg，这个参数传递给 Call(func, thisArg, argList)，最终被设置为 Function Environment Record 的 [[ThisValue]] 内部槽。
比较特殊的是 Function.prototype.bind(thisArg, ...args)：
它委托 BoundFunctionCreate(targetFunction, boundThis, boundArgs) 抽象操作，
我们可以简单理解为该抽象操作将 [[BoundThis]] 内部槽设为 boundThis，将 [[BoundArguments]] 内部槽设为 boundArgs。
其实就是创建了一个 Bound Function Exotic Objects，它是一个特殊的 Function Objects。
这个 Bound Function Exotic Objects 的 [[Call]] 内部方法的 this 必定是它 [[BoundThis]] 内部槽的值，因此也就实现了绑定的效果。
Note
\n简单来说：bound function exotic object，包装了 function object，并覆写了 [[Call]] 内部方法
当使用 new 调用构造函数时，解释器调用 [[Construct]] 内部方法而非 [[Call]] 内部方法。
（这里省略 [[ConstructorKind]] 为 derived，也就是构造函数是派生构造函数的情况，不过过程也是类似的）
OrdinaryCallBindThis 绑定 this 的值就是 ? OrdinaryCreateFromConstructor(newTarget, "%Object.prototype%") 的返回值，注意这里的 newTarget 就是指构造函数本身。
也就是说 this 就是新创建的一个对象，对象的 [[Prototype]] 为构造函数的 prototype 属性。
首先了解普通对象的必要内部方法
\n| 内部方法 | \n签名 | \n描述 | \n
|---|---|---|
[[GetPrototypeOf]] | \n( ) → Object | Null | \n确定提供此对象继承属性的对象。null值表示没有继承属性。 | \n
[[SetPrototypeOf]] | \n(Object | Null) → Boolean | \n将此对象与提供继承属性的另一个对象关联。传递null表示没有继承属性。返回true表示操作成功完成，返回false表示操作未成功。 | \n
[[IsExtensible]] | \n( ) → Boolean | \n确定是否允许向此对象添加其它属性。 | \n
[[PreventExtensions]] | \n( ) → Boolean | \n控制是否可以向此对象添加新属性。返回true表示操作成功，返回false表示操作未成功。 | \n
[[GetOwnProperty]] | \n(propertyKey) → Undefined | Property Descriptor | \n返回此对象自有属性的属性描述符，其键为propertyKey，如果不存在此类属性，则返回undefined。 | \n
[[DefineOwnProperty]] | \n(propertyKey, PropertyDescriptor) → Boolean | \n创建或更改自有属性，其键为propertyKey，使其具有PropertyDescriptor描述的状态。如果该属性成功创建/更新，则返回true；如果无法创建或更新该属性，则返回false。 | \n
[[HasProperty]] | \n(propertyKey) → Boolean | \n返回一个布尔值，指示此对象是否已经具有键为propertyKey的自有或继承属性。 | \n
[[Get]] | \n(propertyKey, Receiver) → any | \n返回此对象中键为propertyKey的属性值。如果需要执行任何ECMAScript代码来获取属性值，则在评估代码时使用Receiver作为this值。 | \n
[[Set]] | \n(propertyKey, value, Receiver) → Boolean | \n将键为propertyKey的属性值设置为value。如果需要执行任何ECMAScript代码来设置属性值，则在评估代码时使用Receiver作为this值。如果属性值已设置，则返回true；如果无法设置，则返回false。 | \n
[[Delete]] | \n(propertyKey) → Boolean | \n从此对象中删除键为propertyKey的自有属性。如果属性未删除且仍然存在，则返回false。如果属性已删除或不存在，则返回true。 | \n
[[OwnPropertyKeys]] | \n( ) → List of property keys | \n返回一个列表，其元素是此对象的所有自有属性键。 | \n
interface ProxyHandler<T extends object> {\n apply?(target: T, thisArg: any, argArray: any[]): any;\n construct?(target: T, argArray: any[], newTarget: Function): object;\n defineProperty?(target: T, property: string | symbol, attributes: PropertyDescriptor): boolean;\n deleteProperty?(target: T, p: string | symbol): boolean;\n get?(target: T, p: string | symbol, receiver: any): any;\n getOwnPropertyDescriptor?(target: T, p: string | symbol): PropertyDescriptor | undefined;\n getPrototypeOf?(target: T): object | null;\n has?(target: T, p: string | symbol): boolean;\n isExtensible?(target: T): boolean;\n ownKeys?(target: T): ArrayLike<string | symbol>;\n preventExtensions?(target: T): boolean;\n set?(target: T, p: string | symbol, newValue: any, receiver: any): boolean;\n setPrototypeOf?(target: T, v: object | null): boolean;\n}\nECMAScript 函数对象封装了带参数的 ECMAScript 代码，这些代码在词法环境中闭合，并支持动态求值。
ECMAScript 函数对象是普通对象，具有与其它普通对象相同的内部槽和内部方法。
ECMAScript函数对象的代码可以是严格模式代码或非严格模式代码。
代码为严格模式的 ECMAScript 函数对象称为严格函数，代码为非严格模式的则称为非严格函数。
除了 [[Extensible]] 和 [[Prototype]]，ECMAScript函数对象还拥有表中列出的内部槽。
| 内部槽 | \n类型 | \n描述 | \n
|---|---|---|
[[Environment]] | \nan Environment Record | \n函数闭合时的环境记录。在求值函数代码时用作外部环境。 | \n
[[PrivateEnvironment]] | \na PrivateEnvironment Record or null | \n函数闭合时的私有环境记录。如果该函数在语法上不包含在类中，则为null。在求值函数代码时，用作内部类的外部私有环境。 | \n
[[FormalParameters]] | \na Parse Node | \n定义函数形式参数列表的源文本的根解析节点。 | \n
[[ECMAScriptCode]] | \na Parse Node | \n定义函数主体的源文本的根解析节点。 | \n
[[ConstructorKind]] | \nbase or derived | \n函数是否为派生类构造函数。 | \n
[[Realm]] | \na Realm Record | \n创建函数的 Realm，并在求值函数时提供任何访问的内在对象。 | \n
[[ScriptOrModule]] | \na Script Record or a Module Record | \n创建函数的脚本或模块。 | \n
[[ThisMode]] | \nlexical, strict, or global | \n定义在函数的形式参数和代码主体中如何解释this引用。lexical意味着this引用词法上包围的函数的this值。strict意味着this值完全按照函数调用时提供的值使用。global意味着undefined或null的this值被解释为全局对象的引用，其它this值首先传递给ToObject。 | \n
[[Strict]] | \na Boolean | \n如果这是一个严格函数，则为true；如果这是一个非严格函数，则为false。 | \n
[[HomeObject]] | \nan Object | \n如果函数使用super，这是一个对象，其[[GetPrototypeOf]]提供了super属性查找开始的对象。 | \n
[[SourceText]] | \na sequence of Unicode code points | \n定义函数的源文本。 | \n
[[Fields]] | \na List of ClassFieldDefinition Records | \n如果函数是一个类，这是一个表示类的非静态字段及其相应初始化器的记录列表。 | \n
[[PrivateMethods]] | \na List of PrivateElements | \n如果函数是一个类，这是一个表示类的非静态私有方法和访问器的列表。 | \n
[[ClassFieldInitializerName]] | \na String, a Symbol, a Private Name, or empty | \n如果函数是作为类字段的初始化器创建的，用于字段命名求值的名称；否则为空。 | \n
[[IsClassConstructor]] | \na Boolean | \n指示函数是否为类构造函数。（如果为true，调用函数的[[Call]]将立即抛出TypeError异常。） | \n
函数环境记录（Function Environment Record）是一种声明性环境记录，用于表示函数的顶级作用域。
如果该函数不是箭头函数，还提供一个 this 绑定。
如果一个函数不是箭头函数并引用了 super，其函数环境记录还包含在函数内部执行 super 方法调用所需的状态。
classDiagram\n class EnvironmentRecord {\n <<abstract>>\n EnvironmentRecord [[OuterEnv]]\n HasBinding(N) Boolean\n CreateMutableBinding(N, D) UNUSED\n CreateImmutableBinding(N, S) UNUSED\n InitializeBinding(N, V) UNUSED\n SetMutableBinding(N, V, S) UNUSED\n GetBindingValue(N, S) any\n DeleteBinding(N) Boolean\n HasThisBinding() false\n HasSuperBinding() false\n WithBaseObject() undefined\n }\n\n class DeclarativeEnvironmentRecord {\n }\n\n class FunctionEnvironmentRecord {\n any [[ThisValue]]\n LEXICAL|INITIALIZED|UNINITIALIZED [[ThisBindingStatus]]\n function [[FunctionObject]]\n object|undefined [[NewTarget]]\n BindThisValue(V) V\n GetThisBinding() any\n GetSuperBase() Object|null|undefined\n }\n\n class ModuleEnvironmentRecord {\n CreateImportBinding(N, M, N2)\n GetThisBinding() any\n }\n\n class ObjectEnvironmentRecord {\n Object [[BindingObject]]\n Boolean [[IsWithEnvironment]]\n }\n\n class GlobalEnvironmentRecord {\n ObjectEnvironmentRecord [[ObjectRecord]]\n Object [[GlobalThisValue]]\n DeclarativeEnvironmentRecord [[DeclarativeRecord]]\n List~String~ [[VarNames]]\n GetThisBinding() any\n HasVarDeclaration(N) Boolean\n HasLexicalDeclaration(N) Boolean\n HasRestrictedGlobalProperty(N) Boolean\n CanDeclareGlobalVar(N) Boolean\n CanDeclareGlobalFunction(N) Boolean\n CreateGlobalVarBinding(N, D)\n CreateGlobalFunctionBinding(N, V, D)\n }\n\n EnvironmentRecord <|-- DeclarativeEnvironmentRecord\n EnvironmentRecord <|-- ObjectEnvironmentRecord\n EnvironmentRecord <|-- GlobalEnvironmentRecord\n DeclarativeEnvironmentRecord <|-- FunctionEnvironmentRecord\n DeclarativeEnvironmentRecord <|-- ModuleEnvironmentRecord\n一个 agent 由一组 ECMAScript 执行上下文、一个执行上下文栈、一个正在运行的执行上下文、一个 Agent Record 以及一个执行线程组成。除执行线程外，agent 的各个组成部分是该 agent 独有的。
\nagent 的执行线程在该agent的执行上下文中独立执行算法步骤，不受其它 agent 的影响，除非一个执行线程被多个 agent 共享，且这些 agent 的 Agent Record 中的 [[CanBlock]] 字段均为false。
执行上下文是一种规范装置，用于跟踪 ECMAScript 实现对代码的运行时执行。
在任何时间点，每个 agent 最多只有一个实际执行代码的执行上下文，这被称为 agent 的运行执行上下文。
执行上下文栈用于跟踪执行上下文。运行执行上下文始终是此栈的顶部元素。
每当控制从当前运行执行上下文关联的可执行代码转移到与该执行上下文无关的可执行代码时，便会创建一个新的执行上下文。
新创建的执行上下文会被推入栈顶并成为运行执行上下文。
执行上下文包含跟踪其关联代码执行进度所需的任何特定于实现的状态。
\n在执行之前，所有的 ECMAScript 代码都必须与一个 Realm 相关联。
Realm 包含一个 Global Environment Record。
const $ = document.querySelector;\n$("#foo"); // TypeError: Illegal invocation\n\nfunction mustHaveRightThis(this: HTMLElement) {\n return this.remove();\n}\n\n// The 'this' context of type 'void' is not assignable to method's 'this' of type 'HTMLElement'\nmustHaveRightThis();\n\nconst rightThis: ThisType<Console> = {\n callback: function () {\n this.log(666);\n this.foo; // Property 'foo' does not exist on type 'Console'.\n },\n};\n排除几种特殊情况
\n[[ThisMode]] 为 LEXCIAL，即箭头函数：\n此时会向上层 Environment Record 寻找 this bindingFunction.prototype.bind：\n会创建 Bound Function Exotic ObjectsFunction.prototype.{call,apply}：\n会跳过 EvaluateCall 操作来绑定 this 并调用函数普通情况
\n[[Construct]] 而不是 [[Call]]，此时 this 是新创建的对象是否严格模式
\n[[ThisMode]] 是 GLOBAL，这时会对 thisArgument 是 undefined 或 null 的情况做特殊处理，即 this 设置为 globalThis[[ThisMode]] 是 STRICT，不会做特殊处理flowchart TD\n Start["开始: this 绑定判断"]\n\n %% 主要分支\n Start --> Special["是否为特殊情况?"]\n Start --> Normal["普通情况"]\n\n %% 特殊情况分支\n Special --> Arrow["箭头函数"]\n Special --> Bind["bind 方法"]\n Special --> CallApply["call/apply 方法"]\n\n Arrow --> ArrowResult["继承上层环境的 this"]\n Bind --> BindResult["创建 Bound Function Exotic Objects"]\n CallApply --> CallApplyResult["跳过 EvaluateCall 直接绑定"]\n\n %% 普通情况分支\n Normal --> IsNew{"是否 new 调用?"}\n IsNew -->|是| NewThis["this 为新创建的对象"]\n\n IsNew -->|否| IsProp{"括号前是否为 PropertyReference?"}\n IsProp -->|是| PropThis["this 为函数所在对象"]\n IsProp -->|否| IsStrict{"是否严格模式?"}\n\n IsStrict -->|是| StrictThis["this 为 undefined"]\n IsStrict -->|否| GlobalThis["this 为 globalThis"]\n\n %% 样式\n classDef decision fill:#f9f,stroke:#333\n class IsNew,IsProp,IsStrict decision\nnew FuncClass()）时，this 为创建（new）的对象本文主要说明现代浏览器以及 Node.js 环境下的 Event Loop
\n异步任务在事件循环中调度执行。ECMA262 规范不规定“何时调度”异步任务（规范称之为 Job），与运行时相关（host-defined）。
\n\n\n注：没有定义调度，但定义了 hooks 通知宿主环境来调度，例如 HostEnqueuePromiseJob
\n
Job 是一种无参数的抽象闭包，当没有其它 ECMAScript 计算正在进行时，它会启动一个 ECMAScript 计算。
在未来某个时间点，当 Job 所属 agent 中没有运行中的上下文且该 agent 的执行上下文堆栈为空时，必须：
\n\n执行上下文来源：Global code，Eval code，Function code，Module code
\n
代码由 agent 执行，执行在 agent 的执行上下文中。
agent 包括一组 ECMAScript 执行上下文、执行上下文堆栈、运行中的执行上下文、Agent Record 和执行线程。
除了执行线程之外，代理的组成部分只属于该代理。
graph TD\n A[Agent] --> B[一组ECMAScript执行上下文]\n A --> C[执行上下文堆栈]\n A -->|正在实际执行代码| D[运行中的执行上下文]\n A -->|管理锁的状态| E[Agent Record]\n\n D -->|指向执行上下文堆栈顶部| C\n\n subgraph Agent\n B\n C\n D\n E\n end\n\n F[执行线程] <-.-|执行算法步骤| A\n规定：
\n\n\n这与 C 语言不同。例如，如果函数在线程中运行，它可能在任何位置被终止，然后在另一个线程中运行其它代码。
\n
注意：job 本身不能并行/并发，但如果是调用宿主环境的函数，宿主函数和当前 ECMAScript 执行当然不禁止并行。
比如，浏览器中执行 fetch 函数时，网络请求并非由 ECMAScript 发出，网络请求和脚本执行可以并行，只是请求完成的回调会成为 job。
job 之间不并行实际上防止了脚本之间发生可观察到的数据竞争。
除了 ECMA262 定义的：
\n运行时内部实现任务队列，往往分为（下面使用 v8 术语，微任务之外都称为宏任务）：
\n一旦调用栈为空（JavaScript 执行上下文栈 清空之后），事件循环从任务队列中取出任务来执行
解释器从任务队列中取出任务执行（更精确的说法是宿主将一些任务推入执行上下文堆栈），而事件循环接受任务并将任务加入任务队列
\n\n运行任务的具体步骤是实现定义的，例如：宿主环境可以通过将执行上下文推入执行上下文堆栈来准备执行。
\n
事件循环能够协调事件、用户交互、脚本、渲染、网络等。每个 agent 有唯一关联的事件循环。
\nHTML 标准中定义了如何调度异步任务（注意不要与 v8 术语混淆）。
根据 HTML 标准，事件循环中可以有一个或多个任务队列，而微任务队列不是任务队列。
Note
\n本文只讨论主线程上的事件循环，即标准所称的窗口事件循环
\n事件循环包含：
\n事件循环过程任务执行过程具体见标准 8.1.7.3节。
\n简单来说：
\n对于每个事件循环，每个任务源必须与特定的任务队列相关联。
事件循环从具有至少一个可运行任务的任务队列中选取一个任务队列（微任务队列不是任务队列）
每运行完一个任务，就将该任务从任务队列中移除，并执行微任务检查点。
执行微任务检查点会运行微任务队列中的所有任务，直至微任务队列为空。
此外，浏览器将并行页面渲染（update the rendering:）。但每次事件循环不一定能够完成一次渲染。
\nWarning
\n水平有限，本文仅作参考，必须以规范为准。
\n实际情况中我们可以发现，当脚本本身运行结束后，是先运行了微任务再是宏任务。
这是因为规范中指明了此时将微任务移动到常规任务队列，也就是说这个微任务变成了宏任务。
\n\n\n
\n\n一个演示 WebApp：https://github.com/Hopding/js-visualizer-9000-client
\n
在下面的演示代码中需要注意：浏览器的 console.log 为同步，Node.js 为异步。
\n\n\n注意：HTML 标准中只存在 任务 和 微任务。“宏任务”并没有精确定义，下面通俗地用“宏任务”代替所有非微任务
\n
在浏览器中，queueMicrotask Promise.prototype.then 和 Mutation Observer API 的回调函数使用微任务队列。
宏任务队列可以是一个或多个队列，具体实现方式与浏览器有关。setTimeout setInterval requestAnimationFrame requestIdleCallback 以及其它事件 API 都使用宏任务。
\n\n现代浏览器遵循 HTML 标准
\n
规范定义了如下几种通用任务源：
\n根据事件循环的特性，微任务队列中的所有微任务会依次出队直至队列为空。
任务也可以在队列中新增任务，这就可能导致队列中永远有任务。
由于在现代浏览器中，微任务队列优于宏任务队列运行。
引擎会调度微任务队列中的所有任务，直至队列为空。但宏任务则不是。
（即，一个宏任务，在宏任务队列中新增宏任务，再新增微任务，微任务先执行）
因此如果微任务队列不为空，宏任务将无法得到执行。反之则不会。
setTimeout(() => {\n console.log("macro"); // 永远不会运行\n});\nfunction recursiveMicroTask() {\n queueMicrotask(() => {\n console.log("micro");\n recursiveMicroTask();\n });\n}\nrecursiveMicroTask();\n此外，在现代浏览器中，冒泡中的所有事件是按冒泡顺序先添加至宏任务队列中的，然后再执行之。
\n\n\n摘自 https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
\n
<div class="outer">\n <div class="inner"></div>\n</div>\nconst outer = document.querySelector(".outer");\nconst inner = document.querySelector(".inner");\n\n// 监听元素属性变化\nnew MutationObserver(function () {\n console.log("mutate");\n}).observe(outer, {\n attributes: true,\n});\n\nfunction onClick() {\n console.log("click");\n\n setTimeout(function () {\n console.log("timeout");\n }, 0);\n\n Promise.resolve().then(function () {\n console.log("promise");\n });\n\n outer.setAttribute("data-random", Math.random());\n}\n\ninner.addEventListener("click", onClick);\nouter.addEventListener("click", onClick);\n现代浏览器的结果都是：
\nclick\npromise\nmutate\nclick\npromise\nmutate\ntimeout\ntimeout\n\n\n注：
\nsetImmediate在现代浏览器中不存在（废弃），被 Node.js 实现（未废弃），参见下面的 Node.js 部分
根据 HTML 标准，Web workers 在专用的单独线程上运行，其全局环境为 WorkerGlobalScope。但 Javascript 中上下文之间是隔离的，因此只能通过事件通信，只有 Transferable 对象允许共享内存。
由于不共享内存，消息必须经过序列化（通过 结构化克隆算法）。我们手动创建的值，对象以及二进制数组都是可克隆的。但是 WebAPI 获取的对象，例如 DOM 就无法克隆了。（特别是在早期的 IE 中，其本质可能是一个 C++ 对象）
\n\nTransferable 对象的所有权问题，超出了本文的范畴
\n
根据 HTML 标准，Worklets 可独立于主 Javascript 环境运行脚本，其全局环境为 WorkletGlobalScope。Worklets 与线程无关（可以运行在任何线程，包括主线程）。既然独立，那就可以实现与其它环境并行。
目前在 CSS Painting API 和 Web Audio API 中提供。
\n\n摘自：https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick
\n
在 Node.js 中每个队列称为一个阶段（phase）。当事件循环进入给定阶段时，将执行特定于该阶段的任何操作，然后执行该阶段队列中的回调，直到队列耗尽或当最大回调数已执行。
当队列耗尽或达到回调限制时，事件循环将进入下一阶段，依此类推。
Note
\nNode.js 事件循环负责从 libuv 的队列中取出回调函数，并（调用 v8）在 JavaScript 环境中执行它们。
libuv 事件循环向操作系统轮询事件，当事件发生时，libuv 将对应回调函数添加到其内部的队列中。
![\"\"](\"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F6b288555862049b4b5cd7f19e2ae909f?format=webp&width=2000\")
setTimeout() 和 setInterval() 调度的回调。setImmediate() 调度的回调）；适当时，Node.js 将在此处阻塞。setImmediate() 回调。socket.on('close', ...). ┌───────────────────────────┐\n┌─>│ timers │\n│ └─────────────┬─────────────┘\n│ ┌─────────────┴─────────────┐\n│ │ pending callbacks │\n│ └─────────────┬─────────────┘\n│ ┌─────────────┴─────────────┐\n│ │ idle, prepare │\n│ └─────────────┬─────────────┘ ┌───────────────┐\n│ ┌─────────────┴─────────────┐ │ incoming: │\n│ │ poll │<─────┤ connections, │\n│ └─────────────┬─────────────┘ │ data, etc. │\n│ ┌─────────────┴─────────────┐ └───────────────┘\n│ │ check │\n│ └─────────────┬─────────────┘\n│ ┌─────────────┴─────────────┐\n└──┤ close callbacks │\n └───────────────────────────┘\nNode.js 提供了 process.nextTick(callback[, ...args])，而 queueMicrotask(callback)（源码）用于运行 v8 微任务队列。
Note
\n微任务队列由 v8 维护（MicrotasksQueue），并在执行完一个宏任务（例如一个阶段的事件循环）后，会检查并执行微任务队列中的所有任务，直到队列为空
\nNode.js 还实现了 process.nextTick，next tick 即事件循环继续之前。
可以将 process.nextTick 看作是 Node.js 自己实现的 queueMicrotask 版本，并且它运行在 v8 微任务之前。
即 process.nextTick() 队列在 Promise 微任务队列之前被排空（具体信息，Node.js 文档中已经很详细说明了）
当我们实现一个函数执行回调时，保证回调函数异步执行往往很重要。不过如果使用 Promise 则没有这些烦恼。
\nfunction definitelyAsync(arg, cb) {\n if (arg) {\n // 为了互操性建议使用 queueMicrotask 替代\n process.nextTick(cb);\n return;\n }\n\n fs.stat("file", cb);\n}\nNode.js 同样支持 Worker 多线程（通过 worker_threads，注意并非是 Web Workers，不过接口确实也仿照其实现）。
众所周知，Node.js 的异步 I/O 机制非常适合 I/O 敏感型任务（并发），对于 CPU 敏感型任务则需要考虑多线程（并行）支持。
排除 Worker 线程，JavaScript 几乎可以说是单线程。为了实现异步 I/O，Node.js 显然要通过 libuv 的多个线程（线程池）来实际调用系统调用，并在操作完成时通知 JavaScript 线程。
下面以 fs.open() 为例
/**\n * Asynchronously opens a file.\n * @param {string | Buffer | URL} path\n * @param {string | number} [flags]\n * @param {string | number} [mode]\n * @param {(err?: Error, fd?: number) => any} callback\n * @returns {void}\n */\nfunction open(path, flags, mode, callback) {\n path = getValidatedPath(path);\n if (arguments.length < 3) {\n callback = flags;\n flags = "r";\n mode = 0o666;\n } else if (typeof mode === "function") {\n callback = mode;\n mode = 0o666;\n } else {\n mode = parseFileMode(mode, "mode", 0o666);\n }\n const flagsNumber = stringToFlags(flags);\n callback = makeCallback(callback); // 包装回调函数\n\n const req = new FSReqCallback(); // 创建请求\n req.oncomplete = callback; // 请求对象上附加回调函数\n // 将请求对象发送给 libuv\n binding.open(pathModule.toNamespacedPath(path), flagsNumber, mode, req);\n}\nfs.open() 函数最终通过 node_file.cc 调用 libuv 的 uv_fs_open() 方法
以 unix 系统为例，实现非阻塞 I/O 的背后可能是 read select poll epoll pselect kqueue evport 等等系统调用。
libuv 作为一个跨平台的 C 库，在 unix 下使用 epoll，在 BSD 下使用 kqueue，在 windows 下使用 IOCP，在 SunOS 下使用 event ports 实现。
\n![\"libuv](\"https://docs.libuv.org/en/v1.x/_images/architecture.png\")
网络异步 I/O 可以通过对应系统调用实现，因此只需要单线程（事件循环线程）；而文件 I/O 则是通过线程池调用多个同步的系统调用模拟实现异步。
\n\n\n具体设计参见 libuv 文档
\n
https://stackoverflow.com/questions/25915634
https://zh.javascript.info/event-loop
https://v8.dev/blog/fast-async
https://limeii.github.io/2019/05/js-eventloop/
https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
https://dev.to/tdo95/javascript-event-loop-everything-you-need-to-know-explained-in-simple-terms-fg0
https://www.bbss.dev/posts/eventloop/
https://www.thisdot.co/blog/deep-dive-into-node-js-with-james-snell
Note
\nHighlights information that users should take into account, even when skimming.
\nTip
\nOptional information to help a user be more successful.
\nImportant
\nCrucial information necessary for users to succeed.
\nWarning
\nCritical content demanding immediate user attention due to potential risks.
\nCaution
\nNegative potential consequences of an action.
\nconsole.log("hewwo"); // [!code --]\nconsole.log("hello"); // [!code ++]\nconsole.log("goodbye");\nconsole.log("Not highlighted");\nconsole.log("Highlighted"); // [!code highlight]\nconsole.log("Not highlighted");\nconsole.log("Not focused");\nconsole.log("Focused"); // [!code focus]\nconsole.log("Not focused");\n// [!code word:Hello]\nconst message = "Hello World";\nconsole.log(message); // prints Hello World\nconsole.log("No errors or warnings");\nconsole.error("Error"); // [!code error]\nconsole.warn("Warning"); // [!code warning]\n\n\n原文：How to Read an RFC by.Mark Nottingham
\n
此文也被 IETF 官方博客 刊载
无论好坏，RFC 是我们指定许多互联网协议的方式。这些文件有时被开发者视为圣典，仔细解析寻找隐藏的意义；而有时又被忽视，因为它们难以理解。
这常常令人沮丧，更重要的是，导致互操作性和安全问题。
然而，如果对它们的构建和发布有一些了解，就更容易理解你在看什么。以下是我的看法，基于我在 HTTP 和一些其它事情上的经验。
\n找到 RFC 的标准位置是 RFC Editor 网站。然而，正如我们将在下面看到的，它缺少一些重要信息，所以大多数人使用 tools.ietf.org。
\n找到正确的 RFC 可能很困难，因为数量很多（目前接近 9000 个！）。显然，你可以使用通用的网络搜索引擎找到它们，RFC Editor 网站上也有一个优秀的搜索功能。
\n另一个选择是我创建的 rfc.fyi，可通过标题和关键词搜索 RFC，并通过标签进行探索。
\n众所周知，纯文本的 RFC 难以阅读，甚至可以说很难看，但情况即将改善；RFC Editor 正在完成一个新的 RFC 格式，呈现更加美观，同时还有自定义选项。同时，如果你想要更易用的 RFC，可以使用第三方存储库；例如，greenbytes 保留了一份与 WebDAV 相关的 RFC 列表，[HTTP 工作组] (https://httpwg.org/specs/)维护了一些与 HTTP 相关的 RFC。
\n所有 RFC 的顶部都有一个横幅，看起来像这样：
\nInternet Engineering Task Force (IETF) R. Fielding, Ed.\nRequest for Comments: 7230 Adobe\nObsoletes: 2145, 2616 J. Reschke, Ed.\nUpdates: 2817, 2818 greenbytes\nCategory: Standards Track June 2014\nISSN: 2070-1721\n在左上角，这里写着“Internet Engineering Task Force (IETF, 互联网工程特别工作组)”。这表明这是 IETF 的产品；尽管不广为人知，还有其它不需要 IETF 共识就可以发布 RFC 的方式，例如独立流。
\n实际上，有许多“流”可以发布文档。只有 IETF 流表明整个 IETF 已经审查并对协议的规范达成共识。
\n较旧的文档（大约在 RFC5705 之前）在那里写着“网络工作组 (Network Working Group)”，所以你需要更多地挖掘才能确定它们是否代表 IETF 共识；首先查看“备忘录状态”部分，以及RFC 编辑器网站。
\n在那之下是“Request for Comments”编号。如果此处写着的是“Internet-Draft (互联网草案)”，那么它就不是 RFC；它只是一个提案，任何人都可以写一个。若某物仅仅是互联网草案并不意味着它会被 IETF 采纳。
\n**Category (类别)**可以是“Standards Track”、“Informational”、“Experimental”或“Best Current Practice”之一。这些之间的区别有时是模糊的，但如果是由 IETF 生产的（见上文），那么它已经经过了足够量的审查。然而，请注意，Informational 和 Experimental 不是标准，即使由 IETF 共识发布。
\n最后，**authors (作者)**列在标题的右侧。与学术界不同，这不是一份全面的贡献者名单；通常，这在文档底部的“Acknowledgments (致谢)”部分完成。在 RFC 中，这字面意思是“谁写了这篇文档”。通常，你会看到“Ed. (编辑)”附在后面，这表明他们是以编辑身份行事，通常是因为文本是预先存在的（例如，当 RFC 被修订时）。
\nRFC 是一系列存档文档；它们不能改变，甚至一个字符都不能（以 RFC7158 和 RFC7159 之间的差异 作为极端示例；它们把年份弄错了。
\n因此，知道你正在查看正确的文档很重要。标题包含一些有助于此的元数据：
\n**Obsoletes (废止)**列出该文档完全取代的 RFC；即，你应该使用这个文档，而不是那个。注意，当较新的版本出现时，旧版本的协议不一定被废止；例如，HTTP/2 没有废止 HTTP/1.1，因为实现旧协议仍然是合法的（也是必要的）。然而，RFC7230 确实废止了 RFC2616，因为它是该协议的参考。
\n**Updates (更新)**列出该文档对其进行了实质性更改的 RFC；换句话说，如果你在阅读那个其它文档，你也应该阅读这个。
\n不幸的是，ASCII 文本 RFC（例如，在 RFC 编辑器网站上）不会告诉你更新或废止了你当前查看的文档。这就是为什么大多数人使用 tools.ietf.org 上的 RFC 存储库，它将此信息放在一个横幅中：
\n[Docs] [txt|pdf] [draft-ietf-http...] [Tracker] [Diff1] [Diff2] [Errata]\n\nObsoleted by: 7230, 7231, 7232, 7233, 7234, 7235 DRAFT STANDARD\nUpdated by: 2817, 5785, 6266, 6585 Errata Exist\ntools 页面上的每个数字都是一个链接，所以你可以轻松找到当前的文档。
\n即使是最新的 RFC 也常常有问题。在 tools 横幅上，你还会看到右侧有一个警告“勘误存在”，以及上面的勘误链接。
\n**Errata (勘误)**是对文档的更正和澄清，不值得发布新的 RFC。有时它们会对 RFC 的实现产生重大影响（例如，如果规范中的错误导致了重大误解），所以它们值得一读。
\n例如，这里是 RFC7230 的勘误。阅读勘误时，请记住它们的状态；许多被拒绝，因为有人误读了规范。
\n比你想象的更常见的是，开发者看了 RFC 中的一句话，按照他们看到的实现，结果做了与作者意图相反的事情。
\n这是因为很难以一种当被选择性阅读时不会被误解的方式编写规范（就像任何圣典一样）。
\n因此，有必要不仅阅读直接相关的文本，还要（至少）阅读它引用的任何内容，无论是在同一规范中还是在不同的规范中。必要时，阅读任何可能相关的部分会有很大帮助，如果你不能阅读整个文档的话。
\n例如，HTTP 消息头被定义为用 CRLF 分隔，但如果你向下跳到这里，你会看到“接收者可以将单个 LF 识别为行终止符，并忽略任何前面的 CR。”很明显，对吧？
\n还要记住，许多协议设置了IANA 注册表来管理它们的扩展点；这些，而不是规范，是事实的来源。例如，HTTP 方法的规范列表在这个注册表中，而不是任何 HTTP 规范。
\n几乎所有的 RFC 在顶部附近都有类似这样的样板：
\n本文件中的关键字 "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT",\n"SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", 和\n"OPTIONAL" 应按照 BCP 14 [RFC2119] [RFC8174] 中的描述进行解释，当且仅当\n它们以全大写形式出现时，如此处所示。\n这些 RFC2119 关键字有助于定义互操作性，但它们有时也会让开发者感到困惑。很常见的是，规范会说：
\nFoo 消息 不得(MUST NOT) 包含 Bar 标头。\n这个要求是针对协议工件“Foo 消息”的。如果你发送一个，很明显它需要不包含 Bar 标头；如果你包括了一个，它就不是一个符合规范的消息。
\n然而，接收者的行为就不那么清晰了；如果你看到一个包含 Bar 标头的 Foo 消息，你该怎么办？
\n有些开发者会拒绝包含它的消息，即使规范没有说要这样做。其他人仍会处理消息，但会去掉 Bar 标头，或者忽略它——即使规范明确说所有头都需要处理。
\n所有这些都可能无意中导致互操作性问题。正确的做法是按照正常的标头处理流程，除非有具体要求相反。
\n这是因为一般来说，规范是这样编写的：行为是明确规定的；换句话说，所有没有明确禁止的行为都是允许的。因此，过度解读规范可能会无意中造成伤害，因为你会引入新的行为，其他人不得不绕过。
\n在理想的世界中，规范将以处理消息的人的行为为基础定义，如下所示：
\n发送 Foo 消息的发送者 不得(MUST NOT) 包含 Bar 标头。\n接收包含 Bar 标头的 Foo 消息的接收者 必须(MUST) 忽略 Bar 标头，但不得删除它。\n在没有这种情况的情况下，最好在规范的其它地方寻找关于错误处理的更一般的建议（例如，HTTP 的一致性和错误处理部分）。
\n此外，记住要求的目标；大多数规范都有一套高度发达的术语，用于区分协议中的不同角色。
\n例如，HTTP 有代理，它们是一种中介，既实现了客户端又实现了服务器（但不是用户代理或源服务器）；它们需要注意针对所有这些角色的要求。
\n同样，HTTP 在某些要求中区分了“生成”消息和仅仅“转发”消息，具体情况而定。注意这种特定术语可以节省你很多猜测。
\n是的，SHOULD 值得有自己的部分。这个模棱两可的术语困扰着许多 RFC，尽管有努力在消除它。RFC2119 将其描述为：
\nSHOULD 这个词，或形容词 "RECOMMENDED (推荐)"，意味着在特定情况下可能存在忽略某个条目的有效理由，\n 但必须理解并仔细权衡所有影响，然后选择不同的做法。\n在实践中，作者经常使用 SHOULD 和 SHOULD NOT 来表示 “我们希望你这样做，但我们知道不能总是要求这样做。”
\n例如，在HTTP 方法概述中，我们看到：
\n当收到一个未被识别或未由源服务器实现的请求方法时，源服务器 应(SHOULD) 响应 501 (未实现) 状态码。\n当收到一个源服务器知道但不允许用于目标资源的请求方法时，源服务器 应(SHOULD) 响应 405 (方法不允许) 状态码。\n这些是 SHOULD 而不是 MUST，因为服务器可能会合理地决定采取其它行动；如果请求来自被认为是攻击者的客户端，它可能会断开连接，或者如果资源需要 HTTP 身份验证，它可能会在到达 405 之前用 401 (未认证) 强制执行。
\nSHOULD 不意味着服务器可以随意忽略一个要求，仅因为它不想遵守。
\n有时，我们会看到一个 SHOULD，像这样：
\n生成包含有效负载主体的消息的发送者 应(SHOULD) 生成该消息中的 Content-Type 标头字段，除非发送者不知道所包含表示的预期媒体类型。\n注意“除非”一词，它指定了 SHOULD 允许的“特定情况”。可以说，这可以指定为 MUST，因为除非条款仍然适用，但这种规范风格相当常见。
\n另一个非常常见的陷阱是浏览规范中的示例，并按照它们所做的实现。
\n不幸的是，示例通常是作者最少关注的部分，因为它们需要随着协议的每次更改而更新。
\n因此，它们通常是规范中最不可靠的部分。是的，作者在发布前应该绝对仔细检查示例，但错误确实会溜进去。
\n此外，即使是完美的示例也可能不是为了说明你正在寻找的协议方面；它们通常为了简洁而被截断，或者在解码步骤之后显示。
\n尽管需要花费更多时间，但最好阅读实际文本；示例不是规范。
\n增强 BNF 经常用于定义协议工件。例如：
\nFooHeader = 1#foo\nfoo = 1*9DIGIT [ ";" "bar" ]\n一旦习惯了，ABNF 提供了一种易于理解的协议元素的草图。
\n然而，ABNF 是“理想化的”——它识别了消息的理想形式，而你生成的那些消息确实需要匹配它。它没有指定如何处理不匹配的接收消息。事实上，许多规范根本没有说明 ABNF 与处理要求的关系。
\n如果你试图严格执行 ABNF，大多数协议会严重失败，但有时这很重要。在上面的例子中，空格不允许出现在分号周围，但你可以打赌，有些人会把它放在那里，有些实现会接受它。
\n所以，一定要阅读 ABNF 周围的文本以获取附加要求或上下文，并意识到在没有直接要求的情况下，你可能需要调整解析以比 ABNF 暗示的更宽容地接受输入。
\n一些规范开始承认 ABNF 的理想化性质，并指定包含错误处理的显式解析算法。当指定时，应严格遵循这些算法，以确保互操作性。
\n自从 RFC3552 以来，RFC 样板中包含了“Security Considerations (安全考虑)”部分。
\n因此，很少有 RFC 在没有大量安全部分的情况下发布；审查过程不允许草案仅仅说“该协议没有安全考虑”。
\n所以，无论你是在实现还是部署协议，都值得阅读并确保理解安全考虑部分；如果你不这样做，很可能会在未来的某个时候遇到问题。
\n跟随其引用（如果有的话）也是一个好主意。如果没有，尝试查找使用的一些术语，以了解所讨论的问题。
\n如果 RFC 没有回答你的问题，或者你不确定其文本的意图，最好的做法是找到最相关的工作组，并在他们的邮件列表中提问。如果没有活跃的工作组覆盖相关主题，尝试适当的领域的邮件列表。
\n提交勘误通常不是你应该采取的第一步——先和某人谈谈。
\n许多工作组现在使用 Github 来管理他们的规范；如果你对一个活跃的规范有问题，可以提出一个问题。如果它已经是 RFC，通常最好使用邮件列表，除非你找到相反的指示。
\n我相信还有更多关于如何阅读 RFC 的内容可以写，有些人会质疑我在这里写的内容，但这是我对它们的看法。希望它对你有用。
\n","tags":["rfc"]},{"id":"maglev","url":"https://yieldray.fun/posts/maglev","title":"Maglev - V8’s Fastest Optimizing JIT","date_published":"2024-07-08T15:58:30.000Z","date_modified":"2024-07-08T15:58:30.000Z","content_text":"\n\n原文：https://v8.dev/blog/maglev
\n
备注：Node.js 22 已默认启用 Maglev 编译器
在Chrome M117中，我们引入了一种新的优化编译器：Maglev。Maglev位于现有的Sparkplug和TurboFan编译器之间，肩负着快速生成足够优秀代码的任务。
\n直到2021年，V8有两个主要的执行层次：Ignition（解释器）和TurboFan，V8的优化编译器，专注于峰值性能。所有JavaScript代码首先被编译为Ignition字节码，并通过解释执行。在执行过程中，V8会跟踪程序的行为，包括对象形状和类型的跟踪。运行时执行元数据和字节码都被传递给优化编译器，以生成高性能、通常是投机性的机器代码，这些代码的运行速度远快于解释器。
\n这些改进在JetStream等基准测试中清晰可见，JetStream是一组传统的纯JavaScript基准测试，测量启动、延迟和峰值性能。TurboFan使V8运行该套件的速度提高了4.35倍！JetStream对稳态性能的强调比过去的基准测试（如已退休的Octane基准测试）有所减少，但由于许多项目的简单性，优化后的代码仍然占据了大部分时间。
\nSpeedometer是一种与JetStream不同的基准测试套件。它旨在通过计时模拟用户交互来衡量Web应用的响应能力。与较小的静态独立JavaScript应用不同，该套件由完整的网页组成，其中大多数是使用流行框架构建的。与大多数网页加载期间一样，Speedometer的项目在运行紧密的JavaScript循环上花费的时间要少得多，而更多地执行与浏览器其他部分交互的大量代码。
\nTurboFan在Speedometer上仍然有很大的影响：它的运行速度提高了超过1.5倍！但其影响显然比在JetStream上要小得多。这部分是因为完整的网页在纯JavaScript上的花费时间较少。但部分原因是基准测试花费了大量时间在没有足够热的函数上，这些函数无法被TurboFan优化。
\n![\"\"](\"https://v8.dev/_img/maglev/I-IT.svg\")
未优化和优化执行的Web性能基准测试
\n本文中的所有基准测试分数都是在13英寸M2 Macbook Air上使用Chrome 117.0.5897.3测量的。
\n由于Ignition和TurboFan之间的执行速度和编译时间差异如此之大，我们在2021年引入了一个新的基线JIT，名为Sparkplug。它旨在几乎瞬间将字节码编译为等效的机器代码。
\n在JetStream上，与Ignition相比，Sparkplug显著提高了性能（+45%）。即使在有TurboFan的情况下，我们仍然看到性能有了显著提高（+8%）。在Speedometer上，我们看到相对于Ignition的41%的改进，使其接近TurboFan的性能，并且相对于Ignition + TurboFan有22%的改进！由于Sparkplug非常快，我们可以很容易地广泛部署它并获得一致的加速。如果代码不完全依赖于容易优化的长时间运行的紧密JavaScript循环，它是一个很好的补充。
\n![\"\"](\"https://v8.dev/_img/maglev/I-IS-IT-IST.svg\")
添加了Sparkplug的Web性能基准测试
\n然而，Sparkplug的简单性对其能提供的加速有一个相对较低的上限。这从Ignition + Sparkplug和Ignition + TurboFan之间的巨大差距中可以清楚地看出。
\n这就是Maglev的用武之地，我们的新优化JIT，它生成的代码比Sparkplug代码快得多，但生成速度比TurboFan快得多。
\n当我们开始这个项目时，我们看到了两条前进的道路，以弥补Sparkplug和TurboFan之间的差距：要么尝试使用Sparkplug的单遍方法生成更好的代码，要么构建一个具有中间表示（IR）的JIT。由于我们认为在编译过程中完全没有IR可能会严重限制编译器，因此我们决定采用一种传统的静态单赋值（SSA）基础的方法，使用CFG（控制流图），而不是TurboFan更灵活但缓存不友好的节点海表示。
\n编译器本身设计得快速且易于工作。它有一组最小的遍和一个简单的单一IR，编码了专门的JavaScript语义。
\n首先，Maglev对字节码进行预处理，以找到分支目标，包括循环和循环中的变量赋值。此遍还收集活动信息，编码哪些变量中的值在哪些表达式中仍然需要。这些信息可以减少编译器稍后需要跟踪的状态量。
\n![\"\"](\"https://v8.dev/_img/maglev/graph.svg\")
命令行上的Maglev SSA图打印输出
\nMaglev对帧状态进行抽象解释，创建表示表达式求值结果的SSA节点。变量赋值通过将这些SSA节点存储在相应的抽象解释器寄存器中来模拟。在分支和切换的情况下，所有路径都被评估。
\n当多个路径合并时，抽象解释器寄存器中的值通过插入所谓的Phi节点来合并：这些值节点知道在运行时根据选择的路径选择哪个值。
\n循环可以“回到过去”合并变量值，当变量在循环体内被赋值时，数据从循环结束向循环头部反向流动。这就是预处理数据派上用场的地方：由于我们已经知道哪些变量在循环内被赋值，我们可以在开始处理循环体之前预先创建循环Phi。在循环结束时，我们可以用正确的SSA节点填充Phi输入。这使得SSA图生成成为单向遍，而不需要“修复”循环变量，同时最小化需要分配的Phi节点数量。
\n为了尽可能快，Maglev尽可能多地一次性完成。与其在后期优化阶段构建通用JavaScript图并降低其复杂性，这是一种理论上干净但计算上昂贵的方法，Maglev在图构建过程中尽可能多地完成。
\n在图构建过程中，Maglev会查看在未优化执行期间收集的运行时反馈元数据，并为观察到的类型生成专门的SSA节点。如果Maglev看到o.x并从运行时反馈中知道o总是具有一个特定的形状，它将生成一个SSA节点，在运行时检查o是否仍然具有预期的形状，然后是一个廉价的LoadField节点，它通过偏移进行简单访问。
此外，Maglev会生成一个旁节点，现在它知道了o的形状，使得以后不再需要检查形状。如果Maglev后来遇到一个没有反馈的操作，这种在编译期间学到的信息可以作为第二个反馈来源。
运行时信息可以有多种形式。有些信息需要在运行时检查，比如之前描述的形状检查。其他信息可以通过注册对运行时的依赖而无需运行时检查。实际上不变的全局变量（在初始化和Maglev看到其值之间未更改）属于这一类：Maglev不需要生成代码来动态加载和检查它们的身份。Maglev可以在编译时加载值并将其直接嵌入机器代码中；如果运行时更改了该全局变量，它也会负责使该机器代码失效并进行去优化。
\n某些形式的信息是不稳定的。这种信息只能在编译器确定它不会更改的情况下使用。例如，如果我们刚刚分配了一个对象，我们知道它是一个新对象，可以完全跳过昂贵的写屏障。一旦有了另一个潜在的分配，垃圾收集器可能已经移动了对象，我们现在需要发出这样的检查。其他信息是稳定的：如果我们从未见过任何对象从具有某个特定形状过渡出去，那么我们可以注册对此事件的依赖（任何对象从该特定形状过渡出去），并且不需要重新检查对象的形状，即使是在调用具有未知副作用的未知函数之后。
\n鉴于Maglev可以使用在运行时检查的投机信息，Maglev代码需要能够进行去优化。为实现这一点，Maglev将抽象解释器帧状态附加到可以去优化的节点。此状态将解释器寄存器映射到SSA值。这种状态在代码生成期间变成元数据，提供从优化状态到未优化状态的映射。去优化器解释这些数据，从解释器帧和机器寄存器中读取值并将它们放入解释所需的位置。这建立在与TurboFan使用的相同的去优化机制之上，使我们能够共享大部分逻辑并利用现有系统的测试。
\n根据规范，JavaScript数字表示64位浮点值。这并不意味着引擎必须总是将它们存储为64位浮点值，特别是因为实际上许多数字是小整数（例如数组索引）。V8尝试将数字编码为31位标记整数（内部称为“小整数”或“Smi”），以节省内存（由于指针压缩为32位），并提高性能（整数操作比浮点操作快）。
\n为了使数值密集的JavaScript代码运行得更快，选择值节点的最佳表示非常重要。与解释器和Sparkplug不同，优化编译器一旦知道类型，就可以取消值的装箱，操作原始数字而不是表示数字的JavaScript值，并且只有在绝对必要时才重新装箱。浮点数可以直接在浮点寄存器中传递，而不是分配包含浮点数的堆对象。
\nMaglev主要通过查看运行时反馈（例如二元操作）来了解SSA节点的表示，并通过已知节点信息机制向前传播这些信息。当具有特定表示的SSA值流入Phi节点时，需要选择支持所有输入的正确表示。循环Phi再次很棘手，因为循环内的输入在应为Phi选择表示之后看到——与图构建相同的“回到过去”问题。这就是为什么Maglev在图构建之后有一个单独的阶段来对循环Phi进行表示选择。
\n在图构建和表示选择之后，Maglev大致知道它想生成什么样的代码，并且从经典的优化角度来看已经“完成”。然而，为了能够生成代码，我们需要选择SSA值在执行机器代码时的实际位置；它们何时在机器寄存器中，何时在堆栈上保存。这通过寄存器分配来完成。
\n每个Maglev节点都有输入和输出要求，包括对临时变量的要求。寄存器分配器对图进行单次前向遍历，维护一个与图构建期间维护的抽象解释状态非常相似的抽象机器寄存器状态，并满足这些要求，用实际位置替换节点的要求。这些位置随后可用于代码生成。
\n首先，预处理遍历图以找到节点的线性生命周期范围，以便我们可以在不再需要SSA节点时释放寄存器。此预处理还跟踪使用链。知道一个值在未来需要多长时间可以帮助我们决定优先考虑哪些值，以及在寄存器用完时放弃哪些值。
\n在预处理之后，寄存器分配运行。寄存器分配遵循一些简单的局部规则：如果一个值已经在寄存器中，则尽可能使用该寄存器。节点在图遍历过程中跟踪它们存储到的寄存器。如果节点尚未有寄存器，但有一个空闲寄存器，则选择它。节点会更新以指示它在寄存器中，并且抽象寄存器状态会更新以知道它包含节点。如果没有空闲寄存器但需要寄存器，则另一个值会被推出寄存器。理想情况下，我们有一个已经在不同寄存器中的节点，可以“免费”丢弃它；否则，我们选择一个不需要很长时间的值，并将其溢出到堆栈上。
\n在分支合并时，来自传入分支的抽象寄存器状态会合并。我们尽量保持尽可能多的值在寄存器中。这可能意味着我们需要引入寄存器到寄存器的移动，或者可能需要从堆栈中取消溢出值，使用称为“间隙移动”的移动。如果分支合并有一个Phi节点，寄存器分配将为Phi分配输出寄存器。Maglev倾向于将Phi的输出分配给与其输入相同的寄存器，以最小化移动。
\n如果Maglev帧中的SSA值比寄存器更多，我们将需要将一些值溢出到堆栈上，并在以后取消溢出。遵循Maglev的精神，我们保持简单：如果一个值需要溢出，它会被追溯告知在定义时立即溢出（在值创建之后），代码生成将处理发出溢出代码。定义保证“支配”所有值的使用（到达使用点必须经过定义点，因此经过溢出代码）。这也意味着溢出的值在代码的整个持续时间内将只有一个溢出槽；具有重叠生命周期的值将因此具有不重叠的分配溢出槽。
\n由于表示选择，Maglev帧中的某些值将是标记指针，V8的GC理解并需要考虑的指针；而某些值将是未标记的，GC不应查看的值。TurboFan通过精确跟踪哪些堆栈槽包含标记值，哪些包含未标记值来处理这一点，这在执行过程中会发生变化，因为槽被重新用于不同的值。对于Maglev，我们决定保持简单，以减少跟踪所需的内存：我们将堆栈帧分为标记和未标记区域，并且只存储这个分割点。
\n一旦我们知道要为哪些表达式生成代码，以及要将它们的输出和输入放在哪里，Maglev就准备生成代码了。
\nMaglev节点直接知道如何使用“宏汇编器”生成汇编代码。例如，一个CheckMap节点知道如何发出汇编指令，将输入对象的形状（内部称为“映射”）与已知值进行比较，如果对象具有错误的形状，则进行去优化。
处理间隙移动的代码有些棘手：寄存器分配器创建的请求移动知道一个值在某处需要去另一个地方。然而，如果有一系列这样的移动，前面的移动可能会覆盖后续移动所需的输入。并行移动解析器计算如何安全地执行这些移动，以便所有值都能到达正确的位置。
\n那么，我们刚刚介绍的编译器显然比Sparkplug复杂得多，但比TurboFan简单得多。它表现如何？
\n在编译速度方面，我们成功地构建了一个比Sparkplug慢约10倍，比TurboFan快约10倍的JIT。
\n![\"\"](\"https://v8.dev/_img/maglev/compile-time.svg\")
JetStream中所有编译函数的编译时间比较
\n这使我们能够比想要部署TurboFan更早地部署Maglev。如果它依赖的反馈最终不太稳定，去优化和重新编译的成本并不高。这也使我们可以稍后使用TurboFan：我们运行的速度远快于使用Sparkplug。
\n将Maglev插入Sparkplug和TurboFan之间，带来了显著的基准测试改进：
\n![\"\"](\"https://v8.dev/_img/maglev/I-IS-IT-IST-ISTM.svg\")
包含Maglev的Web性能基准测试
\n我们还在实际数据上验证了Maglev，并在核心Web指标上看到了良好的改进。
\n由于Maglev编译速度更快，并且我们现在可以在编译TurboFan函数之前等待更长时间，这带来了一个不太明显的次要好处。基准测试关注主线程延迟，但Maglev也显著减少了V8的整体资源消耗，使用更少的线程外CPU时间。可以在基于M1或M2的Macbook上使用taskinfo轻松测量进程的能量消耗。
| 基准测试 | \n能量消耗 | \n
|---|---|
| JetStream | \n-3.5% | \n
| Speedometer | \n-10% | \n
Maglev还远未完成。我们还有很多工作要做，还有更多的想法要尝试，还有更多的低垂果实要采摘——随着Maglev的完善，我们预计会看到更高的分数和更多的能量消耗减少。
\nMaglev现在已经可以在桌面版Chrome上使用，并将很快推广到移动设备。
\n","tags":["v8"]},{"id":"libuv-overview","url":"https://yieldray.fun/posts/libuv-overview","title":"libuv 概览","date_published":"2024-07-01T14:14:14.000Z","date_modified":"2024-07-01T14:14:14.000Z","content_text":"总结：libuv 是围绕事件驱动的异步 I/O 模型设计的 跨平台 C 库。
\nlibuv 的主要组件包括：
\n\n\n使用说明，另见 UserGuide 翻译
\n
libuv 是一个跨平台支持库，最初是为 Node.js 编写的。它围绕事件驱动的异步 I/O 模型设计。
\n该库不仅仅是对不同 I/O 轮询机制的简单抽象：'handles' 和 'streams' 提供了对套接字和其他实体的高级抽象；还提供了跨平台的文件 I/O 和线程功能等。
\n下图展示了 libuv 的不同组成部分及其相关的子系统：
\n
libuv 提供了两种与事件循环配合使用的抽象：handles 和 requests。
\nHandles 表示能够在活动状态下执行某些操作的长生命周期对象。例如：
\nRequests 通常表示短生命周期的操作。这些操作可以在 handle 上执行：写请求用于在 handle 上写入数据；也可以独立执行：getaddrinfo 请求不需要 handle，它们直接在循环上运行。
\nI/O（或事件）循环是 libuv 的核心部分。它为所有 I/O 操作建立了上下文，并且应该与单个线程绑定。可以在不同的线程中运行多个事件循环。libuv 事件循环（或任何涉及循环或 handles 的 API）不是线程安全的，除非另有说明。
\n事件循环遵循常见的单线程异步 I/O 方法：所有（网络）I/O 都在非阻塞套接字上执行，使用给定平台上最好的机制进行轮询：Linux 上的 epoll，OSX 和其他 BSD 上的 kqueue，SunOS 上的事件端口和 Windows 上的 IOCP。作为循环迭代的一部分，循环将阻塞等待已添加到轮询器的套接字上的 I/O 活动，并触发回调以指示套接字状态（可读、可写、挂起），以便 handles 可以读取、写入或执行所需的 I/O 操作。
\n为了更好地理解事件循环的操作，以下图示说明了循环迭代的所有阶段：
\n![\"_images/loop_iteration.png\"](\"https://docs.libuv.org/en/v1.x/_images/loop_iteration.png\")
循环的“现在”概念最初被设置。
\n如果循环是用 UV_RUN_DEFAULT 运行的，则运行到期的定时器。所有计划在循环的现在之前的活动定时器都会调用其回调函数。
如果循环是活跃的，则开始一次迭代，否则循环会立即退出。那么，什么时候循环被认为是活跃的呢？如果循环有活动且引用的 handles、活动请求或正在关闭的 handles，则被认为是活跃的。
\n调用挂起的回调。所有 I/O 回调在大多数情况下在轮询 I/O 后立即调用。但是，在某些情况下，调用此类回调会被推迟到下一次循环迭代。如果前一次迭代推迟了任何 I/O 回调，它将在此时运行。
\n调用 idle handle 回调。尽管名称不幸，idle handles 在每次循环迭代时都会运行，如果它们是活动的。
\n调用 prepare handle 回调。Prepare handles 在循环即将阻塞 I/O 之前调用其回调函数。
\n计算轮询超时。在阻塞 I/O 之前，循环会计算应阻塞多长时间。计算超时的规则如下：
\n\n\n\n
\n- 如果循环是用
\nUV_RUN_NOWAIT标志运行的，超时为 0。- 如果循环即将停止（调用了
\nuv_stop()），超时为 0。- 如果没有活动的 handles 或请求，超时为 0。
\n- 如果有任何活动的 idle handles，超时为 0。
\n- 如果有任何待关闭的 handles，超时为 0。
\n- 如果以上情况都不符合，则取最近的定时器的超时，如果没有活动的定时器，则为无限大。
\n
循环阻塞 I/O。此时，循环将阻塞 I/O，持续时间为上一步计算的时间。所有监视给定文件描述符的读或写操作的 I/O 相关 handles 在此时调用其回调函数。
\n调用 check handle 回调。Check handles 在循环阻塞 I/O 后立即调用其回调函数。Check handles 本质上是 prepare handles 的对应物。
\n调用关闭回调。如果通过调用 uv_close() 关闭了一个 handle，它将调用关闭回调。
更新循环的“现在”概念。
\n运行到期的定时器。请注意，“现在”不会在下一个循环迭代之前再次更新。因此，如果在处理其他定时器时有一个定时器到期，它将在下一个事件循环迭代之前不会运行。
\n迭代结束。如果循环是用 UV_RUN_NOWAIT 或 UV_RUN_ONCE 模式运行的，迭代结束并且 uv_run() 将返回。如果循环是用 UV_RUN_DEFAULT 运行的，并且仍然活跃，则它将从头开始继续，否则它也将结束。
重要提示
\nlibuv 使用线程池使异步文件 I/O 操作成为可能，但网络 I/O 始终在单个线程中执行，即每个循环的线程。
\n注意
\n尽管轮询机制不同，libuv 使得在 Unix 系统和 Windows 上的执行模型保持一致。
\n与网络 I/O 不同，libuv 没有可以依赖的平台特定文件 I/O 原语，因此当前的方法是在线程池中运行阻塞的文件 I/O 操作。
\n有关跨平台文件 I/O 详细解释，请查看这篇文章。
\nlibuv 目前使用全局线程池，所有循环都可以在此池中排队工作。目前在此池中运行 3 种类型的操作：
\n\n\n\n
\n- 文件系统操作
\n- DNS 函数（getaddrinfo 和 getnameinfo）
\n- 用户指定的代码通过
\nuv_queue_work()运行
\n\n","tags":["c","lib","node.js"]},{"id":"v8-trash-talk","url":"https://yieldray.fun/posts/v8-trash-talk","title":"v8 垃圾回收：Orinoco 垃圾回收器","date_published":"2024-06-30T14:14:14.000Z","date_modified":"2024-06-30T14:14:14.000Z","content_text":"补充说明：
\n
上面提到的文章主要说明为何文件操作不使用操作系统异步IO（如 AIO）而是使用线程池。不过新版本 libuv 也开始使用 io_uring 了。
从 libuv v1.45.0 开始，Linux上的一些文件操作在可能的情况下将转移到 io_uring。除了吞吐量有时会显著增加外，观察到的行为没有变化。当必要的内核特性不可用或不合适时，Libuv 会回退到使用其线程池。
\n\n原文：https://v8.dev/blog/trash-talk
\n
延申阅读：https://www.jayconrod.com/posts/55/a-tour-of-v8--garbage-collection
过去几年里，V8垃圾回收器（GC）发生了很大变化。Orinoco 项目将一个顺序的、全停顿的垃圾回收器转变为一个主要并行和并发的回收器，并具有增量回退功能。
\n任何垃圾回收器都有一些必须定期执行的基本任务：
\n这些任务可以按顺序执行，也可以任意交错。一个简单的方法是暂停JavaScript执行，并在主线程上按顺序执行每个任务。这可能会导致主线程上的卡顿和延迟问题，我们在之前的博客文章中谈到过，还会减少程序的吞吐量。
\n主要GC从整个堆中收集垃圾。
\n![\"\"](\"https://v8.dev/_img/trash-talk/01.svg\")
主要GC分为三个阶段：标记、清扫和压缩。
\n确定哪些对象可以被回收是垃圾回收的一个重要部分。垃圾回收器通过使用可达性作为“存活性”的代理来实现这一点。这意味着任何当前在运行时可达的对象都必须保留，而任何不可达的对象都可以被回收。
\n标记是找到可达对象的过程。GC从一组已知的对象指针（称为根集）开始。这包括执行堆栈和全局对象。然后它跟踪每个指向JavaScript对象的指针，并将该对象标记为可达。GC跟踪该对象中的每个指针，并递归地继续这一过程，直到找到并标记所有在运行时可达的对象。
\n清扫是将死亡对象留下的内存空隙添加到一个称为空闲列表的数据结构中的过程。标记完成后，GC找到不可达对象留下的连续空隙，并将它们添加到适当的空闲列表中。空闲列表按内存块的大小分开，以便快速查找。将来当我们想要分配内存时，只需查看空闲列表并找到一个合适大小的内存块。
\n主要GC还根据碎片化启发式选择一些页面进行清空/压缩。你可以将压缩类比为旧PC上的硬盘碎片整理。我们将存活的对象复制到未被压缩的其他页面（使用该页面的空闲列表）。这样，我们可以利用死亡对象留下的内存中的小而分散的空隙。
\n复制存活对象的垃圾回收器的一个潜在弱点是，当我们分配大量长寿命对象时，我们需要付出高昂的复制这些对象的成本。这就是为什么我们选择只压缩一些高度碎片化的页面，而对其他页面只进行清扫，不复制存活对象。
\nV8中的堆被分为不同的区域，称为代。有一个年轻代（进一步分为“新生代”和“中生代”），还有一个老年代。对象首先分配到新生代。如果它们在下一次GC中存活下来，它们仍然留在年轻代，但被视为“中生代”。如果它们再一次GC中存活下来，它们会被移动到老年代。
\n![\"\"](\"https://v8.dev/_img/trash-talk/02.svg\")
V8堆被分为代。对象在GC存活后会在代之间移动。
\n在垃圾回收中有一个重要的术语：“分代假说”。这基本上是指大多数对象很快就会死亡。换句话说，从GC的角度来看，大多数对象在分配后几乎立即变得不可达。这不仅适用于V8或JavaScript，还适用于大多数动态语言。
\nV8的分代堆布局旨在利用这一对象寿命的事实。GC是一个压缩/移动GC，这意味着它会复制在垃圾回收中存活的对象。这看起来是反直觉的：在GC时复制对象是昂贵的。但我们知道，根据分代假说，只有很小一部分对象实际上会在垃圾回收中存活。通过只移动存活的对象，其他所有分配都变成了“隐式”垃圾。这意味着我们只需要支付与存活对象数量成比例的成本（用于复制），而不是分配的数量。
\nV8中有两个垃圾回收器。 主要GC（标记-压缩）从整个堆中收集垃圾。**次要GC（清扫器）**在年轻代中收集垃圾。主要GC在从整个堆中收集垃圾方面非常有效，但分代假说告诉我们，新分配的对象非常可能需要垃圾回收。
\n在清扫器中，它只在年轻代中收集垃圾，存活的对象总是被转移到一个新页面。V8对年轻代使用“半空间”设计。这意味着总有一半的空间是空的，以便进行这个转移步骤。在清扫期间，这个最初为空的区域称为“目标空间”。我们从中复制的区域称为“源空间”。在最坏的情况下，每个对象都可能在清扫中存活，我们需要复制每个对象。
\n对于清扫，我们有一组额外的根，这些根是从老代到新代的引用。这些是老空间中指向年轻代对象的指针。与其为每次清扫跟踪整个堆图，我们使用写屏障来维护一个从老到新的引用列表。结合堆栈和全局对象，我们知道每个指向年轻代的引用，而不需要跟踪整个老代。
\n转移步骤将所有存活的对象移动到一个连续的内存块（在一个页面内）。这具有完全消除碎片化的优点，即死亡对象留下的空隙。然后我们交换两个空间，即目标空间变为源空间，反之亦然。一旦GC完成，新分配就会发生在源空间中的下一个空闲地址。
\n![\"\"](\"https://v8.dev/_img/trash-talk/03.svg\")
清扫器将存活的对象转移到一个新的页面。
\n仅靠这种策略，我们很快就会在年轻代中耗尽空间。第二次GC中存活的对象被转移到老年代，而不是目标空间。
\n清扫的最后一步是更新引用原始对象的指针，这些对象已被移动。每个复制的对象留下一个转发地址，用于更新原始指针以指向新位置。
\n![\"\"](\"https://v8.dev/_img/trash-talk/04.svg\")
清扫器将“中生代”对象转移到老年代，将“新生代”对象转移到一个新的页面。
\n在清扫中，我们实际上将这三个步骤——标记、转移和指针更新——交错进行，而不是分阶段进行。
\n这些算法和优化大多在垃圾回收文献中很常见，并且可以在许多垃圾回收语言中找到。但最先进的垃圾回收已经走了很长的路。衡量垃圾回收时间的一个重要指标是主线程在执行GC时暂停的时间。对于传统的“全停顿”垃圾回收器，这段时间可能会累积，这段时间直接影响用户体验，表现为页面卡顿和渲染和延迟不佳。
\n![\"\"](\"https://v8.dev/_img/v8-orinoco.svg\")
Orinoco是V8垃圾回收器项目的代号，旨在利用最新和最先进的并行、增量和并发技术进行垃圾回收，以释放主线程。有些术语在GC上下文中有特定的含义，值得详细定义。
\n并行是指主线程和辅助线程在同一时间做大致相同的工作。这仍然是一种“全停顿”的方法，但总暂停时间现在被参与线程的数量（加上一些同步开销）除以。这是三种技术中最简单的一种。JavaScript堆暂停，因为没有JavaScript在运行，所以每个辅助线程只需要确保它同步访问任何其他辅助线程可能也想访问的对象。
\n![\"\"](\"https://v8.dev/_img/trash-talk/05.svg\")
主线程和辅助线程同时处理相同的任务。
\n增量是指主线程间歇性地做少量工作。我们不会在增量暂停中完成整个GC，只是完成GC所需总工作量的一小部分。这更困难，因为在每个增量工作段之间JavaScript会执行，这意味着堆的状态发生了变化，可能会使之前的增量工作无效。从图中可以看出，这并没有减少主线程上花费的时间（实际上通常会略微增加），只是将其分散在一段时间内。这仍然是解决我们最初问题的一个好技术：主线程延迟。通过允许JavaScript间歇性运行，同时继续进行垃圾回收任务，应用程序仍然可以响应用户输入并在动画上取得进展。
\n![\"\"](\"https://v8.dev/_img/trash-talk/06.svg\")
GC任务的小块与主线程执行交错进行。
\n并发是指主线程不断执行JavaScript，而辅助线程完全在后台进行GC工作。这是三种技术中最困难的一种：JavaScript堆上的任何东西都可能随时改变，使我们之前所做的工作无效。除此之外，还有读取/写入竞争的问题，因为辅助线程和主线程同时读取或修改相同的对象。这里的优点是主线程完全可以自由地执行JavaScript——尽管由于与辅助线程的一些同步，存在一些小的开销。
\n![\"\"](\"https://v8.dev/_img/trash-talk/07.svg\")
GC任务完全在后台进行。主线程可以自由运行JavaScript。
\n今天，V8使用并行清扫将年轻代GC的工作分配到辅助线程中。每个线程接收若干指针，跟踪这些指针，积极地将任何存活的对象转移到目标空间。清扫任务在尝试转移对象时必须通过原子读取/写入/比较并交换操作进行同步；另一个清扫任务可能通过不同路径找到相同的对象并也尝试移动它。成功移动对象的辅助线程然后返回并更新指针。它留下一个转发指针，以便其他工作线程找到对象时可以更新其他指针。为了快速无同步地分配存活对象，清扫任务使用线程本地分配缓冲区。
\n![\"\"](\"https://v8.dev/_img/trash-talk/08.svg\")
并行清扫将清扫工作分配到多个辅助线程和主线程中。
\nV8中的主要GC从并发标记开始。当堆接近动态计算的限制时，启动并发标记任务。每个辅助线程接收若干指针，跟踪这些指针，并在跟踪从发现的对象的所有引用时标记每个找到的对象。并发标记完全在后台进行，而JavaScript在主线程上执行。写屏障用于跟踪JavaScript在辅助线程并发标记时创建的对象之间的新引用。
\n![\"\"](\"https://v8.dev/_img/trash-talk/09.svg\")
主要GC使用并发标记和清扫，并行压缩和指针更新。
\n当并发标记完成或达到动态分配限制时，主线程执行快速标记完成步骤。主线程暂停在此阶段开始。这代表了主要GC的总暂停时间。主线程再次扫描根，以确保所有存活对象都被标记，然后与若干辅助线程一起，开始并行压缩和指针更新。老空间中的所有页面都不适合压缩——那些不适合的页面将使用前面提到的空闲列表进行清扫。主线程在暂停期间启动并发清扫任务。这些任务与并行压缩任务和主线程本身并发运行——即使JavaScript在主线程上运行，它们也可以继续。
\nJavaScript用户无法直接访问垃圾回收器；它完全是实现定义的。然而，V8确实提供了一种机制，允许嵌入器触发垃圾回收，即使JavaScript程序本身不能。GC可以发布“空闲任务”，这些任务是最终会被触发的可选工作。像Chrome这样的嵌入器可能对空闲时间有一些概念。例如，在Chrome中，以60帧每秒的速度，浏览器大约有16.6毫秒来渲染动画的每一帧。如果动画工作提前完成，Chrome可以选择在下一帧之前的空闲时间运行一些GC创建的空闲任务。
\n![\"\"](\"https://v8.dev/_img/trash-talk/10.svg\")
空闲GC利用主线程的空闲时间主动执行GC工作。
\n欲了解更多详细信息，请参阅我们关于空闲时间GC的深入出版物。
\nV8中的垃圾回收器自其诞生以来已经走了很长的路。将并行、增量和并发技术添加到现有GC中是一个多年的努力，但它已经取得了回报，将大量工作移到了后台任务中。它大大改善了暂停时间、延迟和页面加载，使动画、滚动和用户交互更加流畅。并行清扫器减少了主线程年轻代垃圾回收总时间约20%–50%，具体取决于工作负载。空闲时间GC可以在Gmail空闲时减少45%的JavaScript堆内存。并发标记和清扫在重度WebGL游戏中将暂停时间减少了多达50%。
\n但工作还没有结束。减少垃圾回收暂停时间对于为用户提供最佳的网络体验仍然很重要，我们正在研究更先进的技术。除此之外，Chrome中的渲染器Blink也有一个垃圾回收器（称为Oilpan），我们正在努力改进两个回收器之间的协作，并将Orinoco的一些新技术移植到Oilpan中。
\n大多数开发者在开发JavaScript程序时不需要考虑GC，但了解一些内部机制可以帮助你思考内存使用和有益的编程模式。例如，V8堆的分代结构中，从垃圾回收器的角度来看，短命对象实际上非常便宜，因为我们只为存活的对象付费。这种模式在许多垃圾回收语言中都很有效，不仅仅是JavaScript。
\n","tags":["v8"]},{"id":"linux-ipc","url":"https://yieldray.fun/posts/linux-ipc","title":"Linux IPC","date_published":"2024-06-18T17:00:00.000Z","date_modified":"2024-10-20T17:00:00.000Z","content_text":"C 标准库提供的程序支持工具，与 IPC 相关的主要有以下：（只讨论平台无关的手段）
\nint system( const char *command ); 用于向宿主 Shell 发送命令 （注意 popen 等函数是 POSIX 函数，所有这里无法访问子进程 I/O）char *getenv( const char *name ); 用于读取环境变量 （注意 setenv 等函数是 POSIX 函数，所以这里无法传递环境变量）
另外，信号是无需考虑的，因为唯一的信号相关函数 raise 只能向进程自身发送信号。
不过，仅使用标准库是可以实现创建文件（fopen）、读写文件、删除文件（remove）的。（理论上可以完成 IPC，不过没有同步机制）
因此，仅有的 IPC 方式有：
\n并且无法实现同步。
\nWarning
\n这里仅以 Linux 为例，不讨论实现的内核版本、不讨论达到系统限制（如超出某些缓冲区）的情况。
细节方面，例如 C 标准库 I/O 缓冲，不在讨论范围之内。
也不关心：某个系统调用是否是基于其它系统调用，因为它们可能是平台相关的。
本文不是一个 Linux 系统调用的教程。
首先在 Linux 上，上面提到的 C 标准库扩展 POSIX API 当然是可用的。
不过注意 FILE *popen(const char *command, const char *type); 的 type 参数只能指定只读或只写，因此无法实现双向通信。
下面我们就不再局限于 C 标准库（及其扩展），放眼 Linux 原语。
\nTip
\n文件描述符可通过 fork 传递给子进程；在 exec 之后，文件描述符是否保留取决于是否设置了 Close-on-exec。
因此这里可以实现父子进程读写同一文件。另外 pipe/socketpair 等通信方式就是基于此机制的，此下文再讨论。
理论上来说，甚至可以通过监控文件事件（inotify，Linux API）来实现通用 IPC，不过这显然没有什么实用性。
TLPI 将 IPC 分为以下 3 类（但是本文不考虑同步）：![\"ipc.png\"](\"https://s2.loli.net/2024/06/18/lLGKo7csJhrnzmA.png\")
| 工具类型 | \n用于识别对象的名称 | \n用于在程序中引用对象的句柄 | \n数据传输模型 | \n传输形式 | \n
|---|---|---|---|---|
| 管道 | \n没有名称 | \n文件描述符 | \n读写流控 | \n字节流 | \n
| FIFO | \n路径名 | \n文件描述符 | \n读写流控 | \n字节流 | \n
| UNIX domain socket | \n路径名 | \n文件描述符 | \n读写流控 | \n字节流/消息 | \n
| Internet domain socket | \nIP 地址+端口号 | \n文件描述符 | \n读写流控 | \n字节流/消息 | \n
| System V 消息队列 | \nSystem V IPC 键 | \nSystem V IPC 标识符 | \n读写流控 | \n消息 | \n
| System V 信号量 | \nSystem V IPC 键 | \nSystem V IPC 标识符 | \n同步 | \n无 | \n
| System V 共享内存 | \nSystem V IPC 键 | \nSystem V IPC 标识符 | \n共享内存 | \n无 | \n
| POSIX 消息队列 | \nPOSIX IPC 路径名 | \nmqd_t (消息队列描述符) | \n读写流控 | \n消息 | \n
| POSIX 命名信号量 | \nPOSIX IPC 路径名 | \nsem_t * (信号量指针) | \n同步 | \n无 | \n
| POSIX 无名信号量 | \n没有名称 | \nsem_t * (信号量指针) | \n同步 | \n无 | \n
| POSIX 共享内存 | \nPOSIX IPC 路径名 | \n文件描述符 | \n共享内存 | \n无 | \n
| 匿名映射 | \n无 | \n文件描述符 | \n共享内存 | \n无 | \n
| 内存映射文件 | \n路径名 | \n文件描述符 | \n共享内存 | \n无 | \n
flock() 文件锁 | \n路径名 | \n文件描述符 | \n同步 | \n无 | \n
fcntl() 文件锁 | \n路径名 | \n文件描述符 | \n同步 | \n无 | \n
| 终端/伪终端 | \n路径名 | \n文件描述符 | \n读写流控 | \n字节流 | \n
信号分为两种：
\n\n\n前提：
\n
对于普通进程来说，发送信号（kill）的进程的 RUID 或 EUID 需要匹配于接受者的 RUID 或 SetUID。
\n\n从实际角度看：
\n
标准信号中可供应用随意使用的信号仅有两个：SIGUSR1 和 SIGUSR2；实时信号的信号范围有所扩大，可应用于应用程序自定义的目的。
此外，实时信号可为信号指定伴随数据（一整型数或者指针值），并且对于等待中的信号有优先级机制（编号越小优先级越高）。
由于信号能够打断程序的正常运行，因此信号处理器中调用的函数（显然也包括处理器函数本身）需要是异步信号安全的（AS-Safe）。
即满足：函数是可重入的，或者信号处理器函数无法将该函数中断（如果该函数不会导致信号发生，那么当然就不可能会“重入”）。
从实践的角度看，基本不可能禁止主程序去调用不可中断函数，因此为了保证信号处理函数是异步信号安全的，必须保证信号处理函数中不调用不安全的函数。简单来说，最好保持信号处理程序尽可能简单。
\n\n考虑实践性：
\n
信号在 Unix 中会被认为是一种比较原始和存在缺陷的 IPC 和进程控制机制。
我们需要考虑：\n
\n- 异步性（信号可能在任何时候中断进程的正常执行流程）与竞争条件（信号处理函数与主程序逻辑上是并发的）
\n- 信号处理程序的限制和信号丢失的可能（正如上面讨论过的）
\n- 难以调试，因为它是异步的
\n
总的来说：信号是任意向的（具有适当的进程操纵凭证）、只能携带很少数据（信号编号 + 实时信号额外的 union sigval）。
因此只适合传递简单的信息（消息），例如通知某事件已发生。
匿名管道（简称：管道）实际上是很常见的，Shell 管道（|）和 popen() 都是基于它实现的。
管道具有以下性质：
\n命名管道（简称：FIFO）的“命名”指在文件系统有一个标识（即路径）。
\n通过 mkfifo(3) 在文件系统中创建一个命名管道，它可以被拥有合适的权限的任意进程打开。
除此之外，其运作方式与管道完全一样。
在默认情况下，为读取数据（O_RDONLY）而打开一个 FIFO 会被阻塞直到另一个进程为写入数据（O_WRONLY）而打开了该 FIFO，反之亦然。
要通过 void *mmap(void addr[.length], size_t length, int prot, int flags, int fd, off_t offset); 来 IPC，那必然要使用共享映射（MAP_SHARED）。
对于匿名映射（MAP_ANONYMOUS），因为不存在对应的文件，要求两个进程是父子关系：fork() 的子进程会继承映射，因此父子进程就共享了同样的内存物理分页（不过执行 exec() 时映射会丢失）。
共享映射时，任意两个进程间打开（open）同一个文件即可。简单来说，两个进程映射区域的页表项指向物理内存的同一个映射页面，而内核负责管理物理内存映射页面于被映射文件区域的 I/O。
显然，共享内存的优势之一就是内核无需在内核态内存中维护额外的缓冲区，用于与用户态内存之间交换数据。
套接字可以说是唯一跨（网络间的）主机的 ICP 方式（Internet Domain Socket），当然用于本机进程间也是可以的（Unix Domain Socket）。
\nint socket(int domain, int type, int protocol);
| 域（domain） | \n执行的通信 | \n应用程序间的通信 | \n地址格式 | \n地址结构 | \n
|---|---|---|---|---|
| AF_UNIX | \n内核中 | \n同一主机 | \n路径名 | \nsockaddr_un | \n
| AF_INET | \n通过 IPv4 | \n通过 IPv4 网络连接起来的主机 | \n32 位 IPv4 地址 + 16 位端口号 | \nsockaddr_in | \n
| AF_INET6 | \n通过 IPv6 | \n通过 IPv6 网络连接起来的主机 | \n128 位 IPv6 地址 + 16 位端口号 | \nsockaddr_in6 | \n
| 类型（type） | \n描述 | \n默认协议 | \n
|---|---|---|
| SOCK_STREAM | \n有序的、可靠的、双向的、面向连接的字节流 | \nTCP (Transmission Control Protocol) | \n
| SOCK_DGRAM | \n固定长度的、无连接的、不可靠的报文传递 | \nUDP (User Datagram Protocol) | \n
| SOCK_RAW | \nIP协议的数据报接口（在POSIX.1中为可选） | \nIP (Internet Protocol) | \n
| SOCK_SEQPACKET | \n固定长度的、有序的、可靠的、面向连接的报文传递 | \nSCTP (Stream Control Transmission Protocol) | \n
| 协议 | \n描述 | \n
|---|---|
| 0 | \n为给定的域和套接字类型选择默认协议 | \n
| IPPROTO_IP | \nIPv4 网际协议 | \n
| IPPROTO_IPV6 | \nIPv6 网际协议（在 POSX.1 中为可选） | \n
| IPPROTO_ICMP | \n因特网控制报文协议（Internet Control Message Protocol） | \n
| IPPROTO_RAW | \n原始 IP 数据包协议（在 POSX.1 中为可选） | \n
| IPPROTO_TCP | \n传输控制协议 | \n
| IPPROTO_UDP | \n用户数据报协议（User Datagram Protocol） | \n
详细参见 man 手册。另外，也可查看中文版 man 手册的 socket(7) 页面。
\nNote
\n仅概述
\nSystemV IPC 使用不同于文件描述符的机制，内核内部维护一组 SystemV IPC 对象。
\n| 特征 | \n消息队列 | \n信号量 | \n共享内存 | \n
|---|---|---|---|
| 头文件 | \n<sys/msg.h> | \n<sys/sem.h> | \n<sys/shm.h> | \n
| 关联数据结构 | \nmsqid_ds | \nsemid_ds | \nshmid_ds | \n
| 创建/打开对象 | \nmsgget() | \nsemget() | \nshmget(), shmat() | \n
| 关闭对象 | \n（无） | \n（无） | \nshmdt() | \n
| 控制操作 | \nmsgctl() | \nsemctl() | \nshmctl() | \n
| 执行IPC | \nmsgsnd(), msgrcv() | \nsemop() | \n（无） | \n
Note
\n仅概述
\n相比于System V IPC，POSIX IPC与 Linux 系统 I/O 模型更一致。
\n| 特征 | \n消息队列 | \n信号量 | \n共享内存 | \n
|---|---|---|---|
| 头文件 | \n<mqueue.h> | \n<semaphore.h> | \n<sys/mman.h> | \n
| 对象句柄 | \nmqd_t | \nsem_t * | \nint（文件描述符） | \n
| 创建/打开 | \nmq_open() | \nsem_open() | \nshm_open() + mmap() | \n
| 关闭 | \nmq_close() | \nsem_close() | \nmunmap() | \n
| 断开链接 | \nmq_unlink() | \nsem_unlink() | \nshm_unlink() | \n
| 执行IPC | \nmq_send(), mq_receive() | \nsem_post(), sem_wait() | \n在共享区域中的位置上操作 | \n
| 其他操作 | \nmq_setattr() 设置特性 | \nsem_getvalue() | \n- | \n
| \n | mq_getattr() 获取特性 | \nsem_init() 初始化未命名信号量 | \n- | \n
| \n | mq_notify() 请求通知 | \nsem_destroy() 销毁未命名信号量 | \n- | \n
每个 socket 实现都至少提供了两种 socket 类型
\n| 特征 | \n流 | \n数据报 | \n
|---|---|---|
| 可靠地传递 | \n✔ | \n✘ | \n
| 消息边界保留 | \n✘ | \n✔ | \n
| 面向连接 | \n✔ | \n✘ | \n
伪终端机制可实现父进程控制子进程的标准输入/输出/错误。具体来说：
子进程令伪终端的从设备成为其控制终端，父进程通过伪终端主设备读取（子进程标准输出/错误）和写入数据（子进程标准输入）。
一对伪终端（主从设备）同一个双向管道很相似（它们在内核空间中传输数据），因此这里也将其纳入 IPC 方法中。
不过这显然不是一种具有实践性的 IPC 手段。
我们知道，常用的 Git 远程协议有 HTTP 协议 和 SSH 协议。
\n要设置代理，实际上就是分别为这两种协议配置代理。
\ngit config 命令用于修改 Git 本身的配置文件，包含全局配置（~/.gitconfig）和本地（当前仓库 .git/config）配置。
Git 本身是支持 http_proxy https_proxy all_proxy 环境变量的。
http.proxy 键用于强制设置 HTTP 代理的服务器地址，支持 HTTP 和 HTTPS 代理。
（有关更多高级配置，参见文档）
git config [--global] http.proxy [protocol://][user[:password]@]proxyhost[:port]\n# e.g. git config --global http.proxy http://127.0.0.1:7890\n对应配置如下
\n[http]\n proxy = [protocol://][user[:password]@]proxyhost[:port]\nGit 允许使用特殊的配置键 http.<url>.* 为指定 url 模式设置代理
git config [--global] http.<url>.proxy [protocol://][user[:password]@]proxyhost[:port]\n# <url> 的模式示例（https://username@git-server.domain:8080/repo.git）:\n# https\n# git-server.domain\n# 8080\n# repo.git\n# username\n对应配置如下
\n[http "<url>"]\n proxy = [protocol://][user[:password]@]proxyhost[:port]\n对于 SSH 协议，Git 实际上是通过本机的 ssh 命令来进行通信的，因此实际上是要配置 ssh 而非 git。
\n\n\n对于 Git for Windows，默认安装选项是使用其捆绑的 ssh，不过 Windows 本身也提供 ssh。\n
\n
ssh 的用户配置文件位于 ~/.ssh/config
ssh_config 的 ProxyCommand 项，用于指定一个命令来处理对指定 Host （占位符 %h）和 Port （占位符 $p） 的连接。
Unix 一般使用 nc（netcat） 命令（这里不会说明 nc 的细节，见具体 man 手册），Git for Windows 则可以使用捆绑的 connect 命令。
\nBSD nc 命令
\n![\"git-for-windows.png\"](\"https://s2.loli.net/2024/06/15/6JwpfdDBbctzE5h.png\")
usage: nc [-46CDdFhklNnrStUuvZz] [-I length] [-i interval] [-M ttl]\n [-m minttl] [-O length] [-P proxy_username] [-p source_port]\n [-q seconds] [-s source] [-T keyword] [-V rtable] [-W recvlimit] [-w timeout]\n [-X proxy_protocol] [-x proxy_address[:port]] [destination] [port]\n\n -X proxy_protocol\n Requests\tthat nc\tshould use the specified protocol when talking\n to the proxy server. Supported protocols are "4" (SOCKS\t v.4),\n "5" (SOCKS v.5) and "connect" (HTTPS proxy). If the protocol\n is not specified, SOCKS version 5 is used.\n\n -x proxy_address[:port]\n Requests\tthat nc\tshould connect to destination using a proxy at\n proxy_address and port.\tIf port\tis not\tspecified, the\t well-\n known port for the proxy\tprotocol is used (1080 for SOCKS, 3128\n for HTTPS).\nHost github.com\n User git\n # -X connect 为 http 代理\n ProxyCommand nc -X connect -x 127.0.0.1:7890 %h %p\n # -X 5 为 socks5 代理（默认）\n # ProxyCommand nc -X 5 -x 127.0.0.1:7891 %h %p\nNmap ncat 命令
\nNcat 7.80 ( https://nmap.org/ncat )\nUsage: ncat [options] [hostname] [port]\nHost github.com\n User git\n # --proxy-type http 为 http 代理\n ProxyCommand ncat --proxy 127.0.0.1:7890 --proxy-type http %h %p\n # --proxy-type socks5 为 socks5 代理\n # ProxyCommand ncat --proxy 127.0.0.1:7891 --proxy-type socks5 %h %p\nWindows 下，connect 命令
\nconnect --- simple relaying command via proxy.\nVersion 1.105\nusage: C:\\Program Files\\Git\\mingw64\\bin\\connect.exe [-dnhst45] [-p local-port]\n [-H proxy-server[:port]] [-S [user@]socks-server[:port]]\n [-T proxy-server[:port]]\n [-c telnet-proxy-command]\n host port\nHost github.com\n User git\n # -H 设置 http 代理\n ProxyCommand connect -H 127.0.0.1:7890 %h %p\n # -S 设置 socks 代理\n # ProxyCommand connect -S 127.0.0.1:7891 %h %p\nGit 还允许通过环境变量来指定其调用的 ssh
\n例如：
\nexport GIT_SSH_COMMAND='ssh -o ProxyCommand="nc -x 127.0.0.1:7891 %h %p"'\n对于 Linux，也可以使用通用的工具来应用代理，如 tsocks proxychains go-graft
\n","tags":["git"]},{"id":"go-buildmode","url":"https://yieldray.fun/posts/go-buildmode","title":"Go构建库","date_published":"2024-06-14T20:30:00.000Z","date_modified":"2024-06-14T20:30:00.000Z","content_text":"\n\n相关文档：Go Documentation > Command > go > Build modes
\n
gcc选项：https://gcc.gnu.org/onlinedocs/gcc/Option-Summary.html
package main // cgo 要求包名为 main\n\nimport "C"\n\n//export Add\nfunc Add(a, b int) int { // or: func Add(a, b C.int) C.int\n return a + b\n}\n\n// 必须有一个空的 main 函数\nfunc main() {}\n下面的命令生成 mylib.a 静态库文件和 mylib.h 头文件。
\n\n即使是在 Windows 下，也是生成兼容 GCC ABI 的
\n.a静态库文件（ar 格式，含.o文件），而非兼容 MSVC ABI 的.dll静态库文件（ar 格式，含.obj文件）。
go build -buildmode=c-archive -o mylib.a mylib.go\n\nfile mylib.a\n# current ar archive\n下面的命令生成 mylib.so 共享库文件和 mylib.h 头文件。
\n\n生成的共享库类型与本机操作系统一致，与扩展名无关联
\n
# Linux\ngo build -buildmode=c-shared -o mylib.so mylib.go\nfile mylib.so\n# ELF 64-bit LSB shared object, x86-64, version 1 (SYSV), dynamically linked, BuildID[sha1]=xxx, with debug_info, not stripped\n\n# Windows\ngo build -buildmode=c-shared -o mylib.dll mylib.go\nfile mylib.dll\n# PE32+ executable (DLL) (console) x86-64, for MS Windows\n以下面的 C 代码为例
\n#include <stdio.h>\n#include "mylib.h"\n\nint main() {\n int result = Add(2, 3);\n printf("Result: %d\\n", result);\n return 0;\n}\n使用静态库，直接一起编译即可链接
\ngcc main.c mylib.a -o main\n# 注意：linux 需要加上 -pthread\n\nfile main\n#linux# ELF 64-bit LSB shared object, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, BuildID[sha1]=xxx, for GNU/Linux 3.2.0, with debug_info, not stripped\n#windows# PE32+ executable (console) x86-64, for MS Windows\n使用共享库，可使用 cc 的链接选项
\ngcc main.c -o main -L. -l:mylib.so\n# OR:\ngcc main.c mylib.so -o main\n\n# 对于linux，运行时需要确保 mylib.so 在 $LD_LIBRARY_PATH 目录下： LD_LIBRARY_PATH=.:$LD_LIBRARY_PATH ./main\nLD_LIBRARY_PATH=.:$LD_LIBRARY_PATH ldd ./main\n# linux-vdso.so.1 (0x00007fffd5347000)\n# mylib.so => ./mylib.so (0x00007ff2fd6d5000)\n# libc.so.6 => /lib/x86_64-linux-gnu/libc.so.6 (0x00007ff2fd4e0000)\n# libpthread.so.0 => /lib/x86_64-linux-gnu/libpthread.so.0 (0x00007ff2fd4bd000)\n# /lib64/ld-linux-x86-64.so.2 (0x00007ff2fd83f000)\n或者将库嵌入可执行文件，则无需动态链接
\ngcc main.c -o main -L. -l:mylib.so -Wl,-rpath=.\nSee Also: https://yian.me/blog/coding/cgo-examples.html
\n","tags":["go"]},{"id":"go-wasm","url":"https://yieldray.fun/posts/go-wasm","title":"Go WASM/WASI","date_published":"2024-06-10T19:59:20.000Z","date_modified":"2024-06-10T19:59:20.000Z","content_text":"对于 WASM，谷歌的 Go>=1.11 编译器目前是通过 syscall/js 包，与 JavaScript 环境（而且主要是浏览器）交互，而并非直接将 Go 函数编译为 Wasm 函数。
具体来说：通过 Go 侧的 syscall/js 和必须的 func main() 函数，以及在 官方 wiki 上说明的 cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" . 提供的一个 JavaScript 侧的对 JavaScript 环境的包装脚本，才能够实现操纵 JavaScript 环境，因此也就能够间接实现“导出”函数到 JavaScript（准确来说是添加函数到 JavaScript 环境）。
\n\n注：GOOS=js GOARCH=wasm
\n
很明显上面的方法并非针对 Wasm 本身，而实际上是 JavaScript 了。但如果我们的目标只是编译 WASM 函数（并且我们的 Go 侧可以根本无需 main 函数），那么只能寻求 tinygo 这样的编译器了。
本文不会说明 tinygo 对 Wasm 目标的编译，具体参见 https://tinygo.org/docs/guides/webassembly/wasm/
package main\n\n// 从外部命名空间导入\n//\n//export add\nfunc add(x, y int) int\n\n\n// 导出到外部命名空间\n//\n//export multiply\nfunc multiply(x, y int) int {\n return x * y;\n}\nGo 1.21 实现了 WASI preview 1 syscall API （wasi_snapshot_preview1）编译目标。对应的 GOOS 值为 wasip1。
通过这个新特性，终于可以脱离 JavaScript 环境执行 Wasm 了（当然也就无需 syscall/js 了）。
\n\n注：GOOS=wasip1 GOARCH=wasm
\n
要实现 WASI，就需要实现从外部命名空间导入函数，这里摘抄一个 Go 博客 中给出的示例：
\n//go:wasmimport wasi_snapshot_preview1 random_get\n//go:noescape\nfunc random_get(buf unsafe.Pointer, bufLen size) errno\n另外下面从官方博客中摘抄目前实现中存在的限制：
\n虽然 wasip1 端口通过了所有标准库测试，但 Wasm 架构的一些显著基本限制可能会让用户感到惊讶。
Wasm 是一个单线程架构，没有并行性。调度器仍然可以调度 goroutine 并发运行，标准输入/输出/错误是非阻塞的，因此一个 goroutine 可以在另一个 goroutine 读取或写入时执行，但任何主机函数调用（例如使用上述示例请求随机数据）将导致所有 goroutine 阻塞，直到主机函数调用返回。
\nwasip1 API 中一个显著缺失的功能是网络套接字的完整实现。wasip1 仅定义对已打开的套接字进行操作的函数，这使得支持 Go 标准库的一些最流行功能（如 HTTP 服务器）成为不可能。像 Wasmer 和 WasmEdge 这样的 Host 实现了 wasip1 API 的扩展，允许打开网络套接字。虽然这些扩展未由 Go 编译器实现，但存在一个第三方库，github.com/stealthrocket/net，它使用 go:wasmimport 允许在支持的 Wasm 主机上使用 net.Dial 和 net.Listen。这使得在使用此包时可以创建 net/http 服务器和其他网络相关功能。
\n\n翻译自：https://pqvst.com/2023/11/21/web-push-notifications/
\n
另见：https://web.dev/articles/push-notifications-web-push-protocol
对于我最近的 One Day Build: Expense Tracking 项目，我希望在渐进式 Web 应用中启用通知。ChatGPT 难以生成任何有用的代码，我也很难在网上找到任何简洁明了的解释。
\n本博客文章旨在全面介绍实现 Web Push 通知所需的所有步骤。我还创建了一个完整的工作示例，其中包含一个 node.js 后端，供那些只想查看代码而不是阅读本文的人参考：
\nhttps://github.com/pqvst/minimal-web-push
\n简而言之，Web Push 的运作方式是，你的应用会与浏览器供应商提供的“推送服务”进行交互。此过程包含三个主要步骤，如下图所示：
\n![\"web](\"https://i1.wp.com/pqvst.com/assets/img/web-push/overview.png\")
你的客户端代码创建一个 Web Push 订阅，并将订阅发送到你的后端。订阅只是一些 JSON，其中包含唯一的（特定于浏览器的）端点和一些加密密钥。以下是 Firefox 订阅示例（因此端点是 mozilla.com）：
\n{\n "endpoint": "https://updates.push.services.mozilla.com/wpush/v2/...",\n "expirationTime": null,\n "keys": {\n "auth": "...",\n "p256dh": "..."\n }\n}\n使用 Safari，你将收到 Apple 端点 (https://web.push.apple.com/...)，在 Chrome 中，你将获得 Google 端点 (https://fcm.googleapis.com/fcm/send/...)。
你的后端代码使用订阅详细信息向浏览器供应商托管的推送服务发送推送通知。然后，推送服务确保将通知发送回你的浏览器。
\n你的浏览器收到推送通知并触发你 Service Worker 中的回调。然后，你的 Service Worker 可选择显示通知或执行你希望执行的任何其他操作。
\nVAPID 密钥对于确保 Web Push 在所有主流浏览器上正常运行是必需的。VAPID 代表 Voluntary Application Server Identification (VAPID) ，本质上只是如何生成一组公钥-私钥的规范。尽管名称中带有“自愿”，但事实并非如此，*因为 Chrome 和 Safari 都要求你提供 VAPID 密钥。*我测试过的唯一不需要 VAPID 密钥的浏览器是 Firefox。
\n如果你尝试在没有 VAPID 密钥的情况下在 Safari 中订阅推送通知，你将收到以下错误：
\nSubscribing for push requires an applicationServerKey\n在 Chrome 中，你将收到此错误：
\nDOMException: Registration failed - missing applicationServerKey, and gcm_sender_id not found in manifest\n虽然你可以在技术上自己生成 VAPID 密钥，但使用生成器（如 vapidkeys.com）要容易得多，该生成器会为你生成一组密钥。
\n为了从你的后端应用程序服务器发送 Web Push 通知，你必须正确构造、编码和加密消息。根据你使用的编程语言，你可能会找到一个可以帮助你完成此操作的库。
\n如果你使用 node.js 后端，那么添加 Web Push 支持非常简单。有一个很好的库 叫做 web-push ，它可以为你定制 Web Push 通知。
要开始使用 web-push，只需调用该函数来设置你的 VAPID 密钥。务必同时包含一个电子邮件地址（用 mailto: 开头）。
import webPush from "web-push";\n\n// TODO: 生成 VAPID 密钥 (如：https://vapidkeys.com/)\nconst vapid = {\n publicKey: "...",\n privateKey: "...",\n};\n\nwebPush.setVapidDetails("mailto:<email-address>", vapid.publicKey, vapid.privateKey);\nWeb Push 订阅是在客户端生成的，因此你很可能需要某种方式将订阅从前端传递到后端。你可能还想以某种方式保存它们，例如将它们存储在你的数据库中或将它们保存在持久化 JSON 文件中。如果你不保存订阅数据，那么在你的服务器重新启动时，你将丢失所有现有的订阅！
\napp.post("/subscribe", authenticateRequest, (req, res) => {\n const sub = req.body;\n // TODO: 持久化订阅 (如：存入数据库)\n res.status(200).end();\n});\n你只需要实现的另一件事就是实际创建和发送新通知的方式。如果我们向所有订阅广播通知，那么我们只需遍历我们保存的订阅数组并使用 web-push 库调用 sendNotification。
如果你收到错误，表示用户已撤销你的页面上通知权限（或订阅已过期）。你可以捕获这些错误并删除无效订阅。
\nasync function pushNotification(payload) {\n await Promise.all(\n subscriptions.map(async (sub) => {\n try {\n await webPush.sendNotification(sub, payload); // 不成功会抛出异常\n } catch (err) {\n console.log(sub.endpoint, "->", err.message);\n // TODO: 删除订阅 (如：从数据库中)\n }\n }),\n );\n}\n\n// 发送测试通知\npushNotification("This is a test notification!");\n客户端实现稍微复杂一些。你需要两个文件：一个用于你的 Service Worker，另一个用于你的主客户端应用程序。我们只需要将 Service Worker 的回调用于传入通知的处理。
\n/sw.jsself.addEventListener("push", (event) => {\n const options = {\n body: event.data.text(),\n icon: "/apple-touch-icon.png",\n badge: "/badge.png",\n };\n event.waitUntil(self.registration.showNotification("My App", options));\n});\n\n\n**为什么我们将我们的调用包装在
\nevent.waitUntil中？**由于 Service Worker 作为后台进程运行，因此可能被暂停/终止。通过将 promise 包装在waitUntil中，我们告诉浏览器工作正在进行中，并且它不应该在工作完成之前终止我们的 Service Worker。
/client.js在我们的主应用程序脚本中，我们必须负责请求通知权限、注册我们的 Service Worker 以及使用浏览器的 pushManager API 实际创建推送通知订阅。
首先，我们需要注意已确保我们有权推送通知（如果没有这些权限，我们的通知毫无用处）。在你页面的某个位置，你可能会希望显示一个链接或按钮，供用户单击以启用通知。
\n<a id="promptLink" onclick="onPromptClick()">启用通知</a>\n如果已授予（或拒绝）通知，我们可以隐藏链接或相应地更新 UI。
\nfunction updatePrompt() {\n if ("Notification" in window) {\n if (Notification.permission === "granted" || Notification.permission === "denied") {\n promptLink.style.display = "none";\n } else {\n promptLink.style.display = "block";\n }\n }\n}\n\nfunction onPromptClick() {\n if ("Notification" in window) {\n Notification.requestPermission().then((permission) => {\n updatePrompt();\n if (permission === "granted") {\n console.log("Notification permission granted.");\n init();\n } else if (permission === "denied") {\n console.warn("Notification permission denied.");\n }\n });\n }\n}\n接下来，我们确保支持 Service Worker 并注册我们的 Service Worker，以便我们可以接收通知。最后，我们将使用浏览器 pushManager API 请求推送通知订阅，然后将其发送到我们的后端服务器。
对于此步骤，你需要你的 VAPID 公钥（确保只在客户端代码中包含你的 公钥，并将你的私钥保密）。
\n这个过程不言自明。确保支持 Service Worker，注册 Service Worker，然后检查我们是否已经拥有有效的推送通知订阅，否则创建新的订阅。
\n在两种情况下，我们都会将订阅数据发送到我们的后端以确保它被存储。
\nconst vapidPublicKey = "...";\n\nasync function initServiceWorker() {\n if ("serviceWorker" in navigator) {\n const swRegistration = await navigator.serviceWorker.register("sw.js");\n const subscription = await swRegistration.pushManager.getSubscription();\n if (subscription) {\n console.log("用户已订阅：", subscription);\n sendSubscriptionToServer(subscription);\n } else {\n const subscription = await swRegistration.pushManager.subscribe({\n userVisibleOnly: true,\n applicationServerKey: vapidPublicKey,\n });\n console.log("用户已订阅：", subscription);\n sendSubscriptionToServer(subscription);\n }\n } else {\n console.warn("不支持 Service Worker");\n }\n}\n\nfunction sendSubscriptionToServer(subscription) {\n fetch("/subscribe", {\n method: "post",\n body: JSON.stringify(subscription),\n headers: { "content-type": "application/json" },\n });\n}\n\nwindow.addEventListener("load", () => {\n initServiceWorker();\n updatePrompt();\n});\n请注意，Service Worker 在你重新加载页面时不会自动重新加载。如果你在本地进行开发并对 Service Worker 进行修改，你需要在浏览器的开发工具中手动重新加载 Service Worker 或者启用页面重新加载时自动重新加载 Service Worker 的选项。
\n![\"\"](\"https://i1.wp.com/pqvst.com/assets/img/web-push/devtools.png\")
另一个你可能想要实现的功能是使你的通知可点击。起初，我以为点击通知会自动打开相关页面。然而，事实并非如此。你需要在你的 Service Worker 中自己实现这一功能。
\n实现这个功能的代码比我预想的要复杂一些。以下是我在线上找到的最佳示例，它确保在点击通知后清除通知，并且如果目标页面已经打开，则聚焦该页面，否则在新窗口/标签页中打开目标页面。
\nconst targetUrl = "...";\n\nself.addEventListener("notificationclick", (event) => {\n self.console.log("notificationclick");\n event.notification.close(); // Android 需要显式关闭\n event.waitUntil(\n clients.matchAll({ type: "window" }).then((windowClients) => {\n // 检查是否已经有一个窗口/标签页打开了目标 URL\n for (var i = 0; i < windowClients.length; i++) {\n var client = windowClients[i];\n // 如果是，则聚焦它\n if (client.url === targetUrl && "focus" in client) {\n return client.focus();\n }\n }\n // 如果没有，则在新窗口/标签页中打开目标 URL\n if (clients.openWindow) {\n return clients.openWindow(targetUrl);\n }\n }),\n );\n});\n根据我的测试，这在所有浏览器（Firefox、Chrome、Safari、Android、iOS）上似乎都能很好地工作。
\n","tags":["web-api"]},{"id":"web-assembly","url":"https://yieldray.fun/posts/web-assembly","title":"Web Assembly","date_published":"2024-05-26T12:12:12.000Z","date_modified":"2024-05-26T12:12:12.000Z","content_text":"WebAssembly（简称 Wasm）是一种面向堆栈虚拟机的二进制指令格式（这就比使用寄存器的汇编简单很多，但也可看作是一门低级的类汇编语言）。
Wasm 被设计为编程语言的便携式编译目标，使其能够在网络上部署客户端和服务器端应用程序。
\n\n本篇不涉及 WASI：WebAssembly 系统接口（WASI）是一组针对编译为 W3C WebAssembly（Wasm）标准的软件的标准 API 规范。WASI 旨在为应用程序提供一个安全的标准接口，这些应用程序可以从任何语言编译为 Wasm，并能够在任何环境中运行——从浏览器到云端再到嵌入式设备。
\n
\n\n参考性地观察 Typescript 类型声明：
\n\n
flowchart TB\n Module -- 实例化为 --> Instance\n Instance -- 访问 --> Memory\n Instance -- 访问 --> Table\n Instance -- 访问 --> Global\n Module -- 共享 --> Global\n WebAssembly代码 -- instantiate() instantiateStreaming() --> Module\n WebAssembly代码 -- instantiate() instantiateStreaming() --> Instance\n WebAssembly代码 -- compile() compileStreaming() --> Module\n| 名称 | \n描述 | \n
|---|---|
| Global | \n表示一个全局变量实例，可以从 JavaScript 访问，并且可以在一个或多个 WebAssembly.Module 实例之间导入/导出。这允许动态链接多个模块。 | \n
| Module | \n包含了已经被浏览器编译的无状态 WebAssembly 代码。该代码能够高效地与 Worker 共享，并多次实例化。 | \n
| Instance | \n一个有状态的、可执行的模块（Module）的实例。实例对象包含了所有能够从 JavaScript 调用 WebAssembly 代码的导出的 WebAssembly 函数。 | \n
| compile() | \n将 WebAssembly 二进制代码编译为 WebAssembly.Module 对象。 | \n
| compileStreaming() | \n直接从流式底层源编译 WebAssembly.Module。 | \n
| instantiate() | \n允许你编译和实例化 WebAssembly 代码。 | \n
| instantiateStreaming() | \n编译和实例化 WebAssembly 代码的主要 API，它返回 Module 及其第一个实例。 | \n
| Memory | \n一个存储了可被实例（Instance）访问的内存原始字节的可变长 ArrayBuffer。 | \n
| Table | \n一个用于存储可被实例（Instance）访问的不透明值（例如函数引用）的可变长类型化数组。 | \n
Wasm 二进制格式 是对 Wasm 模块的抽象语法树的紧凑线性编码，格式通过属性文法定义。\n模块的二进制编码被组织成多个段。大多数段对应于模块记录的一个组成部分，唯一的例外是函数定义被分成了两个段：函数段和代码段。函数段包含函数的类型声明，而代码段包含函数的主体。
\nWasm 文本格式（WAT，WebAssembly Text format）是一种人类可读的表示形式。本质上来说，它类似于汇编指令。语法上类似于 Lisp，将抽象语法树表示为 S- 表达式，格式同样由属性文法定义。
\n下面以一个非常简单的 Wasm 模块举例，模块包含 add 函数，并可在 C 语言中表示如下：
\nint32_t add(int32_t lhs, int32_t rhs) {\n return lhs + rhs;\n}\n(module\n (func $add (param $lhs i32) (param $rhs i32) (result i32)\n local.get $lhs\n local.get $rhs\n i32.add\n )\n (export "add" (func $add))\n)\n00 61 73 6D "\\0asm"\n01 00 00 00 版本 1\n\n\n注：下面是多个段，每个段的第一个字节是段号\n附：段长可以置0，表示解码者需要推测段长，但此时段尾需要添加 FIXUP\n\n01 段号为1，类型（type）段\n07 长度为7字节\n01 类型数量为1\n60 当前为函数类型\n02 参数数量为2\n7F 7F 参数类型为 (i32, i32)\n01 返回值数量为 1\n7F 返回类型为 (i32)\n\n03 段号为3，函数（function）段\n02 长度为2字节\n01 包含1个函数\n00 索引为1\n\n07 段号为7，导出（export）段\n07 长度为7字节\n01 导出数量为1\n03 导出的符号名称长度为3字节\n61 64 64 "add"\n00 导出类型为函数\n00 导出的索引为0\n\n0A 段号为10，代码（code）段\n09 段长为9字节\n01 包含1个函数体\n07 函数体长度为7字节\n00 包含0个本地（local）变量\n20 00 local.get 0\n20 01 local.get 1\n6A i32.add\n0B end\n显然可以看出，WAT 格式虽然比汇编语言要“高级”一些，但也很接近编译后的二进制表示。因此下面只以 WAT 格式来说明。
\n\n\nwabt 工具包提供命令行程序，可实现 WAT 与 WASM 格式的双向转换。 （wabt demos）
\n当然也可以在 npm 中找到一些库来验证：
\n\nimport { compile } from "watr";\n\nconst u8a = compile(`(module\n (func $add (param $lhs i32) (param $rhs i32) (result i32)\n local.get $lhs\n local.get $rhs\n i32.add\n )\n (export "add" (func $add))\n)`);\n// OR:\nconst u8a = Buffer.from("0061736d0100000001070160027f7f017f030201000707010361646400000a09010700200020016a0b", "hex");\n\nconst module = new WebAssembly.Module(u8a);\nconst instance = new WebAssembly.Instance(module);\nconst { add } = instance.exports;\n\nadd(128, 256); // 384\n
\n\n本篇主要关注 Wasm 的 MVP（Minimum Viable Product）版本，更新的特性很可能被省略。
\n
有关各执行环境的支持程度，参考此处。
Wasm 含且仅含一个模块。在文本格式中，一个模块被表示为一个大的 S- 表达式，其 EBNF 语法参见此处。
\n在最开始的示例中，使用了别名来引用变量。我们可能会见到使用索引来引用变量的代码，因此加以说明：
\n(func (param i32) (param f32) (local f64)\n local.get 0 ;; 将0号局部变量（i32类型的参数）入栈\n local.get 1 ;; 将1号局部变量（f32类型的参数）入栈\n local.get 2 ;; 将2号局部变量（类型为f64）入栈\n drop drop drop ;; 无返回值，因此丢弃栈中的所有值\n)\n\n;; 使用索引来获取局部变量很不友好，更清晰的做法是使用别名\n;; 在类型声明的前面添加一个使用美元符号（$）作为前缀的名字\n\n(func (param $p1 i32) (param $p2 f32) (local $loc i32)\n local.get $p1\n local.get $p2\n local.get $loc\n drop drop drop\n)\nWasm 的目标之一是安全，因此函数调用会检查类型。
\n(func $add (param $lhs i32) (param $rhs i32)\n (result i32) ;; 返回值，执行后栈顶会多出一个i32类型的值\n (i32.add (local.get $lhs) (local.get $rhs))\n)\n\n;; 下面是错误示例\n\n(func (export "test")\n (call $add (f32.const 3.14) (i64.const 15926)) ;; CompileError，参数类型不匹配\n i32.const 8080 ;; CompileError，因为没有声明返回值，执行后栈应为空\n)\n下面是一个更复杂的示例，阶乘函数（循环实现）：
\n(func $factorial (param $n i32) (result i32)\n (local $result i32) ;; 定义局部变量 $result\n (local $counter i32) ;; 定义局部变量 $counter\n\n local.get $n\n local.set $counter ;; 等价于 (local.set $counter (local.get $n)) 即 $counter = $n\n i32.const 1\n local.set $result ;; 等价于 (local.set $result (i32.const 1)) 即 $result = 1\n\n block\n loop\n local.get $counter\n i32.const 1\n i32.le_s ;; 等价于 (i32.le_s (local.get $counter) (i32.const 1))\n br_if 1 ;; 如果 $counter <= 1，则跳出循环\n\n local.get $result\n local.get $counter\n i32.mul ;; 等价于 (i32.mul (local.get $result) (local.get $counter))\n local.set $result ;; $result *= $counter\n\n local.get $counter\n i32.const 1\n i32.sub ;; 等价于 (i32.sub (local.get $counter) (i32.const 1))\n local.set $counter ;; $counter -= 1\n\n br 0 ;; 跳回循环的开始\n end\n end\n\n local.get $result ;; 返回 $result\n)\n递归实现则更简洁（非尾递归）：
\n(func $factorial (param $n i32) (result i32)\n (local $result i32)\n\n ;; 递归基准情况：如果 $n <= 1，返回 1\n local.get $n\n i32.const 1\n i32.le_s\n if (result i32)\n i32.const 1\n ;; 递归情况：$n * factorial($n - 1)\n else\n local.get $n\n local.get $n\n i32.const 1\n i32.sub\n call $factorial\n i32.mul\n end\n)\n导出函数（到外部）
\n;; 声明后导出\n(export "exportName" (func $funcName))\n\n;; 声明即导出\n(func (export "exportName") (param $n i32) (result i32)\n (local.set $n)\n)\n导入函数（从外部）
\n(module\n (import "console" "log" (func $log (param i32)))\n (func (export "log666")\n i32.const 666\n call $log\n )\n)\n通过 JavaScript 提供函数，以及获取 Wasm 函数，可以通过以下方法：
\nconst importObject = {\n console: {\n log: (arg) => {\n console.log(arg);\n },\n },\n};\n\nconst { instance } = await WebAssembly.instantiateStreaming(fetch("xxx.wasm"), importObject);\n\nconst { log666 } = instance.exports;\n\nlog666();\n模块之间还可以导入和导出全局变量
\n(module\n ;; 定义全局变量\n (global $myGlobal (mut i32) (i32.const 42))\n\n ;; 导出全局变量\n (export "myGlobal" (global $myGlobal))\n\n ;; 导入全局变量\n (global $g (import "js" "global") (mut i32))\n\n ;; 获取全局变量\n (func (export "getGlobal") (result i32)\n (global.get $g)\n )\n\n ;; 修改全局变量\n (func (export "incGlobal")\n (global.set $g (i32.add (global.get $g) (i32.const 1)))\n )\n)\n可以在多个 Wasm 以及 JavaScript 之间导入和导出，下面只演示了从 JavaScript 导入
\nconst global = new WebAssembly.Global({ value: "i32", mutable: true }, 0);\nconst importObject = { js: { global } };\nglobal.value = 32; // 可修改\n显然，仅通过栈，我们只能传递多个 i32,i64,f32,f64 这样的值。如果要传递数组（比如字符串，本质上来说就是指针），则是行不通的，我们需要内存（WebAssembly.Memory）。
\n内存也可在多个 Wasm 以及 JavaScript 之间创建、导入和导出（但 MVP 版本的 Wasm 模块只支持一个内存）。
\n(import "js" "mem"\n (memory 1) ;; 表示导入的内存必须至少有 1 页 (64KB)\n)\n\n(import "console" "log" (\n func $log (param i32 i32)) ;; 打印字符串：两个参数表示字符串，起始地址和长度\n)\n\n(data\n (i32.const 0) "Hello, world!" ;; 因为是静态字符串，因此直接在数据段声明\n)\n\n(func (export "helloWorld")\n i32.const 0 ;; 起始地址为 0\n i32.const 13 ;; 长度为 13\n call $log\n\n ;; 写入内存当然需要其它指令，如：\n ;; (i32.store (i32.const 0) (i32.const 123))\n)\nconst mem = new WebAssembly.Memory({\n initial: 1,\n // 可增长 .grow() 但初始页数为 1\n});\n\nconst importObject = {\n console: {\n log: (offset, length) => {\n const bytes = new Uint8Array(mem.buffer, offset, length);\n const string = new TextDecoder("utf8").decode(bytes);\n console.log(string);\n },\n },\n js: { mem },\n};\n下面的示例覆盖了上例没有演示的部分：
\n;; 从 Wasm 创建多个内存\n(memory $mem0 1)\n(memory $mem1 1)\n;; 默认写入0号内存\n(data (i32.const 0) "Hello from mem0")\n;; 写入指定内存\n(data (memory $mem1) (i32.const 1) "Hello from mem1")\n;; 从 Wasm 导出内存\n(export "memory1" (memory $mem1))\n;; 创建初始页面大小为1、最大为2的共享内存\n(memory $sharedMem 1 2 shared)\n内存支持如下指令（MDN Reference）：
\n当然也都有完全等效的 JavaScript API
\nclass Memory {\n constructor(descriptor: {\n initial: number;\n maximum?: number;\n /**\n * shared 指定底层的 buffer 是 ArrayBuffer 还是 SharedArrayBuffer\n */\n shared?: boolean;\n });\n\n readonly buffer: ArrayBuffer | SharedArrayBuffer;\n\n /**\n * 增长多少页（每页 64KB）\n */\n grow(delta: number): number;\n}\n对于规范中新的共享内存，很显然涉及到多线程（当然是指运行环境的多线程，毕竟 Wasm 只是提供模块而已）。
我们都以浏览器环境为例，那么 JavaScript 对多线程的支持是通过 Web Workers API 实现的。
规范也新增内存原子性访问指令，此处就不展开了。
为保证内存安全，Wasm 不允许随意解释内存（例如，不允许将一块内存解释为函数指针），因为内存可随时被动态修改。
\n作为替代，可以使用表格（WebAssembly.Table），表格也由环境提供。目前，表格只能存储 anyfunc，即任意类型的函数引用。表格还可以在多个实例中共享，实现动态链接。
\n(module\n (table 2 funcref)\n (elem (i32.const 0) $f1 $f2)\n (func $f1 (result i32) i32.const 123)\n (func $f2 (result i32) i32.const 456)\n\n (type $return_i32 (func (result i32))) ;; 类型段，调用函数需要提供类型\n (func (export "callAnyfunc0and1")\n (call_indirect (type $return_i32) (i32.const 0)) ;; 通过索引调用函数\n (call_indirect (type $return_i32) (i32.const 1))\n )\n)\n\n;; 注：上面因为只有一个表格，故 call_indirect 无需指定表格\n;; 也可创建命名表格并指定之\n(table $tableName 1 funcref)\n(func $callTableNameFn0\n i32.const 0\n call_indirect $tableName (type $return_i32)\n)\n注：由于 JavaScript 是弱类型的，所以在 JavaScript 调用 Wasm 表格的函数是很随意的。
但 Wasm 通过 call_indirect 调用函数则需要提供类型，并且会检查类型。
不匹配的类型将导致 WebAssembly.RuntimeError
也可以在 JavaScript 中修改表格：
\nconst table = new WebAssembly.Table({ initial: 2, element: "anyfunc" });\nconst f0 = table.get(0);\nconst f1 = table.get(1);\ntable.set(0, () => {});\ntable.set(1, () => {});\nWasm 和 JavaScript 都可以抛出和捕获异常。对于 JavaScript，使用的是 WebAssembly 命名空间下的异常。
\nWasm 异常的本质是一个标签：
\n(tag $my_exception (param i32))\n\n(func $throw_exception\n $my_exception (i32.const 42)\n)\n\n(func $try_catch\n (try\n (do\n ;; 可能抛出异常的代码\n )\n (catch $my_exception\n ;; 异常处理代码\n ;; 或使用 catch_all 捕获所有异常\n )\n )\n)\n\n(func $handle_exception (result i32)\n (local $exception_param i32)\n (try (result i32)\n (do\n (call $throw_exception)\n (i32.const 0) ;; 返回 0\n )\n (catch $my_exception\n (local.set $exception_param)\n (local.get $exception_param) ;; 返回异常标签携带的参数\n )\n )\n)\n从 JavaScript 导入异常
\n(module\n (import "extmod" "exttag" (tag $tagname (param i32)))\n\n (func $throwException (param $errorValueArg i32)\n local.get $errorValueArg\n throw $tagname\n )\n\n (func (export "run")\n i32.const 42\n call $throwException\n )\n)\nconst exttag = new WebAssembly.Tag({ parameters: ["i32"] });\n\nconst importObject = { extmod: { exttag } };\n\nWebAssembly.instantiateStreaming(fetch("example.wasm"), importObject)\n .then(({ instance }) => {\n console.log(instance.exports.run());\n })\n .catch((e) => {\n const err = e as WebAssembly.Exception;\n console.error(err);\n\n if (err.is(exttag)) {\n console.log(`getArg 0 : ${err.getArg(exttag, 0)}`);\n }\n });\nwatlings – learn Wasm text by examples.
\nWeb Crypto API 提供了 SubtleCrypto 接口，该接口提供一系列加密相关的静态函数。
这个接口通过 globalThis.crypto.subtle 暴露。
需要注意的是，这些函数是面向过程的：虽然密钥通过 CryptoKey 对象表示，但该对象只含描述该密钥的只读字段，不包含方法。
要使用密钥，需要将密钥通过参数提供给 SubtleCrypto 接口上的函数。
在下文中，为了简洁，对于 SubtleCrypto 接口上的静态函数，我们将做一些省略表示，即：crypto.subtle.generateKey() 将表示为 generateKey()
此外，它们都是异步函数，即返回值都是 Promise，但下面将做一些省略。
Note
\n本文不涉及 Proposal webcrypto-secure-curves 中的算法。
\nCryptoKey 对象下面只考虑加密算法，因此密钥是必须的。
\n若没有已导出的密钥，则首先需要生成之：generateKey(algorithm, extractable, keyUsages)。
algorithm：若为对称加密，返回值是 CryptoKey；若为非对称加密，返回值是 CryptoKeyPair（只不过是包装了 privateKey 和 publicKey 属性的对象而已）
（详细参见 W3C 规范，哈希算法不包含在下表中。另外，这个表格的分类可能不够准确，另有分类参见后文）
| 加密类型 | \n参数类型 | \n算法名称 | \n描述 | \n
|---|---|---|---|
| 非对称加密 | \nRsaHashedKeyGenParams | \nRSASSA-PKCS1-v1_5 | \nRSA Signature Scheme with Appendix - Public Key Cryptography Standards #1 version 1.5 | \n
| RSA-PSS | \nRSA - Probabilistic Signature Scheme | \n||
| RSA-OAEP | \nRSA - Optimal Asymmetric Encryption Padding | \n||
| EcKeyGenParams | \nECDSA | \nElliptic Curve Digital Signature Algorithm | \n|
| ECDH | \nElliptic Curve Diffie-Hellman | \n||
| 对称加密 | \nAesKeyGenParams | \nAES-CTR | \nAES Counter Mode | \n
| AES-CBC | \nAES Cipher Block Chaining | \n||
| AES-GCM | \nAES Galois/Counter Mode | \n||
| AES-KW | \nAES Key Wrap | \n||
| HmacKeyGenParams | \nHMAC | \nHash-based Message Authentication Code | \n
extractable：布尔值，指定该密钥是否允许通过 exportKey() 或 wrapKey() 导出
keyUsages：字符串数组，指定该密钥是否可以执行以下操作：
"encrypt": 使用 encrypt(algorithm, key, data) 对数据进行加密"decrypt": 使用 decrypt(algorithm, key, data) 对数据进行解密"sign": 使用 sign(algorithm, key, data) 对数据进行签名"verify": 使用 verify(algorithm, key, signature, data) 验证签名的有效性"deriveKey": 使用 deriveKey(algorithm, baseKey, derivedKeyType, extractable, keyUsages) 从现有密钥派生出新密钥"deriveBits": 使用 deriveBits(algorithm, baseKey, length) 从现有密钥派生出指定长度的位数据"wrapKey": 使用 wrapKey(format, key, wrappingKey, wrapAlgorithm) 将密钥包装成可导出格式"unwrapKey": 使用 unwrapKey(format, wrappedKey, unwrappingKey, unwrapAlgorithm, unwrappedKeyAlgorithm, extractable, keyUsages) 将包装好的密钥解包成可用的 CryptoKeyCryptoKey 对象为了能够使用 importKey() 函数导入密钥，首先还需要通过 exportKey() 将 generateKey() 生成的密钥导出：
\nexportKey(format, key) 函数将一个 CryptoKey 对象导出为指定格式的密钥数据
format：字符串，指定导出密钥的格式，即返回值取决于此参数。支持的格式包括：
"raw"：用于导出对称密钥的原始字节数据"pkcs8"：Public-Key Cryptography Standards，用于导出非对称密钥对中的私钥，以 PKCS #8 格式表示"spki"：Simple Public Key Infrastructure，用于导出非对称密钥对中的公钥，以 X.509 Subject Public Key Info 格式表示"jwk"：用于导出密钥为 JSON Web Key 格式key：一个 CryptoKey 对象，表示要导出的密钥
密钥本身只是一个字节数组，即 raw 格式为原始密钥的 ArrayBuffer。
jwk 格式可将密钥或密钥对表示为 JSON 文本格式（在 SubtleCrypto 接口中则是 JSONWebKey 对象）。
对称密钥没有其它包装的格式，即直接使用 raw 或通用的 jwk 格式即可。
对于非对称密钥：pkcs8 格式用于编码私钥，spki 格式用于编码公钥，它们都是 DER 编码的二进制格式（即 ArrayBuffer）。
CryptoKey 对象要将导出的密钥数据导入为 CryptoKey 对象，可以使用 importKey(format, keyData, algorithm, extractable, keyUsages) 函数。
该函数接收以下参数：
format：字符串，对应于 exportKey() 的 format 参数keyData：对应于 exportKey() 的返回值algorithm：对应于 generateKey() 的 algorithm 的参数extractable：对应于 generateKey() 的 extractable 的参数keyUsages：对应于 generateKey() 的 keyUsages 的参数digest(algorithm: AlgorithmIdentifier, data: BufferSource): Promise<ArrayBuffer> 函数用于哈希。
algorithm 可以是 "SHA-1" "SHA-256" "SHA-384" 和 "SHA-512"
派生指的是派生密钥（deriveKey()）和派生密码（deriveBits()）。
HKDF 和 PBKDF2 算法用于通过密码实现派生。
这两种算法虽然不是密钥，但是还是被抽象为了 CryptoKey，这样我们就有一个统一的 API。
const key: CryptoKey = await importKey(\n "raw",\n passwordBuffer, // 密码 // [!code highlight]\n { name: "HKDF" || "PBKDF2" },\n false,\n ["deriveBits", "deriveKey"],\n);\nECDH 本身则是专门用于派生的非对称密钥（只能用于 importKey 和 exportKey），所以它可以被生成（generateKey()）和导入（importKey()）
SPKI（Subject Public Key Info）和 PKCS#8 都是基于 ASN.1（Abstract Syntax Notation One）定义的结构。
\nASN.1 结构本身只是结构而非二进制，而 DER（Distinguished Encoding Rules） 是一种用于编码 ASN.1 结构的规则（二进制格式）。
\nPEM（Privacy-Enhanced Message）则是文本格式，它非常简单，只是通过 base64 编码二进制密钥而已，并不关心输入的密钥是原始格式还是其它二进制格式，但往往是 DER 格式。
\n该格式通常如下：
\n-----BEGIN XXX-----\nbase64字符串，可以换行但仅出于可读性\n-----END XXX-----\nhttps://github.com/diafygi/webcrypto-examples
https://github.com/mdn/dom-examples/tree/main/web-crypto
Node.js 见：https://nodejs.org/api/webcrypto.html
\nDeno 见：https://deno.land/api?s=SubtleCrypto
\ngraph TD\n 窃听-秘密泄露 --> 机密性\n 机密性 --> 对称加密\n 机密性 --> 非对称加密\n\n 对称加密 --> AES-CTR --> encrypt/decrypt\n 对称加密 --> AES-CBC --> encrypt/decrypt\n 对称加密 --> AES-GCM --> encrypt/decrypt\n\n 非对称加密 --> RSASSA-PKCS1-v1_5 --> sign/verify\n 非对称加密 --> RSA-PSS --> sign/verify\n 非对称加密 --> RSA-OAEP --> encrypt/decrypt\n 非对称加密 --> ECDSA --> sign/verify\n\n 篡改-信息被修改 --> 完整性\n 完整性 --> 数字签名\n 完整性 --> 消息认证码 --> HMAC --> sign/verify\n 完整性 --> 单向散列 --> SHA-1,SHA-256,SHA-384,SHA-512 --> digest\n\n 数字签名 --> 非对称加密\n\n 伪装-中间人攻击 --> 认证\n 认证 --> 消息认证码\n 认证 --> 数字签名\n\n 否认-事后否认事实 --> 不可否认性\n 不可否认性 --> 数字签名\n\n 伪随机数 --> getRandomValues["getRandomValues<T extends ArrayBufferView | null>(array: T): T"]\n\n 非对称加密 --> ECDH\n 密钥派生 --> ECDH --> deriveKey/deriveBits\n 密钥派生 --> HKDF --> deriveKey/deriveBits\n 密钥派生 --> PBKDF2 --> deriveKey/deriveBits\n\n 密钥包装 --> RSA-OAEP --> wrapKey/unwrapKey\n 密钥包装 --> AES-CTR --> wrapKey/unwrapKey\n 密钥包装 --> AES-CBC --> wrapKey/unwrapKey\n 密钥包装 --> AES-GCM --> wrapKey/unwrapKey\n名词定义：
\n基本原理很简单，因此先代码，再说明优劣
\n// 这个简单示例使用 Person 为例，真实的库中可能就是一个 Component 类（而且往往是仅库内部使用的）\nclass Person {\n name: string = "unnamed";\n age: number = 0;\n onRender?: VoidFunction;\n}\n\n/**\n * 函数式组件（组合式 API）风格：例如 React 中的 useState/useEffect 等，或 vue 的生命周期钩子如 onMounted\n * 本质上是利用闭包来捕获当前的组件的实例\n * 显然，由于是闭包，下面这个 API 函数不是纯函数\n */\nexport function setName(name: string) {\n if (!currentInstance) throw new Error("setName 只能在函数式组件内部调用");\n currentInstance.name = name;\n}\nexport function setAge(age: number) {\n if (!currentInstance) throw new Error("setAge 只能在函数式组件内部调用");\n currentInstance.age = age;\n}\nexport function onRender(cb: VoidFunction) {\n if (!currentInstance) throw new Error("onRender 只能在函数式组件内部调用");\n currentInstance.onRender = cb;\n}\n\n// 在这个示例中，函数式组件只是一个简单的函数\nexport type FunctionalComponent = (context?: unknown) => void;\n\n/**\n * 一般来说，当前实例的引用是仅对库内部公开的\n * 例如，在 vue 中是这样的：\n * export let currentInstance: ComponentInternalInstance | null = null\n * @see https://github.com/vuejs/core/blob/main/packages/runtime-core/src/component.ts#L644\n */\nlet currentInstance: Person | null = null;\n\n/**\n * 在这里，渲染函数只是指代真正执行任务的函数（这里和真正的渲染没有任何关系）\n */\nexport async function render(fcs: FunctionalComponent[]) {\n const result: Person[] = [];\n for (const fc of fcs) {\n currentInstance = new Person();\n fc(/* 提供一个上下文，只是为了演示 */ { timestamp: Date.now() });\n currentInstance.onRender?.();\n\n // 只是为了说明渲染函数真正的渲染工作可以是异步调度的\n await new Promise((resolve) => setTimeout(resolve, 500));\n result.push(currentInstance);\n }\n currentInstance = null;\n return result;\n}\n函数式组件（即一个组件的实现方式是一个函数）本身是无状态的（即不依赖外部状态）。\n而函数具体会在何时，通过什么参数被调用，也是由库决定的。
\nReact 则建议函数式组件为纯函数。
\nimport { onRender, render, setAge, setName } from "./lib";\n\nconst Mike: FunctionalComponent = (ctx: unknown) => {\n setName("Mike");\n onRender(() => {\n console.log("Mike is being rendered! And context is :", ctx);\n });\n};\n\nconst Alice: FunctionalComponent = () => {\n const name = "Alice";\n setName(name);\n setAge(20);\n onRender(() => {\n console.log(`${name} is being rendered!`);\n });\n};\n\nconst result = await render([Mike, Alice]);\nconsole.log(result);\nVue.js 的文档中其实已经说明了这种实现方式的优点，不过它是仅对于\nvue 做说明的。
\n如果我们将这种设计抽象为一种与具体实现无关的设计模式，可以总结其优点如下：
\n可能的缺点：
\n\n\n参考：《Vue.js设计与实现》，Vue.js 源码实现 @vue/reactivity
\n
如何理解响应式系统？参考 Vue.js 官方文档：《深入响应式系统》
\n对于何谓响应式，借助 signals 这一概念可能有助于理解。（如 Angular Solid Preact。参见这个响应式对比）
\n\n\n目前 stage1 的这篇 proposal 已经对 Signals 做了细致的研究和比较严格的定义，也包括很多相关解释性引用，本问就不重复引用了。
\n
简单来说：“signal” 是状态管理的最小单元，用于存储和更新状态，并可以订阅其状态变更。
\n下面我们实现一个最精简的 signals，可以发现这里的核心是发布订阅机制。
\nclass Signal<T> extends EventTarget {\n #value: T;\n constructor(value: T) {\n super();\n this.#value = value;\n }\n\n get value(): T {\n return this.#value;\n }\n\n set value(value: T) {\n if (Object.is(value, this.#value)) return;\n this.#value = value;\n this.dispatchEvent(new CustomEvent("change"));\n }\n\n effect(fn: VoidFunction) {\n fn();\n this.addEventListener("change", fn);\n return () => this.removeEventListener("change", fn);\n }\n}\n\nconst signal = <T>(val: T) => new Signal(val);\n\nclass Computed<T> extends Signal<T> {\n // 注意这个简单实现中需要手动指明依赖。下面我们会知道 vue 是如何实现自动追踪依赖的\n constructor(fn: (...deps: Signal<any>[]) => T, deps: Signal<any>[]) {\n super(fn(...deps)); // 注意这里立即执行一次，得到初始值\n for (const dep of deps) {\n if (!(dep instanceof Signal)) continue;\n dep.addEventListener("change", () => {\n this.value = fn(...deps);\n });\n }\n }\n}\n\nconst computed = <T>(fn: (...deps: Signal<any>[]) => T, deps: Signal<any>[]) => new Computed(fn, deps);\n这个简单示例可以这样使用：
\nconst name = signal("Jane");\nconst surname = signal("Doe");\nconst fullName = computed(() => `${name} ${surname}`, [name, surname]);\n\nfullName.effect(() => console.log(fullName.value));\n// -> Jane Doe\n\nname.value = "John";\n// -> John Doe\n作为 vue 的用户，我们会发现 vue 的响应式系统默认是深响应的（ref/reactive），可以看作是 signals 用 Proxy 包装的递归版本。
\n\n\n应当注意 Vue.js 对 TypeScript 具有完善的支持，下面的代码虽然使用 TypeScript 编写，但仅做类型示意
\n
// 存储副作用函数的桶\nconst bucket = new WeakMap<typeof data, Map<keyof typeof data, Set<EffectFunction>>>();\n\n// 原始数据\nconst data = {\n foo: 1,\n bar: 2,\n // this key is for computed()\n value: undefined,\n};\n\n// 对原始数据的代理\nexport const obj = new Proxy(data, {\n // 拦截读取操作\n get(target, key) {\n // 将副作用函数 activeEffect 添加到存储副作用函数的桶中\n track(target, key as keyof typeof data);\n // 返回属性值\n return Reflect.get(target, key);\n },\n // 拦截设置操作\n set(target, key, newVal) {\n // 设置属性值\n Reflect.set(target, key, newVal);\n // 把副作用函数从桶里取出并执行\n trigger(target, key as keyof typeof data);\n return true;\n },\n});\n\n// effect 副作用函数内部需要触发代理对象 get 操作\n// 注意：这个实现是缺陷的，因为如果在副作用函数内部只是读取代理对象本身，那么并不会被 track\nfunction track(target: typeof data, key: keyof typeof data) {\n if (!activeEffect) return;\n let depsMap = bucket.get(target);\n if (!depsMap) {\n bucket.set(target, (depsMap = new Map()));\n }\n // 当前 key 关联的所有副作用\n let deps: Set<EffectFunction> | undefined = depsMap.get(key);\n if (!deps) {\n depsMap.set(key, (deps = new Set()));\n }\n deps.add(activeEffect);\n // 保持包装后的副作用函数，其持有其对应 key 的所有副作用函数集合\n // 用于实现重建依赖关系（之后会有 cleanup 逻辑）\n activeEffect.deps.push(deps);\n}\n\n// set\nfunction trigger(target: typeof data, key: keyof typeof data) {\n const depsMap = bucket.get(target);\n if (!depsMap) return;\n // 指定 key 的所有 effects\n const effects: Set<EffectFunction<void>> | undefined = depsMap.get(key);\n\n const effectsToRun = new Set<EffectFunction>();\n effects?.forEach((effectFn) => {\n // 如果副作用是由于在副作用函数内部触发 set 导致的，则忽略（防止无限循环）\n if (effectFn !== activeEffect) {\n effectsToRun.add(effectFn);\n }\n });\n effectsToRun.forEach((effectFn) => {\n if (effectFn.options?.scheduler) {\n effectFn.options.scheduler(effectFn);\n } else {\n effectFn();\n }\n });\n // effects?.forEach(effectFn => effectFn())\n}\n\ninterface EffectFunction<Returns = void> {\n /** 包装后的副作用函数 */\n (): Returns;\n /** 对应 options */\n options?: {\n lazy?: boolean;\n scheduler?: (fn: VoidFunction) => void;\n };\n /** 与该副作用函数相关的依赖集合 */\n deps: Set<EffectFunction>[];\n}\n\n// 用一个全局变量存储当前激活的 effect 函数\nlet activeEffect: EffectFunction;\n// effect 栈\nconst effectStack: EffectFunction[] = [];\n\n// 注意，除非指定 options.lazy 为 true，否则副作用函数将立即（通过可选的 options.scheduler）执行一次\nexport function effect<T>(fn: () => T /* 要注册的副作用函数 */, options: EffectFunction<T>["options"] = {}) {\n // 实际包装后的副作用函数，包装函数的附加功能是：\n // 生成 effect 嵌套栈（允许 effect 嵌套），并保持 activeEffect 指向当前激活的 effect 函数\n const effectFn: EffectFunction<T> = () => {\n // 清理依赖，依赖是包含当前副作用的所有 key 关联的所有副作用集合\n for (const deps of effectFn.deps) {\n deps.delete(effectFn);\n }\n effectFn.deps = []; // 重置，之后将通过 track 函数重建依赖\n /**\n * 清理工作实现下面的代码不会造成无意义的副作用函数执行\n * effect(() => {\n * document.body.innerText = obj.ok ? obj.text : 'not'\n * })\n * obj.ok = false\n * 副作用终将导致 track() 函数被调用，track 函数通过 Set 重建依赖（因此无需去重操作）\n */\n\n // 当调用 effect 注册副作用函数时，将副作用函数复制给 activeEffect\n activeEffect = effectFn;\n // 在调用副作用函数之前将当前副作用函数压栈\n effectStack.push(effectFn);\n const res = fn();\n // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并还原 activeEffect 为之前的值\n effectStack.pop();\n activeEffect = effectStack.at(-1)!;\n\n return res;\n };\n // 将 options 挂在到 effectFn 上\n effectFn.options = options;\n // activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合\n effectFn.deps = [];\n // 执行副作用函数\n if (!options.lazy) {\n effectFn(); // 副作用函数内部需要触发 set 操作，导致调用 track 函数\n }\n\n return effectFn;\n}\n\n// =========================\n\nexport function computed<T>(getter: () => T) {\n let value: T;\n let dirty = true;\n\n const effectFn = effect(getter, {\n lazy: true,\n scheduler() {\n if (!dirty) {\n dirty = true;\n trigger(obj as any, "value");\n }\n },\n });\n\n const obj = {\n get value() {\n if (dirty) {\n value = effectFn();\n dirty = false;\n }\n track(obj as any, "value");\n return value;\n },\n };\n\n return obj;\n}\n\n// =========================\n\nfunction traverse(value: Record<keyof any, any>, seen = new Set()) {\n if (typeof value !== "object" || value === null || seen.has(value)) return;\n seen.add(value);\n for (const k in value) {\n traverse(value[k], seen);\n }\n\n return value;\n}\n\nexport function watch<\n Source = Record<keyof any, any> /* the proxied data */,\n Getter = () => Source /* getter returning the key of proxied data */,\n>(\n source: Source | Getter,\n cb: (oldValue?: Source, newValue?: Source, onInvalidate?: (fn: VoidFunction) => void) => VoidFunction,\n options: { immediate?: boolean; flush?: "pre" | "post" } = {},\n) {\n let getter: Getter;\n if (typeof source === "function") {\n getter = source as Getter;\n } else {\n getter = (() => traverse(source as any)) as Getter;\n }\n\n let oldValue: Source, newValue: Source;\n\n let cleanup: VoidFunction;\n function onInvalidate(fn: VoidFunction) {\n cleanup = fn;\n }\n\n const job = () => {\n newValue = effectFn();\n if (cleanup) {\n cleanup();\n }\n cb(oldValue, newValue, onInvalidate);\n oldValue = newValue;\n };\n\n const effectFn = effect(\n // 执行 getter\n () => (getter as () => Source)(),\n {\n lazy: true,\n scheduler: () => {\n if (options.flush === "post") {\n const p = Promise.resolve();\n p.then(job);\n } else {\n job();\n }\n },\n },\n );\n\n if (options.immediate) {\n job();\n } else {\n oldValue = effectFn();\n }\n}\n语言内置对象包括：Array, Map, WeakMap, Set, WeakSet
\n/**\n * 为了简单起见，下面的类型是不完整的，特别是一些嵌套对象，注意分辨\n */\n\n// 存储副作用函数的桶\nconst bucket = new WeakMap<object, Map<keyof any, Set<EffectFunction>>>();\nconst ITERATE_KEY: keyof any = Symbol(); // 虚拟的对象键，用于关联 for...in 副作用\n\nconst reactiveMap = new Map<object, any>();\n\nexport function reactive<T extends object>(obj: T): T /** vue中的实际类型是 UnwrapNestedRefs<T> */ {\n const proxy = createReactive(obj);\n\n const existionProxy = reactiveMap.get(obj);\n if (existionProxy) return existionProxy;\n\n reactiveMap.set(obj, proxy);\n return proxy;\n}\n\nexport declare const ShallowReactiveMarker: unique symbol; // 注意：类似这样的symbol键仅为类型系统使用，并不会产生运行时开销\nexport function shallowReactive<T extends object>(obj: T): T & { [ShallowReactiveMarker]?: true } {\n return createReactive(obj, true);\n}\n\nexport function readonly<T extends object>(\n obj: T,\n): Readonly<T> /** vue中的实际类型是 DeepReadonly<UnwrapNestedRefs<T>> */ {\n return createReactive(obj, false, true);\n}\n\nexport function shallowReadonly<T extends object>(obj: T): Readonly<T> /** vue中的实际类型是 Readonly<T> */ {\n return createReactive(obj, true, true);\n}\n\nconst arrayInstrumentations: Record<string, Function> = {};\n\n(["includes", "indexOf", "lastIndexOf"] as const).forEach((method) => {\n const originMethod = Array.prototype[method] as Function;\n arrayInstrumentations[method] = function (...args: any[]) {\n // this 是代理对象，先在代理对象中查找，将结果存储到 res 中\n let res = originMethod.apply(this, args);\n\n if (res === false) {\n // res 为 false 说明没找到，在通过 this.RAW 拿到原始数组，再去原始数组中查找，并更新 res 值\n res = originMethod.apply(this.RAW, args);\n }\n // 返回最终的结果\n return res;\n };\n});\n\nlet shouldTrack = true;\n(["push"] as const).forEach((method) => {\n const originMethod = Array.prototype[method];\n arrayInstrumentations[method] = function (...args: any[]) {\n shouldTrack = false;\n let res = originMethod.apply(this, args);\n shouldTrack = true;\n return res;\n };\n});\n\nconst RAW: unique symbol = Symbol();\nfunction createReactive<T extends object>(obj: T, isShallow = false, isReadonly = false) {\n return new Proxy(obj, {\n // 拦截读取操作\n get(target, key, receiver) {\n console.log("get: ", key);\n if (key === RAW) {\n // 代理对象使用一个特殊的 RAW 键访问原始对象\n return target;\n }\n\n if (Array.isArray(target) && arrayInstrumentations.hasOwnProperty(key)) {\n return Reflect.get(arrayInstrumentations, key, receiver);\n }\n\n // 非只读的时候才需要建立响应联系\n if (!isReadonly && typeof key !== "symbol") {\n track(target, key);\n }\n\n const res = Reflect.get(target, key, receiver);\n\n if (isShallow) {\n return res;\n }\n\n if (typeof res === "object" && res !== null) {\n // 深只读/响应\n return isReadonly ? readonly(res) : reactive(res);\n }\n\n return res;\n },\n // 拦截设置操作\n set(target, key, newVal, receiver) {\n console.log("set: ", key);\n if (isReadonly) {\n console.warn(`属性 ${String(key)} 是只读的`);\n return true;\n }\n const oldVal = target[key as keyof T];\n // 对 trigger 函数标记当前 set 操作是新增还是修改，实现正确处理 for...in （只遍历对象键）副作用\n // 注：如果只是修改某个对象值，那么对象的键集合实际上没有变更，因此不需要触发副作用\n // 如果属性不存在，则说明是在添加新的属性，否则是设置已存在的属性\n const type = Array.isArray(target)\n ? // 如果代理目标是数组，则检测被设置的索引值是否小于数组长度\n Number(key) < target.length\n ? // 如果是，则视作 SET 操作，否则是 ADD 操作\n "SET"\n : "ADD"\n : Object.prototype.hasOwnProperty.call(target, key)\n ? "SET"\n : "ADD";\n // 设置属性值\n const res = Reflect.set(target, key, newVal, receiver);\n if (target === receiver.RAW) {\n if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {\n trigger(target, key, type, newVal);\n }\n }\n\n return res;\n },\n has(target, key) {\n track(target, key);\n return Reflect.has(target, key);\n },\n ownKeys(target) {\n // ownKeys 处理函数实现正确绑定代理对象的与对象键相关副作用\n console.log("ownkeys: ");\n track(target, Array.isArray(target) ? "length" : ITERATE_KEY);\n return Reflect.ownKeys(target);\n },\n deleteProperty(target, key) {\n if (isReadonly) {\n console.warn(`属性 ${String(key)} 是只读的`);\n return true;\n }\n const hadKey = Object.prototype.hasOwnProperty.call(target, key);\n const res = Reflect.deleteProperty(target, key);\n\n if (res && hadKey) {\n trigger(target, key, "DELETE");\n }\n\n return res;\n },\n });\n}\n\nfunction track(target: object, key: keyof any) {\n if (!activeEffect || !shouldTrack) return;\n let depsMap = bucket.get(target);\n if (!depsMap) {\n bucket.set(target, (depsMap = new Map()));\n }\n let deps = depsMap.get(key);\n if (!deps) {\n depsMap.set(key, (deps = new Set()));\n }\n deps.add(activeEffect);\n activeEffect.deps.push(deps);\n}\n\nfunction trigger(target: object, key: keyof any, type: "ADD" | "DELETE" | "SET", newVal?: any) {\n console.log("trigger", key);\n const depsMap = bucket.get(target);\n if (!depsMap) return;\n const effects = depsMap.get(key);\n\n const effectsToRun = new Set<EffectFunction>();\n effects?.forEach((effectFn) => {\n if (effectFn !== activeEffect) {\n effectsToRun.add(effectFn);\n }\n });\n\n if (type === "ADD" || type === "DELETE") {\n const iterateEffects = depsMap.get(ITERATE_KEY);\n iterateEffects?.forEach((effectFn) => {\n if (effectFn !== activeEffect) {\n effectsToRun.add(effectFn);\n }\n });\n }\n\n // 当操作类型为 ADD 并且目标对象是数组时，应该取出并执行那些与 length 属性相关联的副作用函数\n if (type === "ADD" && Array.isArray(target)) {\n const lengthEffects = depsMap.get("length");\n lengthEffects?.forEach((effectFn) => {\n if (effectFn !== activeEffect) {\n effectsToRun.add(effectFn);\n }\n });\n }\n\n // 如果操作目标是数组，并且修改了数组的 length 属性\n if (Array.isArray(target) && key === "length") {\n // 对于索引大于或等于新的 length 值的元素，需要把所有相关联的副作用函数取出并添加到 effectsToRun 中待执行\n depsMap.forEach((effects, key) => {\n if ((key as number) >= newVal) {\n effects.forEach((effectFn) => {\n if (effectFn !== activeEffect) {\n effectsToRun.add(effectFn);\n }\n });\n }\n });\n }\n\n effectsToRun.forEach((effectFn) => {\n if (effectFn.options?.scheduler) {\n effectFn.options.scheduler(effectFn);\n } else {\n effectFn();\n }\n });\n}\n\ninterface EffectFunction<Returns = void> {\n /** 包装后的副作用函数 */\n (): Returns;\n /** 对应 options */\n options?: {\n lazy?: boolean;\n scheduler?: (fn: VoidFunction) => void;\n };\n /** 与该副作用函数相关的依赖集合 */\n deps: Set<EffectFunction>[];\n}\n\n// 用一个全局变量存储当前激活的 effect 函数\nlet activeEffect: EffectFunction;\n// effect 栈\nconst effectStack: EffectFunction[] = [];\n\nexport function effect<T = any>(fn: () => T, options: { lazy?: boolean; scheduler?: (fn: VoidFunction) => void } = {}) {\n const effectFn: EffectFunction = () => {\n cleanup(effectFn);\n // 当调用 effect 注册副作用函数时，将副作用函数复制给 activeEffect\n activeEffect = effectFn;\n // 在调用副作用函数之前将当前副作用函数压栈\n effectStack.push(effectFn);\n const res = fn();\n // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并还原 activeEffect 为之前的值\n effectStack.pop();\n activeEffect = effectStack[effectStack.length - 1];\n\n return res;\n };\n // 将 options 挂在到 effectFn 上\n effectFn.options = options;\n // activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合\n effectFn.deps = [];\n // 执行副作用函数\n if (!options.lazy) {\n effectFn();\n }\n\n return effectFn;\n}\n\nfunction cleanup(effectFn: EffectFunction) {\n // 清理依赖，依赖是包含当前副作用的所有 key 关联的所有副作用集合\n for (const deps of effectFn.deps) {\n deps.delete(effectFn);\n }\n effectFn.deps = []; // 重置，之后将通过 track 函数重建依赖\n /**\n * 清理工作实现下面的代码不会造成无意义的副作用函数执行\n * effect(()=>{\n * document.body.innerText = obj.ok ? obj.text : 'not'\n * })\n * obj.ok = false\n * 副作用终将导致 track() 函数被调用，track 函数通过 Set 重建依赖（因此无需去重操作）\n */\n}\n\n// =================================================================\n\n// const obj = reactive({ foo: 1, bar: 2 });\n\n// const newObj = {\n// ...obj\n// }\n\n// effect(() => {\n// console.log(newObj.foo)\n// })\n\n// obj.foo = 100\n\ndeclare const RefSymbol: unique symbol;\nexport declare const RawSymbol: unique symbol;\nexport interface Ref<T = any> {\n value: T;\n /**\n * Type differentiator only.\n * We need this to be in public d.ts but don't want it to show up in IDE\n * autocomplete, so we use a private Symbol instead.\n */\n [RefSymbol]: true;\n}\n\nexport function ref<T = any>(val: T): Ref<T> {\n const wrapper = {\n value: val,\n };\n // 使用 Object.defineProperty 在 wrapper 对象上定义一个不可枚举的属性 __v_isRef，并且值为 true\n Object.defineProperty(wrapper, "__v_isRef", {\n value: true,\n });\n return reactive(wrapper) as Ref<T>;\n}\n\nexport function toRefs<T extends object>(obj: T) {\n const ret = {} as { [K in keyof T]: Ref<T[K]> };\n for (const key in obj) {\n ret[key] = toRef(obj, key);\n }\n return ret;\n}\n\nexport function toRef<T extends object, K extends keyof T>(\n obj: T,\n key: K,\n): Ref<T[K]> /** vue的实际类型可能是 ToRef<T[K]> */ {\n const wrapper = {\n get value() {\n return obj[key];\n },\n set value(val) {\n obj[key] = val;\n },\n };\n\n Object.defineProperty(wrapper, "__v_isRef", {\n value: true,\n });\n\n return wrapper as Ref<T[K]>;\n}\n\nexport function proxyRefs(target: any) {\n return new Proxy(target, {\n get(target, key, receiver) {\n const value = Reflect.get(target, key, receiver);\n return value.__v_isRef ? value.value : value;\n },\n set(target, key, newValue, receiver) {\n const value = target[key];\n if (value.__v_isRef) {\n value.value = newValue;\n return true;\n }\n return Reflect.set(target, key, newValue, receiver);\n },\n });\n}\n\n/*\nconst newObj = proxyRefs({ ...toRefs(obj) });\n\nconsole.log(newObj.foo);\nconsole.log(newObj.bar);\n\nnewObj.foo = 100;\nconsole.log(newObj.foo);\n */\n本篇说明 Typescript 环境下编译 JSX 的配置
\n对于 jsx 工厂函数：
\nimport { Fragment, jsx } from "react/jsx-runtime";\njsx(Fragment, { children: "Hello world" });\nimport { createElement, Fragment } from "react";\ncreateElement(Fragment, null, "Hello world");\n{\n "compilerOptions": {\n /**\n * @docs https://www.typescriptlang.org/tsconfig/#jsx\n * @default "react"\n * 此选项控制 jsx 工厂函数的导入方式\n *\n * react: React<17 transform，对于第三方库需指定 jsxFactory\n * 要求 jsxFactory 指定一个函数名称（细节参见下面具体选项）\n * import { jsxFactory } from "jsxFactoryModule"\n * export const HelloWorld = () => jsxFactory("h1", null, "Hello world")\n *\n * react-jsx: React>=17 transform，对于第三方库需指定 jsxImportSource\n * 要求 jsxImportSource 提供 jsx-runtime 子模块并导出 jsx 函数\n * import { jsx as _jsx, Fragment as _Fragment } from "jsxImportSource/jsx-runtime"\n * export const HelloWorld = () => _jsx(_Fragment, { children: "Hello world" })\n */\n "jsx": "react-jsx",\n\n /**\n * @docs https://www.typescriptlang.org/tsconfig/#jsxFactory\n * @default React.createElement\n * 此选项指定一个函数名称 或 模块.函数名称，例如 h 或 preact.h\n * 支持 Babel 的 [Customizing the Classic Runtime Import](https://babeljs.io/docs/babel-plugin-transform-react-jsx#customizing-the-classic-runtime-import)\n *\n * 附：The factory chosen will also affect where the JSX namespace is looked up (for type checking information) before falling back to the global one.\n * If the factory is defined as React.createElement (the default), the compiler will check for React.JSX before checking for a global JSX. If the factory is defined as h, it will check for h.JSX before a global JSX.\n */\n "jsxFactory": "h",\n /**\n * @docs https://www.typescriptlang.org/tsconfig/#jsxFactory\n * 同理 jsxFactory，从略\n */\n "jsxFragmentFactory": "Fragment",\n\n /**\n * @docs https://www.typescriptlang.org/tsconfig/#jsxImportSource\n * @default React\n * 此选项指定 jsx 和 Fragment 函数从哪个模块的 jsx-runtime 子模块中导入\n * 支持 Babel 的 [Customizing the Automatic Runtime Import](https://babeljs.io/docs/babel-plugin-transform-react-jsx#customizing-the-automatic-runtime-import)\n */\n "jsxImportSource": "React",\n },\n}\n下面的示例配置使用 compilerOptions.jsx = "react-jsx"
我们将手动实现一个 JSX runtime 并实现将 jsx 转换为 HTML 字符串
.\n├── src\n│ ├── RayAct\n│ │ └── jsx-runtime.ts // 需要导出 jsx 函数，和可选的 Fragment 符号\n│ │ ├── index.ts // 不做要求\n│ └── demo.tsx\n└── tsconfig.json\njsxImportSource 使用我们自定义的 RayAct 模块
\n{\n "compilerOptions": {\n "jsx": "react-jsx",\n "jsxImportSource": "./RayAct",\n\n "module": "ESNext",\n "outDir": "dist"\n },\n "include": ["src/**/*"]\n}\nimport { render } from "./RayAct";\n\nconst jsx = (\n <h1 foo="bar">\n Hello, <>world</>!\n </h1>\n);\n\nconsole.log(jsx);\nconsole.log(render(jsx)); // => <h1 foo="bar">Hello, world!</h1>\nimport { createElement, type RayActNode } from "./index";\n\nexport namespace JSX {\n export interface IntrinsicElements {\n [elemName: string]: any;\n }\n}\nexport { Fragment } from "./index";\n\nexport function jsx(type: string, { children, ...props }: { children?: RayActNode[]; [prop: string]: any }) {\n return createElement(type, props, children);\n}\n下面的实现兼容 compilerOptions.jsx = "react"
\nexport type RayActNode = RayActElement | Array<RayActNode> | string | number | boolean | null | undefined;\n\nexport interface RayActElement<P = any, T extends string = string> {\n type: T | Function;\n props: P & { children?: Array<RayActElement | RayActElement[]> };\n}\n\nexport function createElement(\n type: string,\n props?: Record<string, any> | null,\n ...children: RayActNode[]\n): RayActElement {\n function nodeToElement(node: RayActNode): RayActElement | RayActElement[] {\n if (node === null) return createNullElement();\n if (Array.isArray(node)) return node.map(nodeToElement) as RayActElement[];\n if (typeof node === "object") return node;\n if (typeof node === "string") return createTextElement(node);\n if (typeof node === "number") return createTextElement(String(node));\n if (Boolean(node) === false) return createNullElement();\n return createTextElement(String(node));\n }\n return {\n type,\n props: {\n ...props,\n children: children.map(nodeToElement),\n },\n };\n}\n\nfunction createTextElement(text: string): RayActElement {\n return {\n type: "TEXT_ELEMENT",\n props: {\n nodeValue: text,\n children: [],\n },\n };\n}\n\nfunction createNullElement(): RayActElement {\n return {\n type: "NULL_ELEMENT",\n props: {\n children: [],\n },\n };\n}\n\nexport function Fragment(props: { children?: RayActNode[] }): RayActNode {\n return {\n type: "FRAGMENT_ELEMENT",\n props: {\n children: props.children,\n },\n };\n}\n\nexport function render(element: RayActElement): string {\n if (element.type === "NULL_ELEMENT") return "";\n if (element.type === "TEXT_ELEMENT") return element.props.nodeValue as string;\n if (element.type === "FRAGMENT_ELEMENT") {\n return element.props.children?.map(render).join("") || "";\n }\n if (typeof element.type === "function") {\n return render(element.type(element.props));\n }\n\n let sb = `<${element.type}`;\n\n Object.keys(element.props)\n .filter((key) => key !== "children")\n .forEach((name) => {\n const value = element.props[name];\n if (!value) return;\n sb += ` ${name}="${value}"`;\n });\n\n sb += ">";\n\n element.props.children.forEach((child: RayActElement) => {\n sb += render(child);\n });\n\n sb += `</${element.type}>`;\n\n return sb;\n}\n字符串是原始类型，一旦字符串被初始化，字符串对象自身得到一个不变的 length 属性（{ [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }）
表示字符串中码元（而非字符）的数量（但字符串上的迭代器按字符迭代）
UTF-16 (16-bit Unicode Transformation Format) 是一种用于表示 Unicode 字符的字符编码。UTF-16 是 Unicode 标准的一部分，并且由 Unicode Consortium 设计。
\nUTF-16 使用单个 16 位单元或一对这样的单元来表示每个字符。在 Unicode 标准中，这些单元被称为代码单元（码元）。
UTF-16 可以表示 Unicode 标准中的所有字符，包括那些无法用单个 16 位单元表示的字符。
具体来说，UTF-16 的工作方式如下：
\n对于 U+0000 到 U+FFFF 范围内的字符（基本多语言平面，BMP），UTF-16 使用一个 16 位代码单元来表示。这个代码单元就是字符的 Unicode 码点值。
\n对于超出这个范围的字符（辅助平面字符），UTF-16 使用一对 16 位代码单元来表示。这对代码单元被称为代理对。
\n显然 UTF-16 是不定长编码的，编解码过程如下：
\n编码过程：
\n对于 U+0000 到 U+FFFF 范围内的字符（基本多语言平面，BMP），直接使用该字符的 Unicode 码点值作为其 UTF-16 编码。
\n对于超出 U+FFFF 的字符（辅助平面的字符），使用以下步骤进行编码：
\n解码过程：
\n如果一个 16 位代码单元在 0xD800 到 0xDFFF 之间，那么这个代码单元是一个代理对的一部分。
如果它在 0xD800 到 0xDBFF 之间，那么它是代理对的高位；
如果它在 0xDC00 到 0xDFFF 之间，那么它是代理对的低位。
将高位减去 0xD800，得到一个 10 位的数；将低位减去 0xDC00，得到另一个 10 位的数。
将这两个数合并为一个 20 位的数，然后加上 0x10000，得到字符的 Unicode 码点。
如果一个 16 位代码单元不在 0xD800 到 0xDFFF 之间，那么这个代码单元就是字符的 Unicode 码点。
\n字节序：
\nString.fromCharCode ( ...codeUnits )This function may be called with any number of arguments which form the rest parameter codeUnits.
\nIt performs the following steps when called:
\nℝ(? ToUint16(next)).The "length" property of this function is 1𝔽.
\nString.fromCodePoint ( ...codePoints )This function may be called with any number of arguments which form the rest parameter codePoints.
\nIt performs the following steps when called:
\nIsIntegralNumber(nextCP) is false, throw a RangeError exception.ℝ(nextCP) < 0 or ℝ(nextCP) > 0x10FFFF, throw a RangeError exception.UTF16EncodeCodePoint(ℝ(nextCP)).The "length" property of this function is 1𝔽.
\nhttps://iamvishnu.com/posts/utf8-is-brilliant-design
\nhttps://github.com/vishnuharidas/utf8-playground
\n","tags":["js"]},{"id":"web-cache","url":"https://yieldray.fun/posts/web-cache","title":"Web缓存速查","date_published":"2024-04-04T15:51:15.000Z","date_modified":"2025-03-14T00:00:00.000Z","content_text":"浏览器默认行为
https://web.dev/articles/http-cache
https://html.spec.whatwg.org/multipage/browsing-the-web.html
\n\n备注：
\n
如非手动 fetch，浏览器可能自动添加 If-None-Match 和 If-Modified-Since 标头
但此行为目前尚未在 HTML 标准中规范
fetch 标准
https://fetch.spec.whatwg.org/#http-network-or-cache-fetch
https://fetch.spec.whatwg.org/#concept-request-cache-mode
条件请求与缓存
https://www.rfc-editor.org/rfc/rfc9110.html#name-conditional-requests
https://www.rfc-editor.org/rfc/rfc9111.html
参考
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching
https://www.jonoalderson.com/performance/http-caching/
https://zh.wikipedia.org/wiki/Web%E7%BC%93%E5%AD%98
| 类型 | \n消息报头 | \n值/示例 | \n作用 | \n
|---|---|---|---|
| 响应 | \nCache-Control | \nmax-age=<seconds> | \n指明缓存副本的有效时长，从请求时间开始到过期时间之间的秒数 | \n
| 响应 | \n\n | must-revalidate | \n一旦响应过时，缓存必须向源服务器验证响应的有效性后才能使用 | \n
| 响应 | \n\n | must-understand | \n限制可缓存该响应的缓存为理解并符合该响应状态码要求的缓存。 包含 must-understand 指令的响应 应该 也包含 no-store 指令 | \n
| 响应 | \n\n | no-cache | \n缓存必须先向源服务器验证后才能使用响应 | \n
| 响应 | \n\n | no-store | \n缓存不得存储任何关于请求或响应的部分，且不得使用此响应去满足其他请求 | \n
| 响应 | \n\n | no-transform | \n中介（无论其是否实现缓存）不得转换内容 | \n
| 响应 | \n\n | private | \n共享缓存不得存储响应（即，响应仅供单个用户使用）。私有缓存可以存储响应 | \n
| 响应 | \n\n | proxy-revalidate | \n类似于 must-revalidate，但不适用于私有缓存。共享缓存一旦响应过时，必须向源服务器验证响应的有效性后才能使用 | \n
| 响应 | \n\n | public | \n即使存在其他禁止缓存的限制，缓存也可以存储响应 | \n
| 响应 | \n\n | s-maxage=<seconds> | \n对于共享缓存，此指令指定的最大生存期将覆盖 max-age 指令或 Expires 头字段指定的最大生存期。并包含 proxy-revalidate 语义 | \n
| 响应 | \n\n | stale-while-revalidate=<seconds> | \n在指定的秒数内可使用过时的缓存，同时缓存在后台应尝试重新验证它 | \n
| 响应 | \n\n | stale-if-error=<seconds> | \n如果在尝试重新验证时遇到错误，允许缓存在指定的秒数内使用过期的响应 | \n
| 请求 | \nCache-Control | \nimmutable | \n表示响应正文不会随时间而改变, 这是响应中的指令，不是请求指令 | \n
| 请求 | \n\n | max-age=<seconds> | \n客户端希望获取一个 age 小于或等于指定秒数的响应。 如果没有 max-stale，客户端不希望收到过期的响应 | \n
| 请求 | \n\n | max-stale[=<seconds>] | \n客户端愿意接受已经过期的响应。可选的秒数表示客户端愿意接受的响应超过其新鲜生存期的最大秒数。如果不指定秒数，则客户端愿意接受任何年龄的过期响应。 | \n
| 请求 | \n\n | min-fresh=<seconds> | \n客户端希望获取一个在未来指定秒数内仍然保持新鲜的响应 | \n
| 请求 | \n\n | no-cache | \n客户端要求缓存必须在使用存储的响应之前，先与源服务器进行成功验证 | \n
| 请求 | \n\n | no-store | \n客户端要求缓存不得存储此请求或任何响应的任何部分 | \n
| 请求 | \n\n | no-transform | \n客户端要求中间件不要转换响应的内容（例如，不要压缩或更改内容编码） | \n
| 请求 | \n\n | only-if-cached | \n客户端只希望获取已存储的响应。如果缓存没有可用的响应，它应返回一个 504 (Gateway Timeout) 状态码 | \n
| 响应 | \nExpires | \nSun, 16 Oct 2016 05:43:02 GMT | \n告知浏览器在过期时间前可以使用副本 (存在时间不一致问题) | \n
| 响应 | \nPragma | \nno-cache | \n告知浏览器忽略资源的缓存副本（兼容 HTTP1.0，HTTP1.1 使用 Cache-Control 代替） | \n
| 响应 | \nLast-Modified | \nSun, 16 Oct 2016 05:43:02 GMT | \n告知浏览器当前资源的最后修改时间 | \n
| 请求 | \nIf-Modified-Since | \nSun, 16 Oct 2016 05:43:02 GMT | \n如果浏览器第一次请求时响应中 Last-Modified 非空，第二次请求同一资源时，会把它作为该项的值发给服务器 | \n
| 响应 | \nETag | \n"33a64df551425fcc55e4d42a148795d9f25f89d4" W/"0815" | \n告知浏览器当前资源在服务器的唯一标识符（生成规则有服务器决定） | \n
| 请求 | \nIf-None-Match | \n"bfc13a64729c4290ef5b2c2730249c88ca92d82d" W/"67ab43", "54ed21", "7892dd" | \n如果浏览器第一次请求时响应中 Etag 非空，第二次请求同一资源时，会把它作为该项的值发给服务器 | \n
| 响应 | \nVary | \nAccept-Encoding | \n辅助从多个缓存副本中筛选合适的版本（不同压缩算法产生的副本） | \n
| 响应 | \nAge | \n24 | \n表示对象在代理缓存中停留的时间，以秒为单位 | \n
| 响应 | \nClear-Site-Data | \n"cache", "cookies", "storage", "executionContexts" "*" | \n清除当前请求网站有关的浏览器数据 | \n
\n\n\n
graph LR\n A(是否可以被重用) --> B(no)\n A --> C(yes)\n C --> D(每次请求是否量新验证)\n D --> E(yes)\n D --> F(no)\n F --> G(no-store)\n E --> H(no-cache)\n H --> I(yes)\n H --> J(no)\n J --> K(是否允许被中介缓存)\n K --> L(Public)\n K --> M(Private)\n L --> N(max-age)\n M --> O(添加 ETag)\n O --> P(最长的缓存时间是多少秒)\ngraph TB\nA(用户请求资源) --> B(是否存在缓存)\nB --> C(判断缓存是否过期)\nC --> D(直接使用缓存)\nD --> E(返回展示资源)\nB --> F(向服务器请求)\nF --> G(判断ETag)\nG --> H(向服务器请求)\nG --> I(服务端返回304,读取本地缓存)\nH --> J(判断Last-Modified)\nJ --> K(向服务器请求)\nJ --> L(服务端返回304,读取本地缓存)\nK --> M(服务器返回200还是304)\nM --> N(有更新200,向服务器请求)\nM --> O(304无更新)\nN --> P(请求响应,缓存协商)\nP --> E\nL --> E\nO --> E\n\n\n此行为目前尚未在 HTML 标准中规范，仅供参考
\n
| 用户操作 | \nExpires/Cache-Control | \nLast-Modified/Etag | \n
|---|---|---|
| 地址栏回车 | \n有效 | \n有效 | \n
| 页面链接跳转 | \n有效 | \n有效 | \n
| 新开窗口 | \n有效 | \n有效 | \n
| 前进后退 | \n有效 | \n有效 | \n
| F5刷新（刷新按钮） | \n无效 | \n有效 | \n
| Ctrl+F5强制刷新 | \n无效 | \n无效 | \n
刷新请求也会被当前激活的 ServiceWorker 捕获；强制刷新或重新打开标签页则不会
\n\n\n\n\n
memory cachedisk cacheservice worker cachepush cache
https://web.dev/learn/performance/resource-hints
https://web.dev/learn/performance/prefetching-prerendering-precaching
https://developer.mozilla.org/zh-CN/docs/Glossary/Prefetch
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Guides/Speculative_loading
https://developer.chrome.google.cn/docs/web-platform/prerender-pages
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />\n<link rel="dns-prefetch" href="https://fonts.gstatic.com" />\n\n\ncrossorigin 属性必须对跨源请求设置，否则不会重复利用连接。
\n
<link rel="preconnect" href="https://fonts.googleapis.com" />\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />\nLink: <https://example.com>; rel="preconnect"\n<!-- prettier-ignore -->\n<link rel="preload" href="/lcp-image.jpg" as="image" />\n<link rel="preload" href="style.css" as="style" />\n<link rel="preload" href="main.js" as="script" />\n<link rel="preload" href="bg-narrow.png" as="image" media="(max-width: 600px)" />\n<link rel="preload" href="bg-wide.png" as="image" media="(min-width: 601px)" />\n<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />\n<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin />\n<link rel="preload" href="/data.json" as="fetch" crossorigin />\n<link rel="modulepreload" href="script.mjs" />\n\n\n注：
\n<link rel="prerender">已弃用
<link rel="prefetch" href="/next-page.css" as="style" />\n或使用推测规则 API
\n<script type="speculationrules">\n {\n "prerender": [\n {\n "where": {\n "and": [\n { "href_matches": "/*" },\n { "not": { "href_matches": "/logout" } },\n { "not": { "href_matches": "/*\\\\?*(^|&)add-to-cart=*" } },\n { "not": { "selector_matches": ".no-prerender" } },\n { "not": { "selector_matches": "[rel~=nofollow]" } }\n ]\n }\n }\n ],\n "prefetch": [\n {\n "urls": ["next.html", "next2.html"],\n "requires": ["anonymous-client-ip-when-cross-origin"],\n "referrer_policy": "no-referrer"\n }\n ]\n }\n</script>\nHTTP/2 服务器推送
\nimport http2 from "node:http2";\nimport fs from "node:fs/promises";\nimport path from "node:path";\nimport { fileURLToPath } from "node:url";\n\nconst { HTTP2_HEADER_PATH, HTTP2_HEADER_METHOD, HTTP2_HEADER_STATUS, HTTP_STATUS_OK, HTTP_STATUS_NOT_FOUND } =\n http2.constants;\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\n\nconst server = http2.createSecureServer({\n key: fs.readFile(path.join(__dirname, "server.key")),\n cert: fs.readFile(path.join(__dirname, "server.crt")),\n});\n\nserver.on(\n "stream",\n async (\n /** https://docs.deno.com/api/node/http2/~/ServerHttp2Stream */\n stream,\n headers,\n ) => {\n const reqPath = headers[HTTP2_HEADER_PATH];\n const reqMethod = headers[HTTP2_HEADER_METHOD];\n\n const [html, css, js] = await Promise.all([\n fs.readFile(path.join(__dirname, "index.html")),\n fs.readFile(path.join(__dirname, "style.css")),\n fs.readFile(path.join(__dirname, "script.js")),\n ]);\n\n if (reqMethod === "GET" && reqPath === "/") {\n if (stream.pushAllowed) {\n // 推送 style.css\n stream.pushStream({ [HTTP2_HEADER_PATH]: "/style.css" }, (err, pushStream) => {\n pushStream.respond({\n [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,\n "content-type": "text/css",\n });\n pushStream.end(css);\n });\n\n // 推送 script.js\n stream.pushStream({ [HTTP2_HEADER_PATH]: "/script.js" }, (err, pushStream) => {\n pushStream.respond({\n [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,\n "content-type": "application/javascript",\n });\n pushStream.end(js);\n });\n }\n\n // 响应 index.html\n stream.respond({\n [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,\n "content-type": "text/html",\n });\n stream.end(html);\n } else {\n switch (reqPath) {\n // 响应直接请求\n case "/style.css":\n stream.respond({\n [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,\n "content-type": "text/css",\n });\n stream.end(css);\n break;\n case "/script.js":\n stream.respond({\n [HTTP2_HEADER_STATUS]: HTTP_STATUS_OK,\n "content-type": "application/javascript",\n });\n stream.end(js);\n break;\n // 404\n default:\n stream.respond({ [HTTP2_HEADER_STATUS]: HTTP_STATUS_NOT_FOUND });\n stream.end();\n break;\n }\n }\n },\n);\n\nserver.listen(8443, () => {\n console.log("HTTP/2 server listening on port 8443");\n});\nnavigation.serviceWorker : interface ServiceWorkerContainer
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n </head>\n <body>\n <script type="module">\n const { serviceWorker } = navigator;\n\n serviceWorker.register("/sw.js", { scope: "/" }).then((registration) => {\n console.log("register", { registration });\n });\n\n serviceWorker.getRegistrations().then((registrations) => {\n console.log("getRegistrations", { registrations });\n });\n\n if (serviceWorker.controller) {\n console.log("controller", serviceWorker.controller);\n }\n\n serviceWorker.addEventListener("controllerchange", () => {\n console.log("controllerchange", serviceWorker.controller);\n });\n\n serviceWorker.addEventListener("message", (event) => {\n console.log("message", event.data);\n });\n\n serviceWorker.ready.then((registration) => {\n console.log("ready", { registration });\n registration.active.postMessage("Hello from the page!");\n });\n </script>\n </body>\n</html>\nServiceWorker's global is ServiceWorkerGlobalScope
\nconsole.log("ServiceWorker", serviceWorker);\n\nconst addResourcesToCache = async (resources) => {\n const cache = await caches.open("v1");\n await cache.addAll(resources);\n};\n\nself.addEventListener("install", (event) => {\n event.waitUntil(addResourcesToCache(["/", "/index.html", new Request("/style.css")]));\n});\n\nself.addEventListener("fetch", (event) => {\n event.respondWith(caches.match(event.request));\n});\nServiceWorker 相当于网络中间人，出于安全相比于普通 Worker 有更多限制：
\n\n\nTL;DR:
\n
简而言之，内容安全策略（CSP）类似于白名单机制，限制当前网页中允许执行的脚本及样式。
通过 HTTP 标头指定，用于缓解跨站脚本攻击（XSS）（显然对 SQL 注入无能为力）
现代 Web 应用的工作方式往往是从后端数据库获取数据，并渲染数据到 HTML 模板。
攻击者可能通过向表单提交一段构造的 HTML 字符串，最终导致恶意脚本在浏览器中执行。
在 CSP 之前，通常的方法是转义（Escape） HTML 字符
\nconst html = str\n .replace(/&/g, "&")\n .replace(/</g, "<")\n .replace(/>/g, ">")\n .replace(/"/g, """)\n .replace(/'/g, "'");\n或 DOMPurify。此外， HTML 标准甚至已规定 Web Sanitizer API（另见）
\nconst $div = document.querySelector("div");\nconst user_input = `<em>hello world</em><img src="" onerror=alert(0)>`;\n$div.setHTML(user_input, { sanitizer: new Sanitizer() }); // <div><em>hello world</em><img src=""></div> // [!code highlight]\n仅作文本渲染时，则可以使用 Node 接口的 textContent 属性 设置文本内容
CSP 响应头包括 Content-Security-Policy 和 Content-Security-Policy-Report-Only。
\n\n\n生产环境当然需要考虑浏览器兼容性，和渐进式应用的策略。
\n
此处仅根据 CSP Level3 进行说明，略过 Content-Security-Policy-Report-Only。
形式化语法
\nContent-Security-Policy = serialized-policy-list\n\nserialized-policy-list = 1#serialized-policy\n\nserialized-policy =\n serialized-directive *( optional-ascii-whitespace ";" [ optional-ascii-whitespace serialized-directive ] )\n\nserialized-directive = directive-name [ required-ascii-whitespace directive-value ] // [!code highlight]\ndirective-name = 1*( ALPHA / DIGIT / "-" )\ndirective-value = *( required-ascii-whitespace / ( %x21-%x2B / %x2D-%x3A / %x3C-%x7E ) )\n ; Directive values may contain whitespace and VCHAR characters,\n ; excluding ";" and ",". The second half of the definition\n ; above represents all VCHAR characters (%x21-%x7E)\n ; without ";" and "," (%x3B and %x2C respectively)\n可以看出，CSP 策略是一个指令列表，每个指令由名称和可选的值构成，通过分号分隔。
\n\n举例（注意指令值的格式）：
\nContent-Security-Policy: script-src https://safe-external-site.com *.trusted.com; default-src 'self'\n或通过 <meta http-equiv>（不支持 Report 指令）：
<meta\n http-equiv="Content-Security-Policy"\n content="script-src https://safe-external-site.com *.trusted.com; default-src 'self'"\n/>\n\n\n正如上文所述，CSP 类似于白名单，指令未声明的资源则不被允许加载。
\n
因此default-src指令非常有用
'unsafe-inline' 值允许内联资源（此处即内联 <script> 脚本），但这也给 XSS 留下可乘之机。
Content-Security-Policy: script-src 'self' 'unsafe-inline' my.trusted.domain\n因此应避免使用 'unsafe-*' 值，可使用特殊的 'nonce-*' 值
该值可由工具生成，例如 Webpack
Content-Security-Policy: script-src 'nonce-dGhpcyBpcyBhIG5v=='; style-src 'nonce-dGhpcyBpcyBhIG5v=='\n只有对应元素允许被执行
\n<script nonce="dGhpcyBpcyBhIG5v==">\n ...\n</script>\n\n<style nonce="dGhpcyBpcyBhIG5v==">\n ...\n</style>\n\n\n摘自 C99 §6.7.2.1, item 16：https://www.open-std.org/jtc1/sc22/wg14/www/docs/n1570.pdf
\n
As a special case, the last element of a structure with more than one named member may
have an incomplete array type; this is called a flexible array member. In most situations,
the flexible array member is ignored. In particular, the size of the structure is as if the
flexible array member were omitted except that it may have more trailing padding than
the omission would imply. However, when a . (or ->) operator has a left operand that is
(a pointer to) a structure with a flexible array member and the right operand names that
member, it behaves as if that member were replaced with the longest array (with the same
element type) that would not make the structure larger than the object being accessed; the
offset of the array shall remain that of the flexible array member, even if this would differ
from that of the replacement array. If this array would have no elements, it behaves as if
it had one element but the behavior is undefined if any attempt is made to access that
element or to generate a pointer one past it.
根据规范，一个拥有至少两个命名成员的结构体，允许其最后一个成员是一个数组，且没有写出长度（或者长度是 0，因此灵活数组成员也称零长度数组成员）
\n当然，还有可能有一些字节对齐的情况，此处省略，具体参见规范。
\n下面的示例实现了在堆上创建指定长度的数组（这有点类似与在栈上创建的变长数组）
此方法实现了数组的长度和数据都分配到一块连续内存，效果优于定义一个指针指向数据。
// preview: https://ideone.com/hWjI9C\n#include <stdio.h>\n#include <stdlib.h>\n\ntypedef struct\n{\n int len;\n double array[]; // 注意这与定义一个指针的不同之处\n} Vectord;\n\nVectord *newVectord(int len)\n{\n Vectord *vec = (Vectord *)malloc(sizeof(int) + sizeof(double) * len);\n vec->len = len;\n for (int i = 0; i < len; i++)\n vec->array[i] = 0;\n return vec;\n}\n\nvoid printVectord(Vectord *vec)\n{\n for (int i = 0; i < vec->len; i++)\n printf("%f ", vec->array[i]);\n puts("");\n}\n\nint main()\n{\n Vectord *vec = newVectord(3);\n printVectord(vec); // -> 0.000000 0.000000 0.000000\n\n vec->array[0] = 2;\n vec->array[1] = 3;\n vec->array[2] = 3;\n\n printVectord(vec); // -> 2.000000 3.000000 3.000000\n}\n要实现能获取数组长度，且在内存上连续，还有一种弯弯绕绕的方法就是类似于 C语言的 \\0 结尾字符串。
不过这样显然在很多情况下都不可取，因此需具体问题具体分析。
参见：
https://en.wikipedia.org/wiki/Flexible_array_member
另见：
https://en.wikipedia.org/wiki/Variable-length_array
\n\n摘自 C99 §6.7.2.1, item 13：https://www.open-std.org/jtc1/sc22/wg14/www/docs/n1570.pdf
\n
Within a structure object, the non-bit-field members and the units in which bit-fields
reside have addresses that increase in the order in which they are declared. A pointer to a
structure object, suitably converted, points to its initial member (or if that member is a
bit-field, then to the unit in which it resides), and vice versa. There may be unnamed
padding within a structure object, but not at its beginning.
根据规范，结构体的第一个字段保证对齐这段内存的第一个字节。（当然，后面的字段就可能发生字节填充）
\n因此：可以接受一个指向结构体的指针，并安全地将其转换为指向其第一个字段的指针，反之亦然。
\n这有点像继承：下面的例子中，结构体 A 和 B 的第一个字段是结构体 Base，
因此保证可以安全地将 A* 或 B* “向下转换”为 Base*
// preview: https://ideone.com/rro44a\n#include <stdio.h>\n#include <inttypes.h>\n#include <stdlib.h>\n\ntypedef enum\n{\n a = 'a',\n b = 'b',\n} BaseType;\n\ntypedef struct Base\n{\n BaseType type;\n} Base;\n\ntypedef struct A\n{\n struct Base base;\n int a;\n} A;\n\nA *newA(int a)\n{\n A *p = malloc(sizeof(A));\n p->base.type = 'a';\n p->a = a;\n return p;\n}\n\ntypedef struct B\n{\n struct Base base;\n int64_t b;\n} B;\n\nB *newB(int64_t b)\n{\n B *p = malloc(sizeof(B));\n p->base.type = 'b';\n p->b = b;\n return p;\n}\n\nint main()\n{\n A *a = newA(123);\n B *b = newB(456);\n\n Base *base;\n base = (Base *)a;\n printf("%c\\n", base->type); // -> a\n\n base = (Base *)b;\n printf("%c\\n", base->type); // -> b\n}\n另见：
https://stackoverflow.com/questions/53578631
https://en.wikipedia.org/wiki/Type_punning
https://hackmd.io/@sysprog/c-memory
\n\n\n
来自 Mozilla 的 Jason Orendorff 发表了 一篇深入分析 JS 怪异语法的精彩文章。虽然实现细节有所不同，但每个 JS 引擎都会在这些怪异上遇到相同的问题。
\n在本章节中，我们将更深入地了解 覆盖语法。它们是一种指定语法结构的语法的方法，乍一看这些语法结构似乎有歧义。
\n同样，为了简洁，这里将跳过 [In, Yield, Await] 中的下标，因为它们对于本文不重要。
有关其含义和用法的解释，请参阅 第 3 部分。
通常，解析器根据有限前瞻（固定数量的后续标记）来决定使用哪个生成。
\n在某些情况下，下一个标记会明确确定要使用的生成。例如：
\nUpdateExpression :\n LeftHandSideExpression\n LeftHandSideExpression ++\n LeftHandSideExpression --\n ++ UnaryExpression\n -- UnaryExpression\n如果我们正在解析一个 UpdateExpression 和下一个标记是 ++ 或 --，我们马上就知道要使用的生成。
如果下一个标记不是，也不算坏：我们可以从我们所在的位置开始解析一个 LeftHandSideExpression，并在解析完它之后弄清楚接下来该怎么做。
如果 LeftHandSideExpression 后的标记是 ++，那么要使用的生成就是 UpdateExpression: LeftHandSideExpression ++。对于 -- 的情况也是类似的。
并且，如果 LeftHandSideExpression 后的标记既不是 ++ 也不是 --，那么我们使用生成 UpdateExpression : LeftHandSideExpression。
区分箭头函数参数列表和带圆括号的表达式更复杂。
\n例如：
\nlet x = (a,\n这是否是箭头函数的开头，就像这样？
\nlet x = (a, b) => { return a + b };\n或者，它可能是带圆括号的表达式，就像这样？
\nlet x = (a, 3);\n带圆括号的任何东西都可以任意长 - 我们无法根据有限数量的标记知道它的内容。
\n让我们想象一下，我们有以下简单的生成：
\nAssignmentExpression :\n ...\n ArrowFunction\n ParenthesizedExpression\n\nArrowFunction :\n ArrowParameterList => ConciseBody\n现在我们无法使用有限前瞻来选择要使用的生成。如果我们必须解析一个 AssignmentExpression 且下一个标记是 (，我们如何决定接下来解析什么？
我们可以解析一个 ArrowParameterList 也可以解析一个 ParenthesizedExpression，但我们的猜测可能会出错。
CPEAAPL规范通过引入符号 CoverParenthesizedExpressionAndArrowParameterList（覆盖带括号的表达式和箭头参数列表，简称 CPEAAPL）解决了这个问题。CPEAAPL 实际上是一个 ParenthesizedExpression 或一个 ArrowParameterList，但我们现在还不知道哪一个。
CPEAAPL 的 生成 非常宽松，允许所有可以在 ParenthesizedExpression 和 ArrowParameterList 中出现的结构：
CPEAAPL :\n ( Expression )\n ( Expression , )\n ( )\n ( ... BindingIdentifier )\n ( ... BindingPattern )\n ( Expression , ... BindingIdentifier )\n ( Expression , ... BindingPattern )\n例如，以下表达式是有效的 CPEAAPL：
// 有效的 ParenthesizedExpression 和 ArrowParameterList：\n(a, b)\n(a, b = 1)\n\n// 有效的 ParenthesizedExpression：\n(1, 2, 3)\n(function foo() { })\n\n// 有效的 ArrowParameterList：\n()\n(a, b,)\n(a, ...b)\n(a = 1, ...b)\n\n// 既无效也不有效，但仍然是 CPEAAPL：\n(1, ...b)\n(1, )\n尾随逗号和 ... 只能出现在 ArrowParameterList 中。某些结构，如 b = 1 可以在两者中出现，但它们的含义不同：
在 ParenthesizedExpression 内是一个赋值，在 ArrowParameterList 内是一个有默认值的参数。
不是有效参数名称（或参数解构模式）的数字和其他 PrimaryExpressions 只能出现在 ParenthesizedExpression 中。
但它们都可以在 CPEAAPL 中出现。
CPEAAPL现在，我们可以在 AssignmentExpression 生成 中使用非常宽松的 CPEAAPL。
（注意：ConditionalExpression 通过一个这里未显示的长生成链导致 PrimaryExpression。）
AssignmentExpression :\n ConditionalExpression\n ArrowFunction\n ...\n\nArrowFunction :\n ArrowParameters => ConciseBody\n\nArrowParameters :\n BindingIdentifier\n CPEAAPL\n\nPrimaryExpression :\n ...\n CPEAAPL\n试想我们再次遇到这种情况，我们需要解析一个 AssignmentExpression 且下一个标记是 (。
现在，我们可以解析一个 CPEAAPL，并在稍后弄清楚要使用哪个生成。
无论我们要解析一个 ArrowFunction 还是一个 ConditionalExpression 都没关系，无论如何，下一个要解析的符号都在 CPEAAPL 中！
在解析完 CPEAAPL 之后，我们可以决定针对原始 AssignmentExpression（包含 CPEAAPL 的那个）使用哪个生成。该决定是根据 CPEAAPL 后的标记做出的。
如果标记是 =>，我们使用生成：
AssignmentExpression :\n ArrowFunction\n如果标记是其他东西，我们使用生成：
\nAssignmentExpression :\n ConditionalExpression\n例如：
\nlet x = (a, b) => { return a + b; };\n// ^^^^^^\n// CPEAAPL\n// ^^\n// CPEAAPL 后的标记\n\nlet x = (a, 3);\n// ^^^^^^\n// CPEAAPL\n// ^\n// CPEAAPL 后的标记\n此时，我们可以将 CPEAAPL 保留原样，并继续解析程序的其余部分。
例如，如果 CPEAAPL 位于 ArrowFunction 中，我们暂时不必查看它是否是有效的箭头函数参数列表 - 稍后可以完成此操作。
（现实中的解析器可能会选择立即执行有效性检查，但从规范的角度来看，我们无需这样做。）
正如我们之前看到的，CPEAAPL 的语法生成非常宽松，并允许无效的结构（例如 (1, ...a)）。
在根据语法解析完程序之后，我们需要禁止相应的非法结构。
规范通过添加以下限制来实现此目的：
\n\n\n\n\n
PrimaryExpression : CPEAAPL如果
\nCPEAAPL没有覆盖ParenthesizedExpression，则这是语法错误。
\n\n\n在处理生成
\n\n
PrimaryExpression : CPEAAPL的实例时，使用以下语法来精炼（refine）
\nCPEAAPL的解释：\n
ParenthesizedExpression : ( Expression )
这意味着：如果 CPEAAPL 出现在语法树中 PrimaryExpression 的位置，它实际上是一个 ParenthesizedExpression，并且这是其唯一有效生成。
Expression 永远不能为空，所以 ( ) 不是有效的 ParenthesizedExpression。
像 (1, 2, 3) 这样的逗号分隔列表是由 逗号操作符 创建的：
Expression :\n AssignmentExpression\n Expression , AssignmentExpression\n类似地，如果 CPEAAPL 出现 ArrowParameters 的位置，则适用以下限制：
\n\n\n\n
ArrowParameters : CPEAAPL如果
\nCPEAAPL没有覆盖ArrowFormalParameters，则这是语法错误。
\n\n\n当识别生成
\n\n
ArrowParameters:CPEAAPL时，使用以下语法来精炼（refine）
\nCPEAAPL的解释：\n
ArrowFormalParameters :( UniqueFormalParameters )
除了 CPEAAPL 之外，规范还将覆盖语法用于其他看起来模棱两可的结构。
ObjectLiteral 被用作覆盖语法，用于出现在箭头函数参数列表中的 ObjectAssignmentPattern。
这意味着 ObjectLiteral 允许不能出现在实际对象文字中的结构。
ObjectLiteral :\n ...\n { PropertyDefinitionList }\n\nPropertyDefinition :\n ...\n CoverInitializedName\n\nCoverInitializedName :\n IdentifierReference Initializer\n\nInitializer :\n = AssignmentExpression\n例如：
\nlet o = { a = 1 }; // 语法错误\n\n// 具有具有默认值的解构参数的箭头函数：\nlet f = ({ a = 1 }) => { return a; };\nf({}); // 返回 1\nf({a : 6}); // 返回 6\n异步箭头函数在有限前瞻下看起来也很模棱两可：
\nlet x = async(a,\n这是调用名为 async 的函数还是异步箭头函数？
let x1 = async(a, b);\nlet x2 = async();\nfunction async() { }\n\nlet x3 = async(a, b) => {};\nlet x4 = async();\n为此，语法定义了一个覆盖语法符号 CoverCallExpressionAndAsyncArrowHead，其工作方式与 CPEAAPL 类似。
在本集中，我们研究了规范如何定义覆盖语法，以及在无法根据有限前瞻识别当前语法结构的情况下如何使用它们。
\n具体来说，我们研究了区分箭头函数参数列表与括号表达式以及规范如何通过在解析阶段使用覆盖语法来宽松地解析模棱两可的结构，并在稍后使用静态语义规则对其进行限制。
\n","tags":["ecma262"]},{"id":"understanding-ecmascript-part-3","url":"https://yieldray.fun/posts/understanding-ecmascript-part-3","title":"理解ECMAScript规范（Part 3）","date_published":"2024-03-09T10:00:00.000Z","date_modified":"2024-03-09T10:00:00.000Z","content_text":"\n\n\n
本节中，我们将深入了解 ECMAScript 语言及其语法定义。如果你不熟悉上下文无关文法，现在是查阅基础知识的好时机，因为规范使用上下文无关文法来定义语言。
参见 《Crafting Interpreters》中有关上下文无关文法的章节 以了解通俗易懂的介绍，或参见 维基百科页面 以了解更数学化的定义。
ECMAScript 规范定义了四种语法：
\n词法语法 描述了如何将 Unicode 代码点 转化为一系列 输入元素（标记、行终止符、注释、空白）。
\n句法语法 定义了语法正确的程序如何由标记组成。
\n正则表达式语法 描述了如何将 Unicode 代码点转换为正则表达式。
\n数字字符串语法 描述了如何将字符串转换为数字值。
\n每个语法都定义为一个上下文无关文法，由一组产生式组成。
\n语法使用稍微不同的表示法：句法语法使用 LeftHandSideSymbol : ，而词法语法和正则表达式语法使用 LeftHandSideSymbol :: ，数字字符串语法使用 LeftHandSideSymbol ::: 。
接下来，我们将更详细地研究词法语法和句法语法。
\n规范将 ECMAScript 源文本定义为 Unicode 代码点的序列。例如，变量名不仅限于 ASCII 字符，还可以包括其他 Unicode 字符。
规范并未讨论实际编码（例如 UTF-8 或 UTF-16）。它假定根据源代码所在的编码，源代码已经转换为 Unicode 代码点序列。
无法预先标记 ECMAScript 源代码，这使得词法语法的定义变得稍微复杂一些。
\n例如，如果不对出现 / 的上下文进行更宏观的观察，我们就无法确定 / 是除法运算符还是正则表达式的开始：
const x = 10 / 5;\n这里，/ 是 DivPunctuator。
const r = /foo/;\n这里，第一个 / 是 RegularExpressionLiteral 的开始。
模板引入了类似的歧义—— }` 的解释取决于其出现的上下文：
const what1 = 'temp';\nconst what2 = 'late';\nconst t = `I am a ${ what1 + what2 }`;\n这里，`I am a ${ 是 TemplateHead ，而 }` 是 TemplateTail 。
if (0 == 1) {\n}`not very useful`;\n这里，} 是 RightBracePunctuator ，而 ` 是 NoSubstitutionTemplate 的开始。
即使 / 和 }` 的解释取决于它们的“上下文”（它们在代码语法结构中的位置），但我们接下来描述的语法仍然是上下文无关的。
词法语法使用几个目标符号来区分允许使用某些输入元素或不允许使用某些输入元素的上下文。
例如，目标符号 InputElementDiv 用于 / 表示除法和 /= 表示除法赋值的上下文。InputElementDiv 产生式列出了可以在此上下文中产生的可能的标记：
InputElementDiv ::\n WhiteSpace\n LineTerminator\n Comment\n CommonToken\n DivPunctuator\n RightBracePunctuator\n在此上下文中，遇到 / 会产生 DivPunctuator 输入元素。在此处生成 RegularExpressionLiteral 不是一个可选项。
另一方面，InputElementRegExp 是 / 是正则表达式开头的上下文的的目标符号：
InputElementRegExp ::\n WhiteSpace\n LineTerminator\n Comment\n CommonToken\n RightBracePunctuator\n RegularExpressionLiteral\n从产生式中可以看出，有可能产生 RegularExpressionLiteral 输入元素，但生成 DivPunctuator 是不可能的。
类似地，还有另一个目标符号 InputElementRegExpOrTemplateTail ，用于允许 TemplateMiddle 和 TemplateTail 的上下文，以及 RegularExpressionLiteral 。
最后，InputElementTemplateTail 是只允许 TemplateMiddle 和 TemplateTail 但不允许 RegularExpressionLiteral 的上下文的目标符号。
在实现中，句法语法分析器（“解析器”）可以调用词法语法分析器（“标记器”或“词法分析器”），将目标符号作为参数传递，并请求下一个适合该目标符号的输入元素。
\n我们研究了词法语法，它定义了如何从 Unicode 代码点构造标记。句法语法基于它：它定义了语法正确的程序如何由标记组成。
\n向语法中引入新关键字是一个有可能会破坏现有代码的更改——如果现有代码已经将关键字用作标识符怎么办？
\n例如，在 await 成为一个关键字之前，某人可能编写了以下代码：
function old() {\n var await;\n}\nECMAScript 语法仔细地添加了 await 关键字，以便此代码继续工作。在异步函数内，await 是一个关键字，所以这是不起作用的：
async function modern() {\n var await; // 语法错误\n}\n在非生成器中允许 yield 作为标识符，而在生成器中不允许 yield 的工作方式类似。
了解 await 如何作为标识符被允许需要了解 ECMAScript 特定的句法语法符号。让我们直接深入了解一下！
让我们看看 VariableStatement 的产生式是如何定义的。对语法的一瞥可能会让人有点望而生畏：
VariableStatement[Yield, Await] :\n var VariableDeclarationList[+In, ?Yield, ?Await] ;\n下标（[Yield, Await]）和前缀（+ 在 +In 中以及 ? 在 ?Async 中）是什么意思？
符号在 [语法符号] 部分（https://tc39.es/ecma262/#sec-grammar-notation）中进行了解释。
\n下标都是一次用于表示一组左侧符号的产生式集的速记符号。左侧符号有两个参数，这两个参数展开成四个“真正的”左侧符号：VariableStatement、VariableStatement_Yield、VariableStatement_Await 和 VariableStatement_Yield_Await。
请注意，这里的普通 VariableStatement 表示“没有 _Await 和 _Yield 的 VariableStatement”。它不应与 VariableStatement[Yield, Await] 混淆。
在产生式的右侧，我们看到速记符号 +In，表示“使用带有 _In 的版本”，和 ?Await，表示“当且仅当左侧符号有 _Await 时，使用带有 _Await 的版本”（对于 ?Yield 类似）。
第三个速记符号 ~Foo，表示“使用没有 _Foo 的版本”，未在此产生式中使用。
有了这些信息，我们可以这样展开产生式：
\nVariableStatement :\n var VariableDeclarationList_In ;\n\nVariableStatement_Yield :\n var VariableDeclarationList_In_Yield ;\n\nVariableStatement_Await :\n var VariableDeclarationList_In_Await ;\n\nVariableStatement_Yield_Await :\n var VariableDeclarationList_In_Yield_Await ;\n最终，我们需要找出两件事：
\n_Await 还是不带有 _Await 的情况？Something_Await 和 Something（没有 _Await）的产生式在何处出现分歧？_Await 或没有 _Await？我们先来解决第一个问题。不难猜到，非异步函数和异步函数在我们为函数体选择参数 _Await 或不选择参数 _Await 方面有所不同。
阅读异步函数声明的产生式时，我们发现了 此内容：
AsyncFunctionBody :\n FunctionBody[~Yield, +Await]\n请注意，AsyncFunctionBody 没有参数——它们会被添加到右侧的 FunctionBody 中。
如果我们展开此产生式，我们将得到：
\nAsyncFunctionBody :\n FunctionBody_Await\n换句话说，异步函数有 FunctionBody_Await，这意味着函数体将 await 视为一个关键字。
另一方面，如果我们在一个非异步函数内，相关的产生式 是：
\nFunctionDeclaration[Yield, Await, Default] :\n function BindingIdentifier[?Yield, ?Await] ( FormalParameters[~Yield, ~Await] ) { FunctionBody[~Yield, ~Await] }\n（FunctionDeclaration 有另一个产生式，但与我们的代码示例无关。）
为了避免组合展开，让我们忽略此特定产生式中不使用的 Default 参数。
产生式展开后的形式是：
\nFunctionDeclaration :\n function BindingIdentifier ( FormalParameters ) { FunctionBody }\n\nFunctionDeclaration_Yield :\n function BindingIdentifier_Yield ( FormalParameters ) { FunctionBody }\n\nFunctionDeclaration_Await :\n function BindingIdentifier_Await ( FormalParameters ) { FunctionBody }\n\nFunctionDeclaration_Yield_Await :\n function BindingIdentifier_Yield_Await ( FormalParameters ) { FunctionBody }\n在此产生式中，我们始终得到 FunctionBody 和 FormalParameters（没有 _Yield 和没有 _Await），因为它们在未展开的产生式中使用 [~Yield, ~Await] 进行参数化。
函数名称的处理不同：如果左侧符号具有 _Await 和 _Yield，则函数名称将获得参数 _Await 和 _Yield。
总结一下：异步函数具有 FunctionBody_Await，非异步函数具有 FunctionBody（没有 _Await）。
由于我们讨论的是非生成器函数，因此我们的异步示例函数和非异步示例都使用不带 _Yield 的参数。
也许很难记住哪一个是 FunctionBody，哪一个是 FunctionBody_Await。FunctionBody_Await 是用于 await 是标识符的函数，还是用于 await 是关键字的函数？
你可以将 _Await 参数理解为“await 是一个关键字”。这种方法还可以面向未来。想象一下，添加了一个新关键字 blob，但仅在“blob 状”函数内。
非 blob 状的非异步非生成器仍会具有 FunctionBody（没有 _Await、_Yield 或 _Blob），就像它们现在一样。
Blob 状函数将具有 FunctionBody_Blob，异步 blob 状函数将具有 FunctionBody_Await_Blob，依此类推。
我们仍然需要向产生式添加 Blob 下标，但已经存在的函数的 FunctionBody 的展开形式保持不变。
await 作为标识符接下来，我们需要找出如何在 FunctionBody_Await 内部将 await 不允许作为一个标识符。
我们可以进一步跟踪产生式，以了解 _Await 参数如何从 FunctionBody 原封不动地传递到我们先前看到的 VariableStatement 产生式。
因此，在异步函数内，我们将有一个 VariableStatement_Await，在非异步函数内，我们将有一个 VariableStatement。
我们可以进一步跟踪产生式，并跟踪参数。我们已经看到了 VariableStatement 的产生式：
VariableStatement[Yield, Await] :\n var VariableDeclarationList[+In, ?Yield, ?Await] ;\nVariableDeclarationList 的所有产生式都会原封不动地传递参数：
VariableDeclarationList[In, Yield, Await] :\n VariableDeclaration[?In, ?Yield, ?Await]\n（这里我们只展示与我们的示例相关的 产生式。）
\nVariableDeclaration[In, Yield, Await] :\n BindingIdentifier[?Yield, ?Await] Initializer[?In, ?Yield, ?Await] opt\n速记符号 opt 表示右侧符号是可选的；实际上有两个产生式，一个带有可选符号，一个不带有可选符号。
在与我们的示例相关的简单情况下，VariableStatement 由关键字 var 组成，后面跟着一个没有初始值设定项的 BindingIdentifier，最后以分号结尾。
为了不允许或允许 await 作为 BindingIdentifier，我们希望最终得到类似这样的内容：
BindingIdentifier_Await :\n Identifier\n yield\n\nBindingIdentifier :\n Identifier\n yield\n await\n这将不允许在异步函数内将 await 作为标识符，并在非异步函数内允许将其作为标识符。
但规范并不是这样定义的，相反我们发现了 此产生式：
\nBindingIdentifier[Yield, Await] :\n Identifier\n yield\n await\n展开后，这意味着以下产生式：
\nBindingIdentifier_Await :\n Identifier\n yield\n await\n\nBindingIdentifier :\n Identifier\n yield\n await\n（我们省略了在我们的示例中不需要的 BindingIdentifier_Yield 和 BindingIdentifier_Yield_Await 的产生式。）
这看起来像 await 和 yield 将始终被允许用作标识符。怎么回事？整篇博文都白写了？
事实证明，禁止将 await 作为异步函数内的标识符需要 静态语义。
静态语义描述静态规则——也就是说，在程序运行之前检查的规则。
\n在这种情况下，BindingIdentifier 的 静态语义 定义了以下语法导向规则：
\n\n\nBindingIdentifier[Yield, Await] : await\n如果此产生式具有
\n[Await]参数，则这是 Syntax Error。
实际上，这禁止了 BindingIdentifier_Await : await 产生式。
规范解释说，之所以有此产生式但通过静态语义将其定义为 Syntax Error，是因为与自动分号插入（ASI）发生干扰。
\n记住，当我们无法根据语法产生式解析代码行时，ASI 就会发挥作用。ASI 会尝试添加分号以满足语句和声明必须以分号结尾的要求。（我们将在以后的章节中详细描述 ASI。）
\n考虑以下代码（规范中的示例）：
\nasync function too_few_semicolons() {\n let\n await 0;\n}\n如果语法不允许 await 作为标识符，ASI 会发挥作用并将代码转换成以下语法正确的代码，该代码也使用 let 作为标识符：
async function too_few_semicolons() {\n let;\n await 0;\n}\n由于这种类型的与 ASI 的干扰被认为过于混乱，因此静态语义被用于禁止将 await 作为标识符。
StringValue还有一条相关的规则：
\n\n\n\nBindingIdentifier : Identifier\n如果此产生式具有
\n[Await]参数并且StringValueofIdentifier是"await"，则这是 Syntax Error。
这起初可能会令人困惑。Identifier 定义如下：
Identifier :\n IdentifierName but not ReservedWord\nawait 是 ReservedWord，所以 Identifier 怎么会是 await 呢？
事实证明，Identifier 不能是 await，但它可以是 StringValue 为 "await" 的其他东西——字符序列 await 的不同表示形式。
标识符名称的 静态语义 定义了如何计算标识符名称的 StringValue。
例如，a 的 Unicode 转义序列是 \\u0061，所以 \\u0061wait 的 StringValue 是 "await"。\\u0061wait 不会被词法语法识别为关键字，而将是一个 Identifier。
静态语义禁止将其用作异步函数内的变量名。
因此，这是可行的：
\nfunction old() {\n var \\u0061wait;\n}\n而这不行：
\nasync function modern() {\n var \\u0061wait; // Syntax error\n}\n在本节中，我们熟悉了词法语法、句法语法以及用于定义句法语法的速记符号。
作为一个示例，我们研究了禁止在异步函数内将 await 用作标识符，但在非异步函数内允许将其用作标识符。
句法语法的其他有趣部分，例如自动分号插入和覆盖语法，将在以后的章节中介绍。敬请期待！
\n","tags":["ecma262"]},{"id":"understanding-ecmascript-part-2","url":"https://yieldray.fun/posts/understanding-ecmascript-part-2","title":"理解ECMAScript规范（Part 2）","date_published":"2024-03-08T10:00:00.000Z","date_modified":"2024-03-08T10:00:00.000Z","content_text":"\n\n\n
了解规范的一个有趣方法是从我们已知的 JavaScript 特性开始，找出其规范化方式。
\n\n\n警告！本章节包含从 ECMAScript 规范（截至 2020 年 2 月）复制粘贴的算法。它们最终会过时。
\n
我们知道属性是在原型链中查找的：如果一个对象没有我们要读取属性，我们会向上遍历原型链直到找到它（或找到不再有原型的对象）。
\n例如：
\nconst o1 = { foo: 99 };\nconst o2 = {};\nObject.setPrototypeOf(o2, o1);\no2.foo;\n// → 99\n让我们尝试找出此行为的定义位置。一个好的出发点是 对象内部方法 列表。
\n这里既有 [[GetOwnProperty]] 也有 [[Get]] — 我们对不受限于自身属性的版本感兴趣，所以我们会使用 [[Get]]。
遗憾的是，属性描述器规范类型 也有一个名为 [[Get]] 的字段，因此在规范中浏览 [[Get]] 时，我们需要仔细区分两个独立的使用情况。
[[Get]] 是一种必要内部方法。普通对象实现必要内部方法的默认行为。异类对象可以定义自己的内部方法 [[Get]]，与默认行为不同。在这篇文章中，我们重点关注普通对象。
[[Get]] 的默认实现委托给 OrdinaryGet：
\n\n\n当
\nO的[[Get]]内部方法使用属性键P和 ECMAScript 语言值Receiver被调用时，执行以下步骤：\n
\n- 返回
\n? OrdinaryGet(O, P, Receiver)。
我们很快就会看到 Receiver 是在调用访问器属性的 getter 函数时用作this value的值。
OrdinaryGet 定义如下：
\n\n\n
OrdinaryGet ( O, P, Receiver )当抽象操作
\nOrdinaryGet使用对象O、属性键P和 ECMAScript 语言值Receiver被调用时，执行以下步骤：\n
\n- 断言：
\nIsPropertyKey(P)为true。- 令
\ndesc为? O.[[GetOwnProperty]](P)。- 若
\ndesc为undefined，则\n
\n- 令
\nparent为? O.[[GetPrototypeOf]]()。- 若
\nparent为null，则返回undefined。- 返回
\n? parent.[[Get]](P, Receiver)。- 若
\nIsDataDescriptor(desc)为true，则返回desc.[[Value]]。- 断言：
\nIsAccessorDescriptor(desc)为true。- 令
\ngetter为desc.[[Get]]。- 若
\ngetter为undefined，则返回undefined。- 返回
\n? Call(getter, Receiver)。
原型链遍历位于步骤 3 中：如果我们未找到属性作为自身属性，我们调用原型的 [[Get]] 方法，该方法再次委托给 OrdinaryGet。
如果我们仍然找不到属性，我们调用其原型的 [[Get]] 方法，该方法再次委托给 OrdinaryGet，依此类推，直至我们找到该属性或到达没有原型的对象。
让我们看看当我们访问 o2.foo 时此算法如何工作。首先，我们用 O 为 o2 且 P 为 "foo" 的值调用 OrdinaryGet。O.[[GetOwnProperty]]("foo") 返回 undefined，因为 o2 没有名为 "foo" 的自身属性，因此我们使用步骤 3 中的分支。
在步骤 3.a 中，我们将 parent 设置为 o2 的原型，即 o1。parent 不为 null，因此我们不会在步骤 3.b 中返回。
在步骤 3.c 中，我们使用属性键 "foo" 调用父级的 [[Get]] 方法，并返回任何它返回的内容。
父级 (o1) 是一个普通对象，因此其 [[Get]] 方法再次调用 OrdinaryGet，这次 O 为 o1 且 P 为 "foo"。o1 有一个名为 "foo" 的自身属性，因此在步骤 2 中，O.[[GetOwnProperty]]("foo") 返回关联的属性描述符，我们将它存储在 desc 中。
属性描述符 是一种规范类型。
数据属性描述符直接将属性的值存储在 [[Value]] 字段中。
访问器属性描述符将访问器函数存储在字段 [[Get]] 和/或 [[Set]] 中。
在本例中，与 "foo" 关联的属性描述符是数据属性描述符。
我们第 2 步中存储在 desc 中的数据属性描述符不是 undefined，因此我们不会在步骤 3 中使用 if 分支。接下来，我们执行步骤 4。
属性描述符是数据属性描述符，因此我们返回其 [[Value]] 字段，在步骤 4 中返回 99，我们完成了。
Receiver 是什么，它从何而来？Receiver 参数仅在第 8 步访问器属性的情况下使用。它在调用访问器属性的 getter 函数时作为this value传递。
OrdinaryGet 在整个递归过程中传递原始 Receiver，保持不变（步骤 3.c）。让我们找出 Receiver 最初来自哪里！
搜索调用 [[Get]] 的地方，我们发现一个操作在 Reference 上操作的抽象操作 GetValue。Reference 是一种规范类型，由基值、引用名称和严格引用标志组成。在 o2.foo 的情况下，基值为对象 o2，引用名称为字符串 "foo"，严格引用标志为 false，因为示例代码是松散的。
附属内容：Reference 不是 Record，即使它看起来像那样。
它包含三个组件，这些组件同样可以表示为三个命名字段。Reference 不是 Record，仅仅是因为历史原因。
GetValue让我们看看 GetValue 的定义：
\n\n\n\n
\n- \n
ReturnIfAbrupt(V)。- 若
\nType(V)不是Reference，则返回V。- 令
\nbase为GetBase(V)。- 若
\nIsUnresolvableReference(V)为true，则抛出ReferenceError异常。- 若
\nIsPropertyReference(V)为true，则\n
\n- 若
\nHasPrimitiveBase(V)为true，则\n
\n- 断言：在这种情况下，
\nbase绝不会是undefined或null。- 将
\nbase设置为! ToObject(base)。- 返回
\n? base.[[Get]](GetReferencedName(V), GetThisValue(V))。- 否则，
\n\n
\n- 断言：
\nbase是一个 Environment Record。- 返回
\n? base.GetBindingValue(GetReferencedName(V), IsStrictReference(V))
在我们示例中，引用为 o2.foo，这是一个属性引用（property reference）。因此，我们使用分支 5。我们不使用 5.a 中的分支，因为基(o2)不是 原始值（Number, String, Symbol, BigInt, Boolean, Undefined, or Null）。
然后我们在步骤 5.b 中调用 [[Get]]。我们传递的 Receiver 是 GetThisValue(V)。在本例中，它只是 Reference 的基值（base value）：
\n\n\n\n
\n- 断言：
\nIsPropertyReference(V)为true。- 若
\nIsSuperReference(V)为true，则\n
\n- 返回 Reference
\nV的thisValue组件的值。- 返回
\nGetBase(V)。
对于 o2.foo，我们不使用步骤 2 中的分支，因为它不是 Super Reference（例如 super.foo），但我们使用步骤 3 并返回 Reference 的基值，即 o2。
将所有内容拼凑在一起，我们发现将 Receiver 设置为原始 Reference 的基，然后我们在原型链遍历期间保持不变。最后，如果我们找到的属性是访问器属性，我们使用 Receiver 作为this value来调用它。
特别是，getter 内部的this value引用的是我们尝试从中获取该属性的原始对象，而不是我们在原型链遍历期间找到该属性的对象。
\n让我们试一试！
\nconst o1 = { x: 10, get foo() { return this.x; } };\nconst o2 = { x: 50 };\nObject.setPrototypeOf(o2, o1);\no2.foo;\n// → 50\n在此示例中，我们有一个名为 foo 的访问器属性，并且为它定义了一个 getter。getter 返回 this.x。
然后，我们访问 o2.foo - getter 返回什么？
我们发现，当我们调用 getter 时，this value是我们最初尝试从中获取属性的对象，而不是我们在原型链遍历期间找到该属性的对象。在本例中，this value 是 o2，而不是 o1。我们可以通过检查 getter 是否返回 o2.x 或 o1.x 来验证这一点，实际上，它返回 o2.x。
有效！我们根据在规范中阅读的内容预测了此代码片段的行为。
\n[[Get]]？规范在哪指出访问属性（例如 o2.foo）时将调用对象内部方法 [[Get]]？这肯定在某个地方有定义。不要只相信我的话！
我们发现对象内部方法 [[Get]] 从操作在 Reference 上的抽象操作 GetValue 调用。但是 GetValue 从何处调用？
MemberExpression 的运行时语义规范的语法规则定义了语言的语法。运行时语义 定义语法结构“表示的意思”（即在运行时如何评估它们）。
\n如果你不熟悉 上下文无关文法，现在了解一下是个好时机！
\n我们将在之后的章节中深入研究语法规则，现在先简单点！特别是，我们可以忽略本章中的下标（Yield、Await 等）。
以下生成描述了 MemberExpression 是什么样子：
MemberExpression :\n PrimaryExpression\n MemberExpression [ Expression ]\n MemberExpression . IdentifierName\n MemberExpression TemplateLiteral\n SuperProperty\n MetaProperty\n new MemberExpression Arguments\n这里有 7 个 MemberExpression 的生成（productions）。MemberExpression 仅能是 PrimaryExpression。
或者，MemberExpression 可以通过拼接另一个 MemberExpression 和 Expression 来构建：
例如，MemberExpression [ Expression ]，o2['foo']。
或者，它可以是 MemberExpression . IdentifierName，例如 o2.foo - 这是我们示例中相关的生成。
生成 MemberExpression : MemberExpression . IdentifierName 的运行时语义定义了在评估它时要执行的一组步骤：
\n\n运行时语义：
\nMemberExpression : MemberExpression . IdentifierName的评估\n
\n- 令
\nbaseReference为评估MemberExpression的结果。- 令
\nbaseValue为? GetValue(baseReference)。- 若由
\nMemberExpression匹配的代码是严格模式代码，则令strict为true；否则strict为false。- 返回
\n? EvaluatePropertyAccessWithIdentifierKey(baseValue, IdentifierName, strict)。
该算法委托给抽象操作 EvaluatePropertyAccessWithIdentifierKey，所以我们也需要阅读它：
\n\n\n
EvaluatePropertyAccessWithIdentifierKey( baseValue, identifierName, strict )抽象操作
\nEvaluatePropertyAccessWithIdentifierKey带有参数值baseValue、解析节点identifierName和布尔参数strict。它执行以下步骤：\n
\n- 断言：
\nidentifierName为IdentifierName- 令
\nbv为? RequireObjectCoercible(baseValue)。- 令
\npropertyNameString为identifierName的StringValue。- 返回类型为 Reference 的值，其基值组件（base value component）为
\nbv，引用名称组件（referenced name component）为propertyNameString，严格引用标志为strict。
即：EvaluatePropertyAccessWithIdentifierKey 构造一个 Reference，使用提供的 baseValue 作为基，identifierName 的字符串值作为属性名称，strict 作为严格模式标志。
最终，此 Reference 将传给 GetValue。这在规范的多个地方有定义，具体取决于 Reference 最终如何使用。
MemberExpression 作为参数在我们的示例中，我们使用属性访问作为参数：
\nconsole.log(o2.foo);\n在这种情况下，行为在 ArgumentList 生成运行时语义中定义，该运行时语义对参数调用 GetValue：
\n\n\n\n
ArgumentList : AssignmentExpression\n
\n- 将
\nref设置为评估AssignmentExpression的结果。- 将
\narg设置为? GetValue(ref)。- 返回唯一项目为
\narg的列表。
o2.foo 不会像 AssignmentExpression 一样，但这个生成是适用的。要了解原因，你可以查看此 附加内容，但在这一点上并不是绝对必要的。
步骤 1 中的 AssignmentExpression 是 o2.foo。ref，评估 o2.foo 的结果，就是上面提到的 Reference。在步骤 2 中，我们对其调用 GetValue。因此，我们知道对象内部方法 [[Get]] 将被调用，并且将发生原型链遍历。
在本章节中，我们研究了规范如何跨所有不同层定义语言特性（在本例中为原型查找）：触发该特性的语法结构以及定义该特性的算法。
\n","tags":["ecma262"]},{"id":"understanding-ecmascript-part-2-extra","url":"https://yieldray.fun/posts/understanding-ecmascript-part-2-extra","title":"理解ECMAScript规范（Part 2）额外内容","date_published":"2024-03-07T10:00:00.000Z","date_modified":"2024-03-07T10:00:00.000Z","content_text":"\n\n原文：https://v8.dev/blog/extras/understanding-ecmascript-part-2-extra
\n
o2.foo 是 AssignmentExpression？o2.foo 看起来不像是 AssignmentExpression，因为它没有赋值。
那么为什么它是一个 AssignmentExpression？
实际上，规范允许 AssignmentExpression 同时作为参数和赋值的右侧。例如：
function simple(a) {\n console.log('The argument was ' + a);\n}\nsimple(x = 1);\n// → Logs “The argument was 1”。\nx;\n// → 1\n…此外…
\nx = y = 5;\nx; // 5\ny; // 5\no2.foo 是一个不赋值的 AssignmentExpression。
这遵循以下语法规则，每个规则取最“简单”的情況，直到最后一条规则：
一个 AssignmentExpression 不一定需要赋值，它也可以只是一个 ConditionalExpression：
\n\n\n
（还有其他的规则，我们这里只展示相关的。）
\n一个 ConditionalExpression 不一定需要条件（a == b ? c : d），它也可以只是一个 ShortcircuitExpression：
\n\n\n
以此类推：
\n\n\n\n
ShortCircuitExpression : LogicalORExpression\n
LogicalORExpression : LogicalANDExpression\n
LogicalANDExpression : BitwiseORExpression\n
BitwiseORExpression : BitwiseXORExpression\n
BitwiseXORExpression : BitwiseANDExpression\n\n\n
BitwiseANDExpression : EqualityExpression
差不多就这些…
\n\n\n\n
ShiftExpression : AdditiveExpression\n\n\n
AdditiveExpression : MultiplicativeExpression
别绝望！再看几条规则……
\n\n\n\n\n
然后我们到达了 LeftHandSideExpression 的规则：
\n\n\n
LeftHandSideExpression :NewExpressionCallExpressionOptionalExpression
不清楚哪个规则可能适用于 o2.foo。
我们只需要知道（或找出）NewExpression 实际上不必有 new 关键词。
\n\n\n
MemberExpression 看起来像是我们正在找的东西，所以现在我们取这条规则
\n\n\n
因此，如果 o2 是一个有效的 MemberExpression，那么 o2.foo 就是一个 MemberExpression。幸运的是，这很容易看出：
\n\n\n\n\n
MemberExpression : PrimaryExpression
o2 肯定是一个 Identifier，所以很不错的。o2 是一个 MemberExpression，所以 o2.foo 也是一个 MemberExpression。
一个 MemberExpression 是一个有效的 AssignmentExpression，所以 o2.foo 也是一个 AssignmentExpression。
\n\n原文：https://v8.dev/blog/understanding-ecmascript-part-1
\n
亦见：https://v8.js.cn/blog/understanding-ecmascript-part-1
ECMAScript 语言规范（ECMA262），下面简称语言规范，或规范。
\n让我们通过一个实例走进并理解规范。
下面的代码说明了如何使用 Object.prototype.hasOwnProperty：
const o = { foo: 1 };\no.hasOwnProperty("foo"); // true\no.hasOwnProperty("bar"); // false\n在上面的示例中，对象 o 并没有 hasOwnProperty 属性，因此要在原型链上找到它。
对象 o 的原型是 Object.prototype。
为了描述 Object.prototype.hasOwnProperty 是如何工作的，规范使用如下伪代码来描述：
\n\n\n
Object.prototype.hasOwnProperty(V)给定参数
\nV，调用hasOwnProperty方法，将执行如下步骤：\n
\n- 令
\nP为? ToPropertyKey(V)- 令
\nO为? ToObject(this value)- 返回
\n? HasOwnProperty(O, P)
…此外…
\n\n\n\n抽象操作
\nHasOwnProperty用于确定一个对象上是否存在指定属性键，返回一个布尔值。
该操作接受参数O和P，且O是 对象，P是属性键。此抽象操作执行如下步骤：断言：
\nType(O)为Object
断言：IsPropertyKey(P)为true
令desc为? O.[[GetOwnProperty]](P)
若desc为undefined，返回false
返回true
但，什么是 “抽象操作”（abstract operations）？[[ ]] 符号里面的东西又是什么？为什么函数前有一个 ? 符号？断言（assert）又起什么作用？
让我们一起看看！
\n\n\n注：此处类型都指数据类型（data type）
\n
规范中使用的值，例如 undefined、true 和 false 都是我们已了解的 Javascript 值。
它们也都是语言值（language values），即规范定义的语言类型（language types）的值。
同时，规范内部也会使用语言值。例如，一个内部数据类型可能包含某个可以为 true 或 false 的字段。
与之相反，JavaScript 引擎（即规范实现者）往往不在内部使用语言值。
例如，如果引擎使用 C++ 编写，则它往往使用 C++ 的 true 和 false（而不是引擎内部表示出来的 JavaScript 的 true 和 false）
除了语言类型，规范同时使用规范类型（specification types）。规范类型是仅在规范中使用的，但不存在与 JavaScript 语言的类型。JavaScript 引擎不需要（但也可以）实现它们。
在本篇博客中，我们会了解规范类型之一 —— Record（以及其子类型 Completion Record）。
抽象操作是语言规范中定义的函数。定义它们使得规范更简洁。Javascript 引擎并非必须在引擎中实现它们，它们也不能直接通过 Javascript 调用。
\n内部槽与内部方法 的名称会通过 [[ ]] 符号围住。
内部槽（internal slots）是 JavaScript 对象的数据成员，或者是一个规范类型。它们用于存储一个对象的状态。
内部方法（internal methods）是 JavaScript 对象的成员函数。
例如，每个 JavaScript 对象都有内部槽 [[Prototype]] 和内部方法 [[GetOwnProperty]]。
内部槽和内部方法无法通过 JavaScript 访问。例如，你无法访问 o.[[Prototype]] 或调用 o.[[GetOwnProperty]]。JavaScript 引擎可以（但不是必须）实现它们以备内部使用。
有时一些内部方法会直接委托同名抽象操作，例如普通对象的 [[GetOwnProperty]]：
\n\n\n当给定属性键
\nP，调用O的内部方法[[GetOwnProperty]]，将执行如下操作：\n
\n- 返回
\n! OrdinaryGetOwnProperty(O, P)
（此处感叹号标记下节再谈）
\nOrdinaryGetOwnProperty 不是内部方法，因为它不是对象关联的方法；反之，它要操作的对象作为参数传入。
OrdinaryGetOwnProperty 被称为 “普通”（ordinary）因为它操作的是普通对象。ECMAScript 对象可以是普通的（ordinary）或异类的（exotic）。普通对象必须拥有含一系列默认行为方法的必要内部方法。一个对象如果违背这些默认行为，则它是异类的。
我们最熟知的异类对象就是 Array，因为它的 length 属性违反默认行为：设置 length 属性可以从 Array 中移除元素。
必要内部方法列于此处。
\n那么上面提到的问号和感叹号是什么含义呢？为了理解它们，我们来看看 Completion Records。
\nCompletion Record 是规范类型（仅在规范中定义）。JavaScript 引擎并非必须实现对应数据类型。
\nCompletion Record 是 “record” ——— 一种具有固定命名字段的数据类型。 Completion Record 则有三个字段：
\n| 名称 | \n描述 | \n
|---|---|
[[Type]] | \n取 normal, break, continue, return, 或 throw 之一。 除 normal 外，其余皆为 abrupt completions. | \n
[[Value]] | \nThe value that was produced when the completion occurred, for example, the return value of a function or the exception (if one is thrown). | \n
[[Target]] | \nUsed for directed control transfers (not relevant for this blog post). | \n
每个抽象操作隐式返回 Completion Record。即使其看起来似乎只是返回一个简单类型如 Boolean，实际上是隐式包装为一个 [[Type]] 为 normal 的 Completion Record。（见 Implicit Completion Values）
注意 1： 规范在此方面并不完全一致；某些辅助函数返回裸值，并且其返回值按原样使用，在提取 Completion Record 中的值时也不例外。这通常在上下文中显而易见。
\n注意 2： 规范作者正研究如何使 Completion Record 的处理更显式。
\n如果算法抛出异常，则表示返回 [[Type]] 为 throw 的 Completion Record，其 [[Value]] 为异常对象。我们暂且忽略 break、continue 和 return 类型。
\n\n译注：Completion Record 简称为 Completion，
\n[[Type]]为throw的 Completion Record 称为 Throw Completion，诸如此类。
ReturnIfAbrupt(argument) 意味着执行以下步骤：
\n\n\n
\n- 若
\nargument是 abrupt，则返回argument- 将
\nargument设置为argument.[[Value]]
也就是说，我们检查一个 Completion Record；如果这是 abrupt completion，则我们立即返回。否则，我们从 Completion Record 中提取出值。
\nReturnIfAbrupt 看似为函数调用，但实际上并非如此。它将导致出现了 ReturnIfAbrupt() 的函数返回，而不是 ReturnIfAbrupt 函数本身。其行为更像 C 语言中的宏。
可按如下方式使用 ReturnIfAbrupt：
\n\n\n
\n- 令
\nobj为Foo()。（obj是一个 Completion Record。）- \n
ReturnIfAbrupt(obj)- \n
Bar(obj)。（如果我们仍在此处，则说明obj是从 Completion Record 中提取的值。）
现在，问号 发挥了作用：? Foo() 等效于 ReturnIfAbrupt(Foo())。使用简写非常实用：我们无需每次都显式编写错误处理代码。
同样，Let val be ! Foo() 等效于：
\n\n\n
\n- 令
\nval为Foo()。- 断言：
\nval不是 abrupt completion。- 将
\nval设置为val.[[Value]]。
利用此知识，我们可以按如下方式重写 Object.prototype.hasOwnProperty：
\n\n\n
Object.prototype.hasOwnProperty(V)\n
\n- 令
\nP为ToPropertyKey(V)。- 若
\nP是 abrupt completion，则返回P- 将
\nP设置为P.[[Value]]- 令
\nO为ToObject(this value)。- 若
\nO是 abrupt completion，则返回O- 将
\nO设置为O.[[Value]]- 令
\ntemp为HasOwnProperty(O, P)。- 若
\ntemp是 abrupt completion，则返回temp- 令
\ntemp为temp.[[Value]]- 返回
\nNormalCompletion(temp)
…我们也可按如下方式重写 HasOwnProperty：
\n\n\n
HasOwnProperty(O, P)\n
\n- 断言：
\nType(O)是Object。- 断言：
\nIsPropertyKey(P)为true。- 令
\ndesc为O.[[GetOwnProperty]](P)。- 如果
\ndesc是 abrupt completion，则返回desc- 将
\ndesc设置为desc.[[Value]]- 若
\ndesc是undefined，则返回NormalCompletion(false)。- 返回
\nNormalCompletion(true)。
我们还可以不带感叹号，重写 [[GetOwnProperty]] 内部方法：
\n\n\n
O.[[GetOwnProperty]]\n
\n- 令
\ntemp为OrdinaryGetOwnProperty(O, P)。- 断言：
\ntemp不是 abrupt completion。- 令
\ntemp为temp.[[Value]]。- 返回
\nNormalCompletion(temp)。
此处，我们假定 temp 是一个全新的临时变量，不会与任何其它变量冲突。
我们还利用这样一个知识：当 return 语句返回除 Completion Record 以外的其他内容时，它会隐式包装在 NormalCompletion 中。
Return ? Foo()规范使用此表示法：Return ? Foo() —— 此处问号是什么？
Return ? Foo() 展开为：
\n\n\n
\n- 令
\ntemp为Foo()。- 如果
\ntemp是 abrupt completion，则返回temp。- 将
\ntemp设置为temp.[[Value]]。- 返回
\nNormalCompletion(temp)。
这与 Return Foo() 相同；对于 abrupt 和 normal completions，其表现相同。
Return ? Foo() 仅出于规范编辑目的，以更明确地说明 Foo 返回一个 Completion Record。
规范中的断言用于断言算法中的不变量。添加它们只是用于澄清，实现者并不需要添加 —— 即实现者无需检查断言。
\n\n\n译注：这里的断言有点像标注类型。
\n
抽象操作委托给其它抽象操作（见下图），但是根据这篇博文，我们应该能够弄清楚他们做了什么。
我们将遇到 Property Descriptors，它仅仅是另一个规范类型。
![\"\"](\"https://wsrv.nl/?url=https://v8.dev/_img/understanding-ecmascript-part-1/call-graph.svg\")
从 Object.prototype.hasOwnProperty 开始的函数调用图
We read through a simple method — Object.prototype.hasOwnProperty — and abstract operations it invokes. We familiarized ourselves with the shorthands ? and ! related to error handling. We encountered language types, specification types, internal slots, and internal methods.
\n\n","tags":["ecma262"]},{"id":"nodejs-express-next","url":"https://yieldray.fun/posts/nodejs-express-next","title":"Express之next()","date_published":"2024-03-04T18:44:44.000Z","date_modified":"2024-03-04T18:44:44.000Z","content_text":"How to Read the ECMAScript Specification：从一个稍微不同的角度出发，包含了本篇中的大部分材料。中文翻译
\n
express 的 next() 函数类型如下
export interface NextFunction {\n (err?: any): void;\n /**\n * "Break-out" of a router by calling {next('router')};\n * @see {https://expressjs.com/en/guide/using-middleware.html#middleware.router}\n */\n (deferToNext: "router"): void;\n /**\n * "Break-out" of a route by calling {next('route')};\n * @see {https://expressjs.com/en/guide/using-middleware.html#middleware.application}\n */\n (deferToNext: "route"): void;\n}\nexpress 的 next() 函数可能稍显复杂，不妨先看看 koa 的 next() 函数，通过 koa-compose 包实现（另见此处），其代码比 express 简洁，并且更好地支持异步中间件
function (context, next) {\n // last called middleware #\n let index = -1\n return dispatch(0)\n function dispatch (i) {\n if (i <= index) return Promise.reject(new Error('next() called multiple times'))\n index = i\n let fn = middleware[i]\n if (i === middleware.length) fn = next // 若当前已运行所有中间件\n if (!fn) return Promise.resolve() // 如果没有调用 next 函数，停止运行\n try {\n return Promise.resolve(fn(context, dispatch.bind(null, i + 1))) // 运行下一个中间件\n } catch (err) {\n return Promise.reject(err)\n }\n }\n}\n再简化（next() 函数无 err 参数）
const next = /* async */ () => {\n let mw;\n while (!mw && mwArray.length > 0) {\n mw = mwArray.shift(); // 添加时 push()\n }\n /* await */ mw?.(req, res, next);\n};\n注意： express 实际继承自 EventEmitter，就和 Node.js 中其它异步机制一样，不关心回调函数是否异步
对于 express，缺点在于中间件内部抛出的异常必须通过 next() 函数手动捕获
express 的 next() 函数如下：
https://github.com/expressjs/express/blob/master/lib/router/route.js
Route.prototype.dispatch = function dispatch(req, res, done) {\n var idx = 0;\n var stack = this.stack;\n var sync = 0;\n\n if (stack.length === 0) {\n return done();\n }\n var method = typeof req.method === "string" ? req.method.toLowerCase() : req.method;\n\n if (method === "head" && !this.methods["head"]) {\n method = "get";\n }\n\n req.route = this;\n\n next();\n\n function next(err) {\n // signal to exit route\n if (err && err === "route") {\n return done();\n }\n\n // signal to exit router\n if (err && err === "router") {\n return done(err);\n }\n\n // max sync stack\n if (++sync > 100) {\n return setImmediate(next, err);\n }\n\n var layer = stack[idx++];\n\n // end of layers\n if (!layer) {\n return done(err);\n }\n\n if (layer.method && layer.method !== method) {\n next(err);\n } else if (err) {\n layer.handle_error(err, req, res, next);\n } else {\n layer.handle_request(req, res, next);\n }\n\n sync = 0;\n }\n};\n在本文中，React 状态管理指的是管理 React 组件外部的状态。
\n“状态”往往就是外部的数据源，状态管理库管理的数据源主要是（手动创建的）普通的 JavaScript 值（例如 WebSocket 就不包含了）。
状态管理库要做的就是当数据源变更时，触发组件重渲染，以达到同步内外数据的状态。
状态管理库的原理，简单来说就是：要触发重渲染，调用 setState 函数；要同步外部数据，调用 useEffect 函数。（另见：Why React Re-Renders）
\n现代库往往会顾虑到 SSR 的情况，使用 useSyncExternalStore 订阅数据源是一个很好的选择。
\nTODO: 一些状态管理库，例如 React Redux 会用到 Provider。
以下状态管理库不依赖 Context
\n| \n | 可变性 | \n原子性 | \n
|---|---|---|
| zustand | \n❎ | \n❎ | \n
| jotai | \n❎ | \n✅ | \n
| valtio | \n✅ | \n❎ | \n
\n\n下面简单介绍一下它们的核心 API
\n
以下 TS 类型为了演示方便，可能是修改和简化过的
import React from "react";\nimport { create } from "zustand";\n\ninterface BearState {\n bears: number;\n increase: (by: number) => void;\n}\n\nconst useBearStore: UseBoundStore<BearState> = create<BearState>()(\n (\n setState: StoreApi<BearState>["setState"],\n getState: StoreApi<BearState>["getState"],\n storeApi: StoreApi<BearState>,\n ) => ({\n bears: 0,\n increase: (by) => setState((state) => ({ bears: state.bears + by })),\n removeAll: () => setState({ bears: 0 }),\n }),\n);\n\nfunction BearCounter() {\n const bears = useBearStore((state) => state.bears);\n return React.createElement("h1", {}, `${bears} around here ...`);\n}\n\nfunction Controls() {\n const increasePopulation = useBearStore((state) => state.increase);\n return React.createElement("button", { onClick: increasePopulation }, "one up");\n}\n\n// 类型\n\ntype UseBoundStore<T> = StoreApi<T> & {\n (): T;\n <U>(selector: (state: T) => U): U;\n};\n\ninterface StoreApi<T> {\n setState: (partial: MaybePartial<T> | ((state: T) => MaybePartial<T>), replace?: boolean | undefined) => void;\n getState: () => T;\n getInitialState: () => T;\n subscribe: (listener: (state: T, prevState: T) => void) => VoidFunction;\n}\n\ntype MaybePartial<T> = T | Partial<T>;\n另见：https://docs-zustand.surge.sh/modules.html
\n// primitive atom\nfunction atom<Value>(initialValue: Value): PrimitiveAtom<Value> & WithInitialValue<Value>;\n\n// read-only derived atom\nfunction atom<Value>(read: Read<Value>): Atom<Value>;\n\n// write-only derived atom\nfunction atom<Value, Args extends unknown[], Result>(\n initialValue: Value, // it's a convention to pass `null` for the first argument\n write: Write<Args, Result>,\n): WritableAtom<Value, Args, Result> & WithInitialValue<Value>;\n\n// writable derived atom\nfunction atom<Value, Args extends unknown[], Result>(\n read: Read<Value>,\n write: Write<Args, Result>,\n): WritableAtom<Value, Args, Result>;\n\n// functions（简化）\ntype Read<Value> = (get: Getter) => Value;\n\ntype Write<Args extends unknown[], Result> = (get: Getter, set: Setter, ...args: Args) => Result;\n\ntype Getter = <Value>(atom: Value) => Value;\n\ntype Setter = <Value, Args extends unknown[], Result>(atom: Value, ...args: Args) => Result;\n// primitive or writable derived atom\nfunction useAtom<Value, Args extends unknown[], Result>(\n atom: WritableAtom<Value, Args, Result>,\n options?: { store?: Store },\n): [Value, SetAtom<Args, Result>];\n\n// read-only atom\nfunction useAtom<Value>(atom: Atom<Value>, options?: { store?: Store }): [Value, never];\n\ntype SetAtom<Args extends unknown[], Result> = <A extends Args>(...args: A) => Result;\n另见：https://docs-jotai.surge.sh/modules.html
\nvaltio 基于 Proxy，很容易让人联想到 @vue/reactivity API
实际上是有很多区别的，只是心智模型类似
注意：因为基于 Proxy，因此只能监听对象
\nimport { proxy, useSnapshot } from "valtio";\n\nconst state = proxy({ count: 0, meta: { text: "hello" } });\n\n// mutate from anywhere\nsetInterval(() => {\n ++state.count;\n}, 1000);\n\nfunction Counter() {\n const snap = useSnapshot(state);\n const meta = useSnapshot(state.meta);\n return (\n <div>\n <span>{meta.text}</span>\n <span>{snap.count}</span>\n <button\n onClick={() => {\n // also read from the state proxy in callbacks\n if (state.count < 10) ++state.count;\n }}\n >\n +1\n </button>\n </div>\n );\n}\n\n// 类型\n\nfunction proxy<T extends object>(initialObject?: T): T;\nfunction useSnapshot<T extends object>(\n proxyObject: T,\n options?: {\n sync?: boolean;\n },\n): DeepReadonly<T>;\n另见：https://docs-valtio.surge.sh/modules.html
\n","tags":["js","react"]},{"id":"nodejs-modules","url":"https://yieldray.fun/posts/nodejs-modules","title":"Node.js模块处理机制","date_published":"2024-02-10T23:00:00.000Z","date_modified":"2025-04-06T18:00:00.000Z","content_text":"本文不讨论具体的模块解析识和加载步骤，文档对此有详细描述。
\n\n\n\n
require()模块解析算法
CommonJS 模块执行前会被如下函数包装：（参见此处 Node.js 源码）
\n(function (\n exports: Module["exports"], // 指向 module.exports\n require: Require,\n module: Module, // 指向当前模块\n __filename: string,\n __dirname: string,\n) {\n // 对 module.exports *同步*赋值，将值导出\n // module.exports 默认值是一个空对象，exports 仅当包装模块时是对这个对象的引用\n // 最终实际导出值是 module.exports，而不是 exports\n});\n为了验证之，测试 arguments 变量即可
\n// test.cjs\nconsole.log(arguments);\nrequire() 函数定义如下
interface Require {\n (id: string): any;\n resolve: RequireResolve;\n cache: Dict<NodeModule>;\n main: Module | undefined;\n}\n\ninterface RequireResolve {\n (id: string, options?: { paths?: string[] | undefined }): string;\n paths(request: string): string[] | null;\n}\n\ninterface Module {\n isPreloading: boolean;\n exports: any;\n require: Require;\n id: string;\n filename: string;\n loaded: boolean;\n children: Module[];\n path: string;\n paths: string[];\n}\nrequire() 函数对于相同输入 id，仅导入（执行）一次（在第一次时缓存，缓存到 require.cache 对象中），重复导入将得到相同的引用（在缓存 require.cache 中读取）。
注意 cjs 导入的结果是普通的 JavaScript 值，即导出和导入得到的值是相同的。（esm 则有不同）
此外 Node.js 内置模块都是可写的对象，这就允许它们被替换。而由于导入的是相同的引用，因此修改是立即可见的。
对于内置模块，如果不带 node: 前缀，也会尝试从 require.cache 中读取。
但若加上 node: 前缀则不会。因此 node: 前缀将保证能够获取到内置模块，但注意内置模块本身还是允许被修改的。
require("fs").write = (fd, str, cb) => {\n console.log(str + " <patched>");\n};\n\nrequire.cache.fs = {\n exports: {\n write() {\n console.log("fake!");\n },\n },\n};\n\nrequire.cache["node:fs"] = {\n exports: {\n write() {\n console.log("fake!");\n },\n },\n};\n\n// 确保得到内置模块，但内置模块本身允许被修改\nconst fs1 = require("node:fs");\nfs1.write(1, "Hi, fs1", (err) => {}); // => Hi, fs1 <patched>\n\n// 会先从缓存中读取\nconst fs2 = require("fs");\nfs2.write(1, "Hi, fs2", (err) => {}); // => fake!\n删除 require.cache 的键就可以令对应 id 重新加载导入
\n\n\n
require() 导入的值与对应 module.exports 导出的值完全相同。
但在 ECMAScript 标准模块中，当导入整个模块作为一个对象时，得到是一个 Module 对象（module namespace object）。
该对象是普通的 JavaScript 对象，但其原型为 null，其 Symbol.toStringTag 键对应值为字符串 Module。
export 导出的对应键，在该对象中都是不可写的。
import * as m from "./esm.js";\nconst m = await import("./esm.js");\n\nObject.getPrototypeOf(m) // => null\n\n// m 相当于如下\n{\n [Symbol.toStringTag]: 'Module'\n // ... 包含其它 export 导出的对应键\n}\nNode.js 模块的 ESM 导出，是命名导出所有 API，并将 CommonJS 导出值以 default 导出。
这种方式导出方式就很方便了，因为：
// 无需（当然也可以）\nimport * as fs from "fs";\n// 只需（因为有 default 导出）\nimport fs from "fs";\n以第一种导入方式时，根据 ESM 规范，该对象的键当然是不可写的。
第二种方式导入的相当于 require() 返回值，因此其键可写。
default 导出值就是 CommonJS 导出值。因此只有修改 default 导出值，才能在 ESM 环境中修改内置模块，
但需调用特殊的 syncBuiltinESMExports 函数，才能传播修改。
import fs, { readFileSync } from "node:fs";\nimport { syncBuiltinESMExports } from "node:module";\nimport { Buffer } from "node:buffer";\n\nfs.readFileSync = () => Buffer.from("Hello, ESM");\nsyncBuiltinESMExports();\n\nfs.readFileSync === readFileSync; // => true\n对于我们自己编写的 CJS 模块，根据文档：
ESM 环境导入 CJS 模块时，module.exports 对象提供为 default 导出。为了更好的兼容性，会静态分析来提供命名导出。
Node.js 需要确定脚本是 ESM 还是 CJS，参见此处。需要注意 Node.js 对这些特性的支持版本。
\nESM 环境没有 require 函数，通过以下方法得到：
\nimport { createRequire } from "node:module";\nconst require = createRequire(import.meta.url);\n目前，Node.js 已实验性支持通过 require() 加载 ES 模块
模块加载结果与 await import() 一致。限制条件为 ES 模块必须完全同步，即不含 top-level await
module 选项决定编译器输出的模块类型，moduleResolution 决定如何解析输入的模块。
\n对于现代 Node.js 应用，使用 tsc 编译时，指定为 nodenext 即可。此时会仿照 Node.js 模块解析方式。
对于浏览器环境，往往真正是由其它 bundler 来解析依赖，因此指定为 bundler。此时允许省略文件名后缀。
typescript 本身是根据 declaration 来识别导出的，这就可能导致 default 导入出现问题。
\n这些选项可处理此问题，具体参见handbook和对应文档。
\n在 ESM 规范中，import 不能省略文件名后缀（毕竟浏览器是网络请求，而不是本地文件系统），但很多 bundler 在解析 import 时并不会这么严格。
\n见 @rollup/plugin-commonjs 包 extensions 选项
\n\nWIP
\n
/**\n * Create a new module instance.\n * @param {string} id\n * @param {Module} parent\n */\nfunction Module(id = "", parent) {\n this.id = id;\n this.path = path.dirname(id);\n setOwnProperty(this, "exports", {});\n this[kModuleParent] = parent;\n updateChildren(parent, this, false);\n this.filename = null;\n this.loaded = false;\n this.children = [];\n}\n\n/** @type {Record<string, Module>} */\nModule._cache = { __proto__: null };\n/** @type {Record<string, string>} */\nModule._pathCache = { __proto__: null };\n/** @type {Record<string, (module: Module, filename: string) => void>} */\nModule._extensions = { __proto__: null };\n/** @type {string[]} */\nlet modulePaths = [];\n/** @type {string[]} */\nModule.globalPaths = [];\n\nlet patched = false;\n\n/**\n * Add the CommonJS wrapper around a module's source code.\n * @param {string} script Module source code\n */\nlet wrap = function (script) {\n // eslint-disable-line func-style\n return Module.wrapper[0] + script + Module.wrapper[1];\n};\n\nconst wrapper = ["(function (exports, require, module, __filename, __dirname) { ", "\\n});"];\n\nlet wrapperProxy = new Proxy(wrapper, {\n __proto__: null,\n\n set(target, property, value, receiver) {\n patched = true;\n return ReflectSet(target, property, value, receiver);\n },\n\n defineProperty(target, property, descriptor) {\n patched = true;\n return ObjectDefineProperty(target, property, descriptor);\n },\n});\n\nObjectDefineProperty(Module, "wrap", {\n __proto__: null,\n get() {\n return wrap;\n },\n\n set(value) {\n patched = true;\n wrap = value;\n },\n});\n\nObjectDefineProperty(Module, "wrapper", {\n __proto__: null,\n get() {\n return wrapperProxy;\n },\n\n set(value) {\n patched = true;\n wrapperProxy = value;\n },\n});\n/**\n * Wraps the given content in a script and runs it in a new context.\n * @param {string} filename The name of the file being loaded\n * @param {string} content The content of the file being loaded\n * @param {Module|undefined} cjsModuleInstance The CommonJS loader instance\n * @param {'commonjs'|undefined} format Intended format of the module.\n */\nfunction wrapSafe(filename, content, cjsModuleInstance, format) {\n assert(format !== "module", "ESM should be handled in loadESMFromCJS()");\n const hostDefinedOptionId = vm_dynamic_import_default_internal;\n const importModuleDynamically = vm_dynamic_import_default_internal;\n if (patched) {\n const wrapped = Module.wrap(content);\n const script = makeContextifyScript(\n wrapped, // code\n filename, // filename\n 0, // lineOffset\n 0, // columnOffset\n undefined, // cachedData\n false, // produceCachedData\n undefined, // parsingContext\n hostDefinedOptionId, // hostDefinedOptionId\n importModuleDynamically, // importModuleDynamically\n );\n\n // Cache the source map for the module if present.\n const { sourceMapURL } = script;\n if (sourceMapURL) {\n maybeCacheSourceMap(filename, content, cjsModuleInstance, false, undefined, sourceMapURL);\n }\n\n return {\n __proto__: null,\n function: runScriptInThisContext(script, true, false), // 关键函数\n sourceMapURL,\n };\n }\n\n let shouldDetectModule = false;\n if (format !== "commonjs") {\n if (cjsModuleInstance?.[kIsMainSymbol]) {\n // For entry points, format detection is used unless explicitly disabled.\n shouldDetectModule = getOptionValue("--experimental-detect-module");\n } else {\n // For modules being loaded by `require()`, if require(esm) is disabled,\n // don't try to reparse to detect format and just throw for ESM syntax.\n shouldDetectModule = getOptionValue("--experimental-require-module");\n }\n }\n const result = compileFunctionForCJSLoader(content, filename, false /* is_sea_main */, shouldDetectModule);\n\n // Cache the source map for the module if present.\n if (result.sourceMapURL) {\n maybeCacheSourceMap(filename, content, cjsModuleInstance, false, undefined, result.sourceMapURL);\n }\n\n return result;\n}\n\n/**\n * Run the file contents in the correct scope or sandbox. Expose the correct helper variables (`require`, `module`,\n * `exports`) to the file. Returns exception, if any.\n * @param {string} content The source code of the module\n * @param {string} filename The file path of the module\n * @param {\n * 'module'|'commonjs'|'commonjs-typescript'|'module-typescript'\n * } format Intended format of the module.\n */\nModule.prototype._compile = function (content, filename, format) {\n // 注：node22 通过 @swc/wasm-typescript 支持typescript，这里做类型擦除\n if (format === "commonjs-typescript" || format === "module-typescript" || format === "typescript") {\n content = stripTypeScriptModuleTypes(content, filename);\n switch (format) {\n case "commonjs-typescript": {\n format = "commonjs";\n break;\n }\n case "module-typescript": {\n format = "module";\n break;\n }\n // If the format is still unknown i.e. 'typescript', detect it in\n // wrapSafe using the type-stripped source.\n default:\n format = undefined;\n break;\n }\n }\n\n let redirects;\n\n let compiledWrapper;\n if (format !== "module") {\n // 默认当作 commonjs 执行\n // 通过 wrapSafe，将给定源码生成函数\n const result = wrapSafe(filename, content, this, format);\n compiledWrapper = result.function;\n if (result.canParseAsESM) {\n format = "module";\n }\n }\n\n if (format === "module") {\n loadESMFromCJS(this, filename, format, content);\n return;\n }\n\n // 创建包装函数所需参数\n const dirname = path.dirname(filename);\n const require = makeRequireFunction(this, redirects);\n let result;\n const exports = this.exports;\n const thisValue = exports;\n const module = this;\n if (requireDepth === 0) {\n statCache = new SafeMap();\n }\n setHasStartedUserCJSExecution();\n this[kIsExecuting] = true;\n if (this[kIsMainSymbol] && getOptionValue("--inspect-brk")) {\n const { callAndPauseOnStart } = internalBinding("inspector");\n result = callAndPauseOnStart(compiledWrapper, thisValue, exports, require, module, filename, dirname);\n } else {\n result = ReflectApply(compiledWrapper, thisValue, [exports, require, module, filename, dirname]);\n }\n this[kIsExecuting] = false;\n if (requireDepth === 0) {\n statCache = null;\n }\n return result;\n};\n/**\n * Runs a script in the current context.\n * Internal version of `vm.Script.prototype.runInThisContext()` which skips argument validation.\n * @param {ReturnType<makeContextifyScript>} script - The script to run.\n * @param {boolean} displayErrors - Whether to display errors.\n * @param {boolean} breakOnFirstLine - Whether to break on the first line.\n */\nfunction runScriptInThisContext(script, displayErrors, breakOnFirstLine) {\n return ReflectApply(runInContext, script, [\n null, // sandbox - use current context\n -1, // timeout\n displayErrors, // displayErrors\n false, // breakOnSigint\n breakOnFirstLine, // breakOnFirstLine\n ]);\n}\nfunction runInContext(code, contextifiedObject, options) {\n validateContext(contextifiedObject);\n if (typeof options === "string") {\n options = {\n filename: options,\n [kParsingContext]: contextifiedObject,\n };\n } else {\n options = { ...options, [kParsingContext]: contextifiedObject };\n }\n return createScript(code, options).runInContext(contextifiedObject, options);\n}\n\nfunction createScript(code, options) {\n return new Script(code, options);\n}\n\nclass Script extends ContextifyScript {\n // 省略\n}\nContextifyScript 本质是一个 c++ 对象
\nclass ContextifyScript final : CPPGC_MIXIN(ContextifyScript) {\n public:\n SET_CPPGC_NAME(ContextifyScript)\n void Trace(cppgc::Visitor* visitor) const final;\n\n ContextifyScript(Environment* env, v8::Local<v8::Object> object);\n ~ContextifyScript() override;\n\n v8::Local<v8::UnboundScript> unbound_script() const;\n void set_unbound_script(v8::Local<v8::UnboundScript>);\n\n static void CreatePerIsolateProperties(IsolateData* isolate_data,\n v8::Local<v8::ObjectTemplate> target);\n static void RegisterExternalReferences(ExternalReferenceRegistry* registry);\n static ContextifyScript* New(Environment* env, v8::Local<v8::Object> object);\n static void New(const v8::FunctionCallbackInfo<v8::Value>& args);\n static bool InstanceOf(Environment* env, const v8::Local<v8::Value>& args);\n static void CreateCachedData(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void RunInContext(const v8::FunctionCallbackInfo<v8::Value>& args);\n static bool EvalMachine(v8::Local<v8::Context> context,\n Environment* env,\n const int64_t timeout,\n const bool display_errors,\n const bool break_on_sigint,\n const bool break_on_first_line,\n v8::MicrotaskQueue* microtask_queue,\n const v8::FunctionCallbackInfo<v8::Value>& args);\n\n private:\n v8::TracedReference<v8::UnboundScript> script_;\n};\nfunction createModuleLoader() {\n let customizations = null;\n // Don't spawn a new worker if custom loaders are disabled. For instance, if\n // we're already in a worker thread created by instantiating\n // CustomizedModuleLoader; doing so would cause an infinite loop.\n if (!forceDefaultLoader()) {\n const userLoaderPaths = getOptionValue("--experimental-loader");\n if (userLoaderPaths.length > 0) {\n if (!emittedLoaderFlagWarning) {\n const readableURIEncode = (string) =>\n ArrayPrototypeReduce(\n [\n [/'/g, "%27"], // We need to URL-encode the single quote as it's the delimiter for the --import flag.\n [/%22/g, '"'], // We can decode the double quotes to improve readability.\n [/%2F/gi, "/"], // We can decode the slashes to improve readability.\n ],\n (str, { 0: regex, 1: replacement }) =>\n RegExpPrototypeSymbolReplace(hardenRegExp(regex), str, replacement),\n encodeURIComponent(string),\n );\n process.emitWarning(\n "`--experimental-loader` may be removed in the future; instead use `register()`:\\n" +\n `--import 'data:text/javascript,import { register } from "node:module"; import { pathToFileURL } from "node:url"; ${ArrayPrototypeJoin(\n ArrayPrototypeMap(\n userLoaderPaths,\n (loader) =>\n `register(${readableURIEncode(JSONStringify(loader))}, pathToFileURL("./"))`,\n ),\n "; ",\n )};'`,\n "ExperimentalWarning",\n );\n emittedLoaderFlagWarning = true;\n }\n customizations = new CustomizedModuleLoader();\n }\n }\n\n return new ModuleLoader(customizations);\n}\n注册(Register): 可选步骤，用于注册自定义加载器。通过 module.exports.register 或命令行参数 --experimental-loader 实现。自定义加载器可以拦截和修改默认的加载流程。
解析(Resolve): 将模块标识符（specifier）解析为模块的 URL。核心函数包括：
\nModuleLoader.resolve(specifier, parentURL, importAttributes): 入口函数，处理自定义 resolve 钩子。ModuleLoader.resolveSync(specifier, parentURL, importAttributes): 同步版本，用于 import.meta.resolve 和在 CJS 中 require ESM。ModuleLoader.defaultResolve(originalSpecifier, parentURL, importAttributes): 默认的同步解析逻辑，如果没有自定义钩子则使用它。内部使用 internal/modules/esm/resolve.defaultResolve。ModuleLoader.#resolveAndMaybeBlockOnLoaderThread: 在同步解析中处理异步钩子，必要时阻塞主线程。加载(Load): 根据解析得到的 URL 加载模块的源代码。核心函数包括：
\nModuleLoader.load(url, context): 入口函数，处理自定义 load 钩子。ModuleLoader.#loadSync(url, context): 同步版本，用于在 CJS 中 require ESM。ModuleLoader.#loadAndMaybeBlockOnLoaderThread: 在同步加载中处理异步钩子，必要时阻塞主线程。internal/modules/esm/load defaultLoad (异步) 和 internal/modules/esm/load defaultLoadSync (同步)。翻译(Translate): 将加载的源代码转换为可执行的模块包装对象（ModuleWrap）。核心函数：
\nModuleLoader.#translate(url, format, source, isMain): 根据模块格式选择合适的翻译器进行转换。翻译器定义在 internal/modules/esm/translators 中。实例化(Instantiate)和求值(Evaluate): 创建模块实例，执行模块代码，并将导出的值存储在命名空间对象中。核心类：
\nModuleJob: 异步加载和执行模块。ModuleJobSync: 同步加载和执行模块，用于在 CJS 中 require ESM。\n\n定义在
\n/lib/internal/modules/esm/module_job.js
缓存(Cache): Node.js 会缓存已解析和加载的模块。ModuleLoader 的 resolveCache 和 loadCache 属性用于存储缓存结果。
Caution
\n以最新源码为准，贴出来的可能过时了
\n/* A ModuleJob tracks the loading of a single Module, and the ModuleJobs of\n * its dependencies, over time. */\nclass ModuleJob extends ModuleJobBase {\n #loader = null;\n\n /**\n * @param {ModuleLoader} loader The ESM loader.\n * @param {string} url URL of the module to be wrapped in ModuleJob.\n * @param {ImportAttributes} importAttributes Import attributes from the import statement.\n * @param {ModuleWrap|Promise<ModuleWrap>} moduleOrModulePromise Translated ModuleWrap for the module.\n * @param {boolean} isMain Whether the module is the entry point.\n * @param {boolean} inspectBrk Whether this module should be evaluated with the\n * first line paused in the debugger (because --inspect-brk is passed).\n * @param {boolean} isForRequireInImportedCJS Whether this is created for require() in imported CJS.\n */\n constructor(\n loader,\n url,\n importAttributes = { __proto__: null },\n moduleOrModulePromise,\n isMain,\n inspectBrk,\n isForRequireInImportedCJS = false,\n ) {\n super(url, importAttributes, isMain, inspectBrk);\n this.#loader = loader;\n\n // Expose the promise to the ModuleWrap directly for linking below.\n if (isForRequireInImportedCJS) {\n this.module = moduleOrModulePromise;\n assert(this.module instanceof ModuleWrap);\n this.modulePromise = PromiseResolve(this.module);\n } else {\n this.modulePromise = moduleOrModulePromise;\n }\n //! 注意：ModuleWrap 由 C++ 实现，参见下文\n //! this.module 指向一个 C++ 对象\n\n // Promise for the list of all dependencyJobs.\n this.linked = this._link();\n // This promise is awaited later anyway, so silence\n // 'unhandled rejection' warnings.\n PromisePrototypeThen(this.linked, undefined, noop);\n\n // instantiated == deep dependency jobs wrappers are instantiated,\n // and module wrapper is instantiated.\n this.instantiated = undefined;\n }\n\n /**\n * Iterates the module requests and links with the loader.\n * @returns {Promise<ModuleJob[]>} Dependency module jobs.\n */\n async _link() {\n this.module = await this.modulePromise;\n assert(this.module instanceof ModuleWrap);\n\n const moduleRequests = this.module.getModuleRequests();\n // Explicitly keeping track of dependency jobs is needed in order\n // to flatten out the dependency graph below in `_instantiate()`,\n // so that circular dependencies can't cause a deadlock by two of\n // these `link` callbacks depending on each other.\n // Create an ArrayLike to avoid calling into userspace with `.then`\n // when returned from the async function.\n const dependencyJobs = Array(moduleRequests.length);\n ObjectSetPrototypeOf(dependencyJobs, null);\n\n // Specifiers should be aligned with the moduleRequests array in order.\n const specifiers = Array(moduleRequests.length);\n const modulePromises = Array(moduleRequests.length);\n // Iterate with index to avoid calling into userspace with `Symbol.iterator`.\n for (let idx = 0; idx < moduleRequests.length; idx++) {\n const { specifier, attributes } = moduleRequests[idx];\n // TODO(joyeecheung): resolve all requests first, then load them in another\n // loop so that hooks can pre-fetch sources off-thread.\n const dependencyJobPromise = this.#loader.getModuleJobForImport(specifier, this.url, attributes);\n const modulePromise = PromisePrototypeThen(dependencyJobPromise, (job) => {\n debug(`async link() ${this.url} -> ${specifier}`, job);\n dependencyJobs[idx] = job;\n return job.modulePromise;\n });\n modulePromises[idx] = modulePromise;\n specifiers[idx] = specifier;\n }\n\n const modules = await SafePromiseAllReturnArrayLike(modulePromises);\n this.module.link(specifiers, modules);\n\n return dependencyJobs;\n }\n\n instantiate() {\n if (this.instantiated === undefined) {\n this.instantiated = this._instantiate();\n }\n return this.instantiated;\n }\n\n async _instantiate() {\n const jobsInGraph = new SafeSet();\n const addJobsToDependencyGraph = async (moduleJob) => {\n debug(`async addJobsToDependencyGraph() ${this.url}`, moduleJob);\n\n if (jobsInGraph.has(moduleJob)) {\n return;\n }\n jobsInGraph.add(moduleJob);\n const dependencyJobs = await moduleJob.linked;\n return SafePromiseAllReturnVoid(dependencyJobs, addJobsToDependencyGraph);\n };\n await addJobsToDependencyGraph(this);\n\n try {\n if (!hasPausedEntry && this.inspectBrk) {\n hasPausedEntry = true;\n const initWrapper = internalBinding("inspector").callAndPauseOnStart;\n initWrapper(this.module.instantiate, this.module);\n } else {\n this.module.instantiate();\n }\n } catch (e) {\n decorateErrorStack(e);\n // TODO(@bcoe): Add source map support to exception that occurs as result\n // of missing named export. This is currently not possible because\n // stack trace originates in module_job, not the file itself. A hidden\n // symbol with filename could be set in node_errors.cc to facilitate this.\n if (\n !getSourceMapsSupport().enabled &&\n StringPrototypeIncludes(e.message, " does not provide an export named")\n ) {\n const splitStack = StringPrototypeSplit(e.stack, "\\n");\n const parentFileUrl = RegExpPrototypeSymbolReplace(/:\\d+$/, splitStack[0], "");\n const { 1: childSpecifier, 2: name } = RegExpPrototypeExec(\n /module '(.*)' does not provide an export named '(.+)'/,\n e.message,\n );\n const { url: childFileURL } = await this.#loader.resolve(childSpecifier, parentFileUrl, kEmptyObject);\n let format;\n try {\n // This might throw for non-CommonJS modules because we aren't passing\n // in the import attributes and some formats require them; but we only\n // care about CommonJS for the purposes of this error message.\n ({ format } = await this.#loader.load(childFileURL));\n } catch {\n // Continue regardless of error.\n }\n\n if (format === "commonjs") {\n const importStatement = splitStack[1];\n // TODO(@ctavan): The original error stack only provides the single\n // line which causes the error. For multi-line import statements we\n // cannot generate an equivalent object destructuring assignment by\n // just parsing the error stack.\n const oneLineNamedImports = RegExpPrototypeExec(/{.*}/, importStatement);\n const destructuringAssignment =\n oneLineNamedImports && RegExpPrototypeSymbolReplace(/\\s+as\\s+/g, oneLineNamedImports, ": ");\n e.message =\n `Named export '${name}' not found. The requested module` +\n ` '${childSpecifier}' is a CommonJS module, which may not support` +\n " all module.exports as named exports.\\nCommonJS modules can " +\n "always be imported via the default export, for example using:" +\n `\\n\\nimport pkg from '${childSpecifier}';\\n${\n destructuringAssignment ? `const ${destructuringAssignment} = pkg;\\n` : ""\n }`;\n const newStack = StringPrototypeSplit(e.stack, "\\n");\n newStack[3] = `SyntaxError: ${e.message}`;\n e.stack = ArrayPrototypeJoin(newStack, "\\n");\n }\n }\n throw e;\n }\n\n for (const dependencyJob of jobsInGraph) {\n // Calling `this.module.instantiate()` instantiates not only the\n // ModuleWrap in this module, but all modules in the graph.\n dependencyJob.instantiated = resolvedPromise;\n }\n }\n\n runSync() {\n assert(this.module instanceof ModuleWrap);\n if (this.instantiated !== undefined) {\n return { __proto__: null, module: this.module };\n }\n\n this.module.instantiate();\n this.instantiated = PromiseResolve();\n const timeout = -1;\n const breakOnSigint = false;\n setHasStartedUserESMExecution();\n this.module.evaluate(timeout, breakOnSigint);\n return { __proto__: null, module: this.module };\n }\n\n async run(isEntryPoint = false) {\n await this.instantiate();\n if (isEntryPoint) {\n globalThis[entry_point_module_private_symbol] = this.module;\n }\n const timeout = -1;\n const breakOnSigint = false;\n setHasStartedUserESMExecution();\n try {\n await this.module.evaluate(timeout, breakOnSigint);\n } catch (e) {\n if (e?.name === "ReferenceError" && isCommonJSGlobalLikeNotDefinedError(e.message)) {\n e.message += " in ES module scope";\n\n if (StringPrototypeStartsWith(e.message, "require ")) {\n e.message += ", you can use import instead";\n }\n\n const packageConfig =\n StringPrototypeStartsWith(this.module.url, "file://") &&\n RegExpPrototypeExec(/\\.js(\\?[^#]*)?(#.*)?$/, this.module.url) !== null &&\n require("internal/modules/package_json_reader").getPackageScopeConfig(this.module.url);\n if (packageConfig.type === "module") {\n e.message +=\n "\\nThis file is being treated as an ES module because it has a " +\n `'.js' file extension and '${packageConfig.pjsonPath}' contains ` +\n '"type": "module". To treat it as a CommonJS script, rename it ' +\n "to use the '.cjs' file extension.";\n }\n }\n throw e;\n }\n return { __proto__: null, module: this.module };\n }\n}\njs 侧实现的 ModuleJob 类的主要职责是：
ModuleJob 实例来加载这些依赖项，并将它们与当前模块链接起来。观察源码易知，ModuleWrap 是真正由 v8 执行模块的类，本质是一个 c++ 对象。（下面只给出头文件源码）
它在 Node.js 内部表示一个 V8 模块。 它是一个包装器，用于封装 V8 引擎中的模块对象。\n它提供了与 V8 交互的接口，允许 Node.js 控制模块的生命周期。
\n关键方法：
\nModuleWrap 实例）链接到当前模块。这在 V8 内部创建模块之间的依赖关系图。class ModuleWrap : public BaseObject {\n public:\n enum InternalFields {\n kModuleSlot = BaseObject::kInternalFieldCount,\n kURLSlot,\n kSyntheticEvaluationStepsSlot,\n kContextObjectSlot, // Object whose creation context is the target Context\n kInternalFieldCount\n };\n\n static void CreatePerIsolateProperties(IsolateData* isolate_data,\n v8::Local<v8::ObjectTemplate> target);\n static void CreatePerContextProperties(v8::Local<v8::Object> target,\n v8::Local<v8::Value> unused,\n v8::Local<v8::Context> context,\n void* priv);\n static void RegisterExternalReferences(ExternalReferenceRegistry* registry);\n static void HostInitializeImportMetaObjectCallback(\n v8::Local<v8::Context> context,\n v8::Local<v8::Module> module,\n v8::Local<v8::Object> meta);\n\n void MemoryInfo(MemoryTracker* tracker) const override {\n tracker->TrackField("resolve_cache", resolve_cache_);\n }\n\n v8::Local<v8::Context> context() const;\n v8::Maybe<bool> CheckUnsettledTopLevelAwait();\n\n SET_MEMORY_INFO_NAME(ModuleWrap)\n SET_SELF_SIZE(ModuleWrap)\n\n bool IsNotIndicativeOfMemoryLeakAtExit() const override {\n // XXX: The garbage collection rules for ModuleWrap are *super* unclear.\n // Do these objects ever get GC'd? Are we just okay with leaking them?\n return true;\n }\n\n static v8::Local<v8::PrimitiveArray> GetHostDefinedOptions(\n v8::Isolate* isolate, v8::Local<v8::Symbol> symbol);\n\n // When user_cached_data is not std::nullopt, use the code cache if it's not\n // nullptr, otherwise don't use code cache.\n // TODO(joyeecheung): when it is std::nullopt, use on-disk cache\n // See: https://github.com/nodejs/node/issues/47472\n static v8::MaybeLocal<v8::Module> CompileSourceTextModule(\n Realm* realm,\n v8::Local<v8::String> source_text,\n v8::Local<v8::String> url,\n int line_offset,\n int column_offset,\n v8::Local<v8::PrimitiveArray> host_defined_options,\n std::optional<v8::ScriptCompiler::CachedData*> user_cached_data,\n bool* cache_rejected);\n\n static void CreateRequiredModuleFacade(\n const v8::FunctionCallbackInfo<v8::Value>& args);\n\n private:\n ModuleWrap(Realm* realm,\n v8::Local<v8::Object> object,\n v8::Local<v8::Module> module,\n v8::Local<v8::String> url,\n v8::Local<v8::Object> context_object,\n v8::Local<v8::Value> synthetic_evaluation_step);\n ~ModuleWrap() override;\n\n static void New(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void GetModuleRequests(\n const v8::FunctionCallbackInfo<v8::Value>& args);\n static void InstantiateSync(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void EvaluateSync(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void GetNamespaceSync(const v8::FunctionCallbackInfo<v8::Value>& args);\n\n static void Link(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void Instantiate(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void Evaluate(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void GetNamespace(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void GetStatus(const v8::FunctionCallbackInfo<v8::Value>& args);\n static void GetError(const v8::FunctionCallbackInfo<v8::Value>& args);\n\n static void SetImportModuleDynamicallyCallback(\n const v8::FunctionCallbackInfo<v8::Value>& args);\n static void SetInitializeImportMetaObjectCallback(\n const v8::FunctionCallbackInfo<v8::Value>& args);\n static v8::MaybeLocal<v8::Value> SyntheticModuleEvaluationStepsCallback(\n v8::Local<v8::Context> context, v8::Local<v8::Module> module);\n static void SetSyntheticExport(\n const v8::FunctionCallbackInfo<v8::Value>& args);\n static void CreateCachedData(const v8::FunctionCallbackInfo<v8::Value>& args);\n\n static v8::MaybeLocal<v8::Module> ResolveModuleCallback(\n v8::Local<v8::Context> context,\n v8::Local<v8::String> specifier,\n v8::Local<v8::FixedArray> import_attributes,\n v8::Local<v8::Module> referrer);\n static ModuleWrap* GetFromModule(node::Environment*, v8::Local<v8::Module>);\n\n v8::Global<v8::Module> module_;\n std::unordered_map<std::string, v8::Global<v8::Object>> resolve_cache_;\n contextify::ContextifyContext* contextify_context_ = nullptr;\n bool synthetic_ = false;\n int module_hash_;\n};\n这里首先快速介绍一下 C++ API，具体Node.js 相关文档
\nv8::Isolate 隔离是一个 v8 虚拟机实例，有自己的堆v8::Context 表示 JavaScript 执行上下文，允许全局和内置对象存放在同一个堆中v8::Local<v8::Value> 句柄提供了 JavaScript 对象在堆中位置的引用（因为垃圾回收等机制可以改变对象在堆中的位置，此处省略其它句柄类型）v8::HandleScope 句柄作用域，用于自动管理句柄的生命周期v8::Value 表示 JavaScript 值类型，子类包括 v8::Number、v8::Object 等等uv_loop_t 表示事件循环。使用 libuv 时两个核心概念是句柄（HandleWrap 子类）和请求（ReqWrap 子类）。Environment 表示一个 Node.js 实例，包含一个 事件循环、v8::Isolate、v8::RealmRealm Node.js Realm 对象，用于表示 ECMAScript Realm.[[HostDefined]] 字段（不是指语言的 Realm 本身）启动 Node.js
\nint main(int argc, char* argv[]) {\n return node::Start(argc, argv);\n}\n省略非核心代码
\nstatic ExitCode StartInternal(int argc, char** argv) {\n CHECK_GT(argc, 0);\n argv = uv_setup_args(argc, argv);\n std::shared_ptr<InitializationResultImpl> result =\n InitializeOncePerProcessInternal(\n std::vector<std::string>(argv, argv + argc));\n\n uv_loop_configure(uv_default_loop(), UV_METRICS_IDLE_TIME);\n NodeMainInstance main_instance(snapshot_data,\n uv_default_loop(),\n per_process::v8_platform.Platform(),\n result->args(),\n result->exec_args());\n return main_instance.Run();\n}\n启动 node 主实例
\nNodeMainInstance::NodeMainInstance(const SnapshotData* snapshot_data,\n uv_loop_t* event_loop,\n MultiIsolatePlatform* platform,\n const std::vector<std::string>& args,\n const std::vector<std::string>& exec_args)\n : args_(args),\n exec_args_(exec_args),\n array_buffer_allocator_(ArrayBufferAllocator::Create()),\n isolate_(nullptr),\n platform_(platform),\n isolate_data_(),\n isolate_params_(std::make_unique<Isolate::CreateParams>()),\n snapshot_data_(snapshot_data) {\n isolate_params_->array_buffer_allocator = array_buffer_allocator_.get();\n // 创建 v8 isolate\n isolate_ = NewIsolate(isolate_params_.get(), event_loop, platform, snapshot_data);\n}\n\nExitCode NodeMainInstance::Run() {\n Locker locker(isolate_);\n Isolate::Scope isolate_scope(isolate_);\n HandleScope handle_scope(isolate_);\n\n ExitCode exit_code = ExitCode::kNoFailure;\n // 创建 Node.js 环境\n DeleteFnPtr<Environment, FreeEnvironment> env = CreateMainEnvironment(&exit_code);\n\n Context::Scope context_scope(env->context());\n Run(&exit_code, env.get());\n return exit_code;\n}\n\nvoid NodeMainInstance::Run(ExitCode* exit_code, Environment* env) {\n if (*exit_code == ExitCode::kNoFailure) {\n // 运行 Node.js 的本质就是轮转事件循环\n *exit_code = SpinEventLoopInternal(env).FromMaybe(ExitCode::kGenericUserError);\n }\n}\n\n\nDeleteFnPtr<Environment, FreeEnvironment>\nNodeMainInstance::CreateMainEnvironment(ExitCode* exit_code) {\n *exit_code = ExitCode::kNoFailure; // 重置退出码为 0\n\n HandleScope handle_scope(isolate_);\n\n Local<Context> context;\n DeleteFnPtr<Environment, FreeEnvironment> env;\n\n context = NewContext(isolate_);\n CHECK(!context.IsEmpty());\n Context::Scope context_scope(context);\n env.reset(\n // 创建 Node.js 环境\n // 背后是创建 node::Environment 对象\n // 负责管理和维护 JavaScript 代码执行所需的各种资源\n // 例如：V8 隔离/上下文，事件循环、异步操作、主进程状态\n CreateEnvironment(isolate_data_.get(), context, args_, exec_args_));\n\n return env;\n}\nCreateEnvironment 函数还会调用启动函数 node::Realm::RunBootstrapping
MaybeLocal<Value> Realm::RunBootstrapping() {\n EscapableHandleScope scope(isolate_);\n\n CHECK(!has_run_bootstrapping_code());\n\n Local<Value> result;\n if (!ExecuteBootstrapper("internal/bootstrap/realm").ToLocal(&result) ||\n !BootstrapRealm().ToLocal(&result)) {\n return MaybeLocal<Value>();\n }\n\n DoneBootstrapping();\n\n return scope.Escape(result);\n}\n可以发现，内部 js 模块通过 node_builtins.cc 来编译运行。
该函数负责通过 realm，传递全局 process primordials internalBinding 等全局对象。
因此，相当于内部模块可以访问额外的 c++ 绑定。
MaybeLocal<Value> BuiltinLoader::CompileAndCall(Local<Context> context,\n const char* id,\n Realm* realm) {\n Isolate* isolate = context->GetIsolate();\n // Detects parameters of the scripts based on module ids.\n // internal/bootstrap/realm: process, getLinkedBinding,\n // getInternalBinding, primordials\n if (strcmp(id, "internal/bootstrap/realm") == 0) {\n Local<Value> get_linked_binding;\n Local<Value> get_internal_binding;\n if (!NewFunctionTemplate(isolate, binding::GetLinkedBinding)\n ->GetFunction(context)\n .ToLocal(&get_linked_binding) ||\n !NewFunctionTemplate(isolate, binding::GetInternalBinding)\n ->GetFunction(context)\n .ToLocal(&get_internal_binding)) {\n return MaybeLocal<Value>();\n }\n Local<Value> arguments[] = {realm->process_object(),\n get_linked_binding,\n get_internal_binding,\n realm->primordials()};\n return CompileAndCall(\n context, id, arraysize(arguments), &arguments[0], realm);\n } else if (strncmp(id, "internal/main/", strlen("internal/main/")) == 0 ||\n strncmp(id,\n "internal/bootstrap/",\n strlen("internal/bootstrap/")) == 0) {\n // internal/main/*, internal/bootstrap/*: process, require,\n // internalBinding, primordials\n Local<Value> arguments[] = {realm->process_object(),\n realm->builtin_module_require(),\n realm->internal_binding_loader(),\n realm->primordials()};\n return CompileAndCall(\n context, id, arraysize(arguments), &arguments[0], realm);\n }\n\n // This should be invoked with the other CompileAndCall() methods, as\n // we are unable to generate the arguments.\n // Currently there are two cases:\n // internal/per_context/*: the arguments are generated in\n // InitializePrimordials()\n // all the other cases: the arguments are generated in the JS-land loader.\n UNREACHABLE();\n}\nC++ 侧 RunBootstrapping 函数首先执行的是 internal/bootstrap/realm.js 模块。
该文件在 Node.js 创建的每个 realm 中执行，包括主线程、工作线程和 ShadowRealm 的上下文。只有每个 realm 的内部状态和绑定应该在此文件中进行引导，并且不应将全局变量暴露给用户代码。
\n该文件创建内置模块使用的内部模块和绑定加载器。相比之下，用户态模块使用 lib/internal/modules/cjs/loader.js（CommonJS 模块）或 lib/internal/modules/esm/*（ES 模块）加载。
该文件由 node.cc 编译并在调用 bootstrap/node.js 之前运行，因此加载器在实际启动 Node.js 之前被引导。它创建以下对象：
C++ 绑定加载器：
\nprocess.binding()：传统的 C++ 绑定加载器，可以从用户态访问，因为它是一个附加到全局 process 对象的对象。这些 C++ 绑定使用 NODE_BUILTIN_MODULE_CONTEXT_AWARE() 创建，并且其 nm_flags 设置为 NM_F_BUILTIN。process._linkedBinding()：旨在供嵌入器在其应用程序中添加额外的 C++ 绑定使用。这些 C++ 绑定可以使用带有标志 NM_F_LINKED 的 NODE_BINDING_CONTEXT_AWARE_CPP() 创建。internalBinding()：私有内部 C++ 绑定加载器，除非通过 require('internal/test/binding')，否则无法从用户态访问。这些 C++ 绑定使用 NODE_BINDING_CONTEXT_AWARE_INTERNAL() 创建，并且其 nm_flags 设置为 NM_F_INTERNAL。内部 JavaScript 模块加载器：
\nBuiltinModule：一个最小的模块系统，用于加载位于 lib/**/*.js 和 deps/**/*.js 中的 JavaScript 核心模块。所有核心模块都通过 js2c.cc 生成的 node_javascript.cc 编译到 node 二进制文件中，因此可以更快地加载它们，而无需 I/O 开销。该类默认使 lib/internal/*、deps/internal/* 模块和 internalBinding() 可用于核心模块，并允许核心模块通过 require('internal/bootstrap/realm') 甚至在该文件不是用 CommonJS 风格编写时也可以 require 自身。其他对象：
\nprocess.moduleLoadList：一个数组，记录进程中加载的绑定和模块以及它们的加载顺序。该文件被编译为好像它被包装在一个函数中，参数由 node::RunBootstrapping() 传递。
NODE_BINDING_*这里举个非常简单的例子
\nvoid ExampleAdd(const FunctionCallbackInfo<Value>& args) {\n Isolate* isolate = args.GetIsolate();\n if (args.Length() < 2) {\n isolate->ThrowException(Exception::TypeError(\n String::NewFromUtf8(isolate, "Expected two arguments")));\n return;\n }\n CHECK(args[0]->IsNumber());\n CHECK(args[1]->IsNumber());\n double num1 = args[0]->NumberValue(isolate->GetCurrentContext()).FromMaybe(0.0);\n double num2 = args[1]->NumberValue(isolate->GetCurrentContext()).FromMaybe(0.0);\n double sum = num1 + num2;\n args.GetReturnValue().Set(Number::New(isolate, sum));\n}\n\nvoid Initialize(Local<Object> target,\n Local<Value> unused,\n Local<Context> context,\n void* priv) {\n Environment* env = Environment::GetCurrent(context);\n SetMethod(context, target, "exampleAdd", ExampleAdd);\n}\n\n// Run the `Initialize` function when loading this binding through\n// `internalBinding('cares_wrap')` in Node.js's built-in JavaScript code:\nNODE_BINDING_CONTEXT_AWARE_INTERNAL(cares_wrap, Initialize)\n使用 NODE_BINDING_CONTEXT_AWARE_INTERNAL 注册用于 internalBinding() 查找
void GetInternalBinding(const FunctionCallbackInfo<Value>& args) {\n Realm* realm = Realm::GetCurrent(args);\n Isolate* isolate = realm->isolate();\n HandleScope scope(isolate);\n\n CHECK(args[0]->IsString());\n\n Local<String> module = args[0].As<String>();\n node::Utf8Value module_v(isolate, module);\n Local<Object> exports;\n\n node_module* mod = FindModule(modlist_internal, *module_v, NM_F_INTERNAL);\n if (mod != nullptr) {\n exports = InitInternalBinding(realm, mod);\n realm->internal_bindings.insert(mod);\n } else {\n return THROW_ERR_INVALID_MODULE(isolate, "No such binding: %s", *module_v);\n }\n\n args.GetReturnValue().Set(exports);\n}\n观察 NODE_BINDING_* 宏可以发现，这个宏为当前的 C++ 文件导出 static node::node_module _module 变量。
定义的内部绑定可以通过 node::Environment 的上下文进行加载。
\n\nasync_hooks 不稳定，文档中也不建议使用。不过该包下提供 AsyncLocalStorage 类是稳定的，
\n
其中的稳定方法可以使用。AsyncLocalStorage 是基于 async_hooks 实现的高层接口，因此有必要做一些了解。
async_hooks 用于跟踪异步资源，即，为原本的异步操作加上一些生命周期钩子。
异步资源表示具有关联（异步）回调的对象。
该回调可能被多次调用，例如 net.createServer() 的 'connection' 事件；
也可能只调用一次，例如 fs.open()。
资源也可以在（异步）回调被调用之前关闭。AsyncHook 没有明确区分这些不同的情况，而是将它们表示为抽象的概念，即资源。
在 Worker 线程中运行的代码拥有独立的 async_hooks 接口，每个线程都会使用一组新的 asyncID。
回调在异步作用域（async scope）中执行（即：执行上下文 execution context）。
\n注意：回调当然必须是异步执行。注意 Javascript 本身提供的异步回调实际上非常有限，
例如 setTimeout setInterval queueMicrotask 和 Promise 构造函数等
除了这些与事件循环有关的回调（事件循环也是由运行环境提供的）
其它异步回调则是由特定运行环境提供的，例如浏览器和 Node.js 提供的异步 API
import async_hooks from "node:async_hooks";\n\n// 返回当前执行（execution）上下文 ID。执行上下文往往就是某个异步回调\nconst eid = async_hooks.executionAsyncId(); // => 0\n\n// 返回触发（trigger）当前异步回调的上下文 ID。即当前回调是由哪个回调触发的\nconst tid = async_hooks.triggerAsyncId(); // => 0\n\n// 通过提供一系列生命周期钩子（都是可选的），创建 AsyncHook 实例\nconst asyncHook = async_hooks.createHook({\n init,\n before,\n after,\n destroy,\n promiseResolve,\n});\n\n// 还需要调用此方法启用\nasyncHook.enable();\n\n// 还允许停止监听\nasyncHook.disable();\nAsyncHook 可以捕获 Node.js 提供的异步回调（即所谓异步资源）和 Promise
因为 Promise 也是异步资源，所以钩子不应该是异步函数（即返回 Promise的函数，防止无限递归）
注：使用同步方法即可，例如 fs.writeFileSync()
注意 Node.js 的 console.log() 是异步操作（可以想象是 fs.write(process.stdout.fd, xxx, () => {})）\n可用 process.stdout.write(xxx) 或 fs.writeSync(process.stdout.fd, xxx) 代替
我们自己创造的异步资源，则需要通过 AsyncResource 包装才能被捕获
import async_hooks from "node:async_hooks";\nimport { writeFileSync } from "node:fs";\nimport { format } from "node:util";\n\nfunction debug(...args) {\n writeFileSync("log.out", `${format(...args)}\\n`, { flag: "a" });\n}\n\nconst asyncHook = async_hooks.createHook({\n init: debug,\n before: debug,\n after: debug,\n destroy: debug,\n promiseResolve: debug,\n});\n\nasyncHook.enable();\n| 方法名 | \n描述 | \n
|---|---|
init(asyncId: number, type: string, triggerAsyncId: number, resource: object) | \n在对象构造期间调用。当此回调运行时，资源可能尚未完成构造。因此，asyncId 引用的资源的所有字段可能尚未填充。 | \n
before(asyncId: number) | \n在资源的回调函数调用之前调用。对于事件监听器（如 TCPWrap），可以调用多次；对于请求（如 FSReqCallback），将仅调用一次。 | \n
after(asyncId: number) | \n在资源的回调函数完成后调用 | \n
destroy(asyncId: number) | \n当销毁资源时调用 | \n
promiseResolve(asyncId: number) | \n仅针对 Promise 调用。发生在当传递给 Promise 构造函数的 resolve() 函数被调用时 | \n
详细描述参见 文档，这里说明一下 init 钩子的 type 参数：
\ntype 是一个描述异步资源的字符串，通常对应于资源构造函数的名称。
由 Node.js 本身创建的资源类型可能在任何 Node.js 版本中更改。有效值包括 TLSWRAP、TCPWRAP、TCPSERVERWRAP、GETADDRINFOREQWRAP、FSREQCALLBACK、Microtask 和 Timeout。
由 AsyncResource 创建的与 Node.js 本身无关的异步资源，AsyncResource 的构造函数可提供 type。
还存在 PROMISE 资源类型，用于跟踪 Promise 实例和由它们调度的异步操作。
完整类型见 @types/node
\nclass AsyncResource {\n constructor(type: string, triggerAsyncId?: number | AsyncResourceOptions);\n\n static bind<Func extends (this: ThisArg, ...args: any[]) => any, ThisArg>(\n fn: Func,\n type?: string,\n thisArg?: ThisArg,\n ): Func;\n\n bind<Func extends (...args: any[]) => any>(fn: Func): Func;\n\n runInAsyncScope<This, Result>(fn: (this: This, ...args: any[]) => Result, thisArg?: This, ...args: any[]): Result;\n\n emitDestroy(): this;\n\n asyncId(): number;\n\n triggerAsyncId(): number;\n}\n下面只列出了稳定 API，完整类型见 @types/node
\nAsyncLocalStorage 下文简称为 als
\nclass AsyncLocalStorage<T> {\n getStore(): T | undefined;\n\n run<R>(store: T, callback: () => R): R;\n run<R, TArgs extends any[]>(store: T, callback: (...args: TArgs) => R, ...args: TArgs): R;\n}\n使用 als 可以实现隐式传递上下文
\n// ref: https://docs.adonisjs.com/guides/async-local-storage\nimport { AsyncLocalStorage } from "node:async_hooks";\nimport { setTimeout } from "node:timers/promises";\n\ninterface User {\n id: number;\n}\n\nconst storage = new AsyncLocalStorage<{ user: User }>();\n\nclass UserService {\n async get() {\n // als 消费者与上下文无关，即无需显式持有上下文\n // 传统方式中可能要求将上下文作为参数传递\n // 换言之，上下文由 storage.run 隐式传递\n const state = storage.getStore(); // similar to thread-local storage\n const { user } = state!;\n console.log(`The user id is ${user.id}`);\n return user;\n }\n}\n\nasync function run(user: User) {\n const state = { user };\n\n return storage.run(state, async () => {\n await setTimeout(100); // executing async function\n const userService = new UserService();\n return await userService.get(); // executing async function\n });\n}\n\nrun({ id: 1 });\nrun({ id: 2 });\nrun({ id: 3 });\n观察源码可以发现，实现也不复杂。
原理就是将上下文存储到资源中，每当新建资源时，让上下文从父资源传递到当前新建的资源。
const storageList: Array<AsyncLocalStorage> = [];\n\nconst storageHook = createHook({\n init(asyncId, type, triggerAsyncId, resource: object) {\n // init 钩子从参数中得到当前（子）资源\n const currentResource: object = executionAsyncResource(); // 获取父资源\n // Value of currentResource is always a non null object\n for (let i = 0; i < storageList.length; ++i) {\n // storageList 数组引用了所有 als 实例\n // 这里只是触发每个实例的 _propagate 方法\n storageList[i]._propagate(resource, currentResource, type);\n }\n },\n});\n\nclass AsyncLocalStorage {\n constructor() {\n // 为异步资源关联一个 store\n // 这个 store 就是所谓的上下文\n this.kResourceStore = Symbol("kResourceStore");\n this.enabled = false;\n }\n\n _enable() {\n // 懒启动，对于每个 als 实例，都保存在 storageList 一次\n if (!this.enabled) {\n this.enabled = true;\n ArrayPrototypePush(storageList, this);\n storageHook.enable();\n }\n }\n\n /** 将父资源的 store 传递到 子资源的 store */\n _propagate(resource: object, triggerResource: object, type: string) {\n const store = triggerResource[this.kResourceStore];\n if (this.enabled) {\n resource[this.kResourceStore] = store;\n }\n }\n\n run(store, callback, ...args) {\n // Avoid creation of an AsyncResource if store is already active\n if (ObjectIs(store, this.getStore())) {\n return ReflectApply(callback, null, args);\n }\n\n this._enable();\n\n const resource = executionAsyncResource();\n const oldStore = resource[this.kResourceStore];\n\n resource[this.kResourceStore] = store;\n\n try {\n // run 方法运行的回调，回调中获取的 store 就是 run 方法传递的 store\n return ReflectApply(callback, null, args);\n } finally {\n // 还原 store\n resource[this.kResourceStore] = oldStore;\n }\n }\n\n getStore() {\n if (this.enabled) {\n const resource: object = executionAsyncResource();\n return resource[this.kResourceStore]; // 从当前资源中获得当前 store\n }\n }\n}\n由于本地使用了 WattToolkit，通过中间人代理了 Github，导致其它不走系统证书的请求会报证书错误。
例如 npm create astro 下载模板时，它内部使用 giget 请求 Github API 来下载模板。giget 内部又是直接使用 fetch 函数发起请求，最终导致证书错误而失败。
giget 原理是从 Github 下载 tar 包，然后解压其中子目录。因为 Github 是不支持直接下载子目录的。
\n/**\n * @param input "withastro/starlight#main"\n */\nasync function getDlLink(input: string) {\n const [owner_repo, ref = ""] = input.split("#");\n const res = await fetch(`https://api.github.com/repos/${owner_repo}/tarball/${ref}`, {\n headers: {\n Accept: "application/vnd.github+json",\n "X-GitHub-Api-Version": "2022-11-28",\n },\n redirect: "manual",\n });\n if (res.status !== 302) throw new Error("unexpected status code");\n return res.headers.get("location")!;\n}\n\ngetDlLink("withastro/starlight"); // => https://codeload.github.com/withastro/starlight/legacy.tar.gz/refs/heads/main\n下面为了简单，直接通过 git clone --depth 实现相同效果，git clone 不会出现证书错误。
给出一段简单的 Bash 脚本
#!/usr/bin/env bash\nset -e\n\nthis_name=$(basename "${BASH_SOURCE[0]}")\n\nusage() {\n cat <<EOF\nUsage:\n $this_name <USER/REPO> -p <project> [-d <sub_dir>]\n\nExample:\n $this_name withastro/astro -p proj -d examples/basics\n $this_name withastro/starlight -p proj -d examples/basics\n $this_name vitejs/vite -p proj -d packages/create-vite/template-vanilla-ts\n $this_name hexojs/hexo-starter -p blog -d / -y\n\nAvailable options:\n -p Project, the local directory to create\n -d Sub dir, optional, sub directory of the repository\n -y Yes , no prompt for y/n\n -h Help , print this help and exit\n -v Verbose, print script debug info\nEOF\n exit\n}\n\nmsg() {\n echo >&2 -e "\\033[0;34m${1-}\\033[0m"\n}\n\nwarn() {\n echo >&2 -e "\\033[1;33m${1-}\\033[0m"\n}\n\nif [ -n "$1" ] && [[ ! "$1" =~ ^- ]]; then\n repo="$1"\n shift\nfi\n\nwhile getopts ":p:d:yhv" opt; do\n case ${opt} in\n p) project_name=$OPTARG ;;\n d) sub_dir=$OPTARG ;;\n y) no_confirm=true ;;\n h) usage ;;\n v) set -x ;;\n \\?) warn "Invalid option: $OPTARG" && usage ;;\n :) warn "Option -$OPTARG requires an argument" && usage ;;\n esac\ndone\nshift $((OPTIND - 1))\n\nif [ -z "$repo" ]; then\n msg "Enter USER/REPO (e.g. withastro/astro):"\n read -r repo\nfi\n\nif [ -z "$sub_dir" ]; then\n msg 'Enter sub directory (e.g. examples/basics) enter to skip:'\n read -r sub_dir\nfi\n\n[ "$sub_dir" = "/" ] && sub_dir=""\n\nif [ -z "$project_name" ]; then\n msg 'Enter new directory (e.g. my-project):'\n read -r project_name\nfi\n\nconfirm() {\n if [ -n "$no_confirm" ]; then\n return\n fi\n\n while true; do\n msg "$1 (y/n):"\n read -r yn\n case $yn in\n [Yy]*) return 0 ;;\n [Nn]*) return 1 ;;\n *) warn "Please enter y OR n" ;;\n esac\n done\n}\n\nrandom_string=$(tr -dc 'a-zA-Z0-9' </dev/urandom | head -c 4)\ntmp_dir="tmp_${random_string}_$(echo "$repo/$sub_dir" | sed 's/\\//_/g')"\n\nconfirm "Will copy from \\"https://github.com/$repo/tree/main/$sub_dir\\"\\nTo \\"$project_name\\", Is it correct?" || (warn "Aborted" && exit 1)\n\ngit clone --depth=1 "https://mirror.ghproxy.com/https://github.com/$repo" "$tmp_dir"\ncp -r "$tmp_dir/$sub_dir" "$project_name"\nrm -rf "$project_name/.git"\nrm -rf "$tmp_dir"\n保存为 gitget.sh，直接运行 ./gitget.sh withastro/starlight -p proj -d examples/basics -y 即可复制模板
安装 WSL 本身： https://learn.microsoft.com/zh-cn/windows/wsl/install-on-server
https://github.com/microsoft/WSL/releases
see also: https://www.sysgeek.cn/install-wsl-2-windows/
\n下面以 Debian 为例，支持安装到任意路径。
\n首先下载任意发行版，并直接安装 AppxBundle 安装包，安装后设置账号密码。
\n下面的命令完成 导出 + 卸载 + 安装到新路径。
\n# [Example]\n# Distro: debian\n# FileName: D:\\wsl\\debian.tar\n# InstallLocation: D:\\wsl\\debian\n\nwsl -l -v\nwsl --shutdown\nwsl --export <Distro> <FileName>\nwsl --unregister <Distro>\nwsl --import <Distro> <InstallLocation> <FileName>\ndebian config --default-user <UserName>\n# 设置默认用户为安装后设置的用户，否则为 root\n# 若为 ubuntu，则对应命令为 ubuntu，其它同理\n使用阿里云镜像：https://developer.aliyun.com/mirror/debian
\n注意使用 https 源时需要先安装证书：
\napt install apt-transport-https ca-certificates\nwsl2 可通过 windows 系统上的 %UserProfile%\\.wslconfig 文件配置。
[experimental]\nnetworkingMode=mirrored # 启用镜像网络模式，而不是默认的NAT模式。\nautoProxy=true # 让WSL使用Windows的HTTP代理\nfirewall=true # 让Windows防火墙规可筛选WSL网络流量\nAlpine 是一个轻量级的 Linux 发行版，基于 musl libc 和 busybox，自带 apk 包管理器。
\nAlpine 适合作为 docker 的基础镜像，不过如果不需要包管理器或切换 libc 的需求，也可以使用 busybox 镜像。
无需 UNIX utilities 和其它依赖时，也可以直接 FROM scratch （但应用程序往往或多或少有某些依赖）
Alpine 自带 apk（Alpine Package Keeper）包管理器，主页为 https://pkgs.alpinelinux.org，包的扩展名为 .apk
国内可能需要镜像，参考：https://mirror.tuna.tsinghua.edu.cn/help/alpine/
\n\n\n\n
通过 apk(8) 安装的顶层包称为 world，数据保存在 /etc/apk/world 文件中
apk update # 更新索引\napk upgrade # 更新\napk search [-v] nano # 搜索\napk del --simulate nano # 模拟删除\napk del --purge vim # 同时删除配置文件\napk add -u nano # 未安装则安装，已安装则更新（包括依赖）\napk info -e # 查看已安装的包信息\napk info -L nano # 查看包包含的文件\napk info -R nano # 查看包依赖\napk info -s nano # 查看安装某个包将要占据的大小\napk info -W /etc/rc.conf # 查询哪个包拥有此文件 -W (–-who-owns)\napk fetch nano -o nano-apk # 仅下载安装包到指定目录\napk cache clean # 清理缓存\ncat /etc/apk/world\napk add --allow-untrusted /tmp/package_name.apk\n非 Windows 参见：https://nginx.org/en/docs/install.html
\nWindows 可以直接下载编译好的二进制：https://nginx.org/en/download.html
\n下以 linux 为例。
\nnginx 有一个主进程和一些工作进程。主进程主要用于读取和执行配置文件，以及管理工作进程。
工作进程用于处理实际的请求。nginx 使用基于事件的模型和对应 OS 的机制，将请求分发给各个工作进程
首先，启动 nginx。nginx 的默认配置文件为 /etc/nginx/nginx.conf
# 启动\nnginx\n启动后 nginx 会在后台运行，使用 nginx -s <signal> 向 nginx 主进程发送信号
（也可以直接用 kill 命令发送 Unix 信号，此处略）
nginx -s stop # fast shutdown\nnginx -s quit # graceful shutdown\nnginx -s reopen # reloading the configuration file\nnginx -s reload # reopening the log files\n一旦主进程接收到重载配置文件的信号，nginx 就会检查新配置文件的语法并尝试应用之。
如果成功，主进程就生成新的工作进程，并通知旧的工作进程关闭。
否则，主进程回滚变更并继续保持旧配置。
对于被通知关闭的旧工作进程，停止处理新请求，但继续保持服务的请求直至已处理完所有请求。
nginx 本身由模块构成，而 nginx 的配置文件由 指令 组成，来控制这些模块。
\n简单指令由 名称 和 参数 组成，以 空格 分隔，以 分号 ; 结尾。
块指令和简单指令基本一致，但不以分号结尾，而是用花括号 {} 来包含一组其它指令。
若块指令的花括号内可以包含其它指令，则称之为上下文（context）。（上下文可以用来继承一些指令）
\n若指令不被其它上下文包含，则其位于 main 上下文。
\n注释使用 #。
# ~/nginx.conf\n\nevents {\n worker_connections 1024;\n}\n\nhttp {\n server {\n listen 8080;\n location / {\n root ./data/www;\n }\n location /images/ {\n root ./data;\n }\n }\n}\n配置文件的 -c 选项需要使用完整路径，否则会自动添加 -p <prefix> 选项指定的前缀（默认值 /etc/nginx/）
包括在配置文件中使用的相对路径，也是并非相对于工作路径，而是自动添加前缀
下面的命令停止 nginx 进程，并设置前缀为用户主目录，配置文件位于 ~/nginx.conf
nginx -s stop\nnginx -p ~/ -c nginx.conf\n注意到 /etc/nginx 目录有如下结构
/etc/nginx\n├── conf.d/\n│ └── default.conf\n├── fastcgi_params\n├── mime.types\n├── modules -> /usr/lib/nginx/modules\n├── nginx.conf\n├── scgi_params\n└── uwsgi_params\n默认配置文件如下
\nuser nginx;\nworker_processes auto;\n\nerror_log /var/log/nginx/error.log notice;\npid /var/run/nginx.pid;\n\nevents {\n worker_connections 1024;\n}\n\nhttp {\n include /etc/nginx/mime.types;\n default_type application/octet-stream;\n log_format main '$remote_addr - $remote_user [$time_local] "$request" '\n '$status $body_bytes_sent "$http_referer" '\n '"$http_user_agent" "$http_x_forwarded_for"';\n access_log /var/log/nginx/access.log main;\n sendfile on;\n #tcp_nopush on;\n keepalive_timeout 65;\n #gzip on;\n include /etc/nginx/conf.d/*.conf;\n}\n注意 include /etc/nginx/conf.d/*.conf; 指令，
该指令读取 /etc/nginx/conf.d 目录下的所有 .conf 文件，
并用其内容填充当前 include 指令的位置，因此可以将配置文件分散到多个文件
例如 /etc/nginx/conf.d/default.conf 文件内容大致如下：
server {\n listen 80;\n server_name localhost;\n\n location / {\n root /usr/share/nginx/html;\n index index.html index.htm;\n }\n}\n可以看出，nginx 是推荐使用这种方法分割多个 server 指令的。
\n下面给出一些简单的示例。
\n花括号内部的指令可以继承上下文中的指令
\nserver {\n listen 8080;\n root /data;\n\n location / {\n # 此处继承： root /data;\n }\n}\n下面的例子使用 proxy_pass 指令
\nserver {\n listen 8080 default_server;\n server_name _;\n\n location / {\n proxy_pass http://localhost:8081/;\n }\n\n location ~ \\.(gif|jpg|png)$ {\n root /data/images;\n }\n}\n下面的例子启用文件列表
\nautoindex on;\nautoindex_exact_size on;\nautoindex_localtime on;\n\nserver {\n listen 8080;\n root /path/to/list;\n}\n下面的例子可部署 HTTPS 静态服务器
\nserver {\n listen 443 ssl;\n server_name your_domain.com;\n\n ssl_certificate /path/to/ssl_certificate.crt;\n ssl_certificate_key /path/to/ssl_certificate_key.key;\n\n root /path/to/static/files;\n index index.html;\n\n location / {\n try_files $uri $uri/ =404;\n }\n}\n官方文档：https://nginx.org/en/docs/
\nnginx playground：https://nginx-playground.wizardzines.com/
\n配置生成：https://www.digitalocean.com/community/tools/nginx
\nnginx tutorial：
https://dunwu.github.io/nginx-tutorial/
https://wangchujiang.com/nginx-tutorial/
可以简单地使用下面的代码来观察请求内容
\nrequire("net")\n .createServer((socket) => {\n socket.pipe(process.stdout);\n socket.end();\n })\n .listen(9980);\n注意 HTTP 协议自身的换行符是 CRLF，即 \\r\\n
对于 HTTP 流量，要求代理直接解析并转发 HTTP 请求（RFC7230）
\ncurl -x 127.0.0.1:9980 http://example.net/pathname -d "post_body"\n与普通的 HTTP 请求不同的是，路径处是完整的 URL，这样代理才知道要请求的 URL
有一些请求头是发送给代理的，例如下面的 Proxy-Connection
POST http://example.net/pathname HTTP/1.1\nHost: example.net\nUser-Agent: curl/8.4.0\nAccept: */*\nProxy-Connection: Keep-Alive\nContent-Length: 9\nContent-Type: application/x-www-form-urlencoded\n\npost_body\n对于非 HTTP 流量，HTTP 代理可承载任意 TCP 流量（RFC7231#section-4.3.6）
\n下以 HTTPS 举例，但注意此时相当于隧道代理，转发的流量对代理来说是透明的（即代理只管原样转发流量）
\ncurl -x 127.0.0.1:9980 https://example.net/pathname -d "post_body"\n客户端首先向代理发送 CONNECT 请求，路径处指定的是目标 TCP 的主机地址（域名:端口）
\n此时的请求头都是发送给代理的指令。CONNECT 请求是普通的 HTTP 请求，可以复用已有的 HTTP 机制，
比如需要认证的 HTTP 代理可以是 RFC7235 描述的 HTTP 身份验证实现的。
CONNECT example.net:443 HTTP/1.1\nHost: example.net:443\nUser-Agent: curl/8.4.0\nProxy-Connection: Keep-Alive\n代理需要与目标 TCP 服务器建立连接，并向客户端返回
\nHTTP/1.1 200 Connection established\n（这一行是空行，再次强调换行符是 \\r\\n 即 0x0D0A）\n（注意上面的空行，这是因为响应头发送完毕，接下来的内容作为响应体传输）
\n表示已成功建立连接，可以开始转发 TCP 流量
注意此时代理保持了与目标服务器和客户端的 TCP 连接
此后代理只需要双向原样转发 TCP 流量即可
\n代理与客户端建立的 HTTP 连接，实际上只是借用了 HTTP 的原语发送代理指令而已，
一旦代理指令发送完毕，此时的 HTTP 连接直接视为 TCP 连接，因此是双向 TCP 连接（而 HTTP 是单向的）
只不过从报文的顺序来说，对于建立的 HTTP 连接，转发的流量处于 HTTP 的请求体
简单实现如下：
\nimport http from "node:http";\nimport url from "node:url";\nimport net from "node:net";\n\nhttp.createServer((req, res) => {\n console.log("转发 HTTP 流量. 简单起见，不识别和添加请求头", req.url);\n http.request(req.url!, { headers: req.headers }, (hRes) => {\n res.writeHead(hRes.statusCode!, hRes.headers);\n hRes.pipe(res);\n }).on("error", () => res.end());\n})\n .on("connect", (req, clientSocket, head) => {\n console.log("转发任意 TCP 流量. 简单起见，省略错误处理", req.url);\n const { hostname, port } = url.parse("//" + req.url, false, true);\n const serverSocket = net\n .connect({ host: hostname!, port: Number(port) }, () => {\n clientSocket.write("HTTP/1.1 200 Connection Established\\r\\n");\n clientSocket.write("\\r\\n");\n serverSocket.pipe(clientSocket);\n })\n .on("error", () => clientSocket.end());\n clientSocket.pipe(serverSocket);\n })\n .listen(9980, () => console.log("Proxy listen at http://127.0.0.1:9980"));\n一个更完善的版本，但仅处理 CONNECT
\n#!/usr/bin/env node\nimport http from "node:http";\nimport net from "node:net";\nimport url from "node:url";\nimport console from "node:console";\nimport process from "node:process";\n\nconst PORT = Number(process.env.PORT) || 7891;\n\nconst server = http.createServer((req, res) => {\n // Deny all requests other than CONNECT for HTTPS\n console.log(`[PROXY] Denying non-CONNECT request for: ${req.method} ${req.url}`);\n res.writeHead(405, { "Content-Type": "text/plain" });\n res.end("Method Not Allowed");\n});\n\nserver.on("connect", (req, clientSocket, head) => {\n // req.url will be in the format "hostname:port" for a CONNECT request.\n const { hostname, port } = url.parse(`http://${req.url}`, false);\n\n console.log(`[PROXY] Intercepted CONNECT request for: ${hostname}:${port}`);\n\n if (\n true // Allow all connections for simplicity, but you can add your own logic here\n ) {\n console.log(`[PROXY] Allowing connection to ${hostname}:${port}`);\n\n // Establish a TCP connection to the original destination.\n const serverSocket = net.connect(Number(port!), hostname!, () => {\n clientSocket.write("HTTP/1.1 200 Connection Established\\r\\n\\r\\n");\n // Create a tunnel by piping data between the client and the destination server.\n serverSocket.write(head);\n serverSocket.pipe(clientSocket);\n clientSocket.pipe(serverSocket);\n });\n\n serverSocket.on("error", (err) => {\n console.error(`[PROXY] Error connecting to destination: ${err.message}`);\n clientSocket.end(`HTTP/1.1 502 Bad Gateway\\r\\n\\r\\n`);\n });\n } else {\n console.log(`[PROXY] Denying connection to ${hostname}:${port}`);\n clientSocket.end("HTTP/1.1 403 Forbidden\\r\\n\\r\\n");\n }\n\n clientSocket.on("error", (err) => {\n // This can happen if the client hangs up.\n console.error(`[PROXY] Client socket error: ${err.message}`);\n });\n});\n\nserver.listen(PORT, () => {\n const address = server.address() as net.AddressInfo;\n console.log(`[PROXY] Proxy listening on ${address.address}:${address.port}`);\n});\nTLS流程如下：
\n\nMAC 散列 = MAC 密钥加密(明文记录 + MAC 密钥 + 记录的序号)实际发送数据块 = 类型 + 版本 + 长度 + 会话密钥加密(明文记录 + MAC 散列)注意到 HTTPS 相当于 TLS 承载 HTTP，浏览器还会验证服务器证书声称的 FQDN(Fully Qualified Domain Name) 是否与 SNI 目标域名一致
\n","tags":["tls","http"]},{"id":"openssl-quick-reference","url":"https://yieldray.fun/posts/openssl-quick-reference","title":"常用OpenSSL命令","date_published":"2024-01-14T22:22:22.000Z","date_modified":"2024-01-14T22:22:22.000Z","content_text":"\n\nIf you're looking for a more in-depth and comprehensive look at OpenSSL,
\n
we recommend you check out the OpenSSL Cookbook by Ivan Ristić.
目前 OpenSSL 主要有 1.x 和 3.x 的版本，主要区别在于 1.x 只支持 TLS<=1.2
\n某些 linux 发行版可能自带 LibreSSL （即 openssl 命令实际调用 libressl）而不是 OpenSSL
\nwindows可下参见微软的文档安装，或安装微软预编译的二进制文件\n或者也使用 git for windows 自带的 openssl，一般位于 C:\\Program Files\\Git\\usr\\bin\\openssl.exe
openssl version -a\n输出如下
\nOpenSSL 版本\nbuilt on: 编译时间\nplatform: 平台\noptions: 编译选项\ncompiler: 编译器命令\nOPENSSLDIR: 配置目录\n本文只包括最广泛使用的 RSA 算法，长度为 2048
\n# 生成 RSA 私钥\nopenssl genrsa -out private.key 2048\n\n# 查看该密钥内容\nopenssl rsa -text -in private.key -noout\n上述私钥实际上包含了私钥和公钥，使用如下命令提取出公钥：
\nopenssl rsa -in private.pem -outform PEM -pubout -out public.pem\nopenssl req -new -key public.key -out yourdomain.csr\n该命令会交互式地提示使用者回答问题，如下：
可直接回车置空，缺失值也会从 OPENSSLDIR 目录的配置文件读取。
| prompt | \n\n |
|---|---|
| Country Name (2 letter code) | \n公司所在地的两字母国家/地区代码 | \n
| State or Province Name (full name) | \n公司所在地的州/省全名 | \n
| Locality Name (e.g., city) | \n公司所在地的城市名 | \n
| Organization Name (e.g., company) | \n公司的合法注册名称（例如 YourCompany, Inc.） | \n
| Organizational Unit Name (e.g., section) | \n组织内部部门的名称 | \n
| Common Name (e.g., server FQDN) | \nfully-qualified domain name（FQDN）（例如 www.example.com） | \n
| Email Address | \n电子邮件地址 | \n
| A challenge password | \n\n |
| An optional company name | \n\n |
或使用 -subj 选项输入，而不是交互式：
openssl req -new -key public.key -out yourdomain.csr \\\n-subj "/C=US/ST=Utah/L=Lehi/O=Your Company, Inc./OU=IT/CN=yourdomain.com"\n亦或一步到位生成私钥和 CSR：
\nopenssl req -new \\\n-newkey rsa:2048 -nodes -keyout private.key \\\n-out yourdomain.csr \\\n-subj "/C=US/ST=Utah/L=Lehi/O=Your Company, Inc./OU=IT/CN=yourdomain.com"\n最后验证 CSR 文件：
\nopenssl req -text -in yourdomain.csr -noout -verify\n下面我们使用私钥，接受 CSR 请求，生成自签名证书（365 天有效期）。
\nopenssl x509 -req -days 365 -in yourdomain.csr -signkey private.key -out server.crt\n有效的正式证书需要我们发送 CSR 文件，交由 CA 签名，总之最终得到 PEM 格式的证书。
\n得到证书后，查看证书信息：
\nopenssl x509 -text -in yourdomain.crt -noout\nopenssl pkey -pubout -in private.key | openssl sha256\nopenssl req -pubkey -in yourdomain.csr -noout | openssl sha256\nopenssl x509 -pubkey -in server.crt -noout | openssl sha256\n得到的值应都相同
\n# PEM to PKCS#12\nopenssl pkcs12 -export -name "yourdomain-digicert-(expiration date)" \\\n-out yourdomain.pfx -inkey yourdomain.key -in yourdomain.crt\n\n# PKCS#12 to PEM(private key)\nopenssl pkcs12 -in yourdomain.pfx -nocerts -out yourdomain.key -nodes\n\n# PKCS#12 to PEM(certificate)\nopenssl pkcs12 -in yourdomain.pfx -nokeys -clcerts -out yourdomain.crt\n\n# PEM(private key) to DER(private key)\nopenssl rsa -inform PEM -in yourdomain.key -outform DER -out yourdomain_key.der\n\n# PEM(certificate) to DER(certificate)\nopenssl x509 -inform PEM -in yourdomain.crt -outform DER -out yourdomain.der\n\n# DER(private key) to PEM(private key)\nopenssl rsa -inform DER -in yourdomain_key.der -outform PEM -out yourdomain.key\n\n# DER(certificate) to PEM(certificate)\nopenssl x509 -inform DER -in yourdomain.der -outform PEM -out yourdomain.crt\n2025.9.5 开始，vercel 支持零配置部署 后端框架。
自动识别 express 和 hono 框架，无需配置 vercel.json 和使用 /api 目录。
package.json 定义的 node 版本优先级高于 Project Settings。
{\n "engines": {\n "node": ">=18"\n },\n "packageManager": "pnpm"\n}\nvercel 会自动识别项目并构建，或者在 Build & Development Settings 手动配置。
\n默认情况下 vercel 匹配 /api 目录下以 .js .mjs .ts 为后缀的文件作为 Serverless Functions。
对于 node 以外的，官方支持的运行时，对应的后缀也会自动匹配。
\n对于其它运行时，需要在 vercel.json 中额外配置，例如：
{\n "functions": {\n "api/**/*.php": {\n "runtime": "vercel-php@0.7.3"\n },\n "api/**/*.[jt]s": {\n "runtime": "vercel-deno@3.1.0"\n }\n }\n}\n识别 /api 目录为 Serverless Functions 实际上是 vercel 的默认构建行为。
修改 builds 字段可以自定义此行为。（尽管 vercel 文档不推荐，不过这个比较方便，用 functions 字段定义则更细致一些）
\n但注意，配置 builds 字段后，Build & Development Settings 将被忽略，
也就是 vercel 不会执行其它配置的构建步骤，此时我们必须在手动构建后再推送到 vercel。
这对需要构建步骤的应用来说很不方便，特别是 typescript，因为本来 vercel 是会自动编译 /api 目录下的 .ts 文件的。
当使用 functions 配置而非 builds 字段配置时，也可以考虑使用 vercel-build 脚本构建。然而，使用 functions 配置时要求构建后存在 public 目录。
\n\n\n使用 esbuild 编译
\n\nesbuild index.ts --outfile=index.js --platform=node --packages=external --format=esm\n注：无需使用
\n--bundle构建，因为 vercel 会安装 package.json 的依赖。
例如，我们想部署一个纯 nodejs 的 http 应用（并且阻止文件式路由），则可以有如下 vercel.json。
{\n "$schema": "https://openapi.vercel.sh/vercel.json",\n "builds": [{ "src": "index.js", "use": "@vercel/node" }],\n "rewrites": [{ "source": "/(.*)", "destination": "index.js" }],\n "env": { "NODEJS_HELPERS": "0" }\n}\n根目录的 index.js 如下：（文档），支持的导出实际上就是 Next.js API 路由的 pages 风格 和 app 风格
/**\n * @param {import('node:http').IncomingMessage} req\n * @param {import('node:http').ServerResponse} res\n */\nexport default async function handler(req, res) {\n res.write(`method: ${req.method}\\n`);\n res.write(`url: ${req.url}\\n`);\n res.write(`headers: ${JSON.stringify(req.headers, null, 4)}`);\n res.end();\n}\n可以将环境变量 NODEJS_HELPERS 设置为 0 以关闭 vercel 在 req 和 res 上添加的辅助方法，这样与标准的 nodejs 环境更一致。
要让 vercel 将文件识别为 Edge Function，需要在代码中多加几行：
\n\n\nEdge Function 的优点在于其支持流式传输，流式传输没有时长限制，而普通的 Serverless Function 必须在有限的时间内发送完所有响应。
\n
export const config = {\n runtime: "edge",\n};\n\nexport async function GET(req: Request) {\n return Response.json({ hello: "world" });\n}\n\n// 或导出\nimport type { VercelRequest, VercelResponse } from "@vercel/node";\nexport default function handler(request: VercelRequest, response: VercelResponse) {\n return response.status(200).json({ hello: "world" });\n}\n对于 next.js（app router）：
\nimport { NextResponse } from "next/server";\nimport type { NextRequest } from "next/server";\n\nexport const runtime = "edge"; // 'nodejs' is the default\n\nexport function GET(request: NextRequest) {\n return NextResponse.json({ hello: "world" });\n}\n\n\n这篇文章主要参考了 mastodon 的官方博客上的一篇文章
\n
代码以 ruby 为例。本文仅使用标准的 Web API，以及少量 Deno 代码为例。
Activity Pub 通过密钥机制（WebFinger）保证数据不被篡改，因此我们首先需要准备密钥对（公钥和私钥）
我们要通过 Web Crypto API 生成 RSA 密钥对，并保存（导出）为 .pem 格式的文本文件
\n\n仅使用 Web Crypto API，无需直接使用 openssl 命令行！
\n
// 生成 RSA 密钥对\nasync function generateRSAKeyPair() {\n const keyPair = await crypto.subtle.generateKey(\n {\n name: "RSASSA-PKCS1-v1_5",\n modulusLength: 2048,\n publicExponent: new Uint8Array([0x01, 0x00, 0x01]),\n hash: { name: "SHA-256" },\n },\n true,\n ["sign", "verify"],\n );\n\n return keyPair;\n}\n\n// 导出私钥为 PEM 格式\nasync function exportPrivateKey(key: CryptoKey) {\n const exportedKey = await crypto.subtle.exportKey("pkcs8", key);\n const exportedPem = arrayBufferToPem(exportedKey, "PRIVATE KEY");\n return exportedPem;\n}\n\n// 导出公钥为 PEM 格式\nasync function exportPublicKey(key: CryptoKey) {\n const exportedKey = await crypto.subtle.exportKey("spki", key);\n const exportedPem = arrayBufferToPem(exportedKey, "PUBLIC KEY");\n return exportedPem;\n}\n\n// 将 ArrayBuffer 转换为 PEM 格式\nfunction arrayBufferToPem(buffer: ArrayBuffer, label: "PRIVATE KEY" | "PUBLIC KEY") {\n const pemHeader = `-----BEGIN ${label}-----`;\n const pemFooter = `-----END ${label}-----`;\n\n const binary = String.fromCharCode.apply(null, new Uint8Array(buffer) as any as number[]);\n const base64 = btoa(binary);\n\n let pem = pemHeader + "\\n";\n let offset = 0;\n\n while (offset < base64.length) {\n const line = base64.substr(offset, 64);\n pem += line + "\\n";\n offset += 64;\n }\n pem += pemFooter + "\\n";\n return pem;\n}\n\n// 生成 RSA 密钥对\nconst keyPair = await generateRSAKeyPair();\n\n// 导出私钥和公钥\nconst privateKeyPem: string = await exportPrivateKey(keyPair.privateKey);\nconst publicKeyPemL: string = await exportPublicKey(keyPair.publicKey);\n\n// 写入文件（这里使用 Deno，nodejs 同理）\nDeno.writeTextFileSync("private.pem", privateKeyPem);\nDeno.writeTextFileSync("public.pem", publicKeyPem);\n现在我们得到了 private.pem 和 public.pem 两个文本文件
\n\n注：等效 openssl 命令
\n\nopenssl genrsa -out private.pem 2048\nopenssl rsa -in private.pem -outform PEM -pubout -out public.pem\n
我们需要实现 Webfinger，将公钥暴露在公网，以便其它服务器获取
\n其它服务器会 GET 请求例如 /.well-known/webfinger?resource=acct:bob@my-example.com
来查询我们的服务器是否存在指定的 resource（这里则是查询我们的服务器是否存在指定用户）
我们简单地返回下面的 JSON（注意，下文演示中的 my-example.com 都需要修改为真实的公网 URL）
其中 https://my-example.com/actor 是公钥将要存在的 url
{\n "subject": "acct:alice@my-example.com",\n\n "links": [\n {\n "rel": "self",\n "type": "application/activity+json",\n "href": "https://my-example.com/actor"\n }\n ]\n}\n下面使用 Deno 简单实现
\nimport { ServeRouter } from "npm:serve-router";\n\nconst app = ServeRouter();\n\napp.all("/.well-known/webfinger", (req: Request) => {\n const url = new URL(req.url);\n\n return Response.json(\n {\n subject: url.searchParams.get("resource"),\n links: [\n {\n rel: "self",\n type: "application/activity+json",\n href: `${url.origin}/actor`,\n },\n ],\n },\n {\n headers: { "Content-Type": "application/jrd+json" },\n },\n );\n});\n之后，其它的服务器还会通过查询 https://my-example.com/actor 来获取这个用户的公钥（我们的服务器只有我们一个人）
我们返回如下 JSON（publicKeyPem 就是我们之前生成的 public.pem 文件的内容）
{\n "@context": ["https://www.w3.org/ns/activitystreams", "https://w3id.org/security/v1"],\n\n "id": "https://my-example.com/actor",\n "type": "Person",\n "preferredUsername": "alice",\n "inbox": "https://my-example.com/inbox",\n\n "publicKey": {\n "id": "https://my-example.com/actor#main-key",\n "owner": "https://my-example.com/actor",\n "publicKeyPem": "-----BEGIN PUBLIC KEY-----...-----END PUBLIC KEY-----"\n }\n}\n/**\n * 公钥 pem 文件内容如下：\n * -----BEGIN PUBLIC KEY-----\n * xxxx\n * -----END PUBLIC KEY-----\n */\nconst publicKeyPem = Deno.readTextFileSync("./public.pem");\n\napp.all("/actor", (req: Request) => {\n // 我们还可以仅当请求明确指明需要返回 json 时，才返回，例如如下请求头：\n // accept: application/activity+json, application/ld+json\n // 换言之，当我们请求其它服务器时，也应当加上上述请求头\n const url = new URL(req.url);\n\n return Response.json(\n {\n "@context": ["https://www.w3.org/ns/activitystreams", "https://w3id.org/security/v1"],\n\n id: `${url.origin}/actor`,\n type: "Person",\n preferredUsername: "alice",\n inbox: `${url.origin}/inbox`,\n\n publicKey: {\n id: `${url.origin}/actor#main-key`,\n owner: `${url.origin}/actor`,\n publicKeyPem,\n },\n },\n {\n headers: { "Content-Type": "application/jrd+json" },\n },\n );\n});\n顺便简单地实现我们的收件箱（inbox）
这里只是简单地打印出请求的 JSON，返回值我们不去处理
app.post("/inbox", async (req: Request) => {\n console.log(JSON.stringify(await req.json(), null, 4));\n\n return new Response(`I'm inbox!`);\n});\n现在我们想要关注（Follow）Mastodon 的官方账号
\n我们向 https://mastodon.social/inbox POST 请求发送如下 JSON
{\n "@context": "https://www.w3.org/ns/activitystreams",\n "id": "https://my-example.com/my-first-follow",\n "type": "Follow",\n "actor": "https://my-example.com/actor",\n "object": "https://mastodon.social/users/Mastodon"\n}\n不过在发送之前，我们需要对请求头签名，确保是由 https://my-example.com/actor 代表的用户（也就是我们）发出的请求（通过 Signature: 请求头）
\n\n\n
Signature: keyId="https://my-example.com/actor#main-key",headers="(request-target) host date",signature="..."\n需要签名的请求头内容如下：\n（注意 (request-target) 请求头并不会实际发送，因为它相当于 HTTP 请求的第一行，在此仅作签名需要）
（post 是小写而不是大写，date 必须是当前 UTC 时间，只允许 30 秒上下的时间误差，否则视签名无效）
(request-target): post /inbox\nhost: mastodon.social\ndate: Sun, 06 Nov 1994 08:49:37 GMT\n但注意，对于 POST 请求，mastodon 还要求发送 Digest: 请求头，值是请求体的 RSA-SHA256 摘要（digest） 参见此处
首先构造一些辅助函数，用于导入密钥和 base64 编码（对于 Digest: 请求头）
// 导入私钥\nasync function importPrivateKey(pem: string) {\n const pemHeader = "-----BEGIN PRIVATE KEY-----";\n const pemFooter = "-----END PRIVATE KEY-----";\n\n const pemContents = pem.replace(pemHeader, "").replace(pemFooter, "").replace(/\\s/g, "");\n\n const binaryString = atob(pemContents);\n const binaryBuffer = new Uint8Array(binaryString.length);\n\n for (let i = 0; i < binaryString.length; i++) {\n binaryBuffer[i] = binaryString.charCodeAt(i);\n }\n\n const privateKey = await crypto.subtle.importKey(\n "pkcs8",\n binaryBuffer,\n {\n name: "RSASSA-PKCS1-v1_5",\n hash: "SHA-256",\n },\n true,\n ["sign"],\n );\n\n return privateKey;\n}\n\n// 使用密钥对一段文本签名\nfunction signText(key: CryptoKey, text: string) {\n return crypto.subtle.sign(\n {\n name: "RSASSA-PKCS1-v1_5",\n hash: { name: "SHA-256" },\n },\n key,\n new TextEncoder().encode(text),\n );\n}\n\n// 编码为 base64 字符串\nfunction encodeBase64(buf: ArrayBufferLike): string {\n let binary = "";\n const bytes = new Uint8Array(buf);\n for (let i = 0; i < bytes.length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n return btoa(binary);\n}\n终于可以发出第一个请求了
\n// 读取私钥文件\nconst privateKeyPem = Deno.readTextFileSync("./private.pem");\nconst privateKey = await importPrivateKey(privateKeyPem);\n\n// 修改为公网域名\nconst origin = "https://my-example.com";\n\n// 请求体\nconst requestBody = JSON.stringify({\n "@context": "https://www.w3.org/ns/activitystreams",\n id: `${origin}/my-first-follow`,\n type: "Follow",\n actor: `${origin}/actor`,\n object: "https://mastodon.social/users/Mastodon",\n});\n\nconst date = new Date().toUTCString();\nconst digest = "sha-256=" + encodeBase64(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(requestBody)));\n\nconst signedString = encodeBase64(\n await signText(\n privateKey,\n `(request-target): post /inbox\nhost: mastodon.social\ndate: ${date}\ndigest: ${digest}`,\n ),\n);\n\nconst signature = `keyId="${origin}/actor#main-key",headers="(request-target) host date digest",signature="${signedString}"`;\n\nconst res: Response = await fetch("https://mastodon.social/inbox", {\n method: "POST",\n headers: {\n date,\n digest,\n signature,\n "content-type": 'application/ld+json; profile="http://www.w3.org/ns/activitystreams"',\n },\n body: requestBody,\n});\n\nawait inspectResponse(res);\n\n// 打印 HTTP 响应\nasync function inspectResponse(res: Response) {\n console.log(res.status, res.statusText);\n console.log(Object.fromEntries(res.headers.entries()));\n const text = await res.text();\n console.log(text);\n}\n现在， mastodon.social 将返回 202 Accepted
然后，mastodon.social 将向我们的收件箱 https://my-example.com/inbox 发送如下 JSON
（当然，请求也是经过签名的，但这里就不演示如何验证请求头了）
\n{\n "@context": "https://www.w3.org/ns/activitystreams",\n "id": "https://mastodon.social/users/Mastodon#accepts/follows/",\n "type": "Accept",\n "actor": "https://mastodon.social/users/Mastodon",\n "object": {\n "id": "https://my-example.com/my-first-follow",\n "type": "Follow",\n "actor": "https://my-example.com/actor",\n "object": "https://mastodon.social/users/Mastodon"\n }\n}\n我们可以在 Mastodon 的 followers 页面 看到，我们已经成功关注了 @Mastodon
依据最新草案，display 属性由外部和内部两个基本特质构成：
block 和 inline（run-in 的浏览器支持差，实用性不高）flow 和 flow-root。其它的例如：flex grid table除上述两个特质外，还有一些特殊的 display 值能够创建副作用。
比如 list-item 可生成 ::marker 伪元素，none 可以将整个元素从 box-tree 中移除。
形式化语法：
\ndisplay =\n [ <display-outside> || <display-inside> ]\n | <display-listitem> | <display-internal> | <display-box> | <display-legacy>\n\n<display-outside> = block | inline | run-in\n<display-inside> = flow | flow-root | table | flex | grid | ruby\n<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item\n<display-internal> = table-row-group | table-header-group |\n table-footer-group | table-row | table-cell |\n table-column-group | table-column | table-caption |\n ruby-base | ruby-text | ruby-base-container |\n ruby-text-container\n<display-box> = contents | none\n<display-legacy> = inline-block | inline-table | inline-flex | inline-grid\n注意到已有的单值 display 属性可转换为完整格式，举例如下：
\n| short | \nfull | \n
|---|---|
| block | \nblock flow | \n
| inline | \ninline flow | \n
| inline-block | \ninline flow-root | \n
| flow-root | \nblock flow-root | \n
| flex | \nblock flex | \n
| inline-flex | \ninline flex | \n
| list-item | \nblock flow list-item | \n
可以发现，完整格式对非常清晰地表达了元素的表现方式。
\n总结：外部主盒参与流布局，内部生成格式化上下文。
\nCSS Box Sizing 模块包含 外在尺寸（extrinsic size） 和 内在尺寸（intrinsic size） 的概念。看起来也是一外一内，不过该模块表述的是盒模型尺寸的生成。
\n\n\n在网页上非常常见的一种模式是在其它内容上显示内容，吸引用户注意力到特定的重要信息或需要执行的操作。
这种内容可以取多种不同的名字：overlay、popup、popover、dialog 等。规范称为 popover。
总的来说，它们可以分为：
modal，popover 显示时，其他页面部分将处于非交互状态，直到 popover 被通过某种方式进行操作（例如选择一个重要的选项）。
non-modal，popover 显示时，用户可以与其他页面部分进行交互。
使用 Popover API 创建的 popover 始终为 non-modal。
如果希望创建一个 modal 的 popover，可以使用 <dialog> 元素（需要通过 HTMLDialogElement.showModal() 实现，否则其不会创建 top layer；popover 则始终创建 top layer）
HTML popover 具有以下特性：
\npopover 可以是任何 HTML 元素（即 HTMLElement 而不是 SVGElement），popover 的触发者只能是 button 或 input 元素（下面主要以按钮举例）
\n<div id="div" popover>[popover]</div>\n<button popovertarget="div">toggle</button>\n<button popovertarget="div" popovertargetaction="show">show</button>\n<button popovertarget="div" popovertargetaction="hide">hide</button>\npopover=auto （空字符串相当于 auto）自动隐藏 popover 的元素（比如点击页面的其它部分或按 Esc 键）。因此只会同时出现一个 auto 的 popover（即所谓 "light dismissed"）
popover=manual 手动隐藏，需通过 js 或对应 popovertarget 元素来操纵。因此可以出现多个 popover
popovertarget 在 button 或 input 元素上设置，值为对应 popover 的 id，用于控制该 popover
popovertargetaction=toggle （空字符串或未设置相当于 toggle）相当于点击该按钮调用 popover 的 HTMLElement.togglePopover() 方法
popovertargetaction=show 相当于 popover 隐藏时，点击该按钮调用 popover 的 HTMLElement.showPopover() 方法
popovertargetaction=hide 相当于 popover 显示时，点击该按钮调用 popover 的 HTMLElement.hidePopover() 方法
注意 close 状态没有对应的伪类。要只匹配 close 状态，使用 :not() 即可
:popover-open {\n}\n:not(:popover-open) {\n}\npopover 的默认样式如下
\n[popover]:popover-open:not(dialog) {\n overlay: auto !important;\n}\n[popover] {\n position: fixed;\n width: fit-content;\n height: fit-content;\n color: canvastext;\n background-color: canvas;\n inset: 0px;\n margin: auto;\n border-width: initial;\n border-style: solid;\n border-color: initial;\n border-image: initial;\n padding: 0.25em;\n overflow: auto;\n}\njs 可利用此伪类判断是 open 还是 close 状态
\npopover.matches(":popover-open");\n:popover-open 状态的 popover 会创建 top-layer 层，::backdrop 伪类可匹配该层的 backdrop
\n\n注：每一个提升至 top-layer 的元素都关联一个
\n::backdrop，且在层叠顺序上::backdrop在该元素下。
注意到 popover 的 ::backdrop 默认是透明且屏蔽指针事件的
[popover]:-internal-popover-in-top-layer::backdrop {\n position: fixed;\n background-color: transparent;\n pointer-events: none !important;\n inset: 0px;\n}\n相比于 HTMLDialogElement.showModal() 产生的默认 ::backdrop，则默认阴影且响应指针事件
dialog:-internal-dialog-in-top-layer::backdrop {\n position: fixed;\n inset: 0px;\n background: rgba(0, 0, 0, 0.1);\n}\n// 仅作示意\ninterface HTMLButtonElement /* 以及 HTMLInputElement */ {\n // html 属性 popovertarget 只能设置为 id\n popoverTargetElement: Element | null;\n // 反映 html 属性 popovertargetaction，即修改此值也会反映到 html 上\n // 注意 popovertargetaction 为空字符串或未设置相当于 toggle\n popoverTargetAction: "hide" | "show" | "toggle";\n}\n\ninterface HTMLElement {\n // 反映 html 属性 popover\n popover: "auto" | "manual" | null;\n\n // 若 popover 已隐藏，会抛出 DOMException\n hidePopover(): void;\n // 若 popover 已显示，会抛出 DOMException\n showPopover(): void;\n\n // 不传 force 时，则切换显隐状态\n // force 为 true 时，强制显示 popover。若已显示，也不会抛出异常\n // force 为 false 时，强制隐藏 popover。若已隐藏，也不会抛出异常\n // 返回切换后 popover 是否是 open 状态（目前Chrome120暂不支持，会返回undefined）\n togglePopover(force?: boolean): boolean;\n\n // 状态切换之前触发，ToggleEvent 包含当前状态（oldState）和切换之后的状态（newState）\n // 注意：即使在一次事件循环中多次修改 popover 状态，也只会触发一次 beforetoggle 事件\n onbeforetoggle: ((this: HTMLElement, ev: ToggleEvent) => any) | null;\n\n // 状态切换之后触发，ToggleEvent 包含切换之前的状态（oldState）和当前状态（newState）\n // 注意：HTMLDetailsElement 也会触发此事件，与 HTMLElement 触发的事件略有不同\n ontoggle: ((this: HTMLElement, ev: ToggleEvent) => any) | null;\n\n addEventListener(\n type: "beforetoggle" | "toggle",\n listener: (this: HTMLElement, ev: ToggleEvent) => any,\n options?: boolean | AddEventListenerOptions,\n ): void;\n\n removeEventListener(\n type: "beforetoggle" | "toggle",\n listener: (this: HTMLElement, ev: ToggleEvent) => any,\n options?: boolean | EventListenerOptions,\n ): void;\n}\n\n// 注意是 open 或 closed，而不是 close 或者 show/hide\ninterface ToggleEvent extends Event {\n readonly newState: "open" | "closed";\n readonly oldState: "open" | "closed";\n}\n略。参见：https://developer.mozilla.org/docs/Web/API/Popover_API/Using#nested_popovers
\nhttps://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning/
\n注意 CSS 属性 overlay 只能由浏览器设置，该属性作用在 ::backdrop 伪类之前的那个元素（比如 popover 和 dialog，作用相当于 ::backdrop 的 display:block 到 display:none）。我们只能设置 transition-property: overlay，且仅当 transition-behavior: allow-discrete 时才有实际效果。
允许 CSS 属性从离散值切换时，仍进行过渡（默认行为是直接不发生过渡）。此时待连续值过渡完成后，再进行离散值的切换。
\n这里主要是应用在 overlay 和 display 属性上（即元素隐藏时），使得 display:block 到 display:none 时仍发生过渡（推迟 display:none 的发生）。
\n\n\n允许指定过渡的前一个状态，使得可以立即发生一次过渡。此 At Rule 支持嵌套。
\n这里主要是应用在元素显示时。注意这里与 display:none 到 display:block 无关，因为过渡只是发生在 display:block 的选择器上。（所以无需 transition-behavior: allow-discrete）
所以将 @starting-style 应用在 display:block 的选择器上，而不是 display:none 的选择器。（即完成 display:none 到 display:block 之后，再根据 @starting-style 进行过渡）
允许在 <length-percentage> 和 固有尺寸值（intrinsic size）之间进行动画和过渡。
interpolate-size 是继承属性，默认值是 numeric-only。
下面的例子使得 height: 0 到 height: max-content 之间发生过渡。
https://open-ui.org/components/popover.research.explainer/
\nhttps://developer.mozilla.org/docs/Web/API/Popover_API
\nhttps://developer.mozilla.org/docs/Web/API/Popover_API/Using
\nhttps://developer.chrome.com/blog/introducing-popover-api/
\n","tags":["web-api","dom"]},{"id":"css-nesting-and-layer","url":"https://yieldray.fun/posts/css-nesting-and-layer","title":"css嵌套与@layer","date_published":"2023-11-11T18:30:00.000Z","date_modified":"2023-11-11T18:30:00.000Z","content_text":"https://web.dev/blog/learn-css-refresh
\n\n\n注意：firefox117 完整支持。chrome112
\n119 部分支持（历史规范问题）chrome120 支持最新规范119 下不能省略
由于历史规范原因，在 chrome112&符号，否则会出现不符合现行规范的奇奇怪怪的问题。
scss 在线编译：https://sass-lang.com/playground/
现行规范中 & 嵌套选择器的语法可以说基本与 scss 表现一致。
当然某些 css 无法实现的功能除外，比如 & 是不支持 scss 的字符串连接的，即：
.component {\n &__child-element {\n /* css 不支持这样，会导致这个选择器块失效（因为css无法解析） */\n /* 但是外层选择器还是有效的，即嵌套中的选择器块失效不影响外部选择器块有效 */\n }\n}\n/* scss 会编译成这样 */\n.component__child-element {\n}\n此外，css 允许无需嵌套，直接使用 & 选择器（scss 不支持）
此时 & 相当于 :scope （注：在 css 中相当于 :root，此伪类主要在 js 中使用）
& {\n background: wheat;\n}\n/* 相当于 */\n:scope {\n background: wheat;\n}\n/* 相当于 */\n:root {\n background: wheat;\n}\ncss 嵌套的优先级与 :is() 的优先级完全一致，即优先级由选择器列表中的最高优先级相同
//@prettier-ignore\n#a, b {\n & c {\n color: blue;\n }\n}\n/* 相当于，优先级相当于 #a 选择器的优先级 */\n:is(#a, b) {\n & c {\n color: blue;\n }\n}\ncss 嵌套和 at-rules 一同使用时也与 scss 基本一致，这里从略。
\n参见：https://developer.mozilla.org/docs/Web/CSS/CSS_nesting/Nesting_at-rules
\n@layer 用于创建一个级联层，即属于同一个 @layer 的 css 具有相同的级联
创建级联层的方法有三种：
\n/* 直接创建级联层 */\n@layer cascade {\n display-none {\n display: none;\n }\n}\n\n/* 引入 css 并将其导入到一个级联层中 */\n@import (cascade.css) layer(cascade);\n\n/* 仅创建级联层，但不指定任何样式。可以同时声明多个 */\n@layer cascade1, cascade2, cascade3;\n当我们多次声明一个同名的级联层时，后面的声明会被合并到第一个声明中。
\n@layer cascade;\n\n.foo {\n}\n\n@layer cascade {\n display-none {\n display: none;\n }\n}\n\n.bar {\n}\n\n@layer cascade {\n display-block {\n display: block;\n }\n}\n\n/* 相当于 */\n@layer cascade {\n display-none {\n display: none;\n }\n display-block {\n display: block;\n }\n}\n\n.foo {\n}\n\n.bar {\n}\n不同级联层的优先级按它们第一次在 css 出现的顺序依次递增。（高层覆盖低层，越后出现的级联层优先级越高，符合CSS一般认知中的后来居上原则）
\n\n\n级联层的好处在于它是超脱于选择器的存在。即无论选择器本身的优先级，
\n
优先级更高的级联层中的样式覆盖优先级更低的样式。
/* 优先级低 --------------------> 优先级高 */\n@layer theme, base, components, utilities;\n其它不属于任何级联层的样式将被集中到同一匿名层，并置于所有层的后部，
即 不属于级联层的样式 覆盖 级联层中声明的样式。
级联层允许嵌套，父子级联层用 . 连接
@layer framework {\n @layer base;\n @layer layout {\n }\n}\n\n@layer framework.layout {\n p {\n margin-block: 1rem;\n }\n}\n级联层可以不指定名称，即允许匿名级联层。
匿名级联层因为没有名字，自然无法在创建之后再次添加规则。
:scope {\n /* 非级联层，优先级高于任何级联层 */\n background: hotpink;\n}\n\n@layer {\n /* 匿名级联层 */\n :scope {\n /* 被覆盖 */\n background: skyblue;\n }\n}\n\n@layer; /* 语法正确，但没有任何意义 */\n下面的演示只考虑纵向滚动
\n\n\n\n\n要开启滚动吸附，至少需要在父（滚动）容器上设置 scroll-snap-type 属性（一般还需正确设置 overflow）和在需要吸附的子孙元素上设置 scroll-snap-align 属性
一个简单的示例如下（摘自规范文档）
强调：只有在滚动容器上才能发生滚动吸附效果，最简单的就是 html 元素（只需设置 scroll-snap-type）
设置 scroll-snap-align 的滚动锚点可以是滚动容器的 直接子元素 和 间接子元素（即子孙元素）
html {\n scroll-snap-type: block; /* applied to main document scroller */\n}\n/*prettier-ignore*/\nh1, h2, h3, h4, h5, h6 {\n scroll-snap-align: start; /* snap to the start (top) of the viewport */\n}\nscroll-snap-type 属性可以声明开启滚动吸附的方向：（默认值 none）可以是 x y 或逻辑方向 inline block 或 both
还可以声明吸附的严格程度：proximity（默认值，让浏览器决定）或 mandatory（滚动停止时，必须吸附到可见视口的吸附位置）
scroll-snap-align 属性声明吸附元素吸附的位置，可取 none start end center，指定双值时分别应用在 block 和 inline 方向
scroll-snap-stop 属性声明滚动容器是否可以越过吸附位置，主要针对触摸屏。normal（默认值）为允许，always 为不允许
scroll-padding 属性声明在滚动容器上，设置滚动内边距。（比如可以用于为导航栏留出空间）
scroll-margin 属性声明在吸附子元素上，设置滚动外边距。
推荐阅读相关文章，有更详细的示例
\nhttps://web.dev/articles/css-scroll-snap
\nhttps://css-tricks.com/practical-css-scroll-snapping/
\nhttps://12daysofweb.dev/2022/css-scroll-snap/
\nhttps://codepen.io/collection/KpqBGW
\n","tags":["css"]},{"id":"css-theory","url":"https://yieldray.fun/posts/css-theory","title":"css理论基础","date_published":"2023-11-05T11:11:11.000Z","date_modified":"2024-11-11T11:11:11.000Z","content_text":"包含块是一个矩形区域，它为与其关联的（后代）盒子提供了尺寸和定位的基础。
\n\n\nCSS2 定义：
\n
9.1.2 Containing blocks
10.1 Definition of "containing block"
确定包含块的流程完全取决于元素 position 属性的值：
\n\n\n
position 属性值为 static、relative 或 sticky，则包含块由最近的祖先元素的内容框边缘形成，该祖先元素要么是块级容器（例如 inline-block、block 或 list-item 元素），要么建立了格式化上下文（例如 table 容器、flex 容器、grid 容器或块级容器本身）。position 属性值为 absolute，则包含块由最近的 position 值不是 static（fixed、absolute、relative 或 sticky）的祖先元素的内边距框边缘形成。position 属性值为 fixed，则包含块由 viewport（对于连续媒体，continuous media，往往是屏幕上的网页）或页面区域（对于分页媒体，paged media，往往是打印机打印的文档）建立。position 属性值为 absolute 或 fixed，包含块也可能由最近的具有以下任意属性的祖先元素的内边距框边缘形成：filter、backdrop-filter、transform 或 perspective 的值不是 none。contain 的值为 layout、paint、strict 或 content（例如 contain: paint;）。container-type 的值不是 normal。will-change 的值包含一个属性，该属性的非初始值会形成一个包含块（例如 filter 或 transform）。content-visibility 的值为 auto。height top bottom 属性根据包含块的 height 计算百分比值width left right padding margin 属性根据包含块的 width 计算百分比值\n\n注意：
\npadding和margin及它们的完整形式都是根据width计算的，包括padding-toppadding-bottom这些。
\n\n具体参见 CSS2.1 规范 9.4 节：https://www.w3.org/TR/CSS2/visuren.html#normal-flow。下面只是摘要，有省略。
\n
注意： 这是 CSS2.1 的规范，所以不涉及 CSS3 的新属性或值。
常规流中的盒子属于格式化上下文，可以是块级或内联级，但不能同时是两者。块级盒子参与块级格式化上下文，内联级盒子参与内联级格式化上下文。
\n浮动元素、绝对定位元素、非块级盒子的块级容器（如内联块、表格单元格和表格标题）以及 overflow 属性不是 visible （默认值）的块级盒子（除非该值已传播到视口）为其内容建立新的块级格式化上下文。
\n\n注：CSS3 的
\noverflow: clip不会创建新的块级格式化上下文。
关于 BFC 的细节与使用参见下文 BFC 部分，而不是本节。
在块级格式化上下文中，盒子按垂直方向一个接一个地布局，从包含块的顶部开始。两个兄弟盒子之间的垂直距离由 margin 属性确定。块级格式化上下文中相邻的块级盒子之间的垂直外边距会发生折叠。
在块级格式化上下文中，每个盒子的左外边缘与包含块的左边缘接触（对于从右到左的格式化，右边缘接触）。即使存在浮动元素（尽管由于浮动元素的存在，盒子的行盒可能会收缩），这仍然成立，除非盒子本身建立了一个新的块级格式化上下文（在这种情况下，由于浮动元素的存在，盒子本身可能变窄）。
\n在内联级格式化上下文中，盒子按水平方向一个接一个地布局，从包含块的顶部开始。这些盒子之间会考虑水平外边距、边框和内边距。这些盒子可以以不同的方式在垂直方向上对齐。包含形成一行的盒子的矩形区域称为行盒。
\n行盒的宽度由包含块和浮动元素的存在确定。行盒的高度由 line-height 计算部分中给出的规则确定。
行盒始终足够高以容纳其包含的所有盒子。但是，它可能比其包含的最高盒子更高（例如，盒子以 baseline 对齐）。当盒子 B 的高度小于包含它的行盒的高度时，B 在行盒中的垂直对齐由 vertical-align 属性确定。当几个内联级盒子无法在单个行盒中水平放置时，它们会分布在两个或多个垂直堆叠的行盒中。因此，段落是一堆垂直堆叠的行盒。行盒堆叠时没有垂直间隔（除非另有规定），并且它们永远不会重叠。
通常情况下，行盒的左边缘与其包含块的左边缘接触，右边缘与其包含块的右边缘接触。然而，浮动盒子可能位于包含块边缘和行盒边缘之间。因此，尽管同一内联级格式化上下文中的行盒通常具有相同的宽度（即包含块的宽度），但如果由于浮动元素而减少了可用的水平空间，它们的宽度可能会有所不同。同一内联级格式化上下文中的行盒通常在高度上有所不同（例如，一行可能包含一个高的图像，而其他行只包含文本）。
\n当一行上的内联级盒子的总宽度小于包含它们的行盒的宽度时，它们在行盒内的水平分布由 text-align 属性确定。如果该属性的值为 justify，用户代理可拉伸内联盒子中的空格和单词（但不包括内联表格和内联块盒子）。
当内联级盒子的宽度超过行盒的宽度时，它会被分割成多个盒子，并在多个行盒中分布。如果无法分割内联级盒子（例如，如果内联级盒子只包含一个字符，或者语言特定的断词规则不允许在内联级盒子内进行断词，或者内联级盒子受 white-space 属性值为 nowrap 或 pre 的影响），那么内联级盒子将溢出行盒。
当内联级盒子被分割时，边距、边框和内边距在分割发生的地方（或者在多个分割时，当有多个分割时）没有视觉效果。
\n由于双向文本处理，内联级盒子也可能在同一行盒中分割为多个盒子。
\n在内联级格式化上下文中，根据需要创建行盒以容纳内联级内容。不包含文本、无保留空格、没有具有非零外边距、内边距或边框的内联元素以及没有其他流动内容（如图像、内联块或内联表格）的行盒，并且不以保留的换行符结尾的行盒，在确定其中任何元素位置时必须被视为零高度行盒，并且在其他任何情况下都被视为不存在。
\n如果一个盒子被从其预期位置中提取出来，并且在父级格式化上下文中以不同的方式布局，与周围内容的交互也不同于正常内容流程，那么该盒子就是 "out-of-flow"（脱离文档流）的。
这种情况发生在盒子被浮动（通过 float 属性）或绝对定位（通过 position 属性）时。如果一个盒子不是 "out-of-flow" 的，那么它就是 "in-flow"（在文档流中）。
格式化上下文是提供内部盒子布局的环境，不同的格式化上下文根据不同的规则来布局其内部的盒子。
每个格式化上下文具有自己独特的布局规则（内部元素的布局不受外部元素影响），用于确定其子元素如何排列和显示。
内联级格式化上下文存在于块级格式化上下文中（是其包含的一部分）。例如，属于 内联级格式化上下文的行盒 与 属于块级格式化上下文的浮动元素 相互作用。
\n块级布局是在块级格式化上下文内执行的布局，用于处理块级盒子。
\n块级格式化上下文根（Block Formatting Context Root）是建立新的块级格式化上下文的块级容器。
\n表现为：
\n\n\n简单来说：BFC 内部子元素不影响 BFC 外部元素
\n
\n\n翻译自 MDN：https://developer.mozilla.org/docs/Web/Guide/CSS/Block_formatting_context
\n
<html>）float属性值不为none的元素）position属性值为absolute或fixed的元素）display属性值为inline-block的元素）display属性值为table-cell的元素。对于 HTML 表格单元格来说，这是默认值）display属性值为table-caption的元素。对于 HTML 表格标题来说，这是默认值）display属性值为table、table-row、table-row-group、table-header-group、table-footer-group（分别对应 HTML 表格、表格行、表格主体、表格头部和表格底部），或者inline-tableoverflow属性值不为visible和clip的块级元素display属性值为flow-root的元素（display: flow-root）contain属性值为layout、content或paint的元素flex或inline-flex的直接子元素，如果它们本身既不是flex容器，也不是grid容器或table容器grid或inline-grid的直接子元素，如果它们本身既不是flex容器，也不是grid容器或inline-grid容器column-count或column-width属性值不为auto的元素，包括column-count: 1的元素）column-span属性值为all的元素应始终创建一个新的格式化上下文，即使column-span: all的元素不包含在多列容器中（规范更改，Chrome bug）\n\n\n
clear: left声明：不允许浮动元素浮动到当前元素的左边，那么当前元素就会被移动到浮动元素的margin-box的下面clear: rightclear: both同理。参见：https://developer.mozilla.org/docs/Web/CSS/clearfloatoverflow
display 属性定义了元素的显示类型，它包括两个基本特性，决定了元素如何生成盒子。
display 属性形式化语法如下：
\ndisplay =\n [ <display-outside> || <display-inside> ] |\n <display-listitem> |\n <display-internal> |\n <display-box> |\n <display-legacy> |\n <display-outside> || [ <display-inside> | math ]\n\n<display-outside> = block | inline | run-in\n<display-inside> = flow | flow-root | table | flex | grid | ruby\n<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item\n<display-internal> = table-row-group | table-header-group |\n table-footer-group | table-row | table-cell |\n table-column-group | table-column | table-caption |\n ruby-base | ruby-text | ruby-base-container |\n ruby-text-container\n<display-box> = contents | none\n<display-legacy> = inline-block | inline-table | inline-flex | inline-grid\n\n\n注：多值语法（
\n<display-outside> <display-inside>）兼容性为 Chrome>=115，考虑兼容性应使用<display-legacy>语法。
\n\n翻译自 MDN 英文文档
\n
文档的根元素（<html>）
position 属性值为 absolute 或 relative，且 z-index 属性值不为 auto 的元素
position 属性值为 fixed 或 sticky（对于所有移动浏览器都适用，但不适用于旧的桌面浏览器）的元素
container-type 属性值为 size 或 inline-size，用于容器查询的元素
是 flex 容器的子元素，且 z-index 属性值不为 auto
是 grid 容器的子元素，且 z-index 属性值不为 auto
opacity 属性值小于 1 的元素（参见透明度规范）
mix-blend-mode 属性值不为 normal 的元素
具有以下任一属性且属性值不为 none 的元素：
transformfilterbackdrop-filterperspectiveclip-pathmask / mask-image / mask-borderisolation 属性值为 isolate 的元素
will-change 属性值指定任何属性，该属性会在非初始值时创建一个层叠上下文（参见此文章）。
contain 属性值为 layout、paint 或包含它们的组合值（例如 contain: strict、contain: content）的元素
放置在 top layer 的元素及其对应的 ::backdrop。例如 fullscreen 元素和 popover 元素
在一个层叠上下文中，子元素根据上述相同的规则进行层叠。重要的是，子层叠上下文的 z-index 值只在父层叠上下文中有意义。层叠上下文在父层叠上下文中被作为一个单独的单元对待。
总结一下：
\n\n\n注意：层叠上下文的层次结构是 HTML 元素层次结构的子集，因为只有特定的元素会创建层叠上下文。我们可以说，不创建自己的层叠上下文的元素被父层叠上下文所同化。
\n
![\"stacking](\"https://s2.loli.net/2023/11/05/EfjbQGsCJgnziPe.png\")
图片来源，此处仅考虑 CSS2.1，忽略 CSS3 属性
指定 isolation 属性的值为 isolate 的元素会创建一个新的层叠上下文。主要配合 background-blend-mode 使用，用于把当前元素从当前层叠上下文隔离开来。
CSS contain 属性用于标识元素的子树是否独立于页面中的其他部分（允许浏览器自动性能优化）
取值如下：
\nnonesize：开启size containment。意味着此元素的子元素尺寸无法影响元素本身的尺寸，计算其尺寸时视为无子元素（包括伪元素，如 ::before ::after ::marker）。可使用 contain-intrinsic-size 指定应用此值的元素的尺寸。若不手动给予其尺寸，则多数时候元素尺寸将变为零。替换元素视为有自然宽度，无自然高度，无自然横纵比（可以有 aspect-ratio）inline-size。仅在 inline 方向应用 size containmentlayout：开启layout containment。建立独立的格式化上下文。外部元素不能影响内部布局，反之亦然style：开启style containment。确保由 counter-increment 和 counter-set 属性所创建的新计数器的作用域被限制为此子树。paint：开启paint containment。与 overflow: clip 类似，不会创建格式化上下文，但会创建层叠上下文。strict：相当于 size layout paint style。即开启所有局限。尽可能使用此值来获得优化。content：相当于 layout paint style。相对于 strict 保险一些。因为没有应用尺寸局限，元素仍然可以响应其内容的尺寸。CSS content-visibility 属性
display: none 和 visibility: hidden）。contain: contentCSS 计数器可以说是 CSS 维护的变量，counter-increment 属性在 CSS 渲染时读取。
\n这里只摘抄一下其形式化语法，使用方法参见MDN即可。
\ncounter-reset =\n [ <counter-name> <integer>? | reversed(<counter-name>) <integer>? ]+ |\n none\n\ncounter-increment =\n [ <counter-name> <integer>? ]+ |\n none\nJavascript 接口参见此处
\noffset：相对于当前元素（padding-box）的左上角（即所谓偏移）client：相对于视图（viewport）的左上角page：相对于文档（即 Document.documentElement）的左上角screen：相当于屏幕（显示器）的左上角这里主要写一下在 Javascript 中操纵 Web Animation API，CSS 的部分有所省略。
\n\n\nUseful links to learn CSS animation itself:
\n
https://www.joshwcomeau.com/animation/keyframe-animations/
https://www.cnblogs.com/coco1s/p/15796478.html
Animation() 构造函数用于创建 Animation 实例，该实例是一个 EventTarget，可用于监听动画事件和控制动画。
正如构造函数定义的，一个 Animation 由 AnimationEffect 和 AnimationTimeline 构成。
effect 声明动画效果，timeline 声明动画进行到哪一步。
KeyframeEffect 实现了 AnimationEffect 接口，是目前唯一的动画效果。它可以给指定元素（或伪元素）声明关键帧动画。Element.animate() 方法是一个快捷函数，可以直接在某个元素上创建 KeyframeEffect 动画并开始运行动画。
const element = document.querySelector(".target");\n\nconst keyframes = [{ rotate: "0deg" }, { rotate: "360deg" }];\n// or: const keyframes = { rotate: ["0deg", "360deg"] };\nconst options = { duration: 3000, fill: "forwards" as const };\n// or: const options = 3000;\nconst effect = new KeyframeEffect(element, keyframes, options);\n\nconst timeline = document.timeline; // 默认时间轴\n\nconst animation = new Animation(effect, timeline);\n\nanimation.play();\n\n// or:\nelement.animate(keyframes, options);\nAnimationEffect <|-- KeyframeEffect
\n目前只有 KeyframeEffect，即关键帧效果
\nAnimationTimeline <|-- DocumentTimeline
AnimationTimeline <|-- ScrollTimeline
ScrollTimeline <|-- ViewTimeline
时间驱动的时间轴
\n\n\n默认情况下，附加在一个元素上的动画在文档时间轴 (
\nDocumentTimeline) 上运行。
当网页加载时，它的起源时间从 0 开始，并随时间顺序增加。
连接到某个滚动容器沿着特定轴（如：水平方向或竖直方向）的滚动位置（即滚动了多少距离）的时间轴。
它将滚动范围内的位置转换为进度的百分比。开始滚动位置表示 0% 进度，结束滚动位置表示 100% 进度。
参考： https://developer.chrome.com/articles/scroll-driven-animations/#scroll-progress-timeline
\nconst timeline = new ScrollTimeline({\n source: document.documentElement,\n axis: "block",\n});\nCSS 属性 scroll-timeline-name 声明一个以双横线开头的名称，应用在滚动容器上。
scroll-timeline-axis 属性声明监听滚动的方向。
scroll-timeline 属性是以上两个属性的简写。
CSS 属性 animation-timeline 则可以引用此名称，这就将当前元素动画的时间轴设置为该滚动容器的 ScrollTimeline
\nanimation-timeline 也可以指定为 scroll()
连接到特定元素在其滚动容器中的相对位置的时间轴
\n\nconst timeline = new ViewTimeline({\n subject: document.querySelector(".subject"),\n axis: "block",\n inset: [CSS.px("200"), CSS.px("300")],\n});\n\n$el.animate(\n {\n opacity: [0, 1],\n },\n {\n timeline,\n rangeStart: "entry 25%",\n rangeEnd: "cover 50%",\n },\n);\n与上面的 scroll-timeline 类似的是：
\nCSS 属性 view-timeline-name 声明一个自定义名称，定义在监听可见性的元素上。
view-timeline-axis 属性声明监听可见性的方向。
view-timeline 属性是以上两个属性的简写。
同理，CSS 属性 animation-timeline 可以引用此名称，这就将当前元素动画的时间轴设置为该元素的 ViewTimeline （在同一个元素上设置 view-timeline-name 然后用 animation-timeline 引用自身是很常见的用法，这也相当于直接将 animation-timeline 设置为 view() ，参见下面的演示）
此外还可以使用 view-timeline-inset 属性可指定一个或两个值，用于指定偏移时间线位置的开始和/或结束插入（或结束）值。
\nanimation-timeline 也可以指定为 view()
CSS 部分定义在 CSS scroll-driven animations 模块
\n参见：https://developer.mozilla.org/docs/Web/CSS/CSS_scroll-driven_animations
\n","tags":["web-api"]},{"id":"css-at-container","url":"https://yieldray.fun/posts/css-at-container","title":"css容器查询","date_published":"2023-10-16T16:17:07.000Z","date_modified":"2025-12-31T00:00:00.000Z","content_text":"https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries
\n@container <container-condition> {\n <stylesheet>\n}\n\n\n\n
/* @container (min-width: 400px) and (max-width: 800px) */\n/* @container (width >= 400) and (width <= 800px) */\n@container (400px <= width <= 800px) {\n h2 {\n font-size: 1.5em;\n }\n}\n\n\n注：一般都是水平书写，所以只需要知道 inline 为水平方向，block 为竖直方向
\n
对于水平书写方向writing-mode: horizontal-tb，inline 为水平方向，block 为竖直方向
对于竖直书写方向writing-mode: vertical-rl，inline 为竖直方向，block 为水平方向
.post {\n container-name: sidebar;\n /* 将当前容器命名为 sidebar */\n container-type: inline-size;\n /* 默认值 normal，表示不参与容器查询 */\n /* inline-size，表示仅参与 inline轴 的容器查询 */\n /* size，表示参与 inline轴 和 block轴 的容器查询 */\n\n /* \n 简写\n container: sidebar / inline-size; \n */\n}\n\n/* 不指定容器名称则查询所有容器 */\n@container sidebar(width < 650px) {\n /* 选中在 sidebar 容器内符合指定查询的... */\n /* container-type: inline-size 指定容器仅参与水平方向查询，\n 即只能查询 width，不能查询 height */\n .card {\n width: 50%;\n background-color: gray;\n font-size: 1em;\n }\n}\n支持嵌套使用
\n设置了 container-type 的容器会同时被施加 CSS 局限。
\ncontainer-type | \nnormal | \ninline-size | \nsize | \n
|---|---|---|---|
contain | \nlayout style size | \nlayout style inline-size | \nnone | \n
CSS 局限：contain 属性用于标识元素的子树是否独立于页面中的其他部分
contain 属性取值如下：
\n| 值 | \n含义 | \n
|---|---|
none | \n- | \n
size | \n开启size containment。意味着此元素的子元素尺寸无法影响元素本身的尺寸，计算其尺寸时视为无子元素（包括伪元素，如 ::before ::after ::marker）。可使用 contain-intrinsic-size 指定应用此值的元素的尺寸。若不手动给予其尺寸，则多数时候元素尺寸将变为零。替换元素视为有自然宽度，无自然高度，无自然横纵比（可以有 aspect-ratio）。 | \n
inline-size | \n仅在 inline 方向应用 size containment | \n
layout | \n开启layout containment。建立独立的格式化上下文。外部元素不能影响内部布局，反之亦然 | \n
style | \n开启style containment。确保由 counter-increment 和 counter-set 属性所创建的新计数器的作用域被限制为此子树。 | \n
paint | \n开启paint containment。与 overflow: clip 类似，不会创建格式化上下文，但会创建层叠上下文。 | \n
strict | \n相当于 size layout paint style。即开启所有局限。尽可能使用此值来获得优化。 | \n
content | \n相当于 layout paint style。相对于 strict 保险一些。因为没有应用尺寸局限，元素仍然可以响应其内容的尺寸。 | \n
查询含有指定键值对属性的容器（例如：--accent-color 属性的值为 blue）
属性的值是以 computed_value 进行评估的（简而言之，考虑 inherits）
@container style(--accent-color: blue) {\n /* <stylesheet> */\n}\n\n/* \n如果不将自定义属性的数据类型声明为 <color>\n则 blue 与 #0000ff 不相同\n*/\n@property --accent-color {\n syntax: "<color>";\n inherits: true;\n}\n| Unit | \nDescription | \n
|---|---|
| cqw | \n表示容器查询宽度（Container Query Width）占比。1cqw 等于容器宽度的 1% | \n
| cqh | \n表示容器查询高度（Container Query Height）占比。1cqh 等于容器高度的 1% | \n
| cqi | \n表示容器查询 inline 轴方向的尺寸（Container Query Inline-Size）占比 | \n
| cqb | \n表示容器查询 block 轴方向的尺寸（Container Query Block-Size）占比 | \n
| cqmin | \n表示容器查询较小尺寸的（Container Query Min）占比 | \n
| cqmax | \n表示容器查询较大尺寸的（Container Query Min）占比 | \n
stage3 装饰器在 typescript 5.0 得到正式支持了
\nstage2 装饰器 参见此处
\n它们在 typescript 中的差异，参见此处
\nProposal: https://github.com/tc39/proposal-decorators
\nstage2 的装饰器基于 PropertyDescriptor，stage3 的装饰器则不同
最大的区别是 stage3 装饰器不允许改变类成员的类型（字段、访问器、方法）（出于性能考虑）
\nfunction loggedMethod<This, Args extends any[], Return>(\n target: (this: This, ...args: Args) => Return,\n context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,\n) {\n const methodName = String(context.name);\n\n function replacementMethod(this: This, ...args: Args): Return {\n console.log(`LOG: Entering method '${methodName}'.`);\n const result = target.call(this, ...args);\n console.log(`LOG: Exiting method '${methodName}'.`);\n return result;\n }\n\n return replacementMethod;\n}\n\nfunction bound<This, Args extends any[], Return>(\n target: (this: This, ...args: Args) => Return,\n context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>,\n) {\n const methodName = String(context.name);\n\n if (context.private) {\n throw new Error(`'bound' cannot decorate private properties like ${methodName}.`);\n }\n context.addInitializer(function (this: This) {\n Reflect.set(this as object, methodName, target.bind(this));\n });\n}\n\nclass Person {\n name: string;\n constructor(name: string) {\n this.name = name;\n }\n\n @loggedMethod\n @bound\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n}\n\nconst { greet } = new Person("Ray");\ngreet();\n提案对装饰器函数的定义如下
\ntype Decorator = (\n value: Input,\n context: {\n kind: string;\n name: string | symbol;\n access: {\n get?(): unknown;\n set?(value: unknown): void;\n };\n private?: boolean;\n static?: boolean;\n addInitializer?(initializer: () => void): void;\n },\n) => Output | void;\n\n\n注意：由于讨论的是 typescript 实现，具体以下面 typescript 的定义为准
\n
可以发现 stage3 的装饰器的形式更固定，其第一个参数接收被装饰的值，第二个参数是对应的 context，context 描述了值的形状，
addInitializer 添加的函数将在实例化之前执行（具体参见下文），函数内部 this 被绑定为对应实例，
函数体可以返回一个新方法来替换原来的值，参见下表。\naccess 对象包含一组方法，它们的第一个参数都是任意对象，这些方法会去操作该对象上与当被装饰的键名相同的值
| kind | \nInput | \nOutput | \n
|---|---|---|
| class | \nClass | \nCallable | \n
| method | \nMethod | \nMethod | \n
| setter | \n(T):void | \n(T):void | \n
| getter | \n():T | \n():T | \n
| accessor | \n{ get():T, set(T):void } | \n{ get():T, set(T):void, init(T):T } | \n
| field | \nundefined | \n(T) => T | \n
装饰器只能修饰类或类的成员（相比于 stage2 删除了参数装饰器，但 proposal 的扩展部分描述了参数装饰器）
一共有六种装饰器，对应 kind 的值为 class method getter setter field accessor
type DecoratorContext =\n | ClassDecoratorContext // 类\n | ClassMemberDecoratorContext; // 类的成员\n\ntype ClassMemberDecoratorContext =\n | ClassMethodDecoratorContext\n | ClassGetterDecoratorContext\n | ClassSetterDecoratorContext\n | ClassFieldDecoratorContext\n | ClassAccessorDecoratorContext;\n具体声明如下（删去了 metadata）
注意：typescript 实现是 proposal 描述的超集，其添加了一些内容
interface ClassDecoratorContext<Class extends abstract new (...args: any) => any = abstract new (...args: any) => any> {\n readonly kind: "class";\n readonly name: string | undefined;\n addInitializer(initializer: (this: Class) => void): void;\n}\n\ninterface ClassMethodDecoratorContext<\n This = unknown,\n Value extends (this: This, ...args: any) => any = (this: This, ...args: any) => any,\n> {\n readonly kind: "method";\n readonly name: string | symbol;\n readonly static: boolean;\n readonly private: boolean;\n readonly access: {\n has(object: This): boolean;\n get(object: This): Value;\n };\n addInitializer(initializer: (this: This) => void): void;\n}\n\ninterface ClassGetterDecoratorContext<This = unknown, Value = unknown> {\n readonly kind: "getter";\n readonly name: string | symbol;\n readonly static: boolean;\n readonly private: boolean;\n readonly access: {\n has(object: This): boolean;\n get(object: This): Value;\n };\n addInitializer(initializer: (this: This) => void): void;\n}\n\ninterface ClassSetterDecoratorContext<This = unknown, Value = unknown> {\n readonly kind: "setter";\n readonly name: string | symbol;\n readonly static: boolean;\n readonly private: boolean;\n readonly access: {\n has(object: This): boolean;\n set(object: This, value: Value): void;\n };\n addInitializer(initializer: (this: This) => void): void;\n}\n\n// 即 getter 和 setter\ninterface ClassAccessorDecoratorContext<This = unknown, Value = unknown> {\n readonly kind: "accessor";\n readonly name: string | symbol;\n readonly static: boolean;\n readonly private: boolean;\n readonly access: {\n has(object: This): boolean;\n get(object: This): Value;\n set(object: This, value: Value): void;\n };\n addInitializer(initializer: (this: This) => void): void;\n}\n\ninterface ClassFieldDecoratorContext<This = unknown, Value = unknown> {\n readonly kind: "field";\n readonly name: string | symbol;\n readonly static: boolean;\n readonly private: boolean;\n readonly access: {\n has(object: This): boolean;\n get(object: This): Value;\n set(object: This, value: Value): void;\n };\n addInitializer(initializer: (this: This) => void): void;\n}\naddInitializer 添加初始化逻辑装饰器 context 对象上的 addInitializer 方法可用于对类或类成员添加初始化函数。
该函数将在值已经定义完成后运行，具体执行时机如下：
\n\n附：原文
\n
装饰器用于修饰 class 语法创建的类
但是 class 语法无法在 prototype 属性上设置字段（只能设置方法和访问器）
设置字段的语法是将字段设置在被实例化的对象身上
类字段是这样初始化的：
\n\n\n这个初始化顺序其实和其它的语言没区别，比如 c++
\n
在 constructor 中使用 this 和 java 是一样的，也相当于 c++ 使用 override
super 关键字仅允许在派生类和对象字面量中的方法使用
一个对象内部声明的方法（而不是声明一个字段。我们知道，字段可以是包括函数的任意值，但作为字段的函数并不绑定到对象上）
具有特殊内部属性 [[HomeObject]] 绑定到这个对象
这个函数的 super 则指向自身的 [[HomeObject]] 内部属性（与 this 不同，它是绑定的值）
但是只能在 super 上访问 super 指向的对象的 [[Prototype]] 上的属性，不能访问对象自身的属性
\n\n参见：此例子
\n
let obj = {\n fn1() {\n // 对象方法，是一个具名函数。这个函数不能被 new，允许使用 super\n //（super 绑定到 obj，而 this 则始终指向被调用的对象）\n // obj.fn1.[[HomeObject]] == obj1\n },\n fn2: function () {\n // 对象字段，是一个匿名函数。这个函数可以被 new\n // 不允许使用 super\n },\n};\n\nnew obj.fn1(); // TypeError: obj.fn1 is not a constructor\nnew obj.fn2(); // => fn2 {}\n类方法只不过是设置在类的 prototype 属性上的对象方法而已
\naccessor 关键字的作用是将 field 自动变为 getter 和 setter
也就是 context.kind 会变成 accessor
显然，accessor 相当于 getter 和 setter，那就是设置在类的 prototype 上，而不是实例对象上
因此也可以将 accessor 看作是在 prototype 上设置字段（弥补了没有 accessor 关键字时只能在实例对象上设置字段的缺陷）
（虽然没什么用，但是这样还是不能在 实例对象自身 上设置具有 [[HomeObject]] 内部属性的对象方法）
class C {\n accessor x = 1;\n}\n\n// 相当于\n\nclass C {\n #x = 1;\n\n get x() {\n return this.#x;\n }\n\n set x(val) {\n this.#x = val;\n }\n}\nmetadata 为 proposal 的扩展部分
\n见：tc39/proposal-decorator-metadata
\n待补充。。。
\n","tags":["js"]},{"id":"web-view-transition","url":"https://yieldray.fun/posts/web-view-transition","title":"View Transitions API","date_published":"2023-09-02T11:11:11.000Z","date_modified":"2023-09-17T23:23:23.000Z","content_text":"调用 document.startViewTransition(callback) 使得 DOM 变动时，浏览器生成如下伪元素结构
（注：DOM 变动可以是 Add/removing elements, changing class names, changing styles…）
::view-transition\n├─ ::view-transition-group(root)\n│ └─ ::view-transition-image-pair(root)\n│ ├─ ::view-transition-old(root)\n └─ ::view-transition-new(root)\n├─ ::view-transition-group(name-1)\n│ └─ ::view-transition-image-pair(name-1)\n│ ├─ ::view-transition-old(name-1) 👈 快照\n│ └─ ::view-transition-new(name-1) 👈 实时表示\n├─ ::view-transition-group(name-2)\n│ └─ ::view-transition-image-pair(name-2)\n│ ├─ ::view-transition-old(name-2)\n│ └─ ::view-transition-new(name-2)\n│ /* and so one... */\n其中， root 是元素 CSS 属性 view-transition-name 的默认值
// 伪代码：模拟 document.startViewTransition 的实现流程\nfunction startViewTransition(callback: () => Promise<void> | void): ViewTransition {\n // 1. 检查当前是否有活跃的视图过渡\n if (activeViewTransition && !activeViewTransition.isCreatedViaScriptAPI()) {\n // 如果有导航触发的过渡，脚本触发的过渡会被跳过\n return ViewTransition.createSkipped(callback);\n }\n\n // 2. 如果有活跃的 transition，先跳过它\n if (activeViewTransition) {\n activeViewTransition.skipTransition();\n }\n\n // 3. 视图必须可用，否则直接返回 null\n if (!documentViewAvailable()) {\n return null;\n }\n\n // 4. 创建新的 ViewTransition 对象\n const transition = ViewTransition.createFromScript(callback /* types */);\n\n // 5. 如果文档当前不可见，直接跳过动画\n if (document.hidden) {\n transition.skipTransition(/* reason: invalid state */);\n return transition;\n }\n\n // 6. 执行回调，等待 DOM 更新\n Promise.resolve()\n .then(() => callback())\n .then(() => {\n // 7. 过渡动画开始\n transition.startAnimation();\n })\n .catch(() => {\n // 8. 回调失败则放弃过渡\n transition.skipTransition(/* reason: callback rejected */);\n });\n\n // 9. 返回 ViewTransition 对象，包含 ready/finished 等 Promise\n return transition;\n}\n简单来说，对于每组 view-transition-name， view transition 捕获其变动前和变动后的 DOM 结构
（注：与 DOM 元素本身无关，仅与 view-transition-name 指定的名称有关）
然后将 ::view-transition-old 过渡到 ::view-transition-new
（注：view-transition-name 在渲染前后的 DOM 中必须唯一）
::view-transition-old(root) 捕获了旧视图（的快照）， ::view-transition-new(root) 捕获了新视图（的实时表示）
它们都被渲染为 CSS 的可替换元素（replaced elements） （就像 <img />）
\n\n快照意味着旧视图是静态的截图，实时则表示新视图是动态反应真实DOM渲染结果的。
\n
注意，对于旧视图和新视图，仅当其实际存在时，对应伪元素才存在
（注：使用 :only-child伪类可选中此情况）\n但 ::view-transition-image-pair 及其上层伪元素总是存在的
使用参考：
https://developer.chrome.com/docs/web-platform/view-transitions/#api-reference
https://developer.chrome.com/blog/view-transitions-case-studies/
Debug 参考：
使用 DevTools 的动画面板即可，演示：https://http203-playlist.netlify.app/
规范定义默认样式如下（非常重要）
\n:root {\n view-transition-name: root;\n}\n\n:root::view-transition {\n position: fixed;\n inset: 0;\n}\n\n:root::view-transition-group(*) {\n position: absolute;\n top: 0;\n left: 0;\n\n animation-duration: 0.25s;\n animation-fill-mode: both;\n}\n\n:root::view-transition-image-pair(*) {\n position: absolute;\n inset: 0;\n\n animation-duration: inherit;\n animation-fill-mode: inherit;\n animation-delay: inherit;\n}\n\n:root::view-transition-old(*),\n:root::view-transition-new(*) {\n position: absolute;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: auto;\n\n animation-duration: inherit;\n animation-fill-mode: inherit;\n animation-delay: inherit;\n}\n\n/* Default cross-fade transition */\n@keyframes -ua-view-transition-fade-out {\n to {\n opacity: 0;\n }\n}\n@keyframes -ua-view-transition-fade-in {\n from {\n opacity: 0;\n }\n}\n\n/* Keyframes for blending when there are 2 images */\n@keyframes -ua-mix-blend-mode-plus-lighter {\n from {\n mix-blend-mode: plus-lighter;\n }\n to {\n mix-blend-mode: plus-lighter;\n }\n}\nChromium 默认样式如下
\nhtml::view-transition {\n position: fixed;\n inset: 0px;\n}\n\nhtml::view-transition-group(root) {\n right: 0px;\n bottom: 0px;\n}\nhtml::view-transition-group() {\n position: absolute;\n top: 0px;\n left: 0px;\n animation-duration: 0.25s;\n animation-fill-mode: both;\n}\n\nhtml::view-transition-image-pair(root) {\n isolation: isolate;\n}\nhtml::view-transition-image-pair() {\n animation-duration: inherit;\n animation-fill-mode: inherit;\n}\n::view-transition-image-pair() {\n position: absolute;\n inset: 0px;\n}\n\nhtml::view-transition-old(root) {\n mix-blend-mode: plus-lighter;\n}\nhtml::view-transition-old() {\n animation-name: -ua-view-transition-fade-out;\n animation-duration: inherit;\n animation-fill-mode: inherit;\n}\n::view-transition-old() {\n position: absolute;\n inset-block-start: 0px;\n inline-size: 100%;\n block-size: auto;\n}\n\nhtml::view-transition-new(root) {\n mix-blend-mode: plus-lighter;\n}\nhtml::view-transition-new() {\n animation-name: -ua-view-transition-fade-in;\n animation-duration: inherit;\n animation-fill-mode: inherit;\n}\n::view-transition-new() {\n position: absolute;\n inset-block-start: 0px;\n inline-size: 100%;\n block-size: auto;\n}\n默认是一个 cross-fade 的过渡动画，旧视图 opacity 从 1 到 0，新视图 opacity 从 0 到 1
旧视图和新视图具有 mix-blend-box: plus-lighter::view-transition-image-pair 具有 isolation: isolate
这些样式都是为了能够正确实现 cross-fade 效果，但是我们的自定义过渡动画很可能需要覆写它们
import { useState } from "react";\nimport { flushSync } from "react-dom";\n\nconst items = [<>Apple</>, <>Banana</>, <>Cherry</>];\nfunction App() {\n const [idx, setIdx] = useState(0);\n\n const onClick = () => {\n document.startViewTransition(() => {\n flushSync(() => {\n setIdx((1 + idx) % items.length);\n });\n });\n };\n\n return (\n <>\n {items.map(\n (item, i) =>\n idx === i && (\n <button key={i} className="tab" onClick={onClick}>\n {item}\n </button>\n ),\n )}\n </>\n );\n}\n使用 animation 实现样式
\n.tab {\n view-transition-name: tab;\n height: 50px;\n width: 120px;\n}\n\n::view-transition-group(tab) {\n overflow: hidden;\n}\n\n::view-transition-image-pair(tab) {\n}\n\n::view-transition-old(tab) {\n animation: vt-old-tab 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n::view-transition-new(tab) {\n animation: vt-new-tab 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n@keyframes vt-old-tab {\n from {\n transform: translateX(0%);\n }\n to {\n transform: translateX(-100%);\n }\n}\n\n@keyframes vt-new-tab {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0%);\n }\n}\n使用 transition 实现样式
\n.tab {\n view-transition-name: tab;\n height: 50px;\n width: 120px;\n}\n\n::view-transition-group(tab) {\n overflow: hidden;\n}\n\n::view-transition-image-pair(tab) {\n}\n\n::view-transition-old(tab),\n::view-transition-new(tab) {\n animation: none; /* 这里默认继承了 animation 动画，所以需要移除 */\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n::view-transition-old(tab) {\n transform: translateX(-100%);\n\n @starting-style {\n transform: translateX(0%);\n }\n}\n\n::view-transition-new(tab) {\n transform: translateX(0%);\n\n @starting-style {\n transform: translateX(100%);\n }\n}\nTODO
\nhttps://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
\n使用时，只需考虑旧视图的哪个元素要过渡到新视图的哪个元素（可以是同一个元素，也可以不同）\n然后给它们加上相同的 view-transition-name 名称即可（必须保证前后视图只能存在唯一同名 view-transition-name 元素）
一般来说， document.startViewTransition 传入的回调修改 DOM 即可，网络请求应在此之前发生\n要使用 Javascript 控制动画，参见：https://developer.chrome.com/docs/web-platform/view-transitions/#animating-with-javascript
\n// TODO: 目前 typescript5.4dev 还没有提供定义，可以参考如下：\ninterface Document {\n /**\n * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/startViewTransition)\n * @param callback A callback function typically invoked to update the DOM during the view transition process, which returns a Promise. The callback is invoked once the API has taken a screenshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.\n * @returns A ViewTransition object instance.\n */\n startViewTransition(callback: () => Promise<void> | void): ViewTransition;\n}\n\ninterface ViewTransition {\n /**\n * A Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.\n */\n finished: Promise<void>;\n /**\n * A Promise that fulfills once the pseudo-element tree is created and the transition animation is about to start.\n */\n ready: Promise<void>;\n /**\n * A Promise that fulfills when the promise returned by the document.startViewTransition()'s callback fulfills.\n */\n updateCallbackDone: Promise<void>;\n /**\n * Skips the animation part of the view transition, but doesn't skip running the document.startViewTransition() callback that updates the DOM.\n */\n skipTransition(): void;\n}\nhttps://plainvanillaweb.com/blog/articles/2025-06-12-view-transitions/
\nhttps://css-tricks.com/almanac/pseudo-selectors/v/view-transition/
\nhttps://developer.chrome.com/blog/view-transitions-misconceptions
\n\n\n// ViewTransitionSupplement 是一个文档补充类，用于管理视图过渡功能\n// 它实现了 Supplement<Document> 模式，为 Document 对象添加视图过渡能力\nclass ViewTransitionSupplement : public Supplement<Document> {\npublic:\n // 补充类的唯一标识符\n static const char kSupplementName[] = "ViewTransition";\n\n // 从文档获取现有的 ViewTransitionSupplement 实例（如果存在）\n static ViewTransitionSupplement* FromIfExists(const Document& document) {\n return Supplement<Document>::From<ViewTransitionSupplement>(document);\n }\n\n // 从文档获取 ViewTransitionSupplement 实例，如果不存在则创建新实例\n static ViewTransitionSupplement* From(Document& document) {\n auto* supplement = Supplement<Document>::From<ViewTransitionSupplement>(document);\n if (!supplement) {\n // 使用垃圾回收机制创建新实例\n supplement = MakeGarbageCollected<ViewTransitionSupplement>(document);\n Supplement<Document>::ProvideTo(document, supplement);\n }\n return supplement;\n }\n\n // 为指定元素启动视图过渡的静态方法\n static DOMViewTransition* StartViewTransitionForElement(\n ScriptState* script_state,\n Element* element,\n V8ViewTransitionCallback* callback,\n const std::optional<Vector<String>>& types,\n ExceptionState& exception_state) {\n DCHECK(script_state);\n if (!element) {\n return nullptr;\n }\n\n if (callback) {\n // 为回调设置任务状态，用于任务归属追踪\n // 扩展任务目前不被 TaskAttributionTracker 支持\n callback->SetTaskState(CaptureCurrentTaskStateIfMainWorld(script_state));\n }\n\n auto* supplement = From(element->GetDocument());\n return supplement->StartTransition(*element, callback, types, exception_state);\n }\n\n // 启动文档级别的视图过渡（使用回调函数）\n DOMViewTransition* startViewTransition(\n ScriptState* script_state,\n Document& document,\n V8ViewTransitionCallback* callback,\n ExceptionState& exception_state) {\n // 对文档根元素启动过渡\n return StartViewTransitionForElement(script_state, document.documentElement(),\n callback, std::nullopt, exception_state);\n }\n\n // 启动文档级别的视图过渡（使用选项对象）\n DOMViewTransition* startViewTransition(\n ScriptState* script_state,\n Document& document,\n ViewTransitionOptions* options,\n ExceptionState& exception_state) {\n // 验证选项对象的完整性\n CHECK(!options || (options->hasUpdate() && options->hasTypes()));\n return StartViewTransitionForElement(\n script_state, document.documentElement(),\n options ? options->update() : nullptr,\n options ? options->types() : std::nullopt, exception_state);\n }\n\n // 启动无参数的文档级别视图过渡\n DOMViewTransition* startViewTransition(\n ScriptState* script_state,\n Document& document,\n ExceptionState& exception_state) {\n return StartViewTransitionForElement(\n script_state, document.documentElement(),\n static_cast<V8ViewTransitionCallback*>(nullptr), std::nullopt,\n exception_state);\n }\n\n // 获取文档当前活跃的视图过渡\n static DOMViewTransition* activeViewTransition(Document& document) {\n auto* supplement = FromIfExists(document);\n if (!supplement) {\n return nullptr;\n }\n return supplement->document_transition_\n ? supplement->document_transition_->GetScriptDelegate()\n : nullptr;\n }\n\n // 实际启动过渡的核心方法\n DOMViewTransition* StartTransition(\n Element& element,\n V8ViewTransitionCallback* callback,\n const std::optional<Vector<String>>& types,\n ExceptionState& exception_state) {\n bool for_document = element.IsDocumentElement();\n Document& document = element.GetDocument();\n\n // 在导航启动的过渡期间禁止脚本启动的过渡\n if (document_transition_ && !document_transition_->IsCreatedViaScriptAPI()) {\n return ViewTransition::CreateSkipped(&element, callback)->GetScriptDelegate();\n }\n\n ViewTransition* active_transition = GetTransition(element);\n if (active_transition) {\n // 启动新的视图过渡会跳过当前活跃的视图过渡\n active_transition->SkipTransition();\n } else {\n auto it = skipped_with_pending_dom_callback_.find(&element);\n if (it != skipped_with_pending_dom_callback_.end()) {\n // 最近跳过的视图过渡可能还没有触发其 DOM 回调\n // 这个步骤需要在新视图过渡的捕获阶段之前完成\n active_transition = it->value;\n }\n }\n\n DCHECK(!GetTransition(element))\n << "SkipTransition() should finish previously active view transition";\n\n // 需要连接到视图才能进行过渡\n if (!document.View()) {\n return nullptr;\n }\n\n ViewTransition* transition = ViewTransition::CreateFromScript(\n &element, callback, types, this, active_transition);\n DCHECK(transition);\n\n // 根据元素类型存储过渡对象\n if (for_document) {\n document_transition_ = transition;\n } else {\n element_transitions_.insert(&element, transition);\n }\n\n // 如果文档被隐藏，立即跳过过渡\n if (document.hidden()) {\n transition->SkipTransition(ViewTransition::PromiseResponse::kRejectInvalidState);\n DCHECK(!document_transition_ || !for_document);\n return transition->GetScriptDelegate();\n }\n\n return transition->GetScriptDelegate();\n }\n\n // 处理文档可见性状态变化\n void DidChangeVisibilityState() {\n if (GetSupplementable()->hidden() && document_transition_) {\n // 文档隐藏时跳过活跃的过渡\n document_transition_->SkipTransition(ViewTransition::PromiseResponse::kRejectInvalidState);\n }\n SendOptInStatusToHost();\n }\n\n // 向宿主发送选择加入状态\n void SendOptInStatusToHost() {\n Document* document = GetSupplementable();\n if (!document || !document->GetFrame() || !document->domWindow()) {\n return;\n }\n\n // 通知框架宿主选择加入状态已更改\n document->GetFrame()->GetLocalFrameHostRemote().OnViewTransitionOptInChanged(\n (document->domWindow()->HasBeenRevealed() && !document->hidden())\n ? cross_document_opt_in_\n : mojom::blink::ViewTransitionSameOriginOptIn::kDisabled);\n }\n\n // 设置跨文档选择加入状态\n void SetCrossDocumentOptIn(\n mojom::blink::ViewTransitionSameOriginOptIn cross_document_opt_in) {\n if (cross_document_opt_in_ == cross_document_opt_in) {\n return;\n }\n\n cross_document_opt_in_ = cross_document_opt_in;\n SendOptInStatusToHost();\n }\n\n // 为导航创建文档快照的静态方法\n static void SnapshotDocumentForNavigation(\n Document& document,\n const blink::ViewTransitionToken& navigation_id,\n mojom::blink::PageSwapEventParamsPtr params,\n ViewTransition::ViewTransitionStateCallback callback) {\n auto* supplement = From(document);\n supplement->StartTransition(document, navigation_id, std::move(params),\n std::move(callback));\n }\n\n // 启动导航相关的过渡\n void StartTransition(\n Document& document,\n const blink::ViewTransitionToken& navigation_id,\n mojom::blink::PageSwapEventParamsPtr params,\n ViewTransition::ViewTransitionStateCallback callback) {\n // TODO: 根据规范，此时应该检查选择加入状态\n\n if (document_transition_) {\n // 如果存在过渡，应该跳过它，因为导航过渡优先级更高\n document_transition_->SkipTransition();\n }\n\n DCHECK(!document_transition_)\n << "SkipTransition() should finish existing |document_transition_|";\n\n // 为导航快照创建过渡对象\n document_transition_ = ViewTransition::CreateForSnapshotForNavigation(\n &document, navigation_id, std::move(callback), cross_document_types_, this);\n\n // 创建并分发页面交换事件\n auto* page_swap_event = MakeGarbageCollected<PageSwapEvent>(\n document, std::move(params), document_transition_->GetScriptDelegate());\n document.domWindow()->DispatchEvent(*page_swap_event);\n }\n\n // 从导航快照创建过渡的静态方法\n static void CreateFromSnapshotForNavigation(\n Document& document,\n ViewTransitionState transition_state) {\n auto* supplement = From(document);\n supplement->StartTransition(document, std::move(transition_state));\n }\n\n // 中止过渡的静态方法\n static void AbortTransition(Document& document) {\n auto* supplement = FromIfExists(document);\n if (supplement && supplement->document_transition_) {\n supplement->document_transition_->SkipTransition();\n DCHECK(!supplement->document_transition_);\n }\n }\n\n // 从快照启动过渡\n void StartTransition(Document& document, ViewTransitionState transition_state) {\n DCHECK(!document_transition_) << "Existing transition on new Document";\n document_transition_ = ViewTransition::CreateFromSnapshotForNavigation(\n &document, std::move(transition_state), this);\n }\n\n // 过渡完成时的回调处理\n void OnTransitionFinished(ViewTransition* transition) {\n CHECK(transition);\n\n // 清除过渡以便垃圾回收（并防止 GetTransition 调用者认为有正在进行的过渡）\n if (transition == document_transition_) {\n document_transition_ = nullptr;\n } else {\n Element* scope = transition->Scope();\n element_transitions_.erase(scope);\n LayoutObject* layout_object = scope->GetLayoutObject();\n\n // 元素可能仅因为是视图过渡的作用域而添加了堆叠上下文\n // 确保调整后样式的正确性\n if (scope != scope->GetDocument().documentElement() && layout_object &&\n !(layout_object->StyleRef().Contain() & kContainsViewTransition) &&\n layout_object->HasLayer()) {\n layout_object->EnclosingLayer()->SetNeedsCompositingInputsUpdate();\n scope->SetNeedsStyleRecalc(kLocalStyleChange,\n StyleChangeReasonForTracing::Create(\n style_change_reason::kViewTransition));\n }\n }\n\n // 如果活跃视图过渡集合为空，通知动画器\n if (!document_transition_ && element_transitions_.empty()) {\n Document* document = To<Document>(GetSupplementable());\n if (auto* page = document->GetPage()) {\n page->Animator().SetHasViewTransition(false);\n }\n }\n }\n\n // 处理带有待处理回调的跳过过渡\n void OnSkipTransitionWithPendingCallback(ViewTransition* transition) {\n CHECK(transition);\n skipped_with_pending_dom_callback_.insert(transition->Scope(), transition);\n }\n\n // 处理跳过过渡的 DOM 回调\n void OnSkippedTransitionDOMCallback(ViewTransition* transition) {\n CHECK(transition);\n skipped_with_pending_dom_callback_.erase(transition->Scope());\n }\n\n // 获取文档级别的过渡\n ViewTransition* GetTransition() {\n return document_transition_.Get();\n }\n\n // 获取指定元素的过渡\n ViewTransition* GetTransition(const Element& element) {\n if (element.IsDocumentElement()) {\n return document_transition_.Get();\n }\n if (element.IsPseudoElement()) {\n // 对于伪元素，获取其最终原始元素的过渡\n return GetTransition(To<PseudoElement>(element).UltimateOriginatingElement());\n }\n auto transition = element_transitions_.find(&element);\n return transition == element_transitions_.end() ? nullptr : transition->value;\n }\n\n // 对每个过渡执行指定函数\n void ForEachTransition(base::FunctionRef<void(ViewTransition&)> function) {\n if (!RuntimeEnabledFeatures::ScopedViewTransitionsEnabled()) {\n // 如果未启用作用域视图过渡，只处理文档过渡\n if (ViewTransition* document_transition = GetTransition()) {\n function(*document_transition);\n }\n DCHECK(element_transitions_.empty());\n return;\n }\n\n // 创建过渡列表的本地副本，因为函数可能修改过渡映射\n HeapVector<Member<ViewTransition>> transitions;\n if (ViewTransition* document_transition = GetTransition()) {\n transitions.push_back(document_transition);\n }\n for (auto& element_transition : element_transitions_.Values()) {\n transitions.push_back(element_transition);\n }\n for (auto transition : transitions) {\n function(*transition);\n }\n }\n\n // 进入计算样式作用域时的处理\n void WillEnterGetComputedStyleScope() {\n CHECK(!in_get_computed_style_scope_);\n in_get_computed_style_scope_ = true;\n\n ForEachTransition([](ViewTransition& transition) {\n transition.WillEnterGetComputedStyleScope();\n });\n }\n\n // 退出计算样式作用域时的处理\n void WillExitGetComputedStyleScope() {\n CHECK(in_get_computed_style_scope_);\n in_get_computed_style_scope_ = false;\n\n ForEachTransition([](ViewTransition& transition) {\n transition.WillExitGetComputedStyleScope();\n });\n }\n\n // 样式和布局树更新前的处理\n void WillUpdateStyleAndLayoutTree() {\n if (in_get_computed_style_scope_ == last_update_had_computed_style_scope_) {\n return;\n }\n last_update_had_computed_style_scope_ = in_get_computed_style_scope_;\n ForEachTransition([](ViewTransition& transition) {\n // 使内部伪样式失效，强制重新计算\n transition.InvalidateInternalPseudoStyle();\n });\n }\n\n // 构造函数，初始化补充对象\n ViewTransitionSupplement::ViewTransitionSupplement(Document& document)\n : Supplement<Document>(document) {}\n\n // 析构函数\n ViewTransitionSupplement::~ViewTransitionSupplement() = default;\n\n // 垃圾回收追踪方法，标记需要保持活跃的对象\n void ViewTransitionSupplement::Trace(Visitor* visitor) const {\n visitor->Trace(document_transition_);\n visitor->Trace(element_transitions_);\n visitor->Trace(skipped_with_pending_dom_callback_);\n\n Supplement<Document>::Trace(visitor);\n }\n\n // 添加待处理的视图过渡请求\n void ViewTransitionSupplement::AddPendingRequest(\n std::unique_ptr<ViewTransitionRequest> request) {\n pending_requests_.push_back(std::move(request));\n\n auto* document = GetSupplementable();\n if (!document || !document->GetPage() || !document->View())\n return;\n\n // 安排新的帧渲染\n document->View()->ScheduleAnimation();\n\n // 确保绘制工件合成器进行更新，这是我们向合成器传递过渡请求的机制\n document->View()->SetPaintArtifactCompositorNeedsUpdate();\n }\n\n // 获取并清空待处理的请求列表\n VectorOf<std::unique_ptr<ViewTransitionRequest>>\n ViewTransitionSupplement::TakePendingRequests() {\n return std::move(pending_requests_);\n }\n\n // 当视图过渡样式更新时的回调\n void ViewTransitionSupplement::OnViewTransitionsStyleUpdated(\n bool cross_document_enabled,\n const Vector<String>& types) {\n SetCrossDocumentOptIn(\n cross_document_enabled\n ? mojom::blink::ViewTransitionSameOriginOptIn::kEnabled\n : mojom::blink::ViewTransitionSameOriginOptIn::kDisabled);\n cross_document_types_ = types;\n }\n\n // 即将插入 body 元素时的处理\n void ViewTransitionSupplement::WillInsertBody() {\n if (!document_transition_ ||\n !document_transition_->IsForNavigationOnNewDocument()) {\n return;\n }\n\n auto* document = GetSupplementable();\n CHECK(document);\n\n // 更新活跃样式将计算 @view-transition 导航选择加入\n // TODO: 这可能是一个过于重的方法\n // 长期来看，我们可能不想在 WillInsertBody 时做这个决定\n // 或者如果要做，我们可以专门查找 @view-transition 而不是所有规则\n document->GetStyleEngine().UpdateActiveStyle();\n }\n\n // 解析跨文档视图过渡\n DOMViewTransition*\n ViewTransitionSupplement::ResolveCrossDocumentViewTransition() {\n if (!document_transition_ ||\n !document_transition_->IsForNavigationOnNewDocument()) {\n return nullptr;\n }\n\n // 当文档尚未被显示时，我们自动跳过*出站*过渡\n // 在解析入站过渡时，我们期望它尚未被显示\n CHECK(!GetSupplementable()->domWindow()->HasBeenRevealed());\n\n if (cross_document_opt_in_ ==\n mojom::blink::ViewTransitionSameOriginOptIn::kDisabled) {\n document_transition_->SkipTransition();\n CHECK(!ViewTransitionUtils::GetTransition(*GetSupplementable()));\n return nullptr;\n }\n\n // 初始化过渡类型\n document_transition_->InitTypes(cross_document_types_);\n\n // TODO: 这里应该应用来自使用的 @view-transition 的类型\n\n return document_transition_->GetScriptDelegate();\n }\n\n // 生成资源 ID\n viz::ViewTransitionElementResourceId\n ViewTransitionSupplement::GenerateResourceId(\n const blink::ViewTransitionToken& transition_token,\n bool for_subframe_snapshot) {\n return viz::ViewTransitionElementResourceId(\n transition_token, ++resource_local_id_sequence_, for_subframe_snapshot);\n }\n\n // 初始化资源 ID 序列\n void ViewTransitionSupplement::InitializeResourceIdSequence(\n uint32_t next_local_id) {\n CHECK_GT(next_local_id,\n viz::ViewTransitionElementResourceId::kInvalidLocalId);\n resource_local_id_sequence_ =\n std::max(next_local_id - 1, resource_local_id_sequence_);\n }\n\n} // namespace blink\nCSS color adjustment 模块用于自动控制和调整颜色以处理用户偏好，比如：暗色模式，高对比度，及其他色彩模式。
\n\n\nTODO: 本篇待完善
\n
指定当前元素使用何种配色方案（与操作系统是否指定了暗色模式无关）
\ncolor-scheme =\n normal |\n [ light | dark | <custom-ident> ]+ && only?\n元素的默认颜色属性值实际上配置为
该变量会根据 color-scheme 值为 light 或 dark 而表示不同的具体值。
查询用户代理偏好的主题色。（即：操作系统是否开启了暗色模式）
\n@media (prefers-color-scheme: dark) {\n}\n\n@media (prefers-color-scheme: light) {\n}\n\n@media (prefers-color-scheme: no-preference) {\n}\n注：js 使用 matchMedia 查询
\nlet isDark: boolean = window.matchMedia("(prefers-color-scheme: dark)").matches;\n\nwindow.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (ev: MediaQueryListEvent) => {\n const matches: boolean = ev.matches;\n const media: "(prefers-color-scheme: dark)" = ev.media;\n console.log({ matches, media });\n});\n暗色模式下使用系统色兜底。（仅适用于元素未配置颜色的属性，因为系统颜色优先级低）
\n@media (prefers-color-scheme: dark) {\n :root {\n color-scheme: dark;\n }\n}\nOrigin 标头在同源的 HEAD 和 GET 请求中不会自动发送，其它情况下（即跨源和同源非 HEAD GET 请求）则自动携带
Referer 标头的发送策略可通过当前文档的 Referrer-Policy 标头或 <meta> 标签进行全局控制
默认情况下，非 http 文档的请求和 http 向 https 的请求不会发送 Referer 标头，并且为发起请求的文档的完整 URI （不含 hash）
一个最简单的 img 标签如下，仅考虑不设置其它策略的默认情况
将对 src 发送 GET，携带 Referer 标头，不携带 Origin 标头
<img src="http://example.net" />\nwidth、height 以及 alt 是众所周知的属性，略。
\n若指定 crossorigin 属性，则图片请求为 CORS 请求（验证相应的响应标头）
携带 Referer 标头和 Origin 标头
属性可选值为
referrerpolicy 属性可内联地指定 Referer 标头的发送策略
\n| 值 | \n描述 | \n
|---|---|
| no-referrer | \n不发送 Referer 标头 | \n
| no-referrer-when-downgrade | \nHTTPS 文档请求 HTTP 图片时，不发送 Referer 标头 | \n
| origin | \n请求的 Referer 标头被限制为：协议、主机和端口 | \n
| origin-when-cross-origin | \n请求的 Referer 标头被限制为：协议、主机和端口。同源时仍将包含路径 | \n
| same-origin | \n仅同源请求发送 Referer 标头，跨源请求则不包含 Referer 标头 | \n
| strict-origin | \n仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下发送 Referer 标头。而在目标的安全性降低（HTTPS→HTTP）时则不发送 | \n
| strict-origin-when-cross-origin（default value） | \n执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送 Referer，在目标安全性降低（HTTPS→HTTP）时则不发送。 | \n
| unsafe-url | \n请求的 Referer 标头为：协议、主机、端口以及路径。（不安全） | \n
decoding 属性可指定为
\nfetchpriority 属性可作为图像请求优先级的参考值，可指定为
\nloading 属性可开启图像延迟加载，仅在浏览器开启 Javascript 时有效
\neager 默认值。立即加载，即使图像在 viewport 以外
\nlazy 延迟加载图像（懒加载）
\n可以参考：https://www.zhangxinxu.com/wordpress/2019/09/native-img-loading-lazy/
谷歌：https://web.dev/browser-level-image-lazy-loading/
ismap 属性要求 img 元素嵌套在 a 标签下，点击图片将转至 a 标签指定的 href 加上 ?{x},{y}
xy 为图片被点击的坐标，例如 https://example.net/?200,150
注意这是将 href 直接拼接 ? 和坐标，即使 img.src 的 URL 已有 query 部分（所以这里最好避免使用 query）
<a href="https://example.net/">\n <img src="https://placekitten.com/400/300" ismap />\n</a>\nusemap 属性可指定关联的 map 标签
\n参见：https://developer.mozilla.org/docs/Web/HTML/Element/map
\n<img\n src="https://www.runoob.com/try/demo_source/planets.gif"\n width="145"\n height="126"\n alt="Planets"\n usemap="#planetmap"\n/>\n\n<map name="planetmap">\n <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://www.runoob.com/images/sun.gif" />\n <area shape="circle" coords="90,58,3" alt="Mercury" href="https://www.runoob.com/try/demo_source/merglobe.gif" />\n <area shape="circle" coords="124,58,8" alt="Venus" href="https://www.runoob.com/images/venglobe.gif" />\n</map>\n略，参见：https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
\n<img\n srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"\n src="elva-fairy-640w.jpg"\n alt="Elva dressed as a fairy"\n/>\n回溯算法相当于 DFS
\n// 二叉树\nvoid traverse(TreeNode *root)\n{\n if (!root) return;\n\n // 前序遍历代码写在这里\n traverse(root->right);\n // 中序遍历代码写在这里\n traverse(root->left);\n // 后序遍历代码写在这里\n}\n\n// N叉树\nvoid traverse(TreeNode *root)\n{\n if (!root) return;\n\n for (auto child : root->children)\n {\n // 前序遍历代码写在这里\n traverse(child);\n // 后序遍历代码写在这里\n }\n}\n回溯伪代码如下
\ndef backtrace(choiceList, track, answer):\n if ok(track):\n answer.append(track)\n return\n\n for choice in choiceList:\n # choose: 选择一个 choice 加入 track\n backtrace(choiceList, track, answer) # 做下一个选择\n # unchoose: 从 track 中撤销上面的选择\n可以发现，回溯相当于 N 叉树的遍历
\n描述：
给定一个没有重复数字的整数数组 nums 和一个整数 n，要求返回所有可能的 n 元组，其中每个元素都可以在 nums 中任意选择。
示例：
假设给定数组 nums = [1, 2, 3]，整数 n = 2，则所有可能的 2 元组为：
[1, 1]\n[1, 2]\n[1, 3]\n[2, 1]\n[2, 2]\n[2, 3]\n[3, 1]\n[3, 2]\n[3, 3]\n#include <iostream>\n#include <vector>\n#include <algorithm>\nusing namespace std;\n\nclass Solution\n{\nprivate:\n vector<vector<int>> answer;\n\n vector<int> track;\n\n void backtrace(vector<int> &nums, int n)\n {\n if (track.size() == n) // 终止条件\n {\n answer.push_back(track); // 提交结果\n return;\n }\n\n for (int i = 0; i < nums.size(); i++) // 遍历当前层所有可能项\n {\n track.push_back(nums[i]); // 生成当前项\n backtrace(nums, n); // 生成下一项\n track.pop_back(); // 回溯，撤销当前项\n }\n }\n\npublic:\n vector<vector<int>> permute(vector<int> &nums, int n)\n {\n backtrace(nums, n);\n return answer;\n }\n};\n\n/**\n * 测试，可忽略\n */\nint main()\n{\n Solution test;\n vector<int> nums{1, 2, 3};\n vector<vector<int>> result = test.permute(nums, 2);\n\n for (auto vec : result)\n {\n cout << "[";\n for (auto n : vec)\n {\n cout << n;\n cout << ", ";\n }\n cout << "]" << endl;\n }\n}\n注意观察输出结果的顺序。
\n上面的问题中，时间复杂度是 O(n^k) ，也就是要做 k 次循环
由于 k 是变量，我们无法通过编写 k 个 for 循环实现
而是要通过栈实现
\n\nleetcode 描述：https://leetcode.cn/problems/n-queens/
\n
朴素观点来看，N 皇后问题其实是时间复杂度为 O(n^n) 的回溯问题
合理剪枝可降低时间复杂度
#include <iostream>\n#include <vector>\n\nusing namespace std;\n\nclass Solution\n{\nprivate:\n vector<vector<string>> answer;\n void backtrace(int n, int row, vector<string> &board)\n {\n if (row >= n)\n {\n answer.push_back(board);\n return;\n }\n\n // evaluate board[row][col]\n for (int col = 0; col < n; col++)\n {\n // 注意：我们只放Q，不放.\n if (isValid(n, row, col, board))\n {\n board[row][col] = 'Q'; // 放置\n backtrace(n, row + 1, board); // 下一行 （同一行只能一个Q）\n board[row][col] = '.'; // 撤销\n }\n else\n {\n continue;\n // 相当于：\n // board[row][col] = '.';\n }\n }\n }\n\n bool isValid(int n, int row, int col, vector<string> &board)\n {\n // _|_\n for (int i = 0; i < row; i++)\n {\n if (board[i][col] == 'Q')\n return false;\n }\n // _\\_\n for (int i = row - 1, j = col - 1; i >= 0 && j >= 0; i--, j--)\n {\n if (board[i][j] == 'Q')\n return false;\n }\n // _/_\n for (int i = row - 1, j = col + 1; i >= 0 && j < n; i--, j++)\n {\n if (board[i][j] == 'Q')\n {\n return false;\n }\n }\n return true;\n }\n\npublic:\n vector<vector<string>> solveNQueens(int n)\n {\n vector<string> board(n, string(n, '.'));\n backtrace(n, 0, board);\n return answer;\n }\n};\n\n/**\n * 测试，可忽略\n */\nint main()\n{\n int n = 4;\n Solution solution;\n vector<vector<string>> result = solution.solveNQueens(n);\n\n for (auto &res : result)\n {\n for (auto &row : res)\n {\n cout << row << endl;\n }\n cout << endl;\n }\n}\n\n\nleetcode 描述：https://leetcode.cn/problems/sudoku-solver/submissions/
\n
数独问题和 N 皇后问题如出一辙
\n#include <iostream>\n#include <vector>\nusing namespace std;\n\nclass Solution\n{\nprivate:\n bool backtrace(vector<vector<char>> &board)\n {\n for (int row = 0; row < 9; row++)\n for (int col = 0; col < 9; col++)\n {\n // 不是空白处不用放\n if (board[row][col] != '.')\n continue;\n\n // 两层 for 遍历行和列，再一层 for 遍历所有可能的选择\n for (char n = '1'; n <= '9'; n++)\n if (isValid(board, row, col, n))\n {\n board[row][col] = n;\n\n if (backtrace(board)) // 由于已经放置了当前位置，下一次递归就会继续去下一个位置\n return true; // 如果之后的位置也是都可以放置，那么就直接返回\n else // 如果后面的位置有不可以放的，就回溯\n board[row][col] = '.';\n }\n\n return false; // 当前位置都不可以放，直接返回（回溯）\n }\n // 已解完\n return true;\n }\n\n bool isValid(vector<vector<char>> &board, int row, int col, char n)\n {\n // 注意这里直接检查整行和整列，而不是只检查之前行和列\n // 否则也可以通过但是会超时（想想为什么？）\n\n // -\n for (int j = 0; j < 9; j++)\n if (board[row][j] == n)\n return false;\n\n // |\n for (int i = 0; i < 9; i++)\n if (board[i][col] == n)\n return false;\n\n // 3*3\n int x = row - (row % 3);\n int y = col - (col % 3);\n for (int i = x; i < x + 3; i++)\n for (int j = y; j < y + 3; j++)\n if (board[i][j] == n)\n return false;\n\n // ok\n return true;\n }\n\npublic:\n void\n solveSudoku(vector<vector<char>> &board)\n {\n backtrace(board);\n }\n};\n\n/**\n * 测试，可忽略\n */\nint main()\n{\n vector<vector<char>> board = {\n {'5', '3', '.', '.', '7', '.', '.', '.', '.'},\n {'6', '.', '.', '1', '9', '5', '.', '.', '.'},\n {'.', '9', '8', '.', '.', '.', '.', '6', '.'},\n {'8', '.', '.', '.', '6', '.', '.', '.', '3'},\n {'4', '.', '.', '8', '.', '3', '.', '.', '1'},\n {'7', '.', '.', '.', '2', '.', '.', '.', '6'},\n {'.', '6', '.', '.', '.', '.', '2', '8', '.'},\n {'.', '.', '.', '4', '1', '9', '.', '.', '5'},\n {'.', '.', '.', '.', '8', '.', '.', '7', '9'}};\n\n cout << "Original:" << endl;\n for (const auto &row : board)\n for (char ch : row)\n cout << ch << " ";\n cout << endl;\n\n Solution solution;\n solution.solveSudoku(board);\n\n cout << "Solved:" << endl;\n for (const auto &row : board)\n for (char ch : row)\n cout << ch << " ";\n cout << endl;\n}\n这里只写一下窄字符文件读写，其余参见：https://zh.cppreference.com/w/c/io
\n#include <stdio.h>\n#include <stdlib.h>\n#include <string.h>\n#include <errno.h>\n\nvoid my_print_ftell(FILE *stream);\n\nint main()\n{\n FILE *fp;\n // "r"：只读，文件必须已存在\n // "w"：只写，如果文件不存在则创建，如果文件已存在则把文件长度截断（Truncate）为 0 字节再重新写，也就是替换掉原来的文件内容\n // "a"：只能在文件末尾追加数据，如果文件不存在则创建\n // "r+"：允许读和写，文件必须已存在\n // "w+"：允许读和写，如果文件不存在则创建，如果文件已存在则把文件长度截断为 0 字节再重新写\n // "a+"：允许读和追加数据，如果文件不存在则创建\n if ((fp = fopen("./not_exist.txt", "r")) == NULL)\n {\n perror("Open './not_exist.txt'");\n fprintf(stderr, "%s\\n", strerror(errno)); // No such file or directory\n }\n\n fp = fopen("./todo.txt", "w+");\n fputs("this is line one\\n", fp);\n\n // SEEK_SET：从文件开头移动 offset 个字节\n // SEEK_CUR：从当前位置移动 offset 个字节\n // SEEK_END：从文件末尾移动 offset 个字节\n if (fseek(fp, 2, SEEK_SET) != 0)\n perror("fseek()");\n\n fputc('a', fp); // 2\n fputc('t', fp); // 3\n\n my_print_ftell(fp);\n rewind(fp);\n\n int size = 100;\n char *str = malloc(100 * sizeof(char));\n fgets(str, size, fp); // 扫描直至首个 '\\n' 字符，str 会包含换行符\n fprintf(stdout, "%s", str);\n\n my_print_ftell(fp);\n rewind(fp);\n\n char *buf = malloc(100 * sizeof(char));\n fread(buf, sizeof(char), size, fp); // fread/fwrite 读写字符串应当是跨平台的，但读写其它二进制结构时则需要考虑是否跨平台了\n fprintf(stdout, "%s", buf);\n\n my_print_ftell(fp);\n fclose(fp);\n}\n\nvoid my_print_ftell(FILE *stream)\n{\n long ftold;\n if ((ftold = ftell(stream)) == -1)\n {\n perror("ftell()");\n }\n else\n {\n printf("ftold=%ld\\n", ftold); // 4\n }\n}\nC 标准库的 I/O 缓冲区有三种类型：全缓冲、行缓冲和无缓冲。当用户程序调用库函数做写操作时，不同类型的缓冲区具有不同的特性。
\n调用 int fflush(FILE *stream); 可强制刷新 flush 缓冲，确保数据写回内核
成功返回 0，失败返回 EOF。传入空指针 fflush(NULL) 可对所有打开文件的 I/O 缓冲区做 Flush 操作
系统调用是无（用户态）缓冲 I/O （C 标准库在用户态自动维护缓冲区，系统调用时内核可自己维护缓冲）
标准库 I/O 操作的对象是 FILE* 结构体指针，而 linux 系统调用则使用文件描述符（int）
stdin stdout stderr 的文件描述符分别为：
\n#define STDIN_FILENO 0\n#define STDOUT_FILENO 1\n#define STDERR_FILENO 2\n参考：open(2)
\n#include <sys/types.h>\n#include <sys/stat.h>\n#include <fcntl.h>\n#include <unistd.h>\n#include <stdlib.h>\n#include <stdio.h>\n\nint make_fd_readonly(int fd);\n\nint main()\n{\n // O_RDONLY 只读打开\n // O_WRONLY 只写打开\n // O_RDWR 可读可写打开\n int fd = open("./todo.txt", O_RDWR | O_CREAT | O_TRUNC, S_IRWXU);\n\n ssize_t write_count = write(fd, "hello", sizeof("hello") - 1); // 减一防止写入 '\\0'\n\n off_t currpos = lseek(fd, 1 - (long)(sizeof("hello")), SEEK_CUR); // 负数，向前移动 5 字节\n\n int len = 100;\n size_t size = sizeof(char) * len;\n char *buf = malloc(size);\n ssize_t ssize = read(fd, buf, size);\n\n if (ssize == -1)\n {\n perror("open()");\n exit(EXIT_FAILURE);\n }\n\n printf("read %ld bytes = %s\\n", ssize, buf);\n\n int flags = fcntl(STDIN_FILENO, F_GETFL);\n printf("stdin's flags = %d mode=%d\\n", flags, flags & O_ACCMODE);\n\n if (make_fd_readonly(fd) == -1)\n exit(1);\n write(fd, "x", 1);\n perror("O_RDONLY"); // Success, 还是可写，不影响实际的文件权限\n}\n\nint make_fd_readonly(int fd)\n{\n int flags = fcntl(fd, F_GETFL);\n if (flags == -1)\n {\n // 处理错误\n return -1;\n }\n\n flags |= O_RDONLY; // 设置只读标志\n\n if (fcntl(fd, F_SETFL, flags) == -1)\n {\n // 处理错误\n return -1;\n }\n\n return 0;\n}\nioctl() 向设备发控制和配置命令
mmap() 将文件映射到内存
\n\n以下摘录自 LinuxC 一站式编程
\n
stat(2) 函数读取文件的 inode，然后把 inode 中的各种文件属性填入一个 struct stat 结构体传出给调用者（跟随符号链接）。
lstat(2) 同 stat(2)，但对于符号链接，返回其本身的 inode。
fstat(2) 函数传入一个已打开的文件描述符，传出 inode 信息。
access(2) 函数检查执行当前进程的用户是否有权限访问某个文件，传入文件路径和要执行的访问操作（读/写/执行），
access 函数取出文件 inode 中的 st_mode 字段，比较一下访问权限，然后返回 0 表示允许访问，返回 -1 表示错误或不允许访问。
chmod(2) 和 fchmod(2) 函数改变文件的访问权限，也就是修改 inode 中 的 st_mode 字段。
这两个函数的区别类似于 stat/fstat。
chown(2)/fchown(2)/lchown(2) 改变文件的所有者和组，也就是修改 inode 中的 User 和 Group 字段，
只有 root 用户才能正确调用这几个函数，这几个函数之间的区别类似于 stat/fstat/lstat。
utime(2) 函数改变文件的访问时间和修改时间，也就是修改 inode 中的 atime 和 mtime 字段。
truncate(2) 和 ftruncate(2) 函数把文件截断到某个长度，如果新的长度比原来的长度短，则后面的数据被截掉了，
如果新的长度比原来的长度长，则后面多出来的部分用 0 填充，这需要修改 inode 中的 Blocks 索引项以及块位图中相应的 bit。
这两个函数的区别类似于 stat/fstat。
link(2) 函数创建硬链接，其原理是在目录的数据块中添加一条新记录，其中的 inode 号字段和原文件相同。symlink(2) 函数创建一个符号链接，这需要创建一个新的 inode，其中 st_mode 字段的文件类型是符号链接，
原文件的路径保存在 inode 中或者分配一个数据块来保存。
unlink(2) 函数删除一个链接。如果是符号链接则释放这个符号链接的 inode 和数据块，清除 inode 位图和块位图中相应的位。
如果是硬链接则从目录的数据块中清除一条文件名记录，如果当前文件的硬链接数已经是 1 了还要删除它，
就同时释放它的 inode 和数据块，清除 inode 位图和块位图中相应的位，这样就真的删除文件了。
rename(2) 函数改变文件名，需要修改目录数据块中的文件名记录，如果原文件名和新文件名不在一个目录下，
则需要从原目录数据块中清除一条记录然后添加到新目录的数据块中。
注：在不同的分区之间移动文件就必须复制和删除 inode 和数据块
readlink(2) 函数读取一个符号链接所指向的目标路径，其原理是从符号链接的 inode 或数据块中读出保存的数据，这就是目标路径。
mkdir(2) 函数创建新的目录，要做的操作是在它的父目录数据块中添加一条记录，然后分配新的 inode 和 数据块，
新 inode 的 st_mode 字段的文件类型是目录，在新数据块中填两个记录，分别是 . 和 ..，
由于 .. 表示父目录，因此父目录的硬链接数要加 1。
rmdir(2) 函数删除一个目录，这个目录必须是空的（只包含 . 和 ..）才能删除，要做的操作是
释放它的 inode 和数据块，清除 inode 位图和块位图中相应的位，清除父目录数据块中的记录，父目录的硬链接数要减 1。
// 遍历目录演示\n#include <sys/stat.h>\n#include <sys/types.h>\n#include <unistd.h>\n#include <dirent.h>\n#include <stdio.h>\n#include <errno.h>\n\n#define MAX_PATH 1024\n\nint main()\n{\n if (mkdir("./todo", 0777) == 0)\n {\n printf("成功创建目录：./todo\\n");\n }\n else\n {\n const char *dirPath = "./todo";\n switch (errno)\n {\n case EACCES:\n printf("权限不足，无法创建目录：%s\\n", dirPath);\n break;\n case EEXIST:\n printf("目录已存在：%s\\n", dirPath);\n break;\n case ENAMETOOLONG:\n printf("路径名太长：%s\\n", dirPath);\n break;\n case ENOENT:\n printf("路径中的一个目录不存在：%s\\n", dirPath);\n break;\n case ENOTDIR:\n printf("路径中的一个组件不是目录：%s\\n", dirPath);\n break;\n default:\n printf("无法创建目录：%s，错误码：%d\\n", dirPath, errno);\n break;\n }\n }\n\n // 创建一个文件，仅供测试\n fputs("hello, world!", fopen("./todo/test.txt", "w+"));\n\n // 打开目录\n DIR *dir = opendir("./todo");\n // 遍历目录\n struct dirent *entry;\n while ((entry = readdir(dir)) != NULL)\n {\n // 获取文件路径\n char file_path[MAX_PATH];\n snprintf(file_path, MAX_PATH, "./todo/%s", entry->d_name);\n // 获取文件/目录信息\n struct stat file_info;\n stat(file_path, &file_info);\n // 打印\n printf("%-10ld ", file_info.st_size);\n printf((S_ISDIR(file_info.st_mode)) ? "d" : "-");\n printf((file_info.st_mode & S_IRUSR) ? "r" : "-");\n printf((file_info.st_mode & S_IWUSR) ? "w" : "-");\n printf((file_info.st_mode & S_IXUSR) ? "x" : "-");\n printf((file_info.st_mode & S_IRGRP) ? "r" : "-");\n printf((file_info.st_mode & S_IWGRP) ? "w" : "-");\n printf((file_info.st_mode & S_IXGRP) ? "x" : "-");\n printf((file_info.st_mode & S_IROTH) ? "r" : "-");\n printf((file_info.st_mode & S_IWOTH) ? "w" : "-");\n printf((file_info.st_mode & S_IXOTH) ? "x" : "-");\n printf(" %-25s\\n", entry->d_name);\n fflush(stdout);\n }\n closedir(dir);\n}\n复制文件描述符：不新建 file 结构体，而是其引用计数增加
显然，close() 系统调用使引用计数减一，并当计数归零时真正关闭文件
/**\n * 创建文件描述符 oldfd 的副本，返回值是该进程未使用的最小文件描述符\n */\nint dup(int oldfd);\n\n/**\n * 与 dup 相同，但返回的是 newfd 指定的文件描述符，若该文件描述符已打开，则在重用之前静默关闭\n */\nint dup2(int oldfd, int newfd);\n\n/**\n * 与 dup2 相同，但可使用标志位指定 O_CLOEXEC 来强制为新文件描述符设置关闭执行标志\n */\nint dup3(int oldfd, int newfd, int flags);\n我们编写的 React，称之为 Didact
\n/** @jsx Didact.createElement */\n/** @jsxFrag Didact.Fragment */\n\nconst element1 = <h1 title="foo">Hello</h1>;\n// |\n// v\nconst element2 = Didact.createElement("h1", { title: "foo" }, "Hello");\n// |\n// v\nconst element3: Didact.DidactElement = {\n type: "h1",\n props: {\n title: "foo",\n children: ["Hello"],\n },\n};\nnamespace Didact {\n export type DidactNode = DidactElement | Array<DidactNode> | string | number | boolean | null | undefined;\n // 简化版类型，@types/react 中写的是 Iterable<ReactNode> 而不是数组\n\n export interface DidactElement<P = any, T extends string = string> {\n type: T; // react 内部会使用 Symbol 作为 type\n props: P & { children?: Array<DidactElement | DidactElement[]> }; // 注意 children 的类型\n // 没有实现 key 属性 key: Key | null\n }\n\n // 将 Didact 对象转换为 Didact 元素\n export function createElement(\n type: string,\n props?: Record<string, any> | null,\n ...children: DidactNode[]\n ): DidactElement {\n // 注意返回值\n function nodeToElement(node: DidactNode): DidactElement | DidactElement[] {\n if (node === null) return createNullElement(); // falsy 值，不渲染\n if (Array.isArray(node)) return node.map(nodeToElement) as DidactElement[]; // 处理数组\n if (typeof node === "object") return node;\n if (typeof node === "string") return createTextElement(node);\n if (typeof node === "number") return createTextElement(String(node));\n if (Boolean(node) === false) return createNullElement(); // falsy 值，不渲染\n return createTextElement(String(node)); // 强转为字符串\n }\n return {\n type,\n props: {\n ...props,\n children: children.map(nodeToElement),\n },\n };\n }\n\n // 辅助函数，将字符串转换为 Didact 元素\n function createTextElement(text: string): DidactElement {\n return {\n type: "TEXT_ELEMENT",\n props: {\n /**\n * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeValue)\n * 使用 nodeValue 属性方便在 render 函数中操作\n */\n nodeValue: text,\n children: [],\n },\n };\n }\n\n // 辅助函数，将 falsy 值转换为 Didact 元素\n function createNullElement(): DidactElement {\n return {\n type: "NULL_ELEMENT",\n props: {\n children: [],\n },\n };\n }\n}\nnamespace Didact {\n export function render(element: DidactElement, container: Element) {\n // 跳过空元素\n if (element.type === "NULL_ELEMENT") return;\n // 生成 dom 节点\n const dom = element.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(element.type);\n // 设置 dom 属性\n Object.keys(element.props)\n .filter((key) => key !== "children") // children 是特殊的属性，排除之！\n .forEach((name) => Reflect.set(dom, name, element.props[name]));\n // 递归渲染\n element.props.children.forEach((child) => render(child, dom));\n // 渲染进容器\n container.appendChild(dom);\n }\n}\n题外话：实现一个基础的 SSR 也很简单，可以参考这个简单实现
\nexport function render(element: DidactElement) {\n if (element.type === "NULL_ELEMENT") return "";\n if (element.type === "TEXT_ELEMENT") return element.props.nodeValue;\n\n let left = `<${element.type}`;\n let right = `</${element.type}>`;\n\n Object.keys(element.props)\n .filter((key) => key !== "children")\n .forEach((name) => {\n left += ` ${name}="${element.props[name]}"`;\n });\n left += ">";\n\n element.props.children.forEach((child) => {\n left += render(child); // [!code highlight]\n });\n\n return left + right;\n}\n上面的递归实现简单易懂，但渲染函数是完全同步的
若 VDOM 很大，渲染需要阻塞主线程很长时间，导致页面卡顿
解决办法是将渲染函数的渲染过程拆分为多个更小的单元，
每个渲染都通过浏览器提供的 requestIdleCallback 函数来调度，实现每次渲染只占用主线程一小段时间
\n\nReact 内部并非使用 requestIdleCallback，而是实现了 scheduler 来调度
\n
参见：https://yieldray.fun/posts/js-prioritized-task-scheduling-api#%E9%A2%98%E5%A4%96%E8%AF%9Dreact-scheduler
React 内部通过时间切片，实现了优先级调度（用于处理渲染、事件、动画等）、中断和恢复、并发渲染（Lane 机制）、避免避免饥饿，充分占用主线程
简而言之，实际实现更为复杂，这个简单实现不会引入这些复杂性
// requestIdleCallback 定义\ndeclare function requestIdleCallback(\n /**\n * A reference to a function that should be called in the near future, when the event loop is idle. The callback function is passed an IdleDeadline object describing the amount of time available and whether or not the callback has been run because the timeout period expired.\n */\n callback: (deadline: {\n /**\n * A Boolean whose value is true if the callback is being executed because the timeout specified when the idle callback was installed has expired.\n */\n readonly didTimeout: boolean;\n /**\n * Returns a DOMHighResTimeStamp, which is a floating-point value providing an estimate of the number of milliseconds remaining in the current idle period. If the idle period is over, the value is 0. Your callback can call this repeatedly to see if there's enough time left to do more work before returning.\n */\n timeRemaining(): DOMHighResTimeStamp;\n }) => void,\n options?: {\n /**\n * If the number of milliseconds represented by this parameter has elapsed and the callback has not already been called, then a task to execute the callback is queued in the event loop (even if doing so risks causing a negative performance impact). timeout must be a positive value or it is ignored.\n */\n timeout?: number;\n },\n): number;\n我们要构建一棵 fiber 树，每个 fiber 可作为一个工作单元来渲染
\n每个 fiber 只引用其父 fiber，相邻的下一个 fiber，和第一个子 fiber
\n![\"FiberTree\"](\"https://s2.loli.net/2023/07/25/1wEpOJAFXvSgxMb.png\")
渲染时，我们递归地：
\nnamespace Didact {\n interface Fiber extends DidactElement {\n dom: Node | null;\n parent: Fiber | null; // 父 fiber\n child: Fiber | null; // 第一个子 fiber\n sibling: Fiber | null; // 兄弟 fiber （相邻的下一个）\n }\n\n // 将原本的 render 方法抽离出一个用于创建 dom 节点的方法，我们用此方法生成 fiber 的 dom 属性\n function createDom(fiber: Fiber): Node | null {\n if (fiber.type === "NULL_ELEMENT") return null;\n const dom = fiber.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);\n Object.keys(fiber.props)\n .filter((key) => key !== "children")\n .forEach((name) => Reflect.set(dom, name, element.props[name]));\n return dom;\n }\n\n let nextUnitOfWork: Fiber | null = null; // 一个工作单元其实是一个不完整的 fiber\n\n function workLoop({ timeRemaining }: { timeRemaining(): DOMHighResTimeStamp }) {\n let shouldYield = false;\n while (nextUnitOfWork && !shouldYield) {\n nextUnitOfWork = performUnitOfWork(nextUnitOfWork);\n shouldYield = timeRemaining() < 1;\n }\n //! 继续执行工作单元\n if (nextUnitOfWork) requestIdleCallback(workLoop);\n }\n\n export function render(element: DidactElement, container: Node) {\n // 第一个工作单元无需渲染，因为它是容器元素，而不是 Didact 元素\n // 只有 Didact 元素才需要渲染\n nextUnitOfWork = {\n dom: container,\n props: {\n children: [element],\n },\n } as Fiber; // 其余属性在渲染时生成，这里先强转一下\n //! 开始执行工作单元\n requestIdleCallback(workLoop);\n }\n\n function performUnitOfWork(fiber: Fiber): Fiber | null {\n if (!fiber.dom) {\n // 如果还没有渲染，说明是 Didact 元素，执行渲染\n // 只有容器元素不需要渲染，也就是说只有第一个工作单元不会发生渲染，之后的工作单元都会发生渲染\n fiber.dom = createDom(fiber);\n // 请注意每个工作单元仅调用一次 createDom 函数，也就是仅执行一次渲染\n }\n if (fiber.parent) {\n // 父 fiber 的 dom 必然是已渲染的\n if (fiber.dom) fiber.parent.dom!.appendChild(fiber.dom);\n // 将当前 fiber 渲染进父 fiber （跳过空节点）\n }\n // 下面生成当前 fiber 的 child 和 sibling 属性（部分构建 fiber 树）\n let prevSibling: Fiber | null = null; //\n const elements: DidactElement[] = fiber.props.children.flat(1); // 对于当前 fiber 的所有子元素（flat 一层）\n let index = 0;\n while (index < elements.length) {\n const element: DidactElement = elements[index];\n const newFiber: Fiber = {\n type: element.type,\n props: element.props,\n parent: fiber,\n dom: null,\n child: null,\n sibling: null,\n }; // 将当前 fiber 的每一个子元素转换为子 fiber\n if (index === 0) {\n fiber.child = newFiber; // 第一个子 fiber，通过当前 fiber 的 child 属性引用\n } else {\n prevSibling!.sibling = newFiber; // 否则，将前一个子 fiber 的兄弟（相邻的下一个） fiber 设置为当前子 fiber\n }\n prevSibling = newFiber; // 将前一个 fiber 的引用更新为当前子 fiber\n index++;\n }\n\n // 注：一看到 return 就表示发生了递归！\n\n // 下面依次渲染子 fiber （递归）\n if (fiber.child) {\n // 如果当前 fiber 有子 fiber，令下一个工作单元渲染之\n return fiber.child;\n }\n // 下面依次渲染兄弟 fiber （递归）\n let nextFiber = fiber;\n while (nextFiber) {\n if (nextFiber.sibling) {\n // 如果有兄弟 fiber，就依次渲染\n return nextFiber.sibling;\n } else {\n // 否则，回到父 fiber\n nextFiber = nextFiber.parent!;\n // 继续渲染父 fiber 的兄弟节点\n }\n }\n // 渲染完了（递归结束）\n return null;\n }\n}\n上面的渲染存在问题：每次 performUnitOfWork 函数渲染 fiber 就将其放入父节点（即： parent.appendChild(child)）
但浏览器可能在渲染某一个子节点时打断，导致浏览器渲染了一个未完成的 fiber 树，这就造成 UI 闪烁
解决办法是先将 appendChild 操作收集起来，最后一次性应用到真实的 DOM 上
\n1.移除 performUnitOfWork 函数中的 dom 添加操作
2.创建一个 wipRoot 引用，指向当前渲染中的根 fiber
3.待整棵 fiber 树渲染完毕后，再执行 dom 的添加操作（可以很方便的通过递归 wipRoot 树来实现）
namespace Didact {\n let nextUnitOfWork: Fiber | null = null; // 一个工作单元其实是一个不完整的 fiber\n\n function workLoop({ timeRemaining }: IdleDeadline) {\n let shouldYield = false;\n while (nextUnitOfWork && !shouldYield) {\n nextUnitOfWork = performUnitOfWork(nextUnitOfWork);\n shouldYield = timeRemaining() < 1;\n }\n if (!nextUnitOfWork && wipRoot) {\n // 没有需要渲染的工作，说明渲染完毕，可以添加进 dom 了\n commitRoot();\n } else {\n //! 否则，继续执行工作单元\n requestIdleCallback(workLoop);\n }\n }\n\n let wipRoot: Fiber | null = null; // 根 fiber，需等待其完全渲染完\n\n export function render(element: DidactElement, container: Node) {\n wipRoot = {\n dom: container,\n props: {\n children: [element],\n },\n } as Fiber;\n\n nextUnitOfWork = wipRoot;\n }\n\n function performUnitOfWork(fiber: Fiber): Fiber | null {\n if (!fiber.dom) {\n fiber.dom = createDom(fiber);\n }\n\n //if (fiber.parent) {\n // if (fiber.dom) fiber.parent.dom!.appendChild(fiber.dom);\n //}\n\n //\n // ... ...\n //\n }\n\n function commitRoot() {\n // 只有 wipRoot 赋值后才会调用 commitRoot() 函数\n commitWork(wipRoot!.child); // 递归函数\n wipRoot = null; // 添加完了，置空\n }\n\n function commitWork(fiber: Fiber | null) {\n if (!fiber) return;\n // 传入 commitWork() 函数的 fiber 不是根 fiber，故必存在 parent 引用\n const domParent = fiber.parent!.dom!;\n // 递归地将 fiber 的 dom 添加进父 dom 节点\n if (fiber.dom) domParent.appendChild(fiber.dom);\n commitWork(fiber.child);\n commitWork(fiber.sibling);\n }\n}\n上面只处理了创建元素，还需要处理更新和移除元素
\n1.为 Fiber 添加 alternate 属性，指向上一次渲染的对应 fiber，用于 diff 操作
2.添加 effectTag 属性，用于标识 commit 过程需要执行的操作类型（称为 reconcile）
namespace Didact {\n interface Fiber extends DidactElement {\n dom: Node | null;\n parent: Fiber | null;\n child: Fiber | null;\n sibling: Fiber | null;\n alternate: Fiber | null; // 用于 diff\n effectTag: "UPDATE" | "PLACEMENT" | "DELETION"; // 用于 commit\n }\n\n function createDom(fiber: Fiber): Node | null {\n if (fiber.type === "NULL_ELEMENT") return null;\n const dom = fiber.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);\n updateDom(dom, {}, fiber.props);\n return dom;\n }\n\n const isEvent = (key: string) => key.startsWith("on");\n const isProperty = (key: string) => key !== "children" && !isEvent(key);\n const isNew = (prev: Record<keyof any, any>, next: Record<keyof any, any>) => (key: keyof any) =>\n prev[key] !== next[key];\n const isGone = (prev: Record<keyof any, any>, next: Record<keyof any, any>) => (key: keyof any) => !(key in next);\n\n function updateDom(dom: Node, prevProps: Record<keyof any, any>, nextProps: Record<keyof any, any>) {\n Object.keys(prevProps)\n .filter(isEvent)\n // 选取旧的和改变的监听器\n .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))\n // 移除之\n .forEach((name) => {\n const eventType = name.toLowerCase().substring(2);\n dom.removeEventListener(eventType, prevProps[name]);\n });\n\n Object.keys(nextProps)\n .filter(isEvent)\n // 选取所有新的监听器\n .filter(isNew(prevProps, nextProps))\n // 添加之\n .forEach((name) => {\n const eventType = name.toLowerCase().substring(2);\n dom.addEventListener(eventType, nextProps[name]);\n });\n\n Object.keys(prevProps)\n // 选取所有旧的属性\n .filter(isProperty)\n // 若该属性不需要了\n .filter(isGone(prevProps, nextProps))\n // 移除之\n .forEach((name) => {\n Reflect.set(dom, name, "");\n });\n\n Object.keys(nextProps)\n .filter(isProperty)\n // 选取所有新的属性\n .filter(isNew(prevProps, nextProps))\n // 添加之\n .forEach((name) => {\n Reflect.set(dom, name, nextProps[name]);\n });\n }\n\n function commitRoot() {\n // 对 dom 的更改操作都移入 commit 中\n deletions!.forEach(commitWork);\n commitWork(wipRoot!.child);\n currentRoot = wipRoot;\n wipRoot = null;\n }\n\n function commitWork(fiber: Fiber | null) {\n if (!fiber) {\n // 递归终止条件\n return;\n }\n\n const domParent = fiber.parent!.dom!;\n if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {\n domParent.appendChild(fiber.dom);\n } else if (fiber.effectTag === "DELETION" && fiber.dom != null) {\n domParent.removeChild(fiber.dom);\n } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {\n updateDom(fiber.dom, fiber.alternate!.props, fiber.props);\n }\n\n commitWork(fiber.child);\n commitWork(fiber.sibling);\n }\n\n function render(element: DidactElement, container: Node) {\n wipRoot = {\n dom: container,\n props: {\n children: [element],\n },\n alternate: currentRoot,\n } as Fiber;\n deletions = [];\n nextUnitOfWork = wipRoot;\n requestIdleCallback(workLoop);\n }\n\n let nextUnitOfWork: Fiber | null = null;\n let currentRoot: Fiber | null = null;\n let wipRoot: Fiber | null = null;\n let deletions: Fiber[] | null = null;\n\n function workLoop(deadline: IdleDeadline) {\n let shouldYield = false;\n while (nextUnitOfWork && !shouldYield) {\n nextUnitOfWork = performUnitOfWork(nextUnitOfWork);\n shouldYield = deadline.timeRemaining() < 1;\n }\n if (!nextUnitOfWork && wipRoot) {\n // 渲染完整棵树\n commitRoot();\n } else {\n requestIdleCallback(workLoop);\n }\n }\n\n function performUnitOfWork(fiber: Fiber) {\n if (!fiber.dom) {\n fiber.dom = createDom(fiber);\n }\n\n const elements = fiber.props.children;\n reconcileChildren(fiber, elements); // 调整所有子 fiber\n\n if (fiber.child) {\n return fiber.child;\n }\n let nextFiber = fiber;\n while (nextFiber) {\n if (nextFiber.sibling) {\n return nextFiber.sibling;\n } else {\n nextFiber = nextFiber.parent!;\n }\n }\n return null;\n }\n\n function reconcileChildren(wipFiber: Fiber, elems: Array<DidactElement | DidactElement[]>) {\n // 重要：flat 一层\n const elements: DidactElement[] = elems.flat(1);\n // wipFiber 是 elements 的直接父节点\n let index = 0;\n // 与上一次渲染的相同位置做比较\n let oldFiber: Fiber | null = wipFiber.alternate?.child;\n // 当前子 fiber 的上一个兄弟 fiber\n let prevSibling: Fiber | null = null;\n\n while (index < elements.length || oldFiber != null) {\n const element = elements[index];\n\n let newFiber: Fiber | null = null;\n const sameType = oldFiber && element && element.type === oldFiber.type;\n\n // 通过 effectTag 属性标记，待到 commitWork 函数中执行相应操作\n if (sameType) {\n newFiber = {\n type: oldFiber!.type,\n props: element.props,\n dom: oldFiber!.dom, // 无需重新创建 dom\n parent: wipFiber,\n alternate: oldFiber,\n effectTag: "UPDATE",\n child: null,\n sibling: null,\n };\n }\n if (element && !sameType) {\n newFiber = {\n type: element.type,\n props: element.props,\n dom: null, // 需要重新创建 dom\n parent: wipFiber,\n alternate: null,\n effectTag: "PLACEMENT",\n child: null,\n sibling: null,\n };\n }\n if (oldFiber && !sameType) {\n oldFiber.effectTag = "DELETION";\n deletions!.push(oldFiber); // 添加到删除列表\n }\n\n if (oldFiber) {\n // 继续比较\n oldFiber = oldFiber.sibling;\n }\n\n if (index === 0) {\n wipFiber.child = newFiber;\n } else if (element) {\n // 注：if (element) 没必要\n prevSibling!.sibling = newFiber;\n }\n\n prevSibling = newFiber;\n index++;\n }\n }\n}\n函数组件的 type 属性指向一个返回 DidactElement 的函数，其 children 属性通过调用该函数得到
函数组件的 fiber 是没有 DOM 属性的，那么在移除函数组件的子节点时，就需要寻找到函数组件的上层 DOM 才能完成移除
function App(props: { name: string; children?: DidactNode }) {\n return (\n <article>\n <h1>Hello, {props.name}</h1>\n <div>{props.children}</div>\n </article>\n );\n}\nconst element = <App name="foo" />;\n// ^ ^\n// | |\n// type props\nnamespace Didact {\n type FC<P = any> = (props: P) => DidactElement;\n\n interface DidactElement<P = any, T extends string | FC<P> = string | FC<P>> {\n type: T;\n props: P;\n }\n\n interface Fiber<T extends string | FC = string | FC> extends DidactElement<any, T> {\n dom: Node | null;\n parent: Fiber | null;\n child: Fiber | null;\n sibling: Fiber | null;\n alternate: Fiber | null;\n effectTag: "UPDATE" | "PLACEMENT" | "DELETION";\n }\n\n type DidactFragment = Array<DidactNode>;\n\n // Fragment 函数的实现非常简单，它只是一个特殊的函数组件\n function Fragment(props: { children?: DidactNode[] }): DidactFragment {\n return props.children || [];\n }\n\n function createDom(fiber: Fiber<string>): Node | null {\n // ... ...\n }\n\n function updateDom(dom: Node, prevProps: Record<keyof any, any>, nextProps: Record<keyof any, any>) {\n // ... ...\n }\n\n function commitRoot() {\n deletions!.forEach(commitWork);\n commitWork(wipRoot!.child);\n currentRoot = wipRoot;\n wipRoot = null;\n }\n\n function commitWork(fiber: Fiber | null) {\n if (!fiber) {\n // 递归终止条件\n return;\n }\n // commitWork 传入的 fiber 不是根 fiber，必有 parent 属性\n let domParentFiber: Fiber = fiber.parent!;\n while (!domParentFiber.dom) {\n // 如果当前 fiber 没有 dom 属性，说明这个 fiber 是函数组件的 fiber\n domParentFiber = domParentFiber.parent!;\n // 由于上一级也可能是函数组件 fiber，一直向上寻找，直至非函数组件 fiber\n }\n const domParent = domParentFiber.dom;\n\n if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {\n domParent.appendChild(fiber.dom);\n } else if (fiber.effectTag === "DELETION" && fiber.dom != null) {\n commitDeletion(fiber, domParent); //? 处理移除\n } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {\n updateDom(fiber.dom, fiber.alternate!.props, fiber.props);\n }\n // 继续递归\n commitWork(fiber.child);\n commitWork(fiber.sibling);\n }\n\n function commitDeletion(fiber: Fiber, domParent: Node) {\n if (fiber.dom) {\n domParent.removeChild(fiber.dom);\n } else {\n // 注：这里函数组件必有子节点\n commitDeletion(fiber.child!, domParent);\n }\n }\n\n function render(element: DidactElement, container: Node) {\n // ... ...\n }\n\n function workLoop(deadline: IdleDeadline) {\n // ... ...\n }\n\n function performUnitOfWork(fiber: Fiber) {\n if (fiber.type instanceof Function) {\n // 函数组件，特殊处理\n updateFunctionComponent(fiber as Fiber<FC>);\n } else {\n // 非函数组件\n updateHostComponent(fiber as Fiber<string>);\n }\n\n if (fiber.child) {\n return fiber.child;\n }\n let nextFiber = fiber;\n while (nextFiber) {\n if (nextFiber.sibling) {\n return nextFiber.sibling;\n } else {\n nextFiber = nextFiber.parent!;\n }\n }\n return null;\n }\n\n function updateFunctionComponent(fiber: Fiber<FC>) {\n // 函数组件的 children 通过调用得到\n //@ts-ignore 处理 Fragment 函数\n const children = fiber.type === Fragment ? fiber.type(fiber.props) : [fiber.type(fiber.props)];\n reconcileChildren(fiber, children);\n }\n\n function updateHostComponent(fiber: Fiber<string>) {\n if (!fiber.dom) {\n fiber.dom = createDom(fiber);\n }\n reconcileChildren(fiber, fiber.props.children);\n }\n\n function reconcileChildren(wipFiber: Fiber, elems: Array<DidactElement | DidactElement[]>) {\n // ... ...\n }\n}\nnamespace Didact {\n interface Fiber<T extends string | FC = string | FC> extends DidactElement<any, T> {\n dom: Node | null;\n parent: Fiber | null;\n child: Fiber | null;\n sibling: Fiber | null;\n alternate: Fiber | null;\n effectTag: "UPDATE" | "PLACEMENT" | "DELETION";\n // hookIndex 用于索引 hooks\n hooks?: Array<{\n state: any;\n queue: Array<(prevState: any) => any>;\n }>;\n }\n\n let wipFiber: Fiber | null = null;\n let hookIndex: number | null = null;\n\n function updateFunctionComponent(fiber: Fiber<FC>) {\n wipFiber = fiber;\n // 函数组件添加 hooks 属性\n wipFiber.hooks = [];\n // 全局索引置 0\n hookIndex = 0;\n // 函数组件内部可以调用 useState()\n //@ts-ignore 处理 Fragment 函数\n const children = fiber.type === Fragment ? fiber.type(fiber.props) : [fiber.type(fiber.props)];\n reconcileChildren(fiber, children);\n }\n\n type Action<T> = (prevState: T) => T;\n\n // useState 函数，添加 hook 到 fiber 的 hooks 数组\n // setState 函数，添加 变更函数 到 hook 的 queue 数组\n export function useState<T = any>(initialState: T): [state: T, setState: Action<T>] {\n // 注：useState 被 updateFunctionComponent 间接调用\n // wipFiber 必是一个函数组件的 fiber\n\n // oldHook 是上一次渲染的对应 hook （第一次渲染时没有）\n const oldHook = wipFiber!.alternate?.hooks?.[hookIndex!];\n\n const hook = {\n state: oldHook ? oldHook.state : initialState,\n queue: [] as Array<Action<T>>,\n };\n\n // 依次执行上一次 fiber 的 hooks，得到上一次的最终 state\n const actions = oldHook ? oldHook.queue : [];\n actions.forEach((action: Action<T>) => {\n hook.state = action(hook.state);\n });\n\n // 调用 setState 会导致调用 performUnitOfWork 然后 updateFunctionComponent\n const setState = (action: Action<T>) => {\n hook.queue.push(action); // 函数组件可多次调用 setState\n wipRoot = {\n dom: currentRoot!.dom,\n props: currentRoot!.props,\n alternate: currentRoot!,\n } as Fiber;\n // 调用 setState 导致重渲染，更新这些全局变量（调整工作单元，重新从根 fiber 渲染）\n nextUnitOfWork = wipRoot;\n deletions = [];\n //! 执行工作单元\n requestIdleCallback(workLoop);\n };\n\n wipFiber!.hooks!.push(hook);\n hookIndex!++; // 渲染函数组件时，重置索引\n return [hook.state, setState];\n }\n\n function updateHostComponent(fiber: Fiber<string>) {\n if (!fiber.dom) {\n fiber.dom = createDom(fiber);\n }\n reconcileChildren(fiber, fiber.props.children);\n }\n\n function reconcileChildren(wipFiber: Fiber, elems: Array<DidactElement | DidactElement[]>) {\n // ... ...\n }\n}\n// useEffect 函数，添加 effect hook 到 fiber 的 hooks 数组\nexport function useEffect(create: (() => void) | void, deps?: any[]) {\n // 注：useEffect 被 updateFunctionComponent 间接调用\n // wipFiber 必是一个函数组件的 fiber\n\n // oldHook 是上一次渲染的对应 hook （第一次渲染时没有）\n const oldHook = wipFiber!.alternate?.hooks?.[hookIndex!];\n\n const hasDepsChanged = oldHook ? !deps || !deps.every((dep, i) => Object.is(dep, oldHook.deps[i])) : true;\n\n const hook = {\n tag: "useEffect",\n create: hasDepsChanged ? create : oldHook?.create,\n destroy: hasDepsChanged ? undefined : oldHook?.destroy,\n deps: hasDepsChanged ? deps : oldHook?.deps,\n };\n\n wipFiber!.hooks!.push(hook);\n hookIndex!++; // 渲染函数组件时，重置索引\n}\n\nfunction commitWork(fiber: Fiber | null) {\n // 执行函数组件的 effect\n fiber?.hooks\n ?.filter((hook) => hook?.tag === "useEffect")\n .forEach((hook) => {\n // 执行 cleanup 函数\n hook.destroy?.();\n // 执行 effect 函数\n hook.destroy = hook.create();\n });\n}\n\nfunction commitDeletion(fiber: Fiber, domParent: Node) {\n if (fiber.dom) {\n domParent.removeChild(fiber.dom);\n } else {\n // 注：这里函数组件必有子节点\n commitDeletion(fiber.child!, domParent);\n }\n // 当组件被卸载时，执行 cleanup 函数\n fiber.hooks?.filter((hook) => hook?.tag === "useEffect").forEach((hook) => hook.destroy()); // [!code ++]\n}\n这里把上一步 commitWork 的更改恢复
\nexport function useLayoutEffect(create: () => void | (() => void), deps?: any[]) {\n const oldHook = wipFiber!.alternate?.hooks?.[hookIndex!];\n\n const hasDepsChanged = oldHook ? !deps || !deps.every((dep, i) => Object.is(dep, oldHook.deps[i])) : true;\n\n const hook = {\n tag: "useLayoutEffect", // [!code highlight]\n create: hasDepsChanged ? create : oldHook?.create,\n destroy: hasDepsChanged ? undefined : oldHook?.destroy,\n deps: hasDepsChanged ? deps : oldHook?.deps,\n };\n\n wipFiber!.hooks!.push(hook);\n hookIndex!++;\n}\n\nfunction commitRoot() {\n // 对 dom 的更改操作都移入 commit 中\n deletions!.forEach(commitDeletion);\n commitWork(wipRoot!.child);\n // 在所有 DOM 更改完成后，同步执行 layout effects\n commitLayoutEffects(wipRoot);\n currentRoot = wipRoot;\n wipRoot = null;\n // 在所有 DOM 更改和 layout effects 执行完成后，异步执行 effects\n requestAnimationFrame(() => commitMutationEffects(currentRoot));\n}\n\nfunction commitDeletion(fiber: Fiber, domParent: Node) {\n if (fiber.dom) {\n domParent.removeChild(fiber.dom);\n } else {\n // 注：这里函数组件必有子节点\n commitDeletion(fiber.child!, domParent);\n }\n // 当组件被卸载时，执行 cleanup 函数\n fiber.hooks\n ?.filter((hook) => hook?.tag === "useLayoutEffect" || hook?.tag === "useEffect") // [!code highlight]\n .forEach((hook) => hook.destroy?.());\n}\n\n// 同步执行 layout effects\nfunction commitLayoutEffects(fiber: Fiber | null) {\n if (!fiber) return;\n\n // 执行函数组件的 layout effect\n fiber.hooks\n ?.filter((hook) => hook?.tag === "useLayoutEffect")\n .forEach((hook) => {\n // 执行 cleanup 函数\n hook.destroy?.();\n // 执行 effect 函数\n hook.destroy = hook.create();\n });\n\n // 递归处理子节点和兄弟节点\n commitLayoutEffects(fiber.child);\n commitLayoutEffects(fiber.sibling);\n}\n\n// 异步执行 effects\nfunction commitMutationEffects(fiber: Fiber | null) {\n if (!fiber) return;\n\n // 执行函数组件的 effect\n fiber.hooks\n ?.filter((hook) => hook?.tag === "useEffect")\n .forEach((hook) => {\n // 执行 cleanup 函数\n hook.destroy?.();\n // 执行 effect 函数\n hook.destroy = hook.create();\n });\n\n // 递归处理子节点和兄弟节点\n commitMutationEffects(fiber.child);\n commitMutationEffects(fiber.sibling);\n}\n\n\n本篇的主题为 File System Access API，而不是 File and Directory Entries API
\n
选取器默认有一个允许所有文件类型的选项，如图所示![\"AcceptAll\"](\"https://s2.loli.net/2023/07/24/fVoexzDnkhcjrEp.png\")
如果已经设置了 types 选项，我们可能需要禁止这种行为，可以将 excludeAcceptAllOption 选项设置为 true
const btn_showOpenFilePicker = document.createElement("button");\nbtn_showOpenFilePicker.textContent = "showOpenFilePicker";\ndocument.body.append(btn_showOpenFilePicker);\nbtn_showOpenFilePicker.addEventListener("click", async () => {\n const fileHandleArray = await window.showOpenFilePicker({\n types: [\n {\n description: "请选择图片",\n accept: {\n "image/*": [".png", ".gif", ".jpeg", ".jpg", ".webp"],\n },\n },\n ],\n multiple: true,\n excludeAcceptAllOption: true,\n });\n console.log(fileHandleArray);\n});\n\ndeclare interface Window {\n // TODO: 目前 typescript 5.4dev 还没有提供这些 Window 接口方法的定义\n // 布尔值的默认值为 false\n\n /**\n * MDN 上写的是 AbortError 异常，但实际上是 DOMException\n * 用户取消选择，触发 DOMException: The user aborted a request.\n * 不是用户发起，触发 DOMException: Failed to execute 'showOpenFilePicker' on 'Window': Must be handling a user gesture to show a file picker.\n */\n showOpenFilePicker: (options?: {\n /**\n * 是否选取多个文件\n */\n multiple?: boolean;\n /**\n * 若要开启此选项，需配合 types 选项食用，表示禁用选取框的“所有文件选项”\n */\n excludeAcceptAllOption?: boolean;\n types?: Array<{\n /**\n * 允许的文件类型类别的可选说明\n */\n description?: string;\n /**\n * 键为 MIME 类型，系统会根据 MIME 类型默认生成一些扩展名，值为扩展名（带点号）数组，这个数组只是作为系统生成的扩展名基础上的附加扩展名\n */\n accept?: Record<string, string[]>;\n }>;\n }) => Promise<FileSystemFileHandle[]>; // 返回值总是数组\n}\nconst btn_showSaveFilePicker = document.createElement("button");\nbtn_showSaveFilePicker.textContent = "showSaveFilePicker";\ndocument.body.append(btn_showSaveFilePicker);\nbtn_showSaveFilePicker.addEventListener("click", async () => {\n const fileHandle = await window.showSaveFilePicker({\n suggestedName: "推荐文件名.txt",\n types: [\n {\n description: "文本文件",\n accept: { "text/plain": [".txt"] },\n },\n ],\n });\n console.log(fileHandle);\n});\n\ndeclare interface Window {\n /**\n * 此方法的选项和 showOpenFilePicker 方法差不多，只返回单个文件接口\n */\n showSaveFilePicker: (options?: {\n excludeAcceptAllOption?: boolean;\n suggestedName?: string;\n types?: Array<{\n description?: string;\n accept?: Record<string, string[]>;\n }>;\n }) => Promise<FileSystemFileHandle>;\n}\nconst btn_showDirectoryPicker = document.createElement("button");\nbtn_showDirectoryPicker.textContent = "showDirectoryPicker";\ndocument.body.append(btn_showDirectoryPicker);\nbtn_showDirectoryPicker.addEventListener("click", async () => {\n const dirHandle = await window.showDirectoryPicker({\n mode: "readwrite", // 会弹窗窗口提示用户我们的页面能够访问查看或编辑用户的目录\n });\n console.log(dirHandle);\n});\n\ndeclare interface Window {\n /**\n * 目录选择器就比较简单了，只返回一个目录接口\n */\n showDirectoryPicker: (options?: {\n /**\n * By specifying an ID, the browser can remember different directories for different IDs. If the same ID is used for another picker, the picker opens in the same directory.\n * ID 是任意类型，但会被强制转换为字符串，不允许字符会报错\n */\n id?: any;\n /**\n * A string that defaults to "read" for read-only access or "readwrite" for read and write access to the directory.\n * 用户选择完目录后还会弹出提示窗\n */\n mode?: "read" | "readwrite";\n /**\n * A FileSystemHandle or a well known directory ("desktop", "documents", "downloads", "music", "pictures", or "videos") to open the dialog in.\n */\n startIn?: "desktop" | "documents" | "downloads" | "music" | "pictures" | "videos";\n }) => Promise<FileSystemDirectoryHandle>;\n}\n\n\n\n
origin private file system: https://developer.mozilla.org/docs/Web/API/File_System_Access_API#origin_private_file_system
window.navigator.storage.getDirectory(); // => Promise<FileSystemDirectoryHandle>\n参见 DragEvent.dataTransfer 的有关 API
\nFileSystemHandle <- FileSystemFileHandle
FileSystemHandle <- FileSystemDirectoryHandle
选取器返回的接口是更具体的接口
\ninterface FileSystemHandle {\n /**\n * 'file' 表示 FileSystemFileHandle\n * 'directory' 表示 FileSystemDirectoryHandle\n */\n readonly kind: FileSystemHandleKind;\n readonly name: string;\n /**\n * 判断当前 handle 和另一个 handle 是不是同一个\n */\n isSameEntry(other: FileSystemHandle): Promise<boolean>;\n /**\n * 查询权限\n */\n queryPermission(fileSystemHandlePermissionDescriptor?: { mode: "read" | "readwrite" }): Promise<PermissionState>;\n /**\n * 请求权限\n */\n requestPermission(fileSystemHandlePermissionDescriptor?: { mode: "read" | "readwrite" }): Promise<PermissionState>;\n remove(options?: {\n /**\n * 递归删除，只对目录有效\n */\n recursive?: boolean;\n }): Promise<void>;\n}\ninterface FileSystemFileHandle extends FileSystemHandle {\n readonly kind: "file";\n /**\n * 最主要的方法还是 getFile() 方法\n */\n getFile(): Promise<File>;\n /**\n * 创建一个可写文件流。实际情况是先创建临时文件，写入临时文件，直到句柄结束后再将实际文件替换为临时文件\n */\n createWritable(options?: {\n /**\n * A Boolean. Default false. When set to true if the file exists, the existing file is first copied to the temporary file. Otherwise the temporary file starts out empty.\n */\n keepExistingData?: boolean;\n }): Promise<FileSystemWritableFileStream>;\n /**\n * 只能在 origin private file system 上调用！这里不拓展\n */\n createSyncAccessHandle(): Promise<FileSystemSyncAccessHandle>;\n}\ninterface FileSystemDirectoryHandle extends FileSystemHandle {\n readonly kind: "directory";\n /**\n * 遍历目录\n */\n entries(): Array<[key: string, value: FileSystemHandle]>;\n keys(): Array<string>;\n values(): Array<FileSystemHandle>;\n // 指定文件名获取文件\n getFileHandle(\n name: string,\n options?: {\n create?: boolean;\n },\n ): Promise<FileSystemFileHandle>;\n // 指定目录名获取目录\n getDirectoryHandle(\n name: string,\n options?: {\n create?: boolean;\n },\n ): Promise<FileSystemDirectoryHandle>;\n // 移除\n removeEntry(\n name: string,\n options?: {\n recursive?: boolean;\n },\n ): Promise<void>;\n /**\n * 传入一个当前 FileSystemDirectoryHandle 的后代 FileSystemHandle （否则直接返回 null）\n * 返回一个字符串数组，第一个是当前目录名，依次是子目录名，最后是 要解析的文件或目录 的名称\n */\n resolve(possibleDescendant: FileSystemHandle): Promise<string[] | null>;\n}\n以往保存文件的情景下还是使用 FileSaver.js 即可
反正 polyfill 方案是无法选取保存位置的
兼容不支持的浏览器，可以使用谷歌的 browser-fs-access
在由 vite 构建的 js 模块中，模块可由 vite 提供的 import.meta.env 伪对象（编译时替换）获取环境变量
默认情况下，vite 使用 dotenv 读取 .env 文件修改环境变量，并且只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码
\n\n注：此处不讨论 如何修改模式，以加载不同的环境变量 （参见文档即可）
\n
要在配置文件中使用环境变量，则可以参见此处vite 默认提供的环境变量有：
\nMODEBASE_URLPRODDEVSSR
此外，vite 还支持在 html 文件中替换环境变量，例如：
\n<h1>Vite is running in %MODE%</h1>\n<p>Using data from %VITE_API_URL%</p>\n由于 vite 使用 esbuild，常量替换功能是通过 esbuild 实现
\n\n\n注： rollup 通过 @rollup/plugin-replace 实现
\n
webpack 则是通过 DefinePlugin 实现
三者的行为差不多
这些常量：在开发环境下会被定义在全局，在构建时被静态替换
它是不经过任何语法分析，直接替换文本实现的
这也就是说，我们实际上应该配置一个 Record<string, string>，出现给定键就原样替换为给定字符串
不过实际配置类型是 Record<string, any>，可以看作是值经过了 String() 处理
import { defineConfig, loadEnv } from "vite";\n\nexport default defineConfig(({ command, mode }) => {\n // 根据当前工作目录中的 `mode` 加载 .env 文件\n // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。\n const env = loadEnv(mode, process.cwd(), "");\n return {\n // vite 配置\n define: {\n __APP_ENV__: env.APP_ENV,\n __TEST__: JSON.stringify("test"),\n },\n };\n});\n注意：开发环境下会被定义在 window，在构建时仅文本替换（不在 window 上！）
插件是 node.js 环境，因此也可以通过插件创建虚拟模块来向其它模块暴露代码
\nimport { defineConfig } from "vite";\n\nexport default defineConfig({\n plugins: [myPlugin()],\n});\n\nfunction myPlugin() {\n const virtualModuleId = "virtual:my-module";\n const resolvedVirtualModuleId = "\\0" + virtualModuleId;\n\n return {\n name: "my-plugin", // 必须的，将会在 warning 和 error 中显示\n resolveId(id) {\n if (id === virtualModuleId) {\n return resolvedVirtualModuleId;\n }\n },\n load(id) {\n if (id === resolvedVirtualModuleId) {\n return `export const msg = "from virtual module"`;\n }\n },\n };\n}\n/* Keyword values */\nclip-path: none;\n\n/* <clip-source> values */\nclip-path: url(resources.svg#c1);\n\n/* <geometry-box> values */\nclip-path: margin-box;\nclip-path: border-box;\nclip-path: padding-box;\nclip-path: content-box;\nclip-path: fill-box;\nclip-path: stroke-box;\nclip-path: view-box;\n\n/* <basic-shape> values */\nclip-path: inset(100px 50px);\nclip-path: circle(50px at 0 100px);\nclip-path: ellipse(50px 60px at 0 10% 20%);\nclip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\nclip-path: path("M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z");\n\n/* Box and shape values combined */\nclip-path: padding-box circle(50px at 0 100px);\n\n/* Global values */\nclip-path: inherit;\nclip-path: initial;\nclip-path: revert;\nclip-path: revert-layer;\nclip-path: unset;\n<basic-shape>inset( <shape-arg>{1,4} [round <border-radius>]? )\ncircle( [<shape-radius>]? [at <position>]? )\nellipse( [<shape-radius>{2}]? [at <position>]? )\npolygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )\npath( [<fill-rule>,]? <string>)\n\n<shape-arg> = <length> | <percentage>\n<shape-radius> = <length> | <percentage> | closest-side | farthest-side\n<basic-shape> 是支持 transition 的，但需要为同一种形状
元素被 clip-path 裁剪的部分不再触发鼠标事件，而是触发被暴露元素的鼠标事件
\n","tags":["css"]},{"id":"web-svg","url":"https://yieldray.fun/posts/web-svg","title":"SVG基础","date_published":"2023-07-12T22:22:22.000Z","date_modified":"2023-07-12T22:22:22.000Z","content_text":"svg 文件的 Content-Type 为 image/svg+xml
svg 图像的坐标原点是左上角
<svg\n xmlns="http://www.w3.org/2000/svg"\n viewBox="0 0 100 100"\n width="200"\n height="200">\n</svg>\nsvg 是 svg 图像的容器元素。对于 svg 文件，命名空间属性 xmlns 是必须指定的，但在 html 中可省略。
\nwidth 和 height 属性默认值为 auto，此处指定宽高为 200*200。
viewBox 属性是空格或逗号分隔的四个数字：min-x, min-y, width and height
前两个指定实际展示区域的坐标原点（相对于原 svg 的坐标原点）
后两个指定在坐标原点的基础上截取的的宽高度
这个被截取的宽高度将放缩到原本 svg 的宽高度上展示
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" />\nx y 指定矩形左上角的坐标\nrx ry 圆角半径\nwidth height 宽高度\n\n<circle cx="25" cy="75" r="20"/>\ncx cy 圆心坐标\nr 半径\n\n<ellipse cx="75" cy="75" rx="20" ry="5"/>\ncx cy 圆心坐标\nrx ry 分别为x、y半径\n\n<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>\nx1 y1 起点坐标\nx2 y2 终点坐标\n\n<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>\npoints 点集数列，每两个数构成一个坐标。\n注意：分隔符可以是逗号或空格，分隔符可以随意混用！！！\n\n<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>\npoints 同上。但注意 polygon 的路径在最后一个点处自动回到第一个点\n\n<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>\nd 指定一系列指令。指令用一个字母表示操作，后接数字为参数。\n大写指令指定绝对坐标，小写指令指定相对坐标。\n指令可以如下：\n\nM x y 将画笔移动至指定坐标\nm dx dy 将画笔移动指定距离\n\nL x y 将画笔移动至指定坐标，并画线\nl dx dy 将画笔移动指定距离，并画线\n\nH x 将画笔移动至指定横坐标，并画线\nh dx 将画笔在x方向移动指定距离，并画线\n\nV y 将画笔移动至指定纵坐标，并画线\nv dy 将画笔在y方向移动指定距离，并画线\n\nZ 无参数。将画笔移动到路径的起点，并画线\n\nC x1 y1, x2 y2, x y 画三次贝塞尔曲线，参数分别为起点的控制点、终点的控制点和曲线终点\nc dx1 dy1, dx2 dy2, dx dy\n\nS x2 y2, x y 画三次贝塞尔曲线。若此指令跟在C或S指令后，则它的第一个控制点变为前一个命令曲线的第二个控制点的中心对称点；否则，当前点将作为第一个控制点\ns dx2 dy2, dx dy\n\nQ x1 y1, x y 画二次贝塞尔曲线，参数分别为控制点和终点坐标\nq dx1 dy1, dx dy\n\nT x y 画二次贝塞尔曲线。若此指令跟在Q或T指令后，则它的控制点变为前一个曲线控制点的中心对称点\nt dx dy\n\nA rx ry x-axis-rotation large-arc-flag sweep-flag x y\na rx ry x-axis-rotation large-arc-flag sweep-flag dx dy\nfill 属性设置对象内部的颜色stroke 属性设置绘制对象的线条的颜色fill-opacity 控制填充色的不透明度stroke-opacity 控制描边的不透明度opacity 控制透明度stroke-width 属性定义了描边的宽度stroke-linecap 控制边框终点的形状butt 用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点。square 的效果差不多，但是会稍微超出实际路径的范围，超出的大小由 stroke-width 控制。round 表示边框的终点是圆角，圆角的半径也是由 stroke-width 控制的。stroke-linejoin 控制两条描边线段之间用什么方式连接miter 是默认值，表示用方形画笔在连接处形成尖角round 表示用圆角连接，实现平滑效果bevel 在连接处会形成一个斜接。stroke-dasharray 虚线类型应用在描边上。参数是一组（必须）用逗号分隔的数字组成的数列fill-rule 定义如何给图形重叠的区域上色stroke-miterlimit 定义什么情况下绘制或不绘制边框连接的 miter 效果stroke-dashoffset 定义虚线开始的位置。如果通过 css 设置样式，将 background 改为 fill，将 border 改为 stroke
\n略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Gradients
\n略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Patterns
\ntext 是文本的容器元素。可以直接包含文本节点，也可以包含一些特殊的文本标签
text 支持一些 css 属性，例如 font-* text-* letter-* word-*
<svg width="150" height="150">\n <text x="0" y="16">Hello World!</text>\n</svg>\n其它略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Texts
\n首先介绍 <g> 标签，用于分组。在该元素上设置的属性将应用到所有子元素上。
<svg width="30" height="10">\n <g fill="red">\n <rect x="0" y="0" width="10" height="10" />\n <rect x="20" y="0" width="10" height="10" />\n </g>\n</svg>\nsvg 的图形元素支持 transform 属性，同 css 的 transform 属性
\n与 css 一致，故略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Basic_Transformations
\nhttps://github.com/type-challenges/type-challenges
\n相等性比较：https://github.com/microsoft/TypeScript/issues/27024#issuecomment-421529650
\nhttps://www.typescriptlang.org/docs/handbook/2/types-from-types.html
\ntype Chainable<T = {}> = {\n // 此处用泛型 T 保存欲输出的类型\n option: <K extends keyof any, V>( // 获取参数 key value 的类型\n key: Exclude<K, keyof T>, // key 不能为 T 中已存在的键（注意必须在形参key上限制类型，而不能在泛型参数上限制）\n value: V, // 首先移除已存在的键名 K，再将键 K 设置为类型 V\n ) => Chainable<Omit<T, K> & { [P in K]: V }>;\n get: () => T;\n};\n//prettier-ignore\ntype Recursive<T extends readonly any[]> =\n // 处理空数组情况\n T["length"] extends 0 ? []\n : // 处理元组情况\n T extends [infer A, ...infer B] ? [Awaited<A>, ...Recursive<B>]\n : // 处理数组情况\n T extends Array<infer U> ? Array<Awaited<U>>\n : // never\n never;\n\n//prettier-ignore\ndeclare function PromiseAll<T extends any[]>(values: readonly [...T]): Promise<\n Recursive<T>\n>;\n\n// 把数组当作对象处理，将每个下标的值进行映射\n//prettier-ignore\ndeclare function PromiseAll<T extends any[]>(values: readonly [...T]): Promise<{\n [K in keyof T]: Awaited<T[K]>\n}>\nhttps://github.com/type-challenges/type-challenges/issues/614
\n//prettier-ignore\ntype Permutation<T, U = T> = [T] extends [never]\n ? []\n : (T extends U\n ? [T, ...Permutation<Exclude<U, T>>]\n : never)\ntype Flatten<T extends unknown[]> = T extends [infer F, ...infer R]\n ? F extends unknown[]\n ? [...Flatten<F>, ...Flatten<R>]\n : [F, ...Flatten<R>]\n : [];\n\ntype Flatten<S extends any[], T extends any[] = []> = S extends [infer X, ...infer Y]\n ? X extends any[]\n ? Flatten<[...X, ...Y], T>\n : Flatten<[...Y], [...T, X]>\n : T;\n另外也可以参考 Array.prototype.flat (lib.es2019.array.d.ts) 的 FlatArray 类型
type IsNever<T> = [T] extends [never] ? true : false;\ntype IsNever<T> = Equal<never, T>;\nDistributive Conditional Types
\n// 根据*联合类型*(unions)在条件(extends)中*分发*(distribute)，以下代码\ntype IsNever<T> = T extends never ? true : false;\n// 将导致结果为 never\ntype WillBeNever = IsNever<never>;\n// 这是因为输入泛型 never 是空集，空集(在extends中)不会发生任何分配，所以只能得到返回类型 never\n引申：any 为全集，将直接分配为条件分支的两个结果的并集
用方括号包裹 extends 两边的类型可防止类型分发
\n\nTypically, distributivity is the desired behavior. To avoid that behavior, you can surround each side of the extends keyword with square brackets.
\n
type P<T> = T extends never ? true : false;\ntype A1 = P<never>; // never\ntype A2 = P<any>; // boolean\n\ntype Q<T> = [T] extends [never] ? true : false;\ntype B1 = Q<never>; // true\ntype B2 = Q<any>; // false\n实际上，内置类型就是依据此原理
\n/**\n * 排除 T 中能分配(assign)给 U 的类型\n */\ntype Exclude<T, U> = T extends U ? never : T;\n\n/**\n * 提取 T 中能分配(assign)给 U 的类型\n */\ntype Extract<T, U> = T extends U ? T : never;\nhttps://github.com/type-challenges/type-challenges/issues/1140
\n// 根据：联合类型中的其中一个类型，不能分配给联合类型中的其它类型（因为能分配的类型会收束）\n// 通过两次使用*分发条件类型*，判断是否*不是*联合类型（而是单类型）\ntype DoubleDistribute<T, TRUE, FALSE, C = T> = T extends T ? (C extends T ? TRUE : FALSE) : never;\ntype IsUnion<T> = DoubleDistribute<T, "SingleType", "UnionType"> extends "SingleType" ? false : true;\n// 注：此处写法只是为了便于理解\n//prettier-ignore\ntype RemoveIndexSignature<T extends object> = {\n // Index Signature 指的就是 keyof any，但*不能是*一个 extends keyof any 的具体值\n // 因此只需要排除 keyof T 中是 keyof any 的键即可\n [K in keyof T as \n string extends K ? never : \n number extends K ? never : \n symbol extends K ? never : \n K]: T[K];\n};\n递归法：https://github.com/type-challenges/type-challenges/issues/4377
由于 ts 编译器限制递归层数只适用于较小的数
type Pop<T extends any[]> = T extends [...infer U, any] ? U : never;\n//prettier-ignore\ntype MinusOne<T extends number, A extends any[] = []> = \n // 这里使用一个额外的泛型参数 A，用于将 T 转换为 length 为 T 的数组\n A['length'] extends T ? Pop<A>['length'] // 已经转换为 length 为 T 的数组，返回 length - 1\n : MinusOne<T, [...A, symbol]> // 递归地将 A 的 length 加 1\n\n// 同理，只是用 spread 运算符替代了 Pop<T>\ntype MinusOne<T extends number, A extends symbol[] = []> = [...A, symbol]["length"] extends T\n ? A["length"]\n : MinusOne<T, [...A, symbol]>;\n另：PlusOne
\ntype PlusOne<T extends number, A extends unknown[] = []> = A["length"] extends T\n ? [...A, symbol]["length"]\n : PlusOne<T, [...A, symbol]>;\n本题不难，重点在于需要将交叉(Intersection)类型合并
\ntype IntersectionToObj<T> = { [K in keyof T]: T[K] };\n\ntype PartialByKeys<T, K = any> = IntersectionToObj<\n {\n [P in keyof T as P extends K ? P : never]?: T[P];\n } & {\n [P in keyof T as P extends K ? never : P]: T[P];\n }\n>;\n也可以花哨一点，写成这样。这里 Omit<Intersection, never> 起到了合并作用
//prettier-ignore\ntype PartialByKeys<T, U = keyof T> = Omit<\n Partial<Pick<T, U & keyof T>> \n &\n Omit<T, U & keyof T>\n, never>;\ntype ArrayValues<T extends any[]> = T[number];\ntype ObjectValues<T extends object> = T[keyof T];\n\ntype a = ArrayValues<[1, 2, 3]>; // 2 | 1 | 3\ntype b = ObjectValues<{ 0: 1; 1: 2; 2: 3 }>; // 2 | 1 | 3\n\ntype c = undefined extends never ? true : false; // false\ntype d = { key?: undefined } extends { key?: never } ? true : false; // true\n// { key?: never }\n// |\n// 这个问号表示键不存在，或值为 undefined 与指定值的类型的联合类型\n// 注意：虽然键可能不存在，但 keyof 运算符还是可以得到键\n// 因此：d 实际相当于 e，而不是 c\ntype e = undefined extends never | undefined ? true : false; // true\n\ntype f = Required<{ key?: undefined }>; // { key: never }\n// type Required<T> = { [P in keyof T]-?: T[P]; }\n// |\n// 这个减号把 undefined 类型排除了\n\ntype ObjectEntries<T extends object, U = Required<T>> = ObjectValues<{\n [K in keyof U]: [K, U[K] extends never ? undefined : U[K]];\n}>;\n本题不难，问题依旧出在 Distributive Conditional Types
\n\n\n再次强调：联合类型(unions)在条件(extends)中分发(distribute)
\n
type InorderTraversal<T extends TreeNode | null> = [T] extends [TreeNode]\n ? [...InorderTraversal<T["left"]>, T["val"], ...InorderTraversal<T["right"]>]\n : [];\n为了将一个联合类型收束到指定类型，须用方括号括起来。
还要注意，在本题中不能 [T] extends [null] ? [] : /* 此处 T 还是 TreeNode | null */
// type NonNullable<T> = T & {}\n// 也可以用 NonNullable 规避 extends 中 null 的分发\ntype InorderTraversal<T extends TreeNode | null, Node extends TreeNode = NonNullable<T>> = T extends null\n ? []\n : [...InorderTraversal<Node["left"]>, Node["val"], ...InorderTraversal<Node["right"]>];\n联合类型在条件中分发，相当于 map 后再联合
\n// Aux 用于递归 union 类型\ntype Aux<U, A = U> = U extends string ? U | `${U} ${Aux<Exclude<A, U>>}` : never;\n\n// 数组转换为 union\ntype Combination<T extends string[]> = Aux<T[number]>;\ntype Subsequence<T extends any[]> = T extends [infer U, ...infer Rest]\n ? Subsequence<Rest> | [U, ...Subsequence<Rest>]\n : [];\n注意到 typescript 支持如下语法
\ntype ts = [1, ...([2] | [3])]; // [1, 2] | [1, 3]\n/**\n * @source lib.es5.d.ts\n * 注：es5 没有实现 Promise，故只有接口（供 polyfill）\n */\n\ndeclare type PromiseConstructorLike = new <T>(\n executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void,\n) => PromiseLike<T>;\n\ninterface PromiseLike<T> {\n then<TResult1 = T, TResult2 = never>(\n onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,\n onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null,\n ): PromiseLike<TResult1 | TResult2>;\n}\n\n// Promise 的泛型参数 T 只指明了 fulfilled 状态时的默认类型\ninterface Promise<T> {\n then<TResult1 = T, TResult2 = never>(\n onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,\n onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null,\n ): Promise<TResult1 | TResult2>;\n catch<TResult = never>(\n onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null,\n ): Promise<T | TResult>;\n}\n\n/**\n * @source lib.es2015.promise.d.ts\n * 注：es2015 实现了 Promise 构造器\n */\n\ninterface PromiseConstructor {\n readonly prototype: Promise<any>;\n new <T>(\n executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void,\n ): Promise<T>;\n all<T extends readonly unknown[] | []>(values: T): Promise<{ -readonly [P in keyof T]: Awaited<T[P]> }>;\n race<T extends readonly unknown[] | []>(values: T): Promise<Awaited<T[number]>>;\n reject<T = never>(reason?: any): Promise<T>;\n resolve(): Promise<void>;\n resolve<T>(value: T): Promise<Awaited<T>>;\n resolve<T>(value: T | PromiseLike<T>): Promise<Awaited<T>>;\n}\n\ndeclare var Promise: PromiseConstructor;\n\n/**\n * @source lib.es2015.iterable.d.ts\n * 注：规范中 all 和 race 静态方法实际上接受迭代器，类型如下\n */\n\ninterface PromiseConstructor {\n // 接受一个含 Promise 实例的迭代器，当迭代器中所有 Promise 实例都变为 fulfilled 状态时\n // 则 resolve 所有 fulfillment 的值组成的数组\n // 否则，若任意一个 Promise 实例变为 rejected 状态，则 reject 那个 Promise 实例的 rejection 值\n all<T>(values: Iterable<T | PromiseLike<T>>): Promise<Awaited<T>[]>;\n // 接受一个含 Promise 实例的迭代器，当迭代器中任意一个 Promise 对象\n // 变为 fulfilled 或 rejected 状态时（即，不是 pending 状态）\n // 就 resolve 该 fulfillment 值，或 reject 该 rejection 值\n race<T>(values: Iterable<T | PromiseLike<T>>): Promise<Awaited<T>>;\n}\n\n/**\n * @source lib.es2018.promise.d.ts\n * 注：原型上添加了 finally 方法\n */\n\ninterface Promise<T> {\n finally(onfinally?: (() => void) | undefined | null): Promise<T>;\n}\n\n/**\n * @source lib.es2020.promise.d.ts\n * 注：添加了 allSettled 静态方法\n */\n\ninterface PromiseFulfilledResult<T> {\n status: "fulfilled";\n value: T;\n}\n\ninterface PromiseRejectedResult {\n status: "rejected";\n reason: any;\n}\n\ntype PromiseSettledResult<T> = PromiseFulfilledResult<T> | PromiseRejectedResult;\n\ninterface PromiseConstructor {\n allSettled<T extends readonly unknown[] | []>(\n values: T,\n ): Promise<{ -readonly [P in keyof T]: PromiseSettledResult<Awaited<T[P]>> }>;\n // 当迭代器中所有 Promise 实例都 settle 时（就是说，不是 pedding 状态）\n // resolve 一个数组，数组的每一项都是一个对象，对应于迭代器中的 Promise 实例\n // 若 Promise 实例为 fulfilled 状态，则为 `{ status: "fulfilled", value: 对应fulfillment值 }`\n // 若 Promise 实例为 rejected 状态，则为 `{ status: "rejected", reason: 对应rejection值 }`\n allSettled<T>(values: Iterable<T | PromiseLike<T>>): Promise<PromiseSettledResult<Awaited<T>>[]>;\n}\n\n/**\n * @source lib.es2021.promise.d.ts\n * 注：添加了 any 静态方法\n */\n\ninterface AggregateError extends Error {\n errors: any[];\n}\n\ninterface AggregateErrorConstructor {\n new (errors: Iterable<any>, message?: string): AggregateError;\n (errors: Iterable<any>, message?: string): AggregateError;\n readonly prototype: AggregateError;\n}\n\ndeclare var AggregateError: AggregateErrorConstructor;\n\ninterface PromiseConstructor {\n any<T extends readonly unknown[] | []>(values: T): Promise<Awaited<T[number]>>;\n // 当迭代器中任意一个 Promise 实例变为 fulfilled 状态时，resolve 那个 fulfillment 值\n // 否则，reject 一个 AggregateError 错误，该错误的 errors 属性是一个数组\n // 包含所有 rejection 值（按照迭代器中的 Promise 实例的顺序）\n any<T>(values: Iterable<T | PromiseLike<T>>): Promise<Awaited<T>>;\n}\nArray.fromAsync()在不使用生成器的情况下：
对于普通迭代器，可以简单地看作类似于 Promise.prototype.all()，但依次（而不是并发，且惰性地）等待每一个 Promise。
对于异步迭代器，可以简单地看作类似于 Array.from()
// es2022\n// TODO: 目前 typescript5.4dev 暂未提供类型，且 chrome 暂未实现。\ninterface ArrayConstructor {\n fromAsync<T>(asyncIterable: AsyncIterable<T>): Promise<Array<T>>;\n fromAsync<T>(iterableOrArrayLike: Iterable<T> | ArrayLike<T>): Promise<Array<Awaited<T>>>;\n\n fromAsync<T, U>(\n asyncIterable: AsyncIterable<T>,\n mapperFn: (value: T) => U,\n thisArg?: any,\n ): Promise<Array<Awaited<U>>>;\n fromAsync<T, U>(\n iterableOrArrayLike: Iterable<T> | ArrayLike<T>,\n mapperFn: (value: Awaited<T>) => U,\n thisArg?: any,\n ): Promise<Array<Awaited<U>>>;\n}\nPromise.withResolvers()Promise.withResolvers() 添加自 Chrome119。
interface PromiseConstructor {\n withResolvers<T>(): {\n promise: Promise<T>;\n resolve: (value: T | PromiseLike<T>) => void;\n reject: (reason?: any) => void;\n };\n}\n该方法非常方便，能够减少嵌套
\nfunction loadScript(src) {\n const { promise, resolve, reject } = Promise.withResolvers();\n const script = document.createElement("script");\n script.src = src;\n script.onload = resolve;\n script.onerror = reject;\n return promise;\n}\n以下在 spring boot 中演示
\n配置 application.yml，配置说明参见官方文档
spring:\n servlet:\n multipart:\n enabled: true # 默认启用\n max-file-size: 100MB # 默认值很小，调大一点方便上传文件\n max-request-size: 100MB\n\n\n附：
\n
官方教程：https://spring.io/guides/gs/uploading-files/MultipartFile文档：https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/multipart/MultipartFile.html
@RequestParam 注解可自动分辨各种请求体类型。将该注解应用在 MultipartFile 上，
那么请求体自然只能是 multipart/form-data 类型
@RequestMapping("/file")\npublic class FileUploadController {\n\n @Value("${application.upload-path}")\n private String path;\n\n @PostMapping("/upload/{dirName}")\n public String uploadFile(@PathVariable("dirName") String dirName,\n @RequestParam("file") MultipartFile file,\n RedirectAttributes redirectAttributes) throws IOException {\n String originalFilename = file.getOriginalFilename();\n // String contentType = file.getContentType();\n // long size = file.getSize();\n\n String targetDir = path + File.separator + dirName;\n File dir = new File(targetDir);\n if(!dir.exists()) dir.mkdirs();\n\n File fileJava = new File(targetDir + File.separator + originalFilename);\n if(!fileJava.exists())fileJava.createNewFile();\n file.transferTo(fileJava); // spring 提供的 transferTo 方法很实用\n\n redirectAttributes.addFlashAttribute("message", "successfully uploaded " + originalFilename);\n return "redirect:/";\n }\n}\n依赖：
https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-security
https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-api
使用 MybatisGenerator 生成 UserDao 类和对应 mapper 的 xml 文件
注意 UserDao 类需手动添加 @Repository 注解
编写 UserService 接口如下：
public interface UserService {\n List<User> selectAll();\n void add(User user);\n void update(User user);\n void delete(String userName);\n User selectByUserName(String userName);\n}\n编写 UserServiceImpl 类如下：
@Service\npublic class UserServiceImpl implements UserService {\n @Autowired\n private UserDao userDao;\n @Override\n public List<User> selectAll() {return userDao.selectAll();}\n @Override\n public void add(User user) {userDao.insert(user);}\n @Override\n public void update(User user) {userDao.updateByPrimaryKey(user);}\n @Override\n public void delete(String userName) {userDao.deleteByPrimaryKey(userName);}\n @Override\n public User selectByUserName(String userName) {return userDao.selectByPrimaryKey(userName);}\n}\nhttps://springdoc.cn/spring-security/servlet/authentication/
\nSpring Security 提供下列方式实现登录认证。
\n这里只讨论数据库认证方式，并使用 jwt 鉴权，io.jsonwebtoken 依赖的使用参见文档
下面我们创建一个 security 包，以下内容将置于该包内
\n创建 service/JwtUserDetailsServiceImpl（实现 spring security 的 UserDetailsService 接口）
务必注意下面是实现 spring security 的接口，而不是我们自己的
\n// org.springframework.security.core.userdetails.UserDetails\n// org.springframework.security.core.userdetails.UserDetailsService\n// org.springframework.security.core.userdetails.UsernameNotFoundException\n@Service\npublic class JwtUserDetailsServiceImpl implements UserDetailsService {\n @Autowired\n private UserService userService;\n\n @Override\n public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {\n User user = userService.selectUserByUsername(username);\n if (user == null) throw new UsernameNotFoundException(String.format("用户 `%s` 不存在", username));\n return new JwtUser(user.getUserName(),\n user.getNickName(),\n user.getPassword(),\n user.getAvatar(),\n AuthorityUtils.commaSeparatedStringToAuthorityList(user.getRole()));\n }\n}\n创建 entity/JwtUser 类如下（实现 spring security 的 UserDetails 接口）
@Data\npublic class JwtUser implements UserDetails {\n private String username;\n private String nickname;\n private String password;\n private String avatar;\n private Collection<? extends GrantedAuthority> authorities;\n public JwtUser(String username, String nickname, String password, String avatar, Collection<? extends GrantedAuthority> authorities) {\n this.username = username;\n this.nickname = nickname;\n this.password = password;\n this.avatar = avatar;\n this.authorities = authorities;\n }\n public String getAvatar() {return avatar;}\n public String getNickname() {return nickname;}\n @Override\n public String getUsername() {return username;}\n @Override\n public boolean isAccountNonExpired() {return true;}\n @Override\n public boolean isAccountNonLocked() {return true;}\n @Override\n public boolean isCredentialsNonExpired() {return true;}\n @Override\n public boolean isEnabled() {return true;}\n public void setUsername(String username) {this.username = username;}\n @Override\n public String getPassword() {return password;}\n public void setPassword(String password) {this.password = password;}\n @Override\n public Collection<? extends GrantedAuthority> getAuthorities() {return authorities;}\n public void setAuthorities(Collection<? extends GrantedAuthority> authorities) {this.authorities = authorities;}\n}\n创建 entity/AuthenticationBean 类如下
@Getter\n@Setter\npublic class AuthenticationBean {\n private String username;\n private String password;\n}\n创建 filter/CustomAuthenticationFilter 对象，自定义认证流程
public class CustomAuthenticationFilter extends UsernamePasswordAuthenticationFilter {\n @Override\n public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException {\n // 若请求头不是 json，不处理\n if (!(request.getContentType().equals(MediaType.APPLICATION_JSON_UTF8_VALUE)\n || request.getContentType().equals(MediaType.APPLICATION_JSON_VALUE)))\n return super.attemptAuthentication(request, response);\n\n // 尝试根据请求构造出 UsernamePasswordAuthenticationToken 对象\n UsernamePasswordAuthenticationToken authRequest = null;\n\n try (InputStream is = request.getInputStream()) {\n // 使用 jackson 解析 json，将请求的 json 读取为我们创建的 AuthenticationBean\n ObjectMapper mapper = new ObjectMapper();\n AuthenticationBean ab = mapper.readValue(is, AuthenticationBean.class);\n authRequest = new UsernamePasswordAuthenticationToken(ab.getUsername(), ab.getPassword());\n } catch (IOException e) {\n e.printStackTrace();\n authRequest = new UsernamePasswordAuthenticationToken("", "");\n } finally {\n this.setDetails(request, authRequest);\n return this.getAuthenticationManager().authenticate(authRequest);\n }\n }\n}\n创建 filter/JwtAuthenticationTokenFilter 对象，处理 Authorization 请求头
@Component\npublic class JwtAuthenticationTokenFilter extends OncePerRequestFilter {\n @Resource\n private UserDetailsService userDetailsService;\n\n @SneakyThrows\n @Override\n protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException {\n String token = request.getHeader("Authorization");\n if (!StringUtils.isEmpty(token)) {\n // 这里的 JwtUtils 需要自己实现，这里省略\n String username = JwtUtils.getUsername(token);\n if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) {\n // 强调：我们创建了 JwtUser 继承 spring security 的 UserDetails\n UserDetails userDetails = userDetailsService.loadUserByUsername(username);\n if (JwtUtils.validate(token, userDetails)) {\n // 认证成功时，我们保存 UsernamePasswordAuthenticationToken 对象（当然也是 spring security 提供的）\n UsernamePasswordAuthenticationToken authentication =\n new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());\n authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));\n SecurityContextHolder.getContext().setAuthentication(authentication);\n }\n }\n }\n chain.doFilter(request, response);\n }\n}\n创建 handler/MyAuthenticationSuccessHandler，处理认证成功
// org.springframework.security.core.userdetails.UserDetails\n@Component\npublic class MyAuthenticationSuccessHandler implements AuthenticationSuccessHandler {\n @Override\n public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {\n UserDetails userDetails = (UserDetails) authentication.getPrincipal();\n SecurityContextHolder.getContext().setAuthentication(authentication);\n\n Map<string, string> map = new HashMap<>();\n map.put("status", "ok");\n map.put("token" , generateToken(userDetails));\n\n httpServletResponse.setContentType("application/json;charset=UTF-8");\n ServletOutputStream out = httpServletResponse.getOutputStream();\n out.write(new ObjectMapper().writeValueAsBytes(map));\n out.flush();\n out.close();\n }\n\n // 使用 io.jsonwebtoken 依赖生成 jwt 字符串\n private String generateToken(UserDetails userDetails) {\n JwtUser jwtUser = (JwtUser) userDetails;\n Map<String, Object> claims = new HashMap<>();\n claims.put(Claims.SUBJECT , userDetails.getUsername());\n claims.put(Claims.ISSUED_AT, new Date());\n claims.put("username" , jwtUser.getUsername());\n claims.put("role" , jwtUser.getAuthorities());\n return Jwts.builder()\n .setClaims(claims)\n .setExpiration(new Date(System.currentTimeMillis() + expiration))\n .signWith(SignatureAlgorithm.HS512, secret)\n .compact();\n }\n}\n创建 handler/MyAuthenticationFailureHandler，处理认证失败
@Component\npublic class MyAuthenticationFailureHandler implements AuthenticationFailureHandler {\n @Override\n public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {\n Map<string, string> map = new HashMap<>();\n map.put("status", "error");\n map.put("reason", "auth fail");\n ServletOutputStream out = httpServletResponse.getOutputStream();\n out.write(new ObjectMapper().writeValueAsBytes(map));\n out.flush();\n out.close();\n }\n}\n创建 handler/EntryPointUnauthorizedHandler，处理未认证
@Component\npublic class EntryPointUnauthorizedHandler implements AuthenticationEntryPoint {\n @Override\n public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException {\n Map<string, string> map = new HashMap<>();\n map.put("status", "error");\n map.put("reason", "unauthorized");\n ServletOutputStream out = httpServletResponse.getOutputStream();\n out.write(new ObjectMapper().writeValueAsBytes(map));\n out.flush();\n out.close();\n }\n}\n创建 handler/RestAccessDeniedHandler，处理无权限情况
@Component\npublic class RestAccessDeniedHandler implements AccessDeniedHandler {\n @Override\n public void handle(HttpServletRequest request, HttpServletResponse response, AccessDeniedException accessDeniedException) throws IOException, ServletException {\n Map<string, string> map = new HashMap<>();\n map.put("status", "error");\n map.put("reason", "access denied");\n ServletOutputStream out = httpServletResponse.getOutputStream();\n out.write(new ObjectMapper().writeValueAsBytes(map));\n out.flush();\n out.close();\n }\n}\n创建 config/WebSecurityConfig，对 spring security 进行配置
@EnableWebSecurity\n@EnableGlobalMethodSecurity(prePostEnabled = true)\n@Configuration\npublic class WebSecurityConfig extends WebSecurityConfigurerAdapter {\n @Resource\n private UserDetailsService userDetailsService;\n @Autowired\n private JwtAuthenticationTokenFilter jwtAuthenticationTokenFilter;\n @Autowired\n private EntryPointUnauthorizedHandler entryPointUnauthorizedHandler;\n @Autowired\n private RestAccessDeniedHandler restAccessDeniedHandler;\n @Autowired\n private MyAuthenticationSuccessHandler myAuthenticationSuccessHandler;\n @Autowired\n private MyAuthenticationFailureHandler myAuthenticationFailureHandler;\n\n @Autowired\n public void configureAuthentication(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {\n authenticationManagerBuilder.userDetailsService(userDetailsService)\n .passwordEncoder(new BCryptPasswordEncoder());\n }\n\n @Override\n protected void configure(HttpSecurity http) throws Exception {\n http.addFilterBefore(jwtAuthenticationTokenFilter, UsernamePasswordAuthenticationFilter.class)\n .addFilterBefore(new CorsFilter(), ChannelProcessingFilter.class);// 跨域 Filter，此处省略实现\n\n http.csrf().disable().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)\n .and().authorizeRequests()\n .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()\n .antMatchers("/static/**").permitAll()\n .anyRequest().authenticated() // 任何请求，登录后可访问\n .and().addFilterAt(customAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)\n .formLogin().loginProcessingUrl("/user/login")\n .successHandler(myAuthenticationSuccessHandler)\n .failureHandler(myAuthenticationFailureHandler)\n .and().logout()\n .and().headers().cacheControl();\n\n http.exceptionHandling()\n .authenticationEntryPoint(entryPointUnauthorizedHandler)\n .accessDeniedHandler(restAccessDeniedHandler);\n }\n\n @Bean\n CustomAuthenticationFilter customAuthenticationFilter() throws Exception {\n CustomAuthenticationFilter filter = new CustomAuthenticationFilter();\n filter.setAuthenticationSuccessHandler(myAuthenticationSuccessHandler);\n filter.setAuthenticationFailureHandler(myAuthenticationFailureHandler);\n filter.setFilterProcessesUrl("/user/login");\n filter.setAuthenticationManager(authenticationManagerBean());\n return filter;\n }\n}\nhttps://springdoc.cn/spring-security/servlet/authorization/
\n","tags":["java","spring"]},{"id":"curl-cli","url":"https://yieldray.fun/posts/curl-cli","title":"curl命令行","date_published":"2023-07-01T16:41:48.000Z","date_modified":"2023-07-01T16:41:48.000Z","content_text":"文档：https://curl.se/docs/manpage.html
参考：https://curl.dev/
以下仅使用 http 协议
\nUsage: curl [options...] <url>\n\n\n一般来说，filename 参数指定为 - 字符则从 stdin 读取
\n
data 参数若以 @ 开头，视为二进制文件；以 < 开头视为文本文件。
剩余部分为文件名，可通过双引号包含（文件名含特殊字符时）
--url <url>\n# 指定目标 URL。一般不需要这个选项\n\n-X, --request <method>\n# 指定请求方法，如 GET/POST\n\n-I, --head\n# 发送 HEAD 请求，并输出响应头\n\n-G, --get\n# 将 -d 选项的行为改变为 添加 查询字符串 而不是 请求体\n# 例如 -G -d q=a\n\n--url-query <data>\n# 添加查询字符串，不改变请求方法\n# 格式为 key=val =key key@file_as_val @file_as_key +unencoded\n\n-L, --location\n# 跟随服务器重定向\n\n--location-trusted\n# 跟随服务器重定向，并且跟随发送 -u 选项发送的账号密码\n\n-u, --user <user:password>\n# 指定账号密码\n\n-n, --netrc\n# 使用 ~/.netrc (_netrc on Windows) 来指定账号密码\n\n-H, --header <header/@file>\n# 添加 http 请求头，如 -H 'Content-Type: application/json' （可多次使用）\n\n-k, --insecure\n# 跳过 ssl 检测\n\n-d, --data <data>\n# 默认为 POST 请求添加请求体，如 -d a=1 （多次使用时，直接将数据连接）\n# 自动添加 "Content-Type: application/x-www-form-urlencoded" 请求头\n\n--data-urlencode <data>\n# -d 选项不编码，这个选项会编码。如果有多个字段，应多次使用此选项，不能 --data-urlencode a=1&b=2\n# 而应该 --data-urlencode a=1 --data-urlencode b=2\n\n--data-raw <data>\n# POST 请求直接发送二进制数据\n\n--json <data>\n# POST 请求发送 json\n# 自动添加 "Content-Type: application/json" 和 "Accept: application/json" 请求头\n\n-F, --form <name=content>\n# POST 请求发送文件，例如 -F "story=<file.txt" -F "image=@file.jpg" -F "web=@index.html;type=text/html"\n# 自动添加 Content-Type: multipart/form-data 请求头\n-A, --user-agent <name>\n# 指定 User-Agent，若为空则不发送 User-Agent 请求头\n\n-e, --referer <URL>\n# 指定 Referer\n\n-b, --cookie <data|filename>\n# 若格式为 "NAME1=VALUE1; NAME2=VALUE2" ，则指定 Cookie 请求头为此字符串\n# 否则字符串视为文件路径，读取文件再设置 Cookie 头。配合 -c 选项使用\n\n-c, --cookie-jar <filename>\n指定将服务器返回的 Set-Cookie 响应头写入文件\n-i\n# 输出响应头\n\n-K, --config <file>\n# 手动指定配置文件\n\n--limit-rate <speed>\n# 限制每秒发送的比特数，可使用 k,m,g,t,p 单位。1024 based\n\n-o, --output <file>\n# 输出到文件而不是 stdout\n\n-O, --remote-name\n# 输出到和远程文件名的同名文件\n\n-J, --remote-header-name\n# 令 -O 选项从 Content-Disposition 响应头获取文件名而不是从 url 中获取\n\n--remove-on-error\n# 请求失败时将写入的文件移除\n\n-f, --fail\nhttp 响应表明为错误时（例如：状态码不是 2xx 3xx）尽快使命令错误退出，\n并且不要输出（例如：404 响应时还会有响应体）\n\n-s, --silent\n# 安静模式，不显示进度条和错误信息\n\n-S, --show-error\n# 令 -s 选项，显示错误信息\n\n-v, --verbose\n# 详细模式\n\n--socks5 <host[:port]>\n-x, --proxy [protocol://]host[:port]\n# 指定代理\nmybatis 可以使我们方便地创建 mapper 层
\n下面使用 mysql 作为数据源，并在 spring boot 项目下演示。
\nmysql 的 jdbc url 参见：
https://dev.mysql.com/doc/connectors/en/connector-j-reference-jdbc-url-format.html
https://dev.mysql.com/doc/connector-j/8.0/en/connector-j-reference-jdbc-url-format.html
添加 mysql 驱动 maven 依赖：
https://mvnrepository.com/artifact/com.mysql/mysql-connector-j
spring boot 项目添加 mybatis 依赖：
https://mvnrepository.com/artifact/tk.mybatis/mapper-spring-boot-starter
为了方便生成 getter 和 setter 安装 lombok 依赖：
https://mvnrepository.com/artifact/org.projectlombok/lombok
idea 使用 Free MyBatis Tool 插件自动生成 mybatis 的 mapper 的 xml 配置文件：
（注：可以将 model 创建在 entity 包下，将 dao 放在 dao 包下，将 mapper xml 放在 resources 的 mapper 包下）
https://plugins.jetbrains.com/plugin/18617-free-mybatis-tool
（自动生成的文件就不演示了）
\napplication.yml 的内容例如：
spring:\n datasource:\n driver-class-name: com.mysql.cj.jdbc.Driver\n url: jdbc:mysql://[host][:port]/[db]?serverTimezone=GMT%2B8&useUnicode=true&characterEncodeing=UTF-8&useSSL=false\n username: root\n password: 123456\nmybatis:\n mapper-locations: classpath:mapper/*.xml\n configuration:\n map-underscore-to-camel-case: true\n我们创建（自动生成）的 mapper (即 DAO) 类置于 dao 包下，注意需要使用 @Repository 注解，
这样 mapper 类就可以被 spring 自动装配。
此时 srping boot 的启动类如下
@MapperScan("com.example.demo.dao")\n@SpringBootApplication\npublic class DemoApplication {/* .. */}\n\n\n注：此处 DAO 和 Service 是接口，mapper 和 ServiceImpl 是实现类
\n
model 层存放 entity，service 层存放业务逻辑（但不直接访问数据库）并被 controller 层直接调用
mapper 和 DAO 直接对数据库操作并被 service 层直接调用
编写 service 实现类如下
\n@Service\npublic class OrderServiceImpl implements OrderService {\n\n // 这个 DAO 是由 Free MyBatis Tool 插件生动生成的，此处直接注入即可\n @Autowired\n private OrderDao orderDao;\n\n @Override\n public void add(Order order) {orderDao.insert(order);}\n\n @Override\n public void update(Order order) {orderDao.updateByPrimaryKey(order);}\n\n @Override\n public void delete(Integer id) {orderDao.deleteByPrimaryKey(id);}\n\n @Override\n public Order selectById(Integer id) {return orderDao.selectByPrimaryKey(id);}\n}\n在 controller 包内编写一个类来测试一下
\n@RestController\npublic class OrderController {\n @Autowired\n private OrderService orderService;\n\n @GetMapping("/selectById/{id}")\n public Result<Order> selectById(@PathVariable("id") Integer id) {\n Order order = orderService.selectById(id);\n return new Result(true, 200, "ok", order);\n }\n}\n\n// @Data 注解由 lombok 提供\n// Result 工具类，可放在 common 包内\n@Data\nclass Result<T> implements Serializable {\n private boolean success;\n private Integer code;\n private String message;\n private T data;\n public Result(boolean success, Integer code, String message, T data) {\n this.success = success;\n this.code = code;\n this.message = message;\n this.data = data;\n }\n}\nFilterRegistrationBean 类由 spring 提供
配置类声明 @Configuration 注解就能被 spring 扫描和配置
@Configuration\npublic class FilterConfig {\n @Bean\n public FilterRegistrationBean<Filter> Filter01() {\n FilterRegistrationBean filter = new FilterRegistrationBean();\n filter.setFilter(new LogFilter1());\n List urls = new ArrayList();\n urls.add("/*");\n filter.setUrlPatterns(urls);\n filter.setOrder(1);\n return filter;\n }\n\n @Bean\n public FilterRegistrationBean Filter02() {\n FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();\n filterRegistrationBean.setFilter(new LogFilter2());\n filterRegistrationBean.addUrlPatterns("/*");\n filterRegistrationBean.setOrder(2);\n return filterRegistrationBean;\n }\n\n}\n\n\nclass LogFilter1 implements Filter {\n final Logger logger = LoggerFactory.getLogger(getClass());\n\n @Override\n public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {\n logger.info("LogFilter1 before");\n filterChain.doFilter(servletRequest, servletResponse);\n logger.info("LogFilter1 after");\n }\n}\n\nclass LogFilter2 implements Filter {\n final Logger logger = LoggerFactory.getLogger(getClass());\n\n @Override\n public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {\n logger.info("LogFilter2 before");\n filterChain.doFilter(servletRequest, servletResponse);\n logger.info("LogFilter2 after");\n }\n}\n\nclass CorsFilter implements Filter {\n @Override\n public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {\n HttpServletResponse res = (HttpServletResponse) response;\n res.setHeader("Access-Control-Allow-Origin", "*");\n\n HttpServletRequest req = (HttpServletRequest) request;\n if (req.getMethod().equals("OPTIONS")){\n res.setStatus(HttpServletResponse.SC_OK);\n return;\n }\n chain.doFilter(request, res);\n }\n}\n同上，@Configuration 注解表示通过 spring 扫描和配置
@Configuration\npublic class MyInterceptorConfig implements WebMvcConfigurer {\n @Override\n public void addInterceptors(InterceptorRegistry registry) {\n registry.addInterceptor(new MyInterceptor())\n .addPathPatterns("/**")\n .excludePathPatterns("/static/**");\n }\n}\n\n\nclass MyInterceptor implements HandlerInterceptor {\n final Logger logger = LoggerFactory.getLogger(getClass());\n\n @Override\n public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {\n HandlerMethod handlerMethod = (HandlerMethod) handler;\n Method method = handlerMethod.getMethod();\n String methodName = method.getName();\n logger.debug("Method = " + methodName);\n return true; // 返回值表示是否放行\n }\n\n @Override\n public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {\n logger.info("postHandle");\n }\n\n @Override\n public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {\n logger.info("afterCompletion");\n }\n}\n使用了上面的过滤器和拦截器后，访问 servlet 的日志效果如下
\n<time> INFO <pid> --- [nio-8080-exec-1] com.example.demo.LogFilter1 : LogFilter1 before\n<time> INFO <pid> --- [nio-8080-exec-1] com.example.demo.LogFilter2 : LogFilter2 before\n<time> INFO <pid> --- [nio-8080-exec-1] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting...\n<time> INFO <pid> --- [nio-8080-exec-1] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed.\n<time> INFO <pid> --- [nio-8080-exec-1] com.example.demo.MyInterceptor : postHandle\n<time> INFO <pid> --- [nio-8080-exec-1] com.example.demo.MyInterceptor : afterCompletion\n<time> INFO <pid> --- [nio-8080-exec-1] com.example.demo.LogFilter2 : LogFilter2 after\n<time> INFO <pid> --- [nio-8080-exec-1] com.example.demo.LogFilter1 : LogFilter1 after\n可以看到，是先进入 Filter 再进入 Interceptor
\n使用pagehelper进行分页
\n在 mapper/OrderDao.xml <mapper/> 结束标签之前添加如下
<select id="selectAllGoods" resultType="com.example.demo.entity.Order">\n select\n <include refid="Base_Column_List" />\n from tb_order\n <where>\n <if test="type!=null">\n and type=#{type}\n </if>\n </where>\n</select>\nOrderDao 接口中添加方法
\nList<Order> selectAllGoods(Order order);\nOrderService 接口中添加方法
\nPageInfo<Order> selectAllGoods(Integer pageNum);\nOrderServiceImpl 类中实现该方法
\n\n@Override\npublic PageInfo<Order> selectAllGoods(Integer pageNum) {\n Order order = new Order();\n order.setType("goods");\n\n Integer pageSize = 10;\n PageHelper.startPage(pageNum, pageSize);\n List<Order> goods = orderDao.selectAllGoods(order);\n return new PageInfo<>(goods);\n}\nOrderController 类中添加调用该 service 层的方法
\n@GetMapping("/goods/{pageNum}")\npublic Result<PageInfo> selectAllGoods(@PathVariable("pageNum") Integer pageNum) {\n PageInfo<Order> orders = orderService.selectAllGoods(pageNum);\n return new Result<PageInfo>(true, 200, "ok", orders);\n}\nspring boot 可直接使用 spring-boot-starter-validation，实际上是依赖了 hibernate-validator。（具体使用方法可自行搜索，此处不展示）\n修改 Order 实体如下
\n@Data\npublic class Order implements Serializable {\n /* ... ... */\n\n @NotBlank(message = "标题不能为空")\n @Length(min = 2, max = 8, message = "标题长度在2-8之间")\n private String title;\n\n @NotBlank(message = "内容不能为空")\n private String content;\n\n /* ... ... */\n}\n在 controller 中 可通过 BindingResult 参数获得校验结果
@PostMapping("/goods/add")\npublic Result<String> add(@Valid @RequestBody Order order, BindingResult bindingResult) {\n // 处理校验失败\n if (bindingResult.hasErrors()) {\n StringBuffer stringBuffer = new StringBuffer();\n List<ObjectError> allErrors = bindingResult.getAllErrors();\n for (ObjectError objectError : allErrors) {\n stringBuffer.append(objectError.getDefaultMessage()).append("; ");\n }\n return new Result<>(false, 400, "error", stringBuffer.toString());\n }\n\n // 处理校验成功，添加到数据库\n order.setCreateTime(new Date());\n order.setUpdateTime(new Date());\n order.setOrderStatus(0);\n order.setType("1");\n order.setOwnName("name");\n orderService.add(order);\n return new Result(true, 200, "ok", null);\n}\n# 测试一下\ncurl -H "Content-Type: application/json" \\\n -d '{"title":"title", "content":"content"}' \\\n http://127.0.0.1:8080/goods/add\n文档：https://www.sqlite.org/docs.html
\n语法参见：https://www.sqlite.org/syntaxdiagrams.html
\n数据类型参见：
\n\n函数参见：https://www.sqlite.org/lang_corefunc.html
\nSQLite 支持：https://www.sqlite.org/fullsql.html
\nSQLite 不支持：https://www.sqlite.org/omitted.html
\n\n\nfrom https://opensource.com/sites/default/files/gated-content/cheat_sheet_sqlite_0.pdf
\n
SQLite is a public domain C-language library implementing a small, fast, self-contained,\nreliabile, and full-featured, SQL database engine.
\n> .open filename.db;\n> CREATE TABLE IF NOT EXISTS mytable (foo TEXT NOT NULL);\n> .tables\n> INSERT INTO mytable (foo) VALUES ('aaa'), ('bbb'), ('ccc');\n> .schema mytable\n> ALTER TABLE mytable ADD bar INTEGER;\n> UPDATE mytable SET bar=123 WHERE foo='aaa';\n> SELECT * FROM mytable\n→ INNER JOIN othertable\n→ ON mytable.rowid=othertable.foo;\n> SELECT * FROM mytable LEFT JOIN\n→ ON mytable.id=othertable.foo;\n> SELECT * FROM mytable\n→ CROSS JOIN othertable;\n| Data types | \n\n | Some SQLite functions | \n\n |
|---|---|---|---|
| TEXT | \nText data | \nabs() | \nAbsolute value | \n
| INTEGER | \nWhole number | \nmax() min() | \nMaximum and minimum values | \n
| REAL | \nFleating point number | \nupper() lower() | \nConvert case of string | \n
| BLOB | \nBinary data | \nlength() | \nLength of string | \n
| NULL | \nNull value | \nrandom() | \n(Pseudo) random integer | \n
> SELECT * FROM mytable;\n> SELECT * FROM mytable\n→ WHERE rowid=3;\n> SELECT foo, bar FROM mytable;\n> SELECT * FROM mytable LIMIT 10;\n> SELECT * FROM mytable ORDER BY foo;\n> CREATE VIEW myview AS\n→ SELECT foo FROM mytable\n→ WHERE example > 10;\n> .tables\n> SELECT * FROM myview;\n> DROP VIEW myview;\nDEFAULT 'default text'\nUNIQUE\nPRIMARY KEY\n> CREATE TABLE mytable (Id INTEGER PRIMARY KEY);\nFOREIGN KEY\nCHECK\n> CREATE TABLE mytable (CHECK(condition> 0), bar TEXT);\nNOT NULL\n\n\nfrom https://raw.githubusercontent.com/Mehedi61/SQLite-Cheat-Sheet/master/README.md
\n
sqlite3 database_name.db\nATTACH DATABASE file_name AS database_name;\n.databases\nVACCUM\nCREATE TABLE [IF NOT EXISTS] table(\n primary_key INTEGER PRIMARY KEY,\n column_name type NOT NULL,\n column_name type NULL,\n ...\n);\nALTER TABLE table_name RENAME TO new_name;\nALTER TABLE table ADD COLUMN column_definition;\nALTER TABLE table DROP COLUMN column_name;\nDROP TABLE [IF EXISTS] table_name;\n.tables\nCREATE [UNIQUE] INDEX index_name\nON table_name (c1,c2,...)\nDROP INDEX index_name;\nCREATE INDEX index_name ON table_name(expression);\nSELECT * FROM table_name;\nSELECT c1, c2\nFROM table_name;\nSELECT DISTINCT (c1)\nFROM table_name;\nSELECT *\nFROM table_name\nWHERE condition;\nSELECT c1 AS new_name\nFROM table_name;\nSELECT *\nFROM table_name_1\nINNER JOIN table_name_2 ON condition;\nSELECT *\nFROM table_name_1\nLEFT JOIN table_name_2 ON condition;\nSELECT COUNT (*)\nFROM table_name;\nSELECT c1, c2\nFROM table_name\nORDER BY c1 ASC [DESC], c2 ASC [DESC],...;\nSELECT *\nFROM table_name\nGROUP BY c1, c2, ...;\nSELECT c1, aggregate(c2)\nFROM table_name\nGROUP BY c1\nHAVING condition;\nINSERT INTO table_name(column1,column2,...)\nVALUES(value_1,value_2,...);\nINSERT INTO table_name(column1,column2,...)\nVALUES(value_1,value_2,...),\n (value_1,value_2,...),\n (value_1,value_2,...)...\nUPDATE table_name\nSET c1 = v1,\n ...\nUPDATE table_name\nSET c1 = v1,\n ...\nWHERE condition;\nDELETE FROM table;\nDELETE FROM table\nWHERE condition;\nSELECT * FROM table\nWHERE column LIKE '%value%';\nSELECT *\nFROM table\nWHERE table MATCH 'search_query';\nsubcommands: https://rclone.org/docs/#subcommands
\ncommands: https://rclone.org/commands/
\nglobal flags: https://rclone.org/flags/
\nUsage:\n rclone config [flags]\n rclone config [command]\n\nAvailable Commands:\n create Create a new remote with name, type and options.\n delete Delete an existing remote.\n disconnect Disconnects user from remote\n dump Dump the config file as JSON.\n file Show path of configuration file in use.\n password Update password in an existing remote.\n paths Show paths used for configuration, cache, temp etc.\n providers List in JSON format all the providers and options.\n reconnect Re-authenticates user with remote.\n show Print (decrypted) config file, or the config for a single remote.\n touch Ensure configuration file exists.\n update Update options in an existing remote.\n userinfo Prints info about logged in user of remote.\nUsage:\n rclone copy source:path dest:path [flags]\n\nFlags:\n --create-empty-src-dirs Create empty source dirs on destination after copy\n\n\n# example\nrclone copy remote:path /path/to/local/directory\nrclone copy /path/to/local/file remote:path\nls to list size and path of objects onlylsl to list modification time, size and path of objects onlylsd to list directories onlylsf to list objects and directories in easy to parse formatlsjson to list objects and directories in JSON formatrclone ls remote:path\nUsage:\n rclone sync source:path dest:path [flags]\n\nFlags:\n --create-empty-src-dirs Create empty source dirs on destination after sync\nrclone delete remote:path\nhttps://rclone.org/commands/rclone_mount/
\nUsage:\n rclone mount remote:path /path/to/mountpoint [flags]\n\n# example (windows)\nrclone mount remote:/ X: --network-mode --volname NetDrive --vfs-cache-mode full --cache-dir D:\\\\Cache\nrclone cat remote:path [flags]\n\n --count int Only print N characters (default -1)\n --discard Discard the output instead of printing\n --head int Only print the first N characters\n -h, --help help for cat\n --offset int Start printing at offset N (or from end if -ve)\n --tail int Only print the last N characters\nUsage:\n rclone move source:path dest:path [flags]\n\nFlags:\n --create-empty-src-dirs Create empty source dirs on destination after move\n --delete-empty-src-dirs Delete empty source dirs after move\nrclone rcd --rc-web-gui\n\n\n# open web gui\n--rc-web-gui\n\n# do not open browser\n--rc-web-gui-no-open-browser\n\n# update\n--rc-web-gui-update\n--rc-web-gui-force-update\n\n# directory list page\n--rc-serve\n\n# custom port\n--rc-addr :<port>\n\n# http auth\n--rc-user <username>\n--rc-pass <password>\n--include <pattern>\n--exclude <pattern>\n注意：区间的类型是 core::ops::range::Range
fn main() {\n for n in 1..5 {\n println!("{}", n);\n }\n for n in 5..=10 {\n println!("{}", n);\n }\n}\n参见：std::iter
\n有三种常见的方法可以从集合中创建迭代器：
\niter()，它在 &T 上迭代。iter_mut()，它在 &mut T 上迭代。into_iter()，它在 T 上迭代。
fn main() {\n let names = vec!["Bob", "Frank", "Ferris"];\n\n // 不可变借用\n for name in names.iter() {\n match name {\n &"Ferris" => println!("There is a rustacean among us!"),\n _ => println!("Hello {}", name),\n }\n }\n\n // 获取所有权，这*消耗*了集合，因为集合自身不再拥有其元素的所有权\n for name in names.into_iter() {\n match name {\n "Ferris" => println!("There is a rustacean among us!"),\n _ => println!("Hello {}", name),\n }\n }\n\n // 变量遮蔽\n let mut names = vec!["Bob", "Frank", "Ferris"];\n\n // 可变借用\n for name in names.iter_mut() {\n *name = match name {\n &mut "Ferris" => "There is a rustacean among us!",\n _ => "Hello",\n }\n }\n println!("names: {:?}", names);\n}\nFn：捕获方式为通过引用（&T）的闭包fn type_of<T>(_: &T) -> &str {\n std::any::type_name::<T>().into()\n}\n\nfn main() {\n let color = String::from("green");\n\n // 闭包*不可变借用*了 `color` 变量（因为闭包本身是不可变类型）\n // 备注：`println!` 宏是通过引用使用的，不可变借用\n let print = || println!("color={} type={}", color, type_of(&color));\n print();\n\n // `color` 变量可再次被不可变借用，因为闭包只持有一个指向 `color` 的不可变引用。\n let _reborrow = &color;\n print();\n\n // 在最后使用 `print` 之后，移动或重新借用都是允许的。\n let _color_moved = color;\n // print(); 不允许使用 print，因为其捕获的变量已移动\n}\nFnMut：捕获方式为通过可变引用（&mut T）的闭包fn main() {\n let mut count = 0;\n // `inc` 前面需要加上 `mut`，因为闭包里存储着一个 `&mut` 可变借用的变量。\n // 调用闭包时，该变量的变化就意味着闭包内部发生了变化。因此闭包需要是可变的。\n let mut inc = || {\n count += 1;\n println!("`count`: {}", count);\n };\n\n // 使用可变借用调用闭包\n inc();\n\n // `count` 变量已经被闭包可变借用，因此*在最后一次使用闭包之前*不能再次被可变借用。\n // 故以下语句不被允许：\n // let _reborrow = &count;\n // inc();\n\n // 现在，闭包不再可变借用 `&mut count`，因此可以正确地重新借用\n let _count_reborrowed = &mut count;\n}\nFnOnce：捕获方式为通过值（T）的闭包fn type_of<T>(_: &T) -> &str {\n std::any::type_name::<T>().into()\n}\n\nfn main() {\n // 不可复制类型（non-copy type）。\n let movable = Box::new(3);\n\n // `std::mem::drop` 要求 `T` 类型本身，所以闭包将会*捕获变量的值*。\n // 这种情况下，可复制类型将会复制给闭包，从而原始值不受影响。\n // 不可复制类型必须移动（move）到闭包中，因而 `movable` 变量在这里立即移动到了闭包中。\n let consume = || {\n println!("movable={:?} type={}", movable, type_of(&movable));\n std::mem::drop(movable);\n };\n\n // `consume` 消耗了该变量，所以该闭包只能调用一次。\n consume();\n // 不能再次调用闭包：\n //consume();\n}\n通过指定 move 可以强制使闭包获取其捕获的变量的所有权
即，被捕获的变量的所有权被移动进了闭包
fn main() {\n // `Vec` 在语义上是不可复制的。\n let haystack = vec![1, 2, 3];\n\n let contains = move |needle| haystack.contains(needle);\n\n println!("{}", contains(&1));\n println!("{}", contains(&4));\n\n //println!("There're {} elements in vec", haystack.len());\n // ^ 取消上面一行的注释将导致编译时错误，因为借用检查不允许在变量被移动走之后继续使用它。\n\n // 在闭包的签名中删除 `move` 会导致闭包以不可变方式借用 `haystack`，\n // 因此之后 `haystack` 仍然可用，取消上面的注释也不会导致错误。\n}\n当闭包被定义，编译器会隐式地创建一个匿名类型的结构体，用以储存闭包捕获的变量，同时为这个未知类型的结构体实现函数功能，通过 Fn、FnMut 或 FnOnce 三种 trait 中的一种。
\nfn test_closure_trait<F>(f: F) -> bool\nwhere\n F: FnOnce(i32, f64, &str) -> bool,\n{\n // ^ 试一试：将 `FnOnce` 换成 `Fn` 或 `FnMut`。\n\n f(1, 1.0, "1")\n}\nfn create_fn() -> impl Fn() {\n let text: String = "Fn".to_owned();\n\n // 闭包作为返回值，必须指明 move，将变量所有权移动进闭包\n // 因为通过引用捕获的函数局部变量将在函数退栈后被丢弃（drop）\n move || println!("This is a: {}", text)\n}\n例子参见：std 中的例子
\n","tags":["rust"]},{"id":"web-access-control-headers","url":"https://yieldray.fun/posts/web-access-control-headers","title":"access-control 头部","date_published":"2023-06-17T19:07:53.000Z","date_modified":"2025-03-17T19:07:53.000Z","content_text":"在发出 非简单请求 之前，会先发送 Preflight 请求（请求方法为 OPTIONS）
\n\n\n流式请求永远是跨源请求，即必须预检
\n
对于 CORS-safelisted request header，客户端无需指明 Access-Control-Request-Headers。
对于 CORS-safelisted response header，服务端无需指明 Access-Control-Allow-Headers。
显然：只有 OPTION 请求才会携带 Access-Control-Request-* 请求头。
指明将要使用的请求头。多个时，使用逗号分隔。
\n注意：Forbidden header name 请求头禁止通过编程修改。因此这些请求不可能出现在 Access-Control-Request-Headers 中。
指明将要使用的请求方法。只指定一个。
\n\n\n此标头必须对预检请求和实际请求都返回
\n
只能指定一个。若为不带 Credentials 请求，也可使用通配符。
\n注意：浏览器的 Origin 请求头，仅当跨源请求会发送，仅当 URL 协议为 chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app 时会正确携带，否则被设置为 Origin: null（例如浏览器直接打开文件，则为 file 协议）
\n\n此标头必须对预检请求和实际请求都返回
\n
指定当客户端发送跨源的 Credentials 时，是否允许客户端获取服务端的响应内容。
（也可以说，是否允许客户端发送跨源 Credentials，不允许就不能获取服务端响应内容）
注意：Request.credential = "include" 的请求，就是 发送跨源 Credentials 的请求。
此时请求头会自动携带 Cookie 或 HTTP 认证头。（此时不会携带 Access-Control-Request-Headers: Cookie, Authorization）
在浏览器中手动构造请求时，手动构造的 Cookie 请求头永远会被忽略，就像没有被设置过一样（因为它属于禁止修改的请求头）。
手动构造请求携带的 HTTP 认证请求头，不属于跨源 Credentials。（会携带 Access-Control-Request-Headers: Authorization 预检请求头）
\n\n此标头仅对预检请求有效
\n
指明允许客户端发送的非 CORS 白名单请求头。多个时，可用逗号分隔。
若预检请求携带了 Access-Control-Request-Headers 请求头，则必须响应 Access-Control-Allow-Headers，否则跨源失败。
若客户端的请求是无 Credentials 请求，则可以响应通配符 *，允许所有请求头。
\n\n此标头仅对预检请求有效
\n
与上同理。
\n\n\n有一种特殊情况是客户端手动构造 OPTIONS 请求，此时会发送两个 OPTIONS 请求。
\n
不过实际情况下几乎不可能有人会手动构造 OPTIONS 请求。
\n\n此标头仅对实际请求有效
\n
指明向客户端暴露的响应头。多个时，使用逗号分隔。若为不带 Credentials 请求，也可使用通配符。
对于非暴露的且非 CORS 白名单的响应头，客户端将获取到 null 值。
注意：此响应头必须对实际请求返回，而非 OPTIONS 请求。
\n\n\n此标头仅对预检请求有效
\n
指定 preflight 请求可缓存的秒数。若指定为 -1，则禁用缓存。
目前，Chromium 中默认值为 5，最大可为 7200
一个最宽容的 CORS 配置（不要在生产环境下使用）
\nconst express = require("express");\nconst app = express();\n\napp.use("/*", (req, res, next) => {\n if (req.headers.origin) {\n res.header("access-control-allow-origin", req.headers.origin !== "null" ? req.headers.origin : "*");\n res.header("access-control-allow-credentials", "true");\n }\n next();\n});\n\napp.options("/*", (req, res) => {\n res.header("access-control-allow-headers", req.headers["access-control-request-headers"]);\n res.header("access-control-allow-methods", req.headers["access-control-request-method"]);\n\n res.header("access-control-max-age", "7200");\n\n // 无意义！\n // res.header("access-control-expose-headers", "x-test-expose");\n\n res.send();\n});\n\napp.get("/*", (req, res) => {\n const customHeaders = new Headers({ "x-test-expose": "foo" });\n res.setHeaders(customHeaders);\n res.header("access-control-expose-headers", [...customHeaders.keys()].join(", "));\n\n // 无意义！\n // res.header("access-control-allow-headers", "Authorization");\n // res.header("access-control-allow-methods", "GET,POST,PUT,PATCH,DELETE");\n // res.header("access-control-max-age", "7200");\n\n res.send();\n});\n\napp.listen(3000);\n或者直接使用 http 模块
\nconst http = require("http");\nhttp.createServer((req, res) => {\n enableCORS(req, res);\n // Your logic here...\n res.end();\n}).listen(3000);\n\nfunction enableCORS(req, res) {\n if (!req.headers.origin) return;\n res.setHeader("access-control-allow-origin", req.headers.origin !== "null" ? req.headers.origin : "*");\n res.setHeader("access-control-allow-credentials", "true");\n\n if (req.method === "OPTIONS") {\n res.setHeader("access-control-allow-headers", req.headers["access-control-request-headers"] || "*");\n res.setHeader("access-control-allow-methods", req.headers["access-control-request-method"] || "*");\n res.setHeader("access-control-max-age", "7200");\n } else {\n res.setHeader("access-control-expose-headers", "*");\n }\n}\n纯 css（或者原生标签）
\ninspired by daisyUI
\n详细可搜索：checkbox hack
\n\n See the Pen \n progress by Ray (@YieldRay)\n on CodePen.\n
\n\n\n实际得上 js 库：https://github.com/atomiks/tippyjs
\n","tags":["css"]},{"id":"electron-ipc","url":"https://yieldray.fun/posts/electron-ipc","title":"Electron进程间通信","date_published":"2023-06-01T19:19:19.000Z","date_modified":"2023-06-01T19:19:19.000Z","content_text":"\n在 Electron 中，进程使用 Electron 提供的 ipcMain 和 ipcRenderer 模块进行通信。
这些通道是 任意 （您可以随意命名它们）和 双向 （您可以在两个模块中使用相同的通道名称）的。
显然：ipcMain 在主线程使用，ipcRenderer 在渲染器线程（preload 线程）使用
\n\nPreload 脚本
\n
预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码。
这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。
预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。
预加载脚本使用 Electron 提供的 contextBridge 模块从主线程向渲染线程的 Window 实例暴露接口
ipcMain
IpcMainEvent Object extends Event
const { app, BrowserWindow, ipcMain } = require("electron");\nconst path = require("path");\n\nfunction createWindow() {\n const mainWindow = new BrowserWindow({\n webPreferences: {\n preload: path.join(__dirname, "preload.js"),\n },\n });\n\n // 在主线程中使用 ipcMain 模块\n // 主线程监听信道（单向，仅监听事件，无法返回值）\n // on(channel: string, listener: (event: IpcMainEvent, ...args: any[]) => void): this;\n ipcMain.on("set-title", (event, title) => {\n const webContents = event.sender;\n const win = BrowserWindow.fromWebContents(webContents);\n win.setTitle(title);\n });\n\n mainWindow.loadFile("index.html");\n}\n\n// 下面是样板代码，忽略\napp.whenReady().then(() => {\n createWindow();\n\n app.on("activate", function () {\n if (BrowserWindow.getAllWindows().length === 0) createWindow();\n });\n});\n\napp.on("window-all-closed", function () {\n if (process.platform !== "darwin") app.quit();\n});\nconst { contextBridge, ipcRenderer } = require("electron");\n\ncontextBridge.exposeInMainWorld("electronAPI", {\n // 在 preload 脚本中使用 ipcRenderer 模块\n // send(channel: string, ...args: any[]): void;\n setTitle: (title) => ipcRenderer.send("set-title", title),\n});\n\n\n安全警告
\n
出于安全原因，我们不会直接暴露整个ipcRenderer.sendAPI。 确保尽可能限制渲染器对 Electron API 的访问。
const setButton = document.getElementById("btn");\nconst titleInput = document.getElementById("title");\nsetButton.addEventListener("click", () => {\n const title = titleInput.value;\n window.electronAPI.setTitle(title);\n});\n下面将省略样板代码
\nconst { app, BrowserWindow, ipcMain, dialog } = require("electron");\nconst path = require("path");\n\napp.whenReady().then(() => {\n // 主线程处理信道（双向，可返回值）\n // handle(channel: string, listener: (event: IpcMainInvokeEvent, ...args: any[]) => (Promise<void>) | (any)): void;\n ipcMain.handle("dialog:openFile", async () => {\n const { canceled, filePaths } = await dialog.showOpenDialog();\n if (!canceled) {\n return filePaths[0];\n }\n });\n\n const mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, "preload.js") } });\n mainWindow.loadFile("index.html");\n});\nconst { contextBridge, ipcRenderer } = require("electron");\n\ncontextBridge.exposeInMainWorld("electronAPI", {\n // invoke(channel: string, ...args: any[]): Promise<any>\n openFile: () => ipcRenderer.invoke("dialog:openFile"), // => Promise<string>\n});\nconst btn = document.getElementById("btn");\nconst filePathElement = document.getElementById("filePath");\n\nbtn.addEventListener("click", async () => {\n const filePath = await window.electronAPI.openFile();\n filePathElement.innerText = filePath;\n});\n将消息从主进程发送到渲染器进程时，需要指定是哪一个渲染器接收消息。
消息需要通过其 WebContents 实例发送到渲染器进程。
此 WebContents 实例包含一个 send 方法，其使用方式与 ipcRenderer.send 相同。
const { app, BrowserWindow, Menu, ipcMain } = require("electron");\nconst path = require("path");\n\napp.whenReady().then(() => {\n ipcMain.on("counter-value", (_event, value) => {\n console.log(value); // 主线程是 Node.js 环境，故将打印在 Node.js 控制台\n });\n\n Menu.setApplicationMenu(\n Menu.buildFromTemplate([\n {\n label: app.name,\n submenu: [\n {\n click: () => mainWindow.webContents.send("update-counter", 1),\n label: "Increment",\n },\n {\n click: () => mainWindow.webContents.send("update-counter", -1),\n label: "Decrement",\n },\n ],\n },\n ]),\n );\n\n const mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, "preload.js") } });\n mainWindow.loadFile("index.html");\n mainWindow.webContents.openDevTools();\n});\nconst { contextBridge, ipcRenderer } = require("electron");\n\ncontextBridge.exposeInMainWorld("electronAPI", {\n handleCounter: (callback) => ipcRenderer.on("update-counter", callback),\n});\nconst counter = document.getElementById("counter");\n\nwindow.electronAPI.handleCounter((event, value) => {\n const oldValue = Number(counter.innerText);\n const newValue = oldValue + value;\n counter.innerText = newValue;\n event.sender.send("counter-value", newValue);\n});\n# 编译32位所需\nsudo apt-get install build-essential module-assistant\nsudo apt-get install gcc-multilib g++-multilib\n![\"\"](\"/media/gcc-compile.svg\")
gcc -E hello.c -o hello.i\ngcc -S hello.i -o hello.s\ngcc -c hello.s -o hello.o\ngcc hello.o -o hello\n# -m32 编译32位\n# -g 开启调试信息\ngcc -E -g -m32 gdbtest.c -o gdbtest.i\ngcc -S -g -m32 gdbtest.i -o gdbtest.s\ngcc -c -g -m32 gdbtest.s -o gdbtest.o\ngcc -O0 -m32 -g gdbtest.c -o gdbtestl\n\n# -S 在反汇编后的内容中添加源代码\nobjdump -S gdbtest.o > gdbtesto.txt\nobjdump -S gdbtest > gdbtest.txt\n\n\ngcc -O0 -m32 -g gdbtest.c -o gdbtest\nobjdump -S gdbtest > gdbtest.txt\n| \n | 命令 | \n作用 | \n
|---|---|---|
| ① | \ngdb [可执行文件名] | \n启动 GDB 调试工具，并加载可执行文件 | \n
| \n | - | \n- | \n
| ② | \ngdb | \n启动 GDB 调试工具 | \n
| \n | file [可执行文件名] | \n加载可执行文件 | \n
| 命令 | \n作用 | \n
|---|---|
| break main | \n在 main 函数的入口点处设置断点 | \n
| break gdbtest.c:3 | \n在源程序 gdbtest.c 的第 3 行处设置断点 | \n
| 命令 | \n作用 | \n
|---|---|
| run | \n启动程序运行，程序会在断点处停下 | \n
含义：反映程序已经执行了哪些指令，下一步要执行哪一条指令
eip 寄存器保存下一条将要执行指令的地址
i r : 显示所有寄存器的内容\ni r eip: 只显示寄存器 eip 的内容\ni r eax ebx ecx edx （或 i r）\nx/8xb 0xffffd2bc\n# 从 0xffffd2bc 地址开始的 8 个 32 位的存储单元内容 ， 并用十六进制表示\nx/2xw 0xffffd2bc\n# 从 0xffffd2bc 地址开始的 2 个 32 位的存储单元内容 ， 并用十六进制表示\n说明：IA·32 用栈来支持过程的嵌套调用，过程的入口参数、返回地址、被保存寄存器的值、
被调用过程中的非静态局部变量等都被保存在栈中。栈帧系统为每个执行的过程分配一个栈空间。
esp 栈顶指针 ebp 栈底指针
\n当前栈帧范围： i r esp ebp\n当前栈帧字节数： y=R[ebp] - R[esp]+4
显示当前栈帧内容：\nx/yxb $esp // y：R[ebp] - R[esp]+4 的值，栈帧起始地址是 esp 指向的单元地址\nx/zxw $esp // z=y/4, 显示从 esp 指向的地址开始
![\"\"](\"/media/stack-frame.svg\")
| 命令 | \n作用 | \n
|---|---|
| si | \n执行一条机器指令 | \n
| s | \n执行一条 c 语句 | \n
https://auto-animate.formkit.com/
\nnpm install @formkit/auto-animate\nautoAnimate 函数的第一个参数指定父元素，动画将作用与该父元素和其直接子元素
具体来说，动画将在下列情况触发：
\n若父元素是静态定位，则将自动添加 position: relative
flex 布局时，子元素的位置可能不能立即计算出（例如：flex-grow: 1），此时 autoAnimate 将无效
此时可以手动指定子元素尺寸
import autoAnimate from "https://unpkg.com/@formkit/auto-animate";\n\nautoAnimate(el, {\n // 动画持续时间，单位毫秒 (default: 250)\n duration: 250,\n // Easing for motion (default: 'ease-in-out')\n easing: 'ease-in-out'\n // 强制开启动画，即不遵守 prefers-reduced-motion 规则\n disrespectUserMotionPreference: false\n})\nZod 是一个 TypeScript 优先的模式声明和验证库
\nhttps://zod.dev/
https://zod.dev/README_ZH
import { z } from "https://deno.land/x/zod/mod.ts";\nimport { ZodError } from "https://deno.land/x/zod/ZodError.ts";\nimport { ZodObject } from "https://deno.land/x/zod/mod.ts";\n\n// 原始值\n\nconst mySchema = z.string();\n\nmySchema.parse("zod"); // => "zod"\n\ntry {\n mySchema.parse(12); // ZodError\n} catch (e) {\n if (e instanceof ZodError) {\n // 这个 error 的 message 是 issues 属性 JSON.stringify 得到的\n // 所以直接访问 issue 属性\n console.log(e.issues);\n }\n}\n\nmySchema.safeParse("zod"); // => { success: true; data: "zod" }\nmySchema.safeParse(12); // => { success: false; error: ZodError }\n\n// 对象\n\nconst User = z.object({\n username: z.string(),\n});\n\nUser.parse({ username: "Ray" }); // => { username: "Ray" }\n\ntype User = z.infer<typeof User>; // { username: string }\n\nconsole.assert(User instanceof ZodObject);\n// 验证\nz.string().max(5);\nz.string().min(5);\nz.string().length(5);\nz.string().email();\nz.string().url();\nz.string().emoji();\nz.string().uuid();\nz.string().cuid();\nz.string().cuid2();\nz.string().ulid();\nz.string().regex(regex);\nz.string().includes(string);\nz.string().startsWith(string);\nz.string().endsWith(string);\nz.string().datetime(); // 默认为 UTC\nz.string().datetime({ offset: true }); // 其它选项略\nz.string().ip();\nz.string().ip({ version: "v4" });\nz.string().ip({ version: "v6" });\n\n// 转换\nz.string().trim();\nz.string().toLowerCase();\nz.string().toUpperCase();\n\n// 自定义错误信息\nz.string({\n required_error: "Name is required",\n invalid_type_error: "Name must be a string",\n});\nz.string().url({ message: "Invalid url" });\n// 自定义错误信息\nconst age = z.number({\n required_error: "Age is required",\n invalid_type_error: "Age must be a number",\n});\n\n// 验证\nz.number().gt(5);\nz.number().gte(5); // alias .min(5)\nz.number().lt(5);\nz.number().lte(5); // alias .max(5)\n\nz.number().int(); // value must be an integer\n\nz.number().positive(); // > 0\nz.number().nonnegative(); // >= 0\nz.number().negative(); // < 0\nz.number().nonpositive(); // <= 0\n\nz.number().multipleOf(5); // Evenly divisible by 5. Alias .step(5)\n\nz.number().finite(); // value must be finite, not Infinity or -Infinity\nz.number().safe(); // value must be between Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER\n\n// 自定义错误信息\nz.number().lte(5, { message: "this👏is👏too👏big" });\nconst px = z.custom<`${number}px`>((val) => {\n return /^\\d+px$/.test(val as string);\n});\n\ntype px = z.infer<typeof px>; // `${number}px`\n\npx.parse("42px"); // "42px"\npx.parse("42vw"); // throws;\nconst myString = z.string().refine((val) => val.length <= 255, {\n message: "String can't be more than 255 characters",\n});\n\nconst longString = z.string().refine(\n (val) => val.length > 10,\n (val) => ({ message: `${val} is not more than 10 characters` }),\n);\n若 schema 定义了异步过程，则需要使用特殊的 parse 方法
\nconst userId = z.string().refine(async (id) => {\n // verify that ID exists in database\n return true;\n});\n\nconst IdToUser = z\n .string()\n .uuid()\n .transform(async (id) => {\n return await getUserById(id);\n });\n\nuserId.parseAsync(xxx);\nidToUser.safeParseAsync(xxx);\nhttps://zod.dev/?id=schema-methods
\n","tags":["typescript","lib"]},{"id":"covariance-contravariance","url":"https://yieldray.fun/posts/covariance-contravariance","title":"协变和逆变","date_published":"2023-05-22T20:20:20.000Z","date_modified":"2023-05-22T20:20:20.000Z","content_text":"\n在 C# 中，协变和逆变能够实现数组类型、委托类型和泛型类型参数的隐式引用转换。
\n协变保留分配兼容性，逆变则与之相反。
\n// 分配兼容性\nstring str = "test";\n// 派生程度更大 的类型可分配（赋值）给 派生程度更小 的类型\nobject obj = str;\n\n// 协变\nIEnumerable<string> strings = new List<string>();\n// 实例化为 派生程度更大 的类型参数，被分配给实例化为 派生程度更小 的类型参数\n// 分配兼容性被保留(preserved)了（即：能将 派生程度更大 的类型分配给 派生程度更小 的类型）\nIEnumerable<object> objects = strings;\n// | |\n// less derived |\n// more derived\n\n// 逆变\n// 假设下列方法是类中的方法\nstatic void SetObject(object o) { }\nAction<object> actObject = SetObject;\n// 派生程度更小 类型参数实例化的对象，被分配给 派生程度更大 类型参数实例化的对象\n// 分配兼容性被逆转(reversed)了（即：能将 派生程度更小 的类型分配给 派生程度更大 的类型）\nAction<string> actString = actObject;\n// | |\n// more derived |\n// less derived\nMoreDerived = 更具体
LessDerived = 更抽象
MoreDerived extends LessDerived
LessDerived super MoreDerived
返回派生程度更大的类型的方法（协变）
接受具有派生程度更小的类型的参数的方法（逆变）
static object GetObject() { return null; }\nstatic void SetObject(object obj) { }\n\nstatic string GetString() { return ""; }\nstatic void SetString(string str) { }\n\nstatic void Test()\n{\n // 协变。\n // 委托类型的返回类型是 object，但该委托类型也接受返回 string 的委托类型\n Func<object> del = GetString;\n // 注：一个函数返回的值更具体，这个值就可以被分配给更抽象的类型\n\n // 逆变。\n // 委托类型的参数是 string 类型，但该委托类型也接受参数为 object 的委托类型\n Action<string> del2 = SetObject;\n // 注：一个函数能使用一个更抽象的参数就能使用更具体的参数\n}\n可通过对泛型类型参数使用 in 和 out 关键字来声明变体泛型接口
\n可以使用 out 关键字将泛型类型参数声明为协变。
协变类型必须满足以下条件：
interface ICovariant<out R>\n{\n R GetSomething();\n // 下列声明将导致编译错误\n // void SetSomething(R sampleArg);\n\n // 此规则有一个例外。 如果具有用作方法参数的逆变泛型委托，则可将类型用作该委托的泛型类型参数\n void DoSomething(Action<R> callback);\n}\ninterface ICovariant<out R>\n{\n // 下列声明将导致编译错误\n // 因为只能在泛型参数中哦使用 逆变 或 不变 类型\n // void DoSomething<T>() where T : R;\n}\n![\"1.png\"](\"https://s2.loli.net/2023/05/22/tsI6oXPR1Hnv5Li.png\")
可以使用 in 关键字将泛型类型参数声明为逆变。
逆变类型只能用作方法参数的类型，不能用作接口方法的返回类型。
逆变类型还可用于泛型约束。
以下代码演示如何声明逆变接口，以及如何将泛型约束用于其方法之一。
interface IContravariant<in A>\n{\n void SetSomething(A sampleArg);\n void DoSomething<T>() where T : A;\n // 下列声明将导致编译错误\n // A GetSomething();\n}\n此外，还可以在同一接口中同时支持协变和逆变，但需应用于不同的类型参数，如以下代码示例所示。
\ninterface IVariant<out R, in A>\n{\n R GetSomething();\n void SetSomething(A sampleArg);\n R GetSetSomethings(A sampleArg);\n}\n![\"2.png\"](\"https://s2.loli.net/2023/05/22/yXfHULcWdBqZDA1.png\")
参见：https://github.com/microsoft/TypeScript/pull/48240
\n","tags":["design"]},{"id":"linux-screen","url":"https://yieldray.fun/posts/linux-screen","title":"screen命令","date_published":"2023-05-21T16:38:38.000Z","date_modified":"2023-05-21T16:38:38.000Z","content_text":"https://www.gnu.org/software/screen/manual/screen.html
\n# 列出所有 session\nscreen -ls\n\n# 创建新 session，默认名称带有 tty.host 后缀\n# 注：创建新 session 后都会直接 attach 到该 session\nscreen\n\n# 创建新 session，并指定名称\nscreen -S <session-name>\n\n# 创建新 session，若该名称已存在就不创建\nscreen -R <session-name>\n\n# 重新回到指定 session\nscreen -r <pid>|<session-name>\n\n# -X 选项将指定命令发送至 session\nscreen -R/-r/-S <pid>|<session-name> -X quit\n\n# detach\nscreen -d\n# 也可以通过快捷键：C-a d\nterminal multiplexer
tmux 是一个终端复用器
（注：tmux 来自于 OpenBSD）
https://github.com/tmux/tmux/wiki/Getting-Started
https://wiki.archlinuxcn.org/wiki/Tmux
https://learnxinyminutes.com/docs/zh-cn/tmux-cn/
tmux 的主要用途是：
\n$ man 1 tmux\n![\"tmux_pane_diagram\"](\"https://i0.wp.com/github.com/tmux/tmux/wiki/images/tmux_pane_diagram.png\")
术语
\n| 术语 | \n描述 | \n
|---|---|
| Client | \n可以通过类似于 xterm 的终端 attach 到一个 tmux 的 session | \n
| Session | \n一个或一组 window | \n
| Window | \n一个或一组 pane | \n
| Pane | \n包含一个终端和运行中的程序，出现在一个 window 中 | \n
| Active pane | \ncurrent window 中的 pane | \n
| Current window | \nattached session 中的 window （where typing is sent） | \n
| Last window | \n上一个 current window | \n
| Session name | \nsession 的名称，默认从 0 开始计数 | \n
| Window list | \n一个 session 中的 window 列表，按编号的大小排序 | \n
| Window name | \nwindow 的名称，默认是当前 active pane 中运行着的程序的名称 | \n
| Window index | \nwindow 在一个 session 的 window list 中的编号 | \n
| Window layout | \nwindow 中的所有 pane 中的尺寸和位置 | \n
当一个 tmux 的 client 被 attach，屏幕底部将显示一条状态栏
\n![\"tmux_status_line_diagram\"](\"https://i0.wp.com/raw.githubusercontent.com/wiki/tmux/tmux/images/tmux_status_line_diagram.png\")
# 创建一个 session 并 attach\ntmux new\ntmux new-session\n\n# session 默认从 0 开始命名，可以手动指定名称\ntmux new -s my_session_name\n\n# 默认情况下 tmux 会 attach 到新建的 session，并运行 shell\n# 可以给定一个命令，tmux 就会将其传递给 shell\n# 注：不会新建 session，也不会 attach\ntmux new 'emacs ~/.tmux.conf'\n# or\ntmux new -- emacs ~/.tmux.conf\n\n# 默认情况下 tmux 会在 session 中的第一个 window 中运行命令\n# 可以给定 -n 选项，指定一个 window 来运行命令\ntmux new -n mytopwindow -- top\ndetach 意味着 client 存在的情况下从终端外部分离，回到 shell 并使 tmux 中运行的程序在后台运行
\n# C-b d\ntmux detach\n\ntmux attach\ntmux attach-session\n\n# attach 到指定 session\ntmux attach -t <session-name>\n\n# -d 选项，attach 到终端时使其它 client 被 detach\ntmux attach -dt <session-name>\n\n# new-session 子命令提供 -A 选项，允许 attach 到指定 session\n# 若指定 session 不存在则创建\ntmux new -As <session-name>\n\n# 列出所有可被 attach 的 session\ntmux ls\ntmux list-session\n# 若 tmux 中没有 session、window 和 pane，tmux 将自动 exit\n# 也可以使用此命令关闭\ntmux kill-server\n\ntmux kill-session -t <session-name>\n\ntmux switch -t <session-name>\n\ntmux swap-window\n\ntmux move-window\n\ntmux swap-pane\n\n# 重命名 session\n# C-b $\ntmux rename-session -t <session-name> <new-name>\n\n# 重命名 window\n# C-b ,\ntmux rename-window -t <window-name> <new-name>\n# 列出所有子目录\ntmux list-commands\n\n# 列出所有快捷键\ntmux list-keys\n当一个 tmux 的 client 被 attach，键盘输入将转发到 current window 中的 active pane 中运行的程序。
prefix key 是特殊的快捷键，可用于控制 tmux 自身
\n\n注：C=
\nCtrlM=Meta=Alt
tmux 的快捷键前缀是 C-b，按下 Ctrl+B 并松开
再按下 ? 可以查看快捷键列表
按两次 C-b 可向程序本身发送一次 Ctrl+B
# 默认上下分\ntmux splitw\ntmux split-window\n\n# 上下分\n# C-b "\ntmux splitw -v\n\n# 左右分\n# C-b %\ntmux splitw -h\n# 打印 pane 各自的序号\n# C-b q\ntmux display-panes\n\n# 切换到指定序号\n# C-b q <序号>\ntmux select-pane <序号>\n\n# 通过上下左右键切换 pane\n# C-b Up C-b Down C-b Left C-b Right\n\n# 切换到下一个 pane\n# C-b o\n\n# 将下一个 pane 的内容与 当前 pane 交换\n# C-b C-o\n\n# kill 当前 window（包含所有 pane）\n# C-b &\ntmux kill-window\n\n# kill 选中的 pane\n# C-b x\ntmux kill-pane\n树模式将窗口分为上下两个部分：
上面是 session-window-pane 树
下面是 pane 的预览区域
# 进入 tree 模式\ntmux choose-tree\n# C-b s\n# C-b w\n| Key | \nFunction | \n
|---|---|
Up Down | \n在树中导航 | \n
Left | \n折叠 | \n
Right | \n展开 | \n
Enter | \n进入到选择的项目（变为被 attach 的 session） | \n
O | \n改变项目的顺序 | \n
q | \n退出 | \n
t | \n选中（tag）或取消选中当前项目 | \n
T | \n全部取消选中 | \n
C-t | \n选中所有项目 | \n
x | \nkill 当前项目 | \n
X | \nkill 所有被 tag 的项目 | \n
v | \n打开或关闭下半部分的预览 | \n
# 进入 client 模式\n# C-b D\n| Key | \nFunction | \n
|---|---|
Enter | \ndetach 当前 client | \n
d | \n同上 | \n
D | \ndetach 选中的（tagged）client | \n
x | \ndetach 当前 client 并尝试 kill 其启动的 shell | \n
X | \ndetach 选中的（tagged） client 并尝试 kill 其启动的 shell | \n
tmux resize-pane\n调小 C-b C-Left C-b C-Right C-b C-Up C-b C-Down
调大 C-b M-Left C-b M-Right C-b M-Up C-b M-Down
``
\n| Key | \nFunction | \n
|---|---|
C-b z | \n将当前全屏，再按一次退出全屏 | \n
C-b Space | \n旋转布局 | \n
| Name | \nKey | \nDescription | \n
|---|---|---|
| even-horizontal | \nC-b M-1 | \nSpread out evenly across | \n
| even-vertical | \nC-b M-2 | \nSpread out evenly up and down | \n
| main-horizontal | \nC-b M-3 | \nOne large pane at the top, the rest spread out evenly across | \n
| main-vertical | \nC-b M-4 | \nOne large pane on the left, the rest spread out evenly up and down | \n
| tiled | \nC-b M-5 | \nTiled in the same number of rows as columns | \n
C-b :
![\"tmux_command_prompt\"](\"https://i0.wp.com/github.com/tmux/tmux/wiki/images/tmux_command_prompt.png\")
支持鼠标操作（右键）
\ntmux set-option mouse on\n# :set -g mouse on\npackage main\n\nimport "fmt"\n\nvar ints = map[string]int64{"0": 8, "1": 0, "2": 8, "3": 6}\nvar floats = map[string]float64{"k1": 1.1, "k2": 2.2}\n\n// comparable 是预定义的类型约束\nfunc SumIntsOrFloats[K comparable, V int64 | float64](m map[K]V) V {\n var s V\n for _, v := range m {\n s += v\n }\n return s\n}\n\nfunc init() {\n // 手动指定泛型参数\n fmt.Printf("Generic Sums: %v and %v\\n",\n SumIntsOrFloats[string, int64](ints),\n SumIntsOrFloats[string, float64](floats))\n\n // 编译器自动推导泛型参数\n fmt.Printf("Generic Sums, type parameters inferred: %v and %v\\n",\n SumIntsOrFloats(ints),\n SumIntsOrFloats(floats))\n}\n\n// 下面的语法可以定义一个类型约束\ntype Number interface {\n int64 | float64\n}\n\n// 使用自定义类型约束\nfunc SumNumbers[K comparable, V Number](m map[K]V) V {\n var s V\n for _, v := range m {\n s += v\n }\n return s\n}\n\nfunc init() {\n fmt.Printf("Generic Sums with Constraint: %v and %v\\n",\n SumNumbers(ints),\n SumNumbers(floats))\n}\n\nfunc main() {}\n中文参考：https://studygolang.com/pkgdoc
\npackage main\n\nimport (\n "fmt"\n "runtime"\n)\n\nfunc thread() {\n defer func() {\n if err := recover(); err != nil {\n fmt.Println(err)\n }\n }()\n // 在 recover 函数之后的 panic 才会被捕获\n panic("Oops! panic")\n}\n\nfunc main() {\n go thread() // recover函数仅对当前goroutine有效\n\n defer func() { // recover函数必须置于defer函数内，且在panic代码之前\n if err := recover(); err != nil {\n\n switch err.(type) {\n case runtime.Error:\n fmt.Println("[runtime.Error]", err)\n default:\n fmt.Println("[Error]:", err)\n }\n\n }\n }()\n\n var ptr *int\n fmt.Println(*ptr) // 访问空指针\n}\nfmt.Print(x)\n// 相当于\nfmt.Printf("%v", x)\npackage main\n\nimport "fmt"\n\nfunc echo(format string, a ...any) {\n // fmt.Printf("%-20s %-6s", fmt.Sprint(a...), format)\n fmt.Printf(format, a...)\n fmt.Println()\n}\n\ntype TypeStruct struct {\n Public string\n private string\n}\n\nfunc main() {\n t := TypeStruct{"PUBLIC", "PRIVATE"}\n echo("%v", t) // {PUBLIC PRIVATE}\n echo("%+v", t) // {Public:PUBLIC private:PRIVATE}\n echo("%#v", t) // main.TypeStruct{Public:"PUBLIC", private:"PRIVATE"}\n echo("%T", t) // main.TypeStruct\n // 注：匿名结构体的输出有所不同，此处略\n // s := struct{ Public string; private string } {"PUBLIC", "PRIVATE"}\n\n n := 42\n echo("%c", n) // * （Unicode）\n echo("%q", n) // '*'\n echo("%U", n) // U+002A\n echo("%b", n) // 101010 （二进制）\n echo("%d", n) // 42 （十进制）\n echo("%o", n) // 52 （八进制）\n echo("%O", n) // 0o52 （八进制）\n echo("%x", n) // 2a （十六进制）\n echo("%X", n) // 2A\n\n f := 12.34\n echo("%b", f) // 6946802425218990p-49\n echo("%e", f) // 1.234000e+01\n echo("%E", f) // 1.234000E+01\n echo("%f", f) // 12.340000\n echo("%F", f) // 12.340000 （同上，没有区别）\n echo("%g", f) // 12.34\n echo("%G", f) // 12.34\n echo("%x", f) // 0x1.8ae147ae147aep+03\n echo("%X", f) // 0X1.8AE147AE147AEP+03\n\n s := "golang"\n echo("%s", s) // golang\n echo("%q", s) // "golang"\n echo("%x", s) // 676f6c616e67\n echo("%X", s) // 676F6C616E67\n // 注：若 s := []byte("golang") 结果相同\n\n a := []int{2, 3, 3} // 注意这是切片不是数组\n echo("%p", a) // 0xc0000aa0f0 （地址不是固定的）\n\n echo("%t", true) // true\n echo("%t", false) // false\n\n echo("%v", false) // 相当于 %t\n echo("%v", int(-42)) // 相当于 %d\n echo("%v", uint(42)) // 相当于 %d\n echo("%v", float32(12.34)) // 相当于 %g\n echo("%v", s) // 相当于 %s\n echo("%v", make(chan interface{})) // 相当于 %p\n echo("%v", &s) // 相当于 %p\n}\n%[标志][最小宽度][.精度][长度]类型
精度以 Unicode 码点计数（而不是像 C 一样以字节计数）
package main\n\nimport (\n "errors"\n "fmt"\n "io/fs"\n "os"\n)\n\nfunc main() {\n // func New(text string) error\n // 给定字符串生成（独一无二的）错误\n // 参见：fmt.Errorf()\n err := errors.New("emit macho dwarf: elf header corrupted")\n if err != nil {\n fmt.Print(err)\n }\n\n // func As(err error, target any) bool\n // 将错误 err 断言为错误 target，返回是否断言成功\n if _, err := os.Open("non-existing"); err != nil {\n var pathError *fs.PathError\n if errors.As(err, &pathError) {\n fmt.Println("Failed at path:", pathError.Path)\n } else {\n fmt.Println(err)\n }\n }\n\n // func Is(err, target error) bool\n // 判断错误 err 是否为错误 target\n if _, err := os.Open("non-existing"); err != nil {\n if errors.Is(err, fs.ErrNotExist) {\n fmt.Println("file does not exist")\n } else {\n fmt.Println(err)\n }\n }\n\n // func Join(errs ...error) error\n // 提供包装给定的多个错误生成新错误\n // 在给定的错误中，是 nil 的错误会被丢弃\n err1 := errors.New("err1")\n err2 := errors.New("err2")\n err3 := errors.Join(err1, err2)\n fmt.Println(err3) // 该错误的字符串是其包装的错误字符串之间加上换行\n if errors.Is(err3, err1) {\n fmt.Println("err3 is err1")\n }\n if errors.Is(err3, err2) {\n fmt.Println("err3 is err2")\n }\n\n // func Unwrap(err error) error\n // 若给定错误 err 对象实现了方法 Unwrap()，则调用该方法返回错误\n // 否则，返回 nil\n err4 := errors.New("error4")\n err5 := fmt.Errorf("error5: %w", err4) // 参见：https://pkg.go.dev/fmt#Errorf\n fmt.Println(errors.Unwrap(err5) == err4) // true\n}\ntype Reader interface {\n // 读取最多 len(p) 个字节到 p，返回读取的字节数 0 <= n <= len(p) 及任何遇到的错误（如果有）\n // 即使 n < len(p) 也可能在调用期间 p 的所有空间作为暂存空间\n // 并且，此时 Read() 一般直接返回读取的数据（p 未填满），而不会继续等待更多的数据（以填满 p）\n Read(p []byte) (n int, err error)\n}\n\ntype Writer interface {\n // 写入 len(p) 个字节到底层的数据流，返回写入的字节数 0 <= n <= len(p) 及任何遇到的错误（如果有）\n // 若返回的 n < len(p) 则必须返回非 nil 的错误\n // Write() 不允许修改切片 p 中的数据（如果要实现此接口）\n Write(p []byte) (n int, err error)\n}\n\ntype Closer interface {\n // 包装基本的关闭方法。重复调用此方法的行为是未定义的\n Close() error\n}\n\nconst (\n SeekStart = 0 // 相对于文件起始位置\n SeekCurrent = 1 // 相对于当前位置\n SeekEnd = 2 // 相对于文件结尾 (for example, offset = -2 specifies the penultimate byte of the file)\n)\n\ntype Seeker interface {\n // 设定下一次读写的偏移量为 offset\n // whence 可取常量 SeekStart SeekCurrent SeekEnd（其含义参见上面的解释）\n // 返回新的偏移量（相对于文件起始位置）及任何可能的错误\n Seek(offset int64, whence int) (int64, error)\n}\n\n\n注意：
\nio/ioutil包已废弃。其功能拆分到了io和os包里
os 包主要提供了文件。进程相关的跨平台 API
\n参见 File 类方法
\nfunc Open(name string) (*File, error)\n// 文件描述符是 O_RDONLY。若发生错误，返回的错误类型是 *PathError\n\nfunc Create(name string) (*File, error)\n// 若文件已存在，会被清空。否则将以 0666 模式创建（before umask）。\n// 文件描述符是 O_RDWR。若发生错误，返回的错误类型是 *PathError\n\ntype PathError struct {\n Op string\n Path string\n Err error\n}\n参见 Process 类方法及 ProcessState 类方法
\nfunc FindProcess(pid int) (*Process, error)\nfunc StartProcess(name string, argv []string, attr *ProcAttr) (*Process, error)\n// 一般使用 os/exec 包提供的高层接口，而不是此函数\n常量
\n// 文件描述符，类型是 uintptr。例如：func NewFile(fd uintptr, name string) *File\nconst (\n // 必须指定下面三个之中的一个\n O_RDONLY int = syscall.O_RDONLY // open the file read-only.\n O_WRONLY int = syscall.O_WRONLY // open the file write-only.\n O_RDWR int = syscall.O_RDWR // open the file read-write.\n // The remaining values may be or'ed in to control behavior.\n O_APPEND int = syscall.O_APPEND // append data to the file when writing.\n O_CREATE int = syscall.O_CREAT // create a new file if none exists.\n O_EXCL int = syscall.O_EXCL // used with O_CREATE, file must not exist.\n O_SYNC int = syscall.O_SYNC // open for synchronous I/O.\n O_TRUNC int = syscall.O_TRUNC // truncate regular writable file when opened.\n)\n// 指定如何解释偏移量。例如：func (f *File) Seek(offset int64, whence int) (ret int64, err error)\n// Deprecated: Use io.SeekStart, io.SeekCurrent, and io.SeekEnd.\nconst (\n SEEK_SET int = 0 // 相当于文件起始\n SEEK_CUR int = 1 // 相对于当前偏移量\n SEEK_END int = 2 // 相对于文件结尾\n)\nconst (\n PathSeparator = '/' // OS-specific path separator\n PathListSeparator = ':' // OS-specific path list separator\n)\ntype File interface {\n Stat() (FileInfo, error)\n Read([]byte) (int, error)\n Close() error\n}\ntype FileInfo interface {\n Name() string // 文件名，basename\n Size() int64 // length in bytes for regular files; system-dependent for others\n Mode() FileMode // file mode bits\n ModTime() time.Time // 修改时间\n IsDir() bool // 即 Mode().IsDir()\n Sys() any // underlying data source (can return nil)\n}\ntype DirEntry interface {\n // 返回文件或目录名。仅名称，非完整路径\n Name() string\n IsDir() bool\n Type() FileMode\n // 返回子项（文件或子目录）的信息。返回的 FileInfo 既可能在读取父目录时发生，也可能在调用Info方法时发生\n // 若文件在父目录被读取后被删除或重命名，Info方法可能返回一个满足 errors.Is(err, ErrNotExist) 的错误\n // 若文件是符号链接，info方法返回符号链接自身的信息\n Info() (FileInfo, error)\n}\n\n// 具体参见 FileMode 类方法\n// https://pkg.go.dev/io/fs#FileMode\ntype FileMode uint32\nconst (\n // The single letters are the abbreviations\n // used by the String method's formatting.\n ModeDir FileMode = 1 << (32 - 1 - iota) // d: is a directory\n ModeAppend // a: append-only\n ModeExclusive // l: exclusive use\n ModeTemporary // T: temporary file; Plan 9 only\n ModeSymlink // L: symbolic link\n ModeDevice // D: device file\n ModeNamedPipe // p: named pipe (FIFO)\n ModeSocket // S: Unix domain socket\n ModeSetuid // u: setuid\n ModeSetgid // g: setgid\n ModeCharDevice // c: Unix character device, when ModeDevice is set\n ModeSticky // t: sticky\n ModeIrregular // ?: non-regular file; nothing else is known about this file\n\n // Mask for the type bits. For regular files, none will be set.\n ModeType = ModeDir | ModeSymlink | ModeNamedPipe | ModeSocket | ModeDevice | ModeCharDevice | ModeIrregular\n\n ModePerm FileMode = 0777 // Unix permission bits\n)\n注意：path 包用于处理正斜线分隔路径（及 URL）
跨平台时使用 path/filepath 包，该包还提供了正反斜线转换的函数
此外还提供了用于递归遍历目录的 Walk() 和 WalkDir() 函数
Builder 类可用于构造字符串
\nvar sb strings.Builder\nsb.WriteString("hello,")\nsb.Write([]byte("world"))\nfmt.Print(sb.String())\nbytes 包类似于 strings 包，提供了 byte 切片（[]byte）相关的实用函数
strconv 包实现了基本数据类型与字符串之间的转换
\nfunc Marshal(v any) ([]byte, error)
func Unmarshal(data []byte, v any) error
此处略：Duration
参见：https://go.dev/blog/concurrency-timeouts
var Local *Location = &localLoc\nvar UTC *Location = &utcLoc\nfunc FixedZone(name string, offset int) *Location\n\nutc_negative_8 := time.FixedZone("UTC-8", -8*60*60)\nfunc Now() Time\nfunc Date(year int, month Month, day, hour, min, sec, nsec int, loc *Location) Time\nfunc Unix(sec int64, nsec int64) Time\nfunc UnixMicro(usec int64) Time\nfunc UnixMilli(msec int64) Time\nfunc Parse(layout, value string) (Time, error)\nfunc (t Time) Format(layout string) string\nlayout 可取（或者说格式为）
\nconst (\n Layout = "01/02 03:04:05PM '06 -0700" // The reference time, in numerical order.\n ANSIC = "Mon Jan _2 15:04:05 2006"\n UnixDate = "Mon Jan _2 15:04:05 MST 2006"\n RubyDate = "Mon Jan 02 15:04:05 -0700 2006"\n RFC822 = "02 Jan 06 15:04 MST"\n RFC822Z = "02 Jan 06 15:04 -0700" // RFC822 with numeric zone\n RFC850 = "Monday, 02-Jan-06 15:04:05 MST"\n RFC1123 = "Mon, 02 Jan 2006 15:04:05 MST"\n RFC1123Z = "Mon, 02 Jan 2006 15:04:05 -0700" // RFC1123 with numeric zone\n RFC3339 = "2006-01-02T15:04:05Z07:00"\n RFC3339Nano = "2006-01-02T15:04:05.999999999Z07:00"\n Kitchen = "3:04PM"\n // Handy time stamps.\n Stamp = "Jan _2 15:04:05"\n StampMilli = "Jan _2 15:04:05.000"\n StampMicro = "Jan _2 15:04:05.000000"\n StampNano = "Jan _2 15:04:05.000000000"\n DateTime = "2006-01-02 15:04:05"\n DateOnly = "2006-01-02"\n TimeOnly = "15:04:05"\n)\ntype Timer struct {\n C <-chan Time\n // contains filtered or unexported fields\n}\nTimer 类型表示一个单一的事件。当 Timer（计时器）到期时，当前时间会发送到信道 C（除非这个 Timer 是通过 AfterFunc 函数创建的）
Timer 类必须通过 NewTimer 或 AfterFunc 函数创建。
type Ticker struct {\n C <-chan Time // 这是 tick 将要发送到的信道\n // contains filtered or unexported fields\n}\nTicker 类型持有一个信道，会定期向该信道发送 ticks。
注：通过 NewTicker 函数创建
func main() {\n matched, err := regexp.MatchString(`^[A-Z]+?[A-Za-z]*$`, "Admin")\n fmt.Println(matched, err) // true <nil>\n}\n对于更复杂的正则表达式，应构造 Regexp 对象
\nfunc Compile(expr string) (*Regexp, error)\nfunc MustCompile(str string) *Regexp\nfunc (re *Regexp) FindStringSubmatch(s string) []string\n//go:embed 指令可被用于导出和非导出变量，取决于使用此指令的包是否要向其它包公开此变量。此指令只能用于包作用域的变量，不能用于局部变量。
import _ "embed"\n\n//go:embed hello.txt\nvar s string\nprint(s)\n\n//go:embed hello.txt\nvar b []byte\nprint(string(b))\n\n//go:embed hello.txt\nvar f embed.FS\ndata, _ := f.ReadFile("hello.txt")\nprint(string(data))\n\n// The difference is that ‘image/*’ embeds ‘image/.tempfile’ while ‘image’ does not.\n// Neither embeds ‘image/dir/.tempfile’.\nimport "embed"\n//go:embed image/* template/*\n//go:embed html/index.html\nvar content embed.FS\n//go:embed image template html/index.html\nvar content embed.FS\n// If a pattern begins with the prefix ‘all:’, then the rule for walking directories is changed to include those files beginning with ‘.’ or ‘_’.\n// For example, ‘all:image’ embeds both ‘image/.tempfile’ and ‘image/dir/.tempfile’.\nfunc (f FS) Open(name string) (fs.File, error)\nfunc (f FS) ReadDir(name string) ([]fs.DirEntry, error)\nfunc (f FS) ReadFile(name string) ([]byte, error)\n参见：Go Concurrency Patterns: Context
\nsync 包提供了基本的同步原语
\n参见：https://go.dev/blog/laws-of-reflection
\n","tags":["golang"]},{"id":"cssom","url":"https://yieldray.fun/posts/cssom","title":"CSSOM","date_published":"2023-05-07T10:00:00.000Z","date_modified":"2023-05-07T10:00:00.000Z","content_text":"实际上并没有单独的 StyleSheet 类出现，只有 CSSStyleSheet。
该类表示单个 CSS 样式表，样式表则是包含 CSSRule 的集合。CSSStyleSheet 是可直接构造的。如非手动通过 js 构造，则其来源如下：
| 来源 | \n存在于 document.styleSheets | \n获取 owner 元素或规则 | \nowner | \n获取 CSSStyleSheet | \n
|---|---|---|---|---|
<style> 和 <link> | \n是 | \n.ownerNode | \n对应 Element | \n.sheet | \n
其它样式表中的 @import 规则 | \n是 | \n.ownerRule | \nCSSImportRule | \n.styleSheet | \n
<?xml-stylesheet ?> 处理指令 | \n是 | \n.ownerNode | \nProcessingInstruction | \n.sheet | \n
| HTTP Link Header | \n是 | \n无 | \n无 | \n无 | \n
| 浏览器默认样式表 | \n否 | \n无 | \n无 | \n无 | \n
document.styleSheets（StyleSheetList）只读，可以迭代为 CSSStyleSheet。
interface StyleSheetList {\n readonly length: number;\n item(index: number): CSSStyleSheet | null;\n [index: number]: CSSStyleSheet;\n}\n\n\nChrome>=73
\nadoptedStyleSheets是DocumentOrShadowRoot接口上的一个属性
/**\n * 即 Document 或 ShadowRoot\n *\n * @see https://github.com/microsoft/TypeScript/blob/16a36a71f13893bb0d99be45b9b0b3f53fa56a91/src/lib/dom.generated.d.ts#L7421\n */\ninterface DocumentOrShadowRoot {}\n\nconst shadowRoot: ShadowRoot = document.createElement("div").attachShadow({ mode: "open" });\nshadowRoot.adoptedStyleSheets; // CSSStyleSheet[]\n\nconst doc: Document = document;\ndoc.adoptedStyleSheets; // CSSStyleSheet[]\ndocument.adoptedStyleSheets（CSSStyleSheet[]）可读写，只包含通过 CSSStyleSheet() 构造函数构造的样式表。
（实际上是一个 Proxy）会按照 CSS 层叠算法与文档的其他样式表一起进行评估。
CSSGroupingRule 对应于 at-rule，嵌套其它 CSSRules。
CSSStyleRule 表示单个 CSS 样式规则，即表示最小的选择器规则。
它持有 StylePropertyMap，而 StylePropertyMap 就是一个 CSS 属性到 CSSStyleValue 数组的键值对。
（StylePropertyMap 是现代化的 CSSStyleDeclaration 替代）
旧方法往往通过操纵 style 元素来操纵样式表，该方法可能产生重复的 css 代码，导致样式闪烁
\nconst style = document.createElement("style");\nstyle.innerHTML = `body {background:blue}`;\n\ndocument.head.append(style);\nconst sheet: CSSStyleSheet | null = style.sheet;\n// 注意 CSSStyleSheet 对象始终是对附加到文档的样式表的引用\n// 因此，必须保证 style 元素已附加到文档\n// style.sheet 才是 CSSStyleSheet\n// 否则 style.sheet 为 null\nconsole.log(sheet!);\n\nArray.from(document.styleSheets).some((ss) => ss === sheet); // => true\n随着 ShadowDOM 的引入，现在可以手动构造 CSSStyleSheet 对象
\n通过 adoptedStyleSheets 属性来附加构造的 CSSStyleSheet 对象，
样式表还可以在多个文档中共享引用，达到一处修改，多处同步的效果
const sheet = new CSSStyleSheet();\nsheet.replaceSync("a { color: red; }");\n\ndocument.adoptedStyleSheets.push(sheet);\n\nconst node = document.createElement("div");\nconst shadow = node.attachShadow({ mode: "open" });\nshadow.adoptedStyleSheets.push(sheet);\n参见：https://web.dev/articles/constructable-stylesheets
\n\n\n注意：
\n
下面给出一个简单示例：
\nconst sheet = new CSSStyleSheet(); // (Chrome>=73)\nsheet.insertRule(`.selector0 { color: blue; }`);\n// 本质上是向 sheet.cssRules 插入 css 规则\n// 注意一次只能插入一条 CSSRule\n\n// 目前只支持插入字符串，不能直接插入 CSSRule 对象\n// const rule1 = new CSSStyleRule(); // TypeError: Illegal constructor\n// rule1.selectorText = ".selector1";\n// rule1.style.color = "red";\n// sheet.insertRule(rule1.cssText);\n\n// 要同时插入多条，可以使用 replace/replaceSync\nsheet.replaceSync(`\n .selector0 { color: blue; }\n .selector1 { color: red; }\n`);\n\nconsole.assert(sheet.cssRules.length === 2);\nconsole.assert(sheet.cssRules[0].cssText === ".selector0 { color: blue; }");\nconsole.assert(sheet.cssRules[1].cssText === ".selector1 { color: red; }");\n\nconst rule0: CSSRule = sheet.cssRules[0];\nconsole.assert(rule0 instanceof CSSStyleRule);\nconsole.assert((rule0 as CSSStyleRule).selectorText === ".selector0");\n\nconst rule0Style: CSSStyleDeclaration = (rule0 as CSSStyleRule).style;\nconsole.assert(rule0Style.color === "blue");\n\nconst rule0StyleMap: StylePropertyMap = (rule0 as CSSStyleRule).styleMap;\nconst rule0Color: CSSStyleValue = rule0StyleMap.get("color")!;\nconsole.assert(rule0Color.toString() === "blue");\nrule0StyleMap.set("width", CSS.px(4));\nrule0StyleMap.set("height", new CSSUnitValue(4, "px"));\nrule0StyleMap.set("transform", CSSStyleValue.parse("transform", "translate3d(10px,10px,0) scale(0.5)"));\nMDN: https://developer.mozilla.org/docs/Web/API/Streams_API
WHATWG: https://streams.spec.whatwg.org/
Node.js: https://nodejs.org/api/webstreams.html
Deno: https://docs.deno.com/api/web/streams https://docs.deno.com/api/node/stream/web/
Bun: https://bun.com/reference/node/stream/web
interface ReadableStream<R = any> {\n // Returns a boolean indicating whether or not the readable stream is locked to a reader.\n readonly locked: boolean;\n // Returns a Promise that resolves when the stream is canceled. Calling this method signals a loss of interest in the stream by a consumer. The supplied reason argument will be given to the underlying source, which may or may not use it.\n cancel(reason?: any): Promise<void>;\n // Creates a reader and locks the stream to it. While the stream is locked, no other reader can be acquired until this one is released.\n getReader(options: { mode: "byob" }): ReadableStreamBYOBReader;\n getReader(): ReadableStreamDefaultReader<R>;\n getReader(options?: ReadableStreamGetReaderOptions): ReadableStreamReader<R>;\n // Provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.\n pipeThrough<T>(transform: ReadableWritablePair<T, R>, options?: StreamPipeOptions): ReadableStream<T>;\n // Pipes the current ReadableStream to a given WritableStream and returns a Promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered.\n pipeTo(destination: WritableStream<R>, options?: StreamPipeOptions): Promise<void>;\n // The tee method tees this readable stream, returning a two-element array containing the two resulting branches as new ReadableStream instances. Each of those streams receives the same incoming data.\n tee(): [ReadableStream<R>, ReadableStream<R>];\n}\n\ndeclare var ReadableStream: {\n prototype: ReadableStream;\n new (underlyingSource: UnderlyingByteSource, strategy?: { highWaterMark?: number }): ReadableStream<Uint8Array>;\n new <R = any>(underlyingSource: UnderlyingDefaultSource<R>, strategy?: QueuingStrategy<R>): ReadableStream<R>;\n new <R = any>(underlyingSource?: UnderlyingSource<R>, strategy?: QueuingStrategy<R>): ReadableStream<R>;\n};\n目前只有两种 reader
\nreader 可通过 异步迭代器 读取，参见 此处
\nconst reader = readableStream.getReader();\nconst { done, value } = await reader.read();\n定义
\ndeclare var ReadableStreamDefaultReader: {\n prototype: ReadableStreamDefaultReader;\n new <R = any>(stream: ReadableStream<R>): ReadableStreamDefaultReader<R>;\n};\n\ninterface ReadableStreamDefaultReader<R = any> extends ReadableStreamGenericReader {\n read(): Promise<ReadableStreamReadResult<R>>;\n releaseLock(): void;\n}\n\ntype ReadableStreamReadResult<T> = ReadableStreamReadValueResult<T> | ReadableStreamReadDoneResult<T>;\n\ninterface ReadableStreamReadDoneResult<T> {\n done: true;\n value?: T;\n}\n\ninterface ReadableStreamReadValueResult<T> {\n done: false;\n value: T;\n}\nBYOB: bing you own data 即自带缓冲区
\nconst reader = readableStream.getReader({ mode: "byob" });\nReadableStream 实现了异步可迭代协议
\nconst response = await fetch("https://www.example.org");\nconst readableStream: ReadableStream<Uint8Array> = response.body;\nlet total = 0;\nfor await (const chunk of readableStream) total += chunk.length;\nconsole.log(total);\nhttps://developer.mozilla.org/docs/Web/API/ReadableStream/ReadableStream
\ninterface UnderlyingDefaultSource<R = any> {\n cancel?: UnderlyingSourceCancelCallback;\n pull?: (controller: ReadableStreamDefaultController<R>) => void | PromiseLike<void>;\n start?: (controller: ReadableStreamDefaultController<R>) => any;\n type?: undefined;\n}\n\ninterface UnderlyingSourceCancelCallback {\n (reason?: any): void | PromiseLike<void>;\n}\n\ninterface ReadableStreamDefaultController<R = any> {\n // the desired size required to fill the stream's internal queue.\n readonly desiredSize: number | null;\n // Closes the associated stream.\n close(): void;\n // Enqueues a given chunk in the associated stream.\n enqueue(chunk?: R): void;\n // Causes any future interactions with the associated stream to error.\n error(e?: any): void;\n}\n\ndeclare var ReadableStreamDefaultController: {\n prototype: ReadableStreamDefaultController;\n new (): ReadableStreamDefaultController;\n};\n演示：
\nlet interval: number;\n\nconst underlyingSource: UnderlyingDefaultSource<string> = {\n start(controller: ReadableStreamDefaultController<string>) {\n let counter = 0;\n\n interval = setInterval(() => {\n // 随机生成一些字符串\n let string = Math.random().toString().slice(2);\n\n // Add the string to the stream\n controller.enqueue(string);\n\n if (++counter >= 10) {\n clearInterval(interval);\n controller.close();\n }\n }, 300);\n },\n pull(controller) {\n // We don't really need a pull in this example\n },\n cancel() {\n // This is called if the reader cancels,\n // so we should stop generating strings\n clearInterval(interval);\n // 在本演示中是可选的，因为调用controller.close之前已经clearInterval了\n },\n};\n\nconst stream = new ReadableStream<string>(underlyingSource);\n\nfor await (const chunk of stream) {\n console.log(chunk);\n}\ninterface WritableStream<W = any> {\n // A boolean indicating whether the WritableStream is locked to a writer.\n readonly locked: boolean;\n // Aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded.\n abort(reason?: any): Promise<void>;\n // Closes the stream.\n close(): Promise<void>;\n // Returns a new instance of WritableStreamDefaultWriter and locks the stream to that instance. While the stream is locked, no other writer can be acquired until this one is released.\n getWriter(): WritableStreamDefaultWriter<W>;\n}\n\ndeclare var WritableStream: {\n prototype: WritableStream;\n new <W = any>(underlyingSink?: UnderlyingSink<W>, strategy?: QueuingStrategy<W>): WritableStream<W>;\n};\nhttps://developer.mozilla.org/docs/Web/API/WritableStreamDefaultWriter
\n目前只有 WritableStreamDefaultWriter，直接调用 getWriter 方法获取
\nconst writer = writeableStream.getWriter();\nawait writer.write(chunk);\n定义：
\ninterface WritableStreamDefaultWriter<W = any> {\n readonly closed: Promise<undefined>;\n readonly desiredSize: number | null;\n readonly ready: Promise<undefined>;\n abort(reason?: any): Promise<void>;\n close(): Promise<void>;\n releaseLock(): void;\n write(chunk?: W): Promise<void>;\n}\n\ndeclare var WritableStreamDefaultWriter: {\n prototype: WritableStreamDefaultWriter;\n new <W = any>(stream: WritableStream<W>): WritableStreamDefaultWriter<W>;\n};\nhttps://developer.mozilla.org/docs/Web/API/WritableStream/WritableStream
\ninterface UnderlyingByteSource {\n autoAllocateChunkSize?: number;\n cancel?: UnderlyingSourceCancelCallback;\n pull?: (controller: ReadableByteStreamController) => void | PromiseLike<void>;\n start?: (controller: ReadableByteStreamController) => any;\n type: "bytes";\n}\n\ninterface UnderlyingDefaultSource<R = any> {\n cancel?: UnderlyingSourceCancelCallback;\n pull?: (controller: ReadableStreamDefaultController<R>) => void | PromiseLike<void>;\n start?: (controller: ReadableStreamDefaultController<R>) => any;\n type?: undefined;\n}\n\ninterface UnderlyingSink<W = any> {\n abort?: UnderlyingSinkAbortCallback;\n close?: UnderlyingSinkCloseCallback;\n start?: UnderlyingSinkStartCallback;\n type?: undefined;\n write?: UnderlyingSinkWriteCallback<W>;\n}\n演示：
\nlet result = "";\n\nconst writableStream = new WritableStream(\n {\n // Implement the sink\n write(chunk) {\n const buffer = new ArrayBuffer(1);\n const view = new Uint8Array(buffer);\n view[0] = chunk;\n const decoded = new TextDecoder("utf-8").decode(view, { stream: true });\n\n console.log(`[WritableStream write()]: ${decoded}`);\n result += decoded;\n },\n close() {\n console.log(`[WritableStream close()]: ${result}`);\n },\n abort(err) {\n console.log("Sink error:", err);\n },\n },\n new CountQueuingStrategy({ highWaterMark: 1 }),\n);\n\nasync function sendMessage(message: string, writableStream: WritableStream) {\n // defaultWriter is of type WritableStreamDefaultWriter\n const defaultWriter = writableStream.getWriter();\n const encoded = new TextEncoder().encode(message);\n\n try {\n for (const chunk of encoded) {\n await defaultWriter.ready;\n await defaultWriter.write(chunk);\n console.log("Chunk written to sink.");\n }\n // Call ready again to ensure that all chunks are written\n // before closing the writer.\n await defaultWriter.ready;\n await defaultWriter.close();\n console.log("All chunks written");\n } catch (err) {\n console.log("Error:", err);\n }\n}\n\nsendMessage("Hello, world.", writableStream);\ninterface TransformStream<I = any, O = any> {\n readonly readable: ReadableStream<O>;\n readonly writable: WritableStream<I>;\n}\n\ndeclare var TransformStream: {\n prototype: TransformStream;\n new <I = any, O = any>(\n transformer?: Transformer<I, O>,\n writableStrategy?: QueuingStrategy<I>,\n readableStrategy?: QueuingStrategy<O>,\n ): TransformStream<I, O>;\n};\n\ninterface TransformStreamDefaultController<O = any> {\n readonly desiredSize: number | null;\n enqueue(chunk?: O): void;\n error(reason?: any): void;\n terminate(): void;\n}\n\ndeclare var TransformStreamDefaultController: {\n prototype: TransformStreamDefaultController;\n new (): TransformStreamDefaultController;\n};\n指定如何（自动）将数据块拆分为大小不等的块。
\n\nByteLengthQueuingStrategy 构造函数接受一个参数 chunkSize。表示传输中的数据块最大字节数，即，给定一个块流，在施加背压之前，这些块中可以包含多少字节。
当传输的数据块大小超过 chunkSize 时，ReadableStream 会自动将其拆分为大小不超过 chunkSize 的块。
该策略通常用于处理二进制数据，例如音频或视频流。在这种情况下，数据块的大小往往是不确定的，因此使用 ByteLengthQueuingStrategy 可以更好地平衡传输速度和内存使用。
\nCountQueuingStrategy 构造函数接受一个参数 highWaterMark。表示给定一个块流，在施加背压之前，可以包含在内部队列中的块的总数。
当队列中的数据块数量超过 highWaterMark 时，ReadableStream 将停止读取数据，直到队列中的数据量下降到 highWaterMark 以下。
该策略通常用于处理文本数据，例如日志文件或 JSON 数据。在这种情况下，数据块的大小可能是固定的，但是数据块的数量可能会非常大，因此使用 CountQueuingStrategy 可更好地控制内存使用和传输速度。
\n需要注意的是，CountQueuingStrategy 的 highWaterMark 参数是一个建议值，实际上可能会被忽略，具体取决于底层实现。
\nhttps://vercel.com/docs/functions/streaming/streaming-examples
\n","tags":["web-api"]},{"id":"java-spring-boot","url":"https://yieldray.fun/posts/java-spring-boot","title":"Spring Boot","date_published":"2023-04-28T20:00:00.000Z","date_modified":"2023-04-28T20:00:00.000Z","content_text":"https://spring.io/projects/spring-boot
中文：https://springdoc.cn/spring-boot/
How-to：https://springdoc.cn/spring-boot/howto.html
https://start.spring.io/
镜像：https://start.springboot.io/
<!-- pom.xml -->\n\n<?xml version="1.0" encoding="UTF-8"?>\n<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\n xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">\n <modelVersion>4.0.0</modelVersion>\n <parent>\n <groupId>org.springframework.boot</groupId>\n <artifactId>spring-boot-starter-parent</artifactId>\n <version>3.0.6</version>\n <relativePath/> <!-- lookup parent from repository -->\n </parent>\n\n <groupId>com.example</groupId>\n <artifactId>demo</artifactId>\n <version>0.0.1-SNAPSHOT</version>\n <name>demo</name>\n <description>Demo project for Spring Boot</description>\n <properties>\n <java.version>17</java.version>\n </properties>\n\n <dependencies>\n <dependency>\n <groupId>org.springframework.boot</groupId>\n <artifactId>spring-boot-starter</artifactId>\n </dependency>\n\n <dependency>\n <groupId>org.springframework.boot</groupId>\n <artifactId>spring-boot-starter-test</artifactId>\n <scope>test</scope>\n </dependency>\n\n <dependency>\n <groupId>org.springframework.boot</groupId>\n <artifactId>spring-boot-starter-web</artifactId>\n <version>RELEASE</version>\n <scope>compile</scope>\n </dependency>\n </dependencies>\n\n <build>\n <plugins>\n <plugin>\n <groupId>org.springframework.boot</groupId>\n <artifactId>spring-boot-maven-plugin</artifactId>\n </plugin>\n </plugins>\n </build>\n\n</project>\n@RestController\n@SpringBootApplication\npublic class MyApplication {\n\n @RequestMapping("/")\n String home() {\n return "Hello World!";\n }\n\n public static void main(String[] args) {\n Logger logger = LoggerFactory.getLogger(MyApplication.class);\n\n // 这些log不会被spring boot捕获\n logger.trace("before trace");\n logger.debug("before debug");\n logger.info("before info");\n logger.warn("before warn");\n logger.error("before error");\n\n SpringApplication.run(MyApplication.class, args);\n\n // 这些log会被spring boot捕获，由spring boot处理\n logger.trace("after trace");\n logger.debug("after debug");\n logger.info("after info");\n logger.warn("after warn");\n logger.error("after error");\n }\n\n}\n运行下面的命令，可以在项目根目录的 target 目录下得到可执行 jar 包
mvn package\n一个项目典型的布局如下
\ncom\n +- example\n +- myapplication\n +- MyApplication.java\n |\n +- customer\n | +- Customer.java\n | +- CustomerController.java\n | +- CustomerService.java\n | +- CustomerRepository.java\n |\n +- order\n +- Order.java\n +- OrderController.java\n +- OrderService.java\n +- OrderRepository.java\n@SpringBootApplication 注解默认会扫描当前类下的所有子包
\nstarter 默认生成了空文件 application.properties
也可以通过 application.yml 进行配置更直观
server:\n port: 8080\n\nspring:\n application:\n name: ${APP_NAME:unnamed}\n datasource:\n url: jdbc:hsqldb:file:testdb\n username: sa\n password:\n driver-class-name: org.hsqldb.jdbc.JDBCDriver\n hikari:\n auto-commit: false\n connection-timeout: 3000\n validation-timeout: 3000\n max-lifetime: 60000\n maximum-pool-size: 20\n minimum-idle: 1\nlogging:\n level:\n root: INFO\nhttps://springdoc.cn/spring-boot/using.html#using.devtools
\n<dependencies>\n <dependency>\n <groupId>org.springframework.boot</groupId>\n <artifactId>spring-boot-devtools</artifactId>\n <optional>true</optional>\n </dependency>\n</dependencies>\nhttps://docs.spring.io/spring-framework/docs/current/reference/html/web.html
https://springdoc.cn/spring/web.html
关于 servlet 接口参见此处
\nModel: 模型是数据源到对象的映射（e.g. javaBean）
View: 视图层是用户看见的 GUI 界面，在代码中则体现为 HTML 模板 （e.g. jsp）
Controller: 控制器提供了视图层的数据源（e.g. servlet）
@Configuration\n@ComponentScan\n@EnableWebMvc // 启用Spring MVC\n@EnableTransactionManagement\n@PropertySource("classpath:/jdbc.properties")\npublic class AppConfig {\n // ...\n}\n// 将 /static/** 路由映射为本地的 /static/ 路径，作静态资源处理\n@Bean\nWebMvcConfigurer createWebMvcConfigurer() {\n return new WebMvcConfigurer() {\n @Override\n public void addResourceHandlers(ResourceHandlerRegistry registry) {\n registry.addResourceHandler("/static/**").addResourceLocations("/static/");\n }\n };\n}\n\n\n// 配置 Pebble 模板引擎\n@Bean\nViewResolver createViewResolver(@Autowired ServletContext servletContext) {\n var engine = new PebbleEngine.Builder().autoEscaping(true)\n // cache:\n .cacheActive(false)\n // loader:\n .loader(new Servlet5Loader(servletContext))\n .build();\n var viewResolver = new PebbleViewResolver(engine);\n viewResolver.setPrefix("/WEB-INF/templates/");\n viewResolver.setSuffix("");\n return viewResolver;\n}\n参见：https://springdoc.cn/spring/web.html#mvc-ann-requestmapping
\n@Controller // 使用 @Controller 标记而不是 @Component\n@RequestMapping("/user") // 可以通过 RequestMapping 对路由进行分组\npublic class UserController {\n @Autowired\n UserService userService;\n\n // 返回ModelAndView用于模板渲染（具体能返回什么，参见上面的文档）\n @GetMapping("/")\n public ModelAndView index() {\n return new ModelAndView("redirect:/signin")\n }\n // 或者，可以直接返回String来重定向\n public String index() {\n if (...) {\n return "redirect:/signin";\n } else {\n return "redirect:/profile";\n }\n }\n\n // Controller方法具体能使用什么注解，能带什么参数，参见上面的文档\n @PostMapping("/signin")\n public ModelAndView doSignin(\n @RequestParam("email") String email,\n @RequestParam("password") String password,\n HttpSession session) {\n // ...\n }\n\n @GetMapping("/download")\n public void download(HttpServletResponse response) throws IOException {\n byte[] data = /* ... */\n response.setContentType("application/octet-stream");\n OutputStream output = response.getOutputStream();\n output.write(data);\n output.flush();\n }\n\n @PostMapping(value = "/json",\n consumes = "application/json;charset=UTF-8",\n produces = "application/json;charset=UTF-8")\n @ResponseBody\n public String rest(@RequestBody User user) {\n return "{\\"success\\":true}";\n }\n}\n使用 @RestController 替代 @Controller 就可以实现 Restful 接口
注：需要安装 com.fasterxml.jackson.core:jackson-databind
@RequestMapping("/api")\npublic class ApiController {\n @Autowired\n UserService userService;\n\n @GetMapping("/users")\n public List<User> users() {\n return userService.getUsers();\n }\n\n @GetMapping("/users/{id}")\n public User user(@PathVariable("id") long id) {\n return userService.getUserById(id);\n }\n\n public static class SignInRequest {\n public String email;\n public String password;\n }\n @PostMapping("/signin")\n public Map<String, Object> signin(@RequestBody SignInRequest signinRequest) {\n try {\n User user = userService.signin(signinRequest.email, signinRequest.password);\n return Map.of("user", user);\n } catch (Exception e) {\n return Map.of("error", "SIGNIN_FAILED", "message", e.getMessage());\n }\n }\n}\n由于 Spring 使用 Jackson 进行序列化，故应参见 Jackson 文档来应用其序列化规则
\npublic class User {\n /* ... */\n\n @JsonIgnore\n public String getInnerProperty() {\n return innerProperty;\n }\n\n @JsonProperty(access = Access.WRITE_ONLY)\n public String getPassword() {\n return password;\n }\n}\n配置 web.xml
<web-app>\n <filter>\n <filter-name>authFilter</filter-name>\n <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>\n <!-- 这里是 Spring 提供的 DelegatingFilterProxy 类，而不是我们的 AuthFilter 类 -->\n <!-- 该类通过代理模式，使得我们的类可以像其它 Spring 类一样利用 IoC 特性 -->\n </filter>\n\n <filter-mapping>\n <filter-name>authFilter</filter-name>\n <url-pattern>/*</url-pattern>\n </filter-mapping>\n ...\n</web-app>\n若 Filter 名称与 Spring 容器的 Bean 名称不一致
\n<filter>\n <filter-name>basicAuthFilter</filter-name>\n <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>\n <init-param>\n <!-- 此处指定 Bean 的名称 -->\n <param-name>targetBeanName</param-name>\n <param-value>authFilter</param-value>\n </init-param>\n</filter>\n下面的 Filter 拦截 Authorization 请求头
\n@Component\npublic class AuthFilter implements Filter {\n @Autowired\n UserService userService;\n\n public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)\n throws IOException, ServletException {\n HttpServletRequest req = (HttpServletRequest) request;\n // 获取Authorization头:\n String authHeader = req.getHeader("Authorization");\n if (authHeader != null && authHeader.startsWith("Basic ")) {\n // 从Header中提取email和password:\n String email = prefixFrom(authHeader);\n String password = suffixFrom(authHeader);\n // 登录:\n User user = userService.signin(email, password);\n // 放入Session:\n req.getSession().setAttribute(UserController.KEY_USER, user);\n }\n // 继续处理请求:\n chain.doFilter(request, response);\n }\n}\n上面的 Filter 是由 Servlet 定义和处理的，故将应用到整个 Servlet 应用上
Spring 本身提供了 Interceptor，其可以细度到 Controller 上
参见：https://springdoc.cn/spring/web.html#mvc-handlermapping-interceptor
\nhttps://www.liaoxuefeng.com/wiki/1252599548343744/1347180610715681
\n","tags":["java","spring"]},{"id":"js-next13","url":"https://yieldray.fun/posts/js-next13","title":"next.js 13","date_published":"2023-04-18T13:00:00.000Z","date_modified":"2023-04-18T13:00:00.000Z","content_text":"\n\nnext.js app router 已稳定！
\n
过时警告：以下内容根据 beta 版编写！
TODO：待修正
\n\nsee docs here
\n
npx create-next-app@latest --experimental-app\n\n# 默认选项如下\n√ What is your project named? ... nextjs-test\n√ Would you like to use TypeScript with this project? ... No / [Yes]\n√ Would you like to use ESLint with this project? ... [No] / Yes\n√ Would you like to use Tailwind CSS with this project? ... No / [Yes]\n√ Would you like to use `src/` directory with this project? ... [No] / Yes\n√ What import alias would you like configured? ... @/*\n\n\n\n
.js,.jsx, 和.tsx后缀均可，下面以.js为例
layout.js
layout 是不同页面之间的共享 UI。在导航时，layout 会保留 state，仍然可以交互，因为其不会重新渲染。
// app目录下的根layout.js如下\nexport const metadata = {\n title: "Create Next App",\n description: "Generated by create next app",\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n <html lang="en">\n <body>{children}</body>\n </html>\n );\n}\n\n\ntemplate.js 与 layout.js 类似，但在其子页面中导航时，会重新挂载 React 实例（因此不会保存 state）
\n
page.js
Create the unique UI of a route and make the path publicly accessible.
// app目录下的根page.js如下\nimport Image from "next/image";\nimport Link from "next/link";\nimport { Inter } from "next/font/google";\nconst inter = Inter({ subsets: ["latin"] });\n\nexport default function Home() {\n return (\n <main className="flex min-h-screen flex-col items-center justify-between p-24">\n <Image\n className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"\n src="/next.svg"\n alt="Next.js Logo"\n width={180}\n height={37}\n priority\n />\n <Link href="/docs">\n <h2 className={`${inter.className} mb-3 text-2xl font-semibold`}>\n Docs{" "}\n <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">\n ->\n </span>\n </h2>\n </Link>\n </main>\n );\n}\n还可以通过 useRouter hook 导航，参见：https://beta.nextjs.org/docs/api-reference/use-router
一个典型的 page.js 如下
\n// app/blog/[slug]/page.tsx\n"use client";\nexport default function Page({\n params,\n searchParams, // searchParams是动态API，使用searchParams将会导致动态渲染！\n}: {\n params: { slug: string },\n searchParams: { [key: string]: string | string[] | undefined },\n}) {\n return <h1>My Page</h1>;\n}\n// e.g.\n// /blog/test?a=1\n// params = { slug: 'test' }\n// searchParams = { a: '1' }\n还可以通过 useSearchParams 获取 searchParams， 参见：https://beta.nextjs.org/docs/api-reference/use-search-params
其余内容参见：https://beta.nextjs.org/docs/routing/fundamentals#file-conventions
\n一个目录下如存在 page.js 即成为路由的一部分，反之若不存在则不会成为路由![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568301/nextjs-docs/darkmode/defining-routes-page.js.png\")
路由分组![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568349/nextjs-docs/darkmode/route-group-organisation.png\")
可以给每个路由分组目录（(groupname)）下添加 layout.js，这样就可以作用到这组路由（而不影响生成的路径）![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568349/nextjs-docs/darkmode/route-group-multiple-layouts.png\")
可以给每一组路由下使用自己的 layout.js，从而在每一组下应用自己的根路由（删除 app/layout.js 根路由，因为已经不需要了），此时注意每组的根路由是需要 <html> 和 <body> 标签的（就像 app/layout.js 一样）
注意：在这样的多根 layout 之间的页面导航会导致网页的重新加载![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1666568348/nextjs-docs/darkmode/route-group-multiple-root-layouts.png\")
// app/blog/[slug]/page.js\nexport default function Page({ params }) {\n return <div>My Post</div>;\n}\n\n// e.g.\n// /blog/a -> params = { slug: 'a' }\n// /blog/b -> params = { slug: 'b' }\n\n// e.g.\n// app/[categoryId]/[itemId]/page.js\n// type param = { categoryId: string, itemId: string }\n可以像这样捕获所有路由段
\n// app/shop/[...slug]/page.js\nexport default function Page({ params }) {\n return <div>My Post</div>;\n}\n\n// e.g.\n// /blog/a -> params = { slug: ['a'] }\n// /blog/a/b -> params = { slug: ['a', 'b'] }\n可选捕获所有路由段
\n// app/shop/[[...slug]]/page.js\n\n// e.g.\n// /shop -> params = {}\n// /shop/a -> params = { slug: ['a'] }\n// /shop/a/b -> params = { slug: ['a', 'b'] }\napp 目录默认渲染 Server Components
在一个组件的顶行使用 "use client" 指令即可声明为 Client Components![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1680683516/nextjs-docs/darkmode/use-client-directive.png\")
\nClient Components 下导入的所有组件自动成为 Client Components，因此无需 "use client" 指令
Client Components 不能导入（import） Server Components，但可以将 Server Components 作为 Client Components 的子节点（children）![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1678098147/nextjs-docs/darkmode/component-tree.png\")
Server Components 传给其 Client Components 子节点的 props 必须能够被序列化（因此不能传函数等）
有的组件既能在服务端渲染，又能在客户端渲染（但为了避免安全问题），要使之仅在服务端渲染，先安装 npm install server-only
// lib/data.js\nimport "server-only";\n\nexport async function getData() {\n let resp = await fetch("https://external-service.com/data", {\n headers: {\n authorization: process.env.API_KEY,\n },\n });\n return resp.json();\n}\n// 通过这样，Client Component在导入此模块时将抛出编译错误，提示此模块仅能在Server Components导入\n第三方包提供的 Client Components 可能不含 "use client" 指令，因此在 Server Components 中导入这样的组件将导致编译错误，因为 nextjs 不知道这是 Client Components（默认当作 Server Components）
nextjs 文档中建议这样做：
// app/carousel.js\n"use client";\nimport { AcmeCarousel } from "acme-carousel";\nexport default AcmeCarousel;\n在 Server Components 导入包装后的 Client Components 将不再导致编译错误
\n由于 Server Components 是静态的，所以其自身不能创建或消费 context
\n参见：https://beta.nextjs.org/docs/rendering/server-and-client-components#context
\n参见：https://beta.nextjs.org/docs/rendering/static-and-dynamic-rendering
\n参见：https://beta.nextjs.org/docs/rendering/edge-and-nodejs-runtimes
\n鉴于 react 对异步的支持（first-class-support-for-promises）未稳定，此处就直接贴出文档：https://beta.nextjs.org/docs/data-fetching/fundamentals
\n// app/blog/[slug]/page.tsx\nexport async function generateStaticParams() {\n const posts = await fetch("https://.../posts").then((res) => res.json());\n\n return posts.map((post) => ({\n slug: post.slug,\n }));\n}\ngenerateStaticParams API Reference
Route Handlers (route.js) allow you to create custom request handlers for a given route using the Web Request and Response APIs.
（仅在新的 app 文件夹内有效，相当于 pages 文件夹内的 API Routes (注: 其扩展了 nodejs 的 http 模块的 req,res )）
（route.js 与 page.js 不能共存与同一目录(路由)，因为这两种文件都能完全接管路由）![\"\"](\"https://assets.vercel.com/image/upload/f_auto,q_100,w_1600/v1675915652/nextjs-docs/darkmode/route-handler.png\")
// app/api/route.ts\n\n// supported_http_methods: GET, POST, PUT, PATCH, DELETE, HEAD\nexport async function GET(request: Request) {\n const { searchParams } = new URL(request.url);\n const id = searchParams.get("id");\n return Response.json({ id });\n}\nNext.js extends native Request and Response with NextRequest and NextResponse to provide convenient helpers for advanced use cases.
// app/rss.xml/route.ts\n\n// 当Router Handler函数是 GET 且不带任何参数，例如不是这样： GET(request: Request)\n// 且没有使用 cookies 和 headers 等动态API函数时，该 handler 将被静态求值\nexport async function GET() {\n return new Response(`<?xml version="1.0" encoding="UTF-8" ?>\n<rss version="2.0">\n\n<channel>\n <title>Next.js Documentation</title>\n <link>https://nextjs.org/docs</link>\n <description>The React Framework for the Web</description>\n</channel>\n\n</rss>`);\n}\n动态 API 函数，参见：https://beta.nextjs.org/docs/routing/route-handlers#dynamic-functions
\n下面是演示：
\n// app/api/route.ts\nimport { NextResponse } from "next/server";\nimport { cookies, headers } from "next/headers";\nimport { redirect } from "next/navigation";\n\nexport async function GET(request: Request) {\n const headersList = headers();\n const referer = headersList.get("referer");\n\n const cookieStore = cookies();\n const token = cookieStore.get("token");\n\n const res = await fetch("https://data.mongodb-api.com/...", {\n next: { revalidate: 60 }, // Revalidate every 60 seconds\n });\n const data = await res.json();\n\n if (!referer.startsWith("https://example.net")) {\n redirect("https://nextjs.org/");\n } else {\n return new NextResponse(JSON.stringify({ data }), {\n status: 200,\n headers: { "Set-Cookie": `token=${token}` },\n });\n }\n}\n\nexport const revalidate = 60; // false | 'force-cache' | 0 | number\n// Route Segment Config Options\n// 参见：https://beta.nextjs.org/docs/api-reference/segment-config\n// app/items/[slug]/route.ts\n//prettier-ignore\nexport async function GET(request: Request, { params }: {\n params: { slug: string }\n}) {\n const slug = params.slug; // 'a', 'b', or 'c'\n}\n// e.g.\n// /items/a -> { slug: 'a' }\n// /items/b -> { slug: 'b' }\n暂不支持使用 generateStaticParams()
// app/api/route.ts\n// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream\nfunction iteratorToStream(iterator: any) {\n return new ReadableStream({\n async pull(controller) {\n const { value, done } = await iterator.next();\n\n if (done) {\n controller.close();\n } else {\n controller.enqueue(value);\n }\n },\n });\n}\n\nfunction sleep(time: number) {\n return new Promise((resolve) => {\n setTimeout(resolve, time);\n });\n}\n\nconst encoder = new TextEncoder();\n\nasync function* makeIterator() {\n yield encoder.encode("<p>One</p>");\n await sleep(200);\n yield encoder.encode("<p>Two</p>");\n await sleep(200);\n yield encoder.encode("<p>Three</p>");\n}\n\nexport async function GET() {\n const iterator = makeIterator();\n const stream = iteratorToStream(iterator);\n\n return new Response(stream);\n}\n有关 Styling, Optimizing, Deploying 及 API Reference 等内容，参见文档剩余部分：https://beta.nextjs.org/docs/styling/css-modules
\n","tags":["js","react","lib"]},{"id":"java-spring-database","url":"https://yieldray.fun/posts/java-spring-database","title":"spring之数据库","date_published":"2023-04-09T18:00:00.000Z","date_modified":"2023-04-09T18:00:00.000Z","content_text":"https://docs.spring.io/spring-framework/docs/current/reference/html/data-access.html
\n首先安装下面几个依赖
\norg.springframework:spring-context\norg.springframework:spring-jdbc\njakarta.annotation:jakarta.annotation-api\ncom.zaxxer:HikariCP\n@Configuration\n@ComponentScan\n@PropertySource("jdbc.properties") // classpath 下的 jdbc.properties 文件\npublic class AppConfig {\n\n @Value("${jdbc.url}")\n String jdbcUrl;\n\n @Value("${jdbc.username}")\n String jdbcUsername;\n\n @Value("${jdbc.password}")\n String jdbcPassword;\n\n @Bean\n DataSource createDataSource() {\n HikariConfig config = new HikariConfig();\n config.setJdbcUrl(jdbcUrl);\n config.setUsername(jdbcUsername);\n config.setPassword(jdbcPassword);\n config.addDataSourceProperty("autoCommit", "true");\n config.addDataSourceProperty("connectionTimeout", "5");\n config.addDataSourceProperty("idleTimeout", "60");\n return new HikariDataSource(config);\n }\n\n @Bean\n JdbcTemplate createJdbcTemplate(@Autowired DataSource dataSource) {\n return new JdbcTemplate(dataSource);\n }\n}\n上面主要是配置了 JdbcTemplate 对象，配置完成即可注入
@Component\npublic class UserService {\n @Autowired\n JdbcTemplate jdbcTemplate;\n ...\n}\nexecute 方法是最基本的方法，下面获取 Connection 对象
public User getUserById(long id) {\n return jdbcTemplate.execute((Connection conn) -> {\n try (var ps = conn.prepareStatement("SELECT * FROM users WHERE id = ?")) {\n ps.setObject(1, id);\n try (var rs = ps.executeQuery()) {\n if (rs.next()) {\n return new User(\n rs.getLong("id"),\n rs.getString("email"),\n rs.getString("password"),\n rs.getString("name"));\n }\n throw new RuntimeException("cannot find user by id");\n }\n }\n });\n}\n上面还需要通过操作 Connection 对象传入 sql 语句，下面的方法可以直接执行 sql 语句并获取 PreparedStatement 对象
public User getUserByName(String name) {\n return jdbcTemplate.execute("SELECT * FROM users WHERE name = ?", (PreparedStatement ps) -> {\n ps.setObject(1, name);\n try (var rs = ps.executeQuery()) {\n if (rs.next()) {\n return new User(\n rs.getLong("id"),\n rs.getString("email"),\n rs.getString("password"),\n rs.getString("name"));\n }\n throw new RuntimeException("cannot find user by id");\n }\n });\n}\n上面的方法还是需要操作 PreparedStatement 对象并手动设置占位处的值，下面又加以简化
public User getUserByEmail(String email) {\n // 返回值的类型可以是任意的\n return jdbcTemplate.queryForObject("SELECT * FROM users WHERE email = ?",\n (ResultSet rs, int rowNum) -> {\n return new User(\n rs.getLong("id"),\n rs.getString("email"),\n rs.getString("password"),\n rs.getString("name"));\n },\n email);\n}\n通过 spring 提供的 BeanPropertyRowMapper 对象，可以将数据库的记录自动转为 javaBean
// 注意返回值的类型\npublic List<User> getUsers(int pageIndex) {\n int limit = 100;\n int offset = limit * (pageIndex - 1);\n return jdbcTemplate.query("SELECT * FROM users LIMIT ? OFFSET ?",\n new BeanPropertyRowMapper<>(User.class),\n limit, offset);\n}\n// 如果列名与javaBean不一致，则需要手动指定别名\n// SELECT id, email, office_address AS workAddress, name FROM users WHERE email = ?\njdbcTemplate 的 update 方法返回受影响的行数
public void updateUsername(User user, String name) {\n if (1 != jdbcTemplate.update("UPDATE users SET name = ? WHERE id = ?", name, user.getId())) {\n throw new RuntimeException("cannot find user by id");\n }\n}\n若插入时含有自增列，可以通过 GeneratedKeyHolder 对象取出
public User register(String email, String password, String name) {\n KeyHolder holder = new GeneratedKeyHolder();\n\n if (1 != jdbcTemplate.update(\n (conn) -> {\n var ps = conn.prepareStatement("INSERT INTO users(email, password, name) VALUES(?, ?, ?)",\n Statement.RETURN_GENERATED_KEYS /** 此处指定要返回自增键 */);\n ps.setObject(1, email);\n ps.setObject(2, password);\n ps.setObject(3, name);\n return ps;\n }, holder /** 此处传入 GeneratedKeyHolder */)) {\n throw new RuntimeException("failed to insert");\n }\n // 取出自增值\n return new User(holder.getKey().longValue(), email, password, name);\n}\nhttps://www.liaoxuefeng.com/wiki/1252599548343744/1282383642886177
\nspring 提供了 JdbcDaoSupport 抽象类，其持有 jdbcTemplate 对象
public abstract class JdbcDaoSupport extends DaoSupport {\n\n private JdbcTemplate jdbcTemplate;\n\n public final void setJdbcTemplate(JdbcTemplate jdbcTemplate) {\n this.jdbcTemplate = jdbcTemplate;\n initTemplateConfig();\n }\n\n public final JdbcTemplate getJdbcTemplate() {\n return this.jdbcTemplate;\n }\n\n ...\n}\n不过该类不会自动注入 jdbcTemplate 对象，而需要子类手动注入（如下）
@Component\n@Transactional\npublic class UserDao extends JdbcDaoSupport {\n @Autowired\n JdbcTemplate jdbcTemplate;\n\n @PostConstruct\n public void init() {\n super.setJdbcTemplate(jdbcTemplate);\n }\n}\n可以自己实现一个自动注入的jdbcTemplate 对象的基类
`public abstract class AbstractDao extends JdbcDaoSupport {\n @Autowired\n private JdbcTemplate jdbcTemplate;\n\n @PostConstruct\n public void init() {\n super.setJdbcTemplate(jdbcTemplate);\n }\n}\n这样，直接继承该基类就免于每次都手动注入
\nhttps://www.oracle.com/java/technologies/persistence-jsp.html
\n如果直接使用 Mybatis，参见文档：https://mybatis.org/mybatis-3/zh/index.html
下面是在 Spring 环境下使用，并且只通过注解创建 Mapper。
首先保证我们已经创建了 DataSource
@Configuration\n@ComponentScan\n@EnableTransactionManagement\n@PropertySource("jdbc.properties")\npublic class AppConfig {\n @Bean\n DataSource createDataSource() { ... }\n}\n使用 MyBatis 需要创建 SqlSessionFactory，但在 Spring 中我们创建 SqlSessionFactoryBean
（在 @Configuration 类中配置）
@Bean\nSqlSessionFactoryBean createSqlSessionFactoryBean(@Autowired DataSource dataSource) {\n var sqlSessionFactoryBean = new SqlSessionFactoryBean();\n sqlSessionFactoryBean.setDataSource(dataSource);\n return sqlSessionFactoryBean;\n}\nMyBatis 可以直接使用 Spring 管理的声明式事务。
因此，创建 事务管理器 和在 JDBC 中创建 事务管理器 是完全一样的。
@Bean\nPlatformTransactionManager createTxManager(@Autowired DataSource dataSource) {\n return new DataSourceTransactionManager(dataSource);\n}\n完成需要的配置后，就可以通过 MyBatis 来创建 Mapper 了
\n\n\n注解文档参见：https://mybatis.org/mybatis-3/zh/java-api.html#%E6%98%A0%E5%B0%84%E5%99%A8%E6%B3%A8%E8%A7%A3
\n
public interface UserMapper {\n // 使用 @Select 注解\n @Select("SELECT * FROM users WHERE id = #{id}")\n User getById(@Param("id") long id);\n\n @Select("SELECT * FROM users LIMIT #{offset}, #{maxResults}")\n List<User> getAll(@Param("offset") int offset, @Param("maxResults") int maxResults);\n\n // 使用 @Insert 注解\n @Insert("INSERT INTO users (email, password, name, createdAt) VALUES (#{user.email}, #{user.password}, #{user.name}, #{user.createdAt})")\n void insert(@Param("user") User user);\n\n // 自增主键，我们希望不用传入。使用 @Options 注解\n // keyProperty=JavaBean属性\n // keyColumn=数据库主键列名\n @Options(useGeneratedKeys = true, keyProperty = "id", keyColumn = "id")\n @Insert("INSERT INTO users (email, password, name, createdAt) VALUES (#{user.email}, #{user.password}, #{user.name}, #{user.createdAt})")\n void insert(@Param("user") User user);\n\n @Update("UPDATE users SET name = #{user.name}, createdAt = #{user.createdAt} WHERE id = #{user.id}")\n void update(@Param("user") User user);\n\n @Delete("DELETE FROM users WHERE id = #{id}")\n void deleteById(@Param("id") long id);\n}\n写好接口之后，我们通过 @MapperScan 注解让 Mybatis 自动创建对应实现类。
// 其它注解...\n@MapperScan("com.example.demo")\npublic class AppConfig {\n ...\n}\n这样我们就可以在 Service 层直接注入 Mapper 接口了
\n@Component\n@Transactional\npublic class UserService {\n @Autowired\n UserMapper userMapper;\n\n public User getUserById(long id) {\n User user = userMapper.getById(id);\n if (user == null) throw new RuntimeException("User not found by id.");\n return user;\n }\n}\nAspect Oriented Programming
\nAOP 类似于 Proxy 模式，其目的是方便将公共逻辑（例如：权限检查、日志、事务）进行复用
\n\n\n首先需要安装 org.springframework:spring-aspects 依赖\n该依赖使用 AspectJ 实现了 AOP
\n
通过 @Aspect 注解定义一个 Aspect
@Aspect\n@Component\npublic class LoggingAspect {\n // 在执行UserService的每个方法前执行:\n @Before("execution(public * com.example.service.UserService.*(..))")\n public void doAccessCheck() {\n System.err.println("[Before] do access check...");\n }\n\n // 在执行MailService的每个方法前后执行:\n @Around("execution(public * com.example.service.MailService.*(..))")\n public Object doLogging(ProceedingJoinPoint pjp) throws Throwable {\n System.err.println("[Around] start " + pjp.getSignature());\n Object retVal = pjp.proceed();\n System.err.println("[Around] done " + pjp.getSignature());\n return retVal;\n }\n}\n应用 Aspect
\n@Configuration\n@ComponentScan\n@EnableAspectJAutoProxy\npublic class AppConfig {\n ...\n}\n通过注解实现 Aspect
\n@Component\npublic class XXXService {\n @MyCustomAnno("myvalue") //自定义注解\n public XXX myfun(String arg1, String arg2) {}\n}\n截获注解
\n@Aspect\n@Component\npublic class MetricAspect {\n @Around("@annotation(metricTime)")\n public Object metric(ProceedingJoinPoint joinPoint, MyCustomAnno myCustomAnno) throws Throwable {\n String myValue = myCustomAnno.value(); // 获取注解值\n\n try {\n return joinPoint.proceed();\n } finally {\n // ...\n }\n }\n}\n不要用 final 修饰被 AOP 代理的类的成员
AOP 代理的对象仅继承了原对象的所有方法，其字段不会继承（因为字段可能是 IoC 注入的，无法保证正确初始化）
故访问 AOP 代理的对象时应仅调用其方法，而不访问其属性（否则 NPE）
https://docs.spring.io/spring-framework/docs/current/reference/html/index.html
\nInversion of Control
\nhttps://docs.spring.io/spring-framework/docs/current/reference/html/core.html
\n// AppConfig.java\n@Configuration // 标记配置类\n@ComponentScan // 自动搜索当前类所在的包以及子包，把所有标注为@Component的Bean自动创建出来，并根据@Autowired进行装配\npublic class AppConfig {\n\n @SuppressWarnings("resource")\n public static void main(String[] args) {\n ApplicationContext context = new AnnotationConfigApplicationContext(AppConfig.class); // 通过配置类创建Context\n\n // 从Context获取Bean\n UserService userService = context.getBean(UserService.class);\n\n // 测试\n User user = userService.login("bob@example.com", "password");\n System.out.println(user.getName());\n }\n}\n\n// service/User.java\npublic class User {\n private long id;\n private String email;\n private String password;\n private String name;\n public User(long id, String email, String password, String name);\n // 略，javaBean\n}\n\n// service/MailService.java\n@Component\npublic class MailService {\n ZoneId zoneId = ZoneId.systemDefault();\n public String getTime() {\n return ZonedDateTime.now(this.zoneId).format(DateTimeFormatter.ISO_ZONED_DATE_TIME); }\n public void sendLoginMail(User user) {\n System.err.println(String.format("Hi, %s! You are logged in at %s", user.getName(), getTime())); }\n}\n\n// service/UserService.java\n@Component\npublic class UserService {\n @Autowired // 此处不必要，因为构造函数已注入\n MailService mailService;\n\n public UserService(@Autowired MailService mailService) {\n this.mailService = mailService;\n }\n\n private List<User> users = new ArrayList<>(List.of(\n new User(1, "bob@example.com", "password", "Bob"),\n new User(2, "alice@example.com", "password", "Alice"),\n new User(3, "tom@example.com", "password", "Tom")));\n\n public User login(String email, String password) {\n for (User user : users) {\n if (user.getEmail().equalsIgnoreCase(email) && user.getPassword().equals(password)) {\n mailService.sendLoginMail(user);\n return user;\n }\n }\n throw new RuntimeException("login failed.");\n }\n\n public User getUserById(long id) {\n return this.users.stream().filter(user -> user.getId() == id).findFirst().orElseThrow();\n }\n}\n装配的 bean 默认为单例，下面则声明为原型（每次返回不同的实例）
\n@Component\n@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)\n// 或 @Scope("prototype")\npublic class ProtoService { }\ninterface Checker {\n public Boolean check(String str);\n}\n\n@Component\n@Order(1) // 可选，声明顺序\nclass CheckerOne implements Checker {\n @Override\n public Boolean check(String str) {\n return str.length() > 0;\n }\n}\n\n@Component\n@Order(2)\nclass CheckTwo implements Checker {\n @Override\n public Boolean check(String str) {\n return str.startsWith("*");\n }\n}\n\npublic class ChainService {\n @Autowired // 注入列表\n List<Checker> checkers;\n}\n可选注入
\n@Component\npublic class MailService {\n @Autowired(required = false)\n ZoneId zoneId = ZoneId.systemDefault();\n}\n第三方 Bean（在 @Configuration 类中创建）
@Configuration\n@ComponentScan\npublic class AppConfig {\n @Bean // 此方法仅调用一次\n ZoneId createZoneId() {\n return ZoneId.of("Z");\n }\n}\n初始化和销毁 Bean
\n@Component\npublic class MailService {\n @PostConstruct\n public void init() {}\n\n @PreDestroy\n public void shutdown() {}\n}\n指定别名
\n@Configuration\n@ComponentScan\npublic class AppConfig {\n @Bean\n @Primary // 首选项\n DataSource createMasterDataSource() {\n ...\n }\n\n @Bean\n @Qualifier("slave") // 相当于 @Bean("slave")\n DataSource createSlaveDataSource() {\n ...\n }\n}\n通过工厂模式创建 Bean
\n@Component\npublic class ZoneIdFactoryBean implements FactoryBean<ZoneId> {\n String zone = "Z";\n\n @Override\n public ZoneId getObject() throws Exception { return ZoneId.of(zone); }\n\n @Override\n public Class<?> getObjectType() { return ZoneId.class; }\n}\nspring 启动时可以指定 profile
\n-Dspring.profiles.active=test\n# 可以指定多个 profile\n-Dspring.profiles.active=test,master\n@Configuration\n@ComponentScan\npublic class AppConfig {\n @Bean\n @Profile("!test")\n ZoneId createZoneId() {\n return ZoneId.systemDefault();\n }\n\n @Bean\n @Profile("test")\n ZoneId createZoneIdForTest() {\n return ZoneId.of("America/New_York");\n }\n\n @Bean\n @Profile({ "test", "master" }) // 要求满足多个profile\n ZoneId createZoneId() {\n return ZoneId.systemDefault();\n }\n}\npublic class OnSmtpEnvCondition implements Condition {\n public boolean matches(ConditionContext context, AnnotatedTypeMetadata metadata) {\n return "true".equalsIgnoreCase(System.getenv("smtp"));\n }\n}\n\n@Component\n@Conditional(OnSmtpEnvCondition.class)\npublic class SmtpMailService implements MailService {\n ...\n}\n类似的 conditional 注解还有
\n@ConditionalOnProperty(name="property_fieldname_is", havingValue="true")\n@ConditionalOnProperty(name = "property_fieldname_test", havingValue = "test_string_value", matchIfMissing = true)\n@ConditionalOnClass(name = "javax.mail.Transport")\norg.springframework.core.io.Resource@Component\npublic class AppService {\n @Value("classpath:/file.txt") // classpath: 相当于 src/main/resources 目录\n private Resource resource1;\n\n @Value("file:/path/to/file.txt") // file: 相当于项目根目录\n private Resource resource2;\n\n @PostConstruct\n public void init() throws IOException {\n try (var reader = new BufferedReader(new InputStreamReader(resource.getInputStream(), StandardCharsets.UTF_8))) {\n // ...\n }\n }\n}\n从 classpath 下的 properties 文件注入
\n@Configuration\n@ComponentScan\n@PropertySource("app.properties") // classpath下的app.properties文件\npublic class AppConfig {\n @Value("${option_key}")\n // @Value("${option_key:default_value}")\n String some_option;\n\n @Bean\n String injectToParam(@Value("${field_name:default_value}") String fieldName) {\n return fieldName;\n }\n}\n通过 javaBean 进行配置
\n// 注入\n@Component\npublic class MyConfig {\n @Value("${fieldName}")\n private String fieldName;\n}\n\n// 读取\n@Component\npublic class MyService {\n @Value("#{fieldName}")\n private String fieldName;\n}\nhttps://zh-hans.ipshu.com/my_info
\n\n\n\n\n\n\n\n\n\nhttps://codetabs.com/ip-geolocation/ip-geolocation.html
\n\n\n\nhttps://ipinfo.io/ (commercial)
\nhttp://opendata.baidu.com/api.php?co=&resource_id=6006&oe=utf8&query=1.2.4.8
https://github.com/ihmily/ip-info-api
https://messwithdns.net/
https://developer.mozilla.org/docs/Web/API/console
\ninterface Console {\n log(...data: any[]): void;\n debug(...data: any[]): void;\n info(...data: any[]): void;\n warn(...data: any[]): void;\n error(...data: any[]): void;\n clear(): void;\n\n trace(...data: any[]): void;\n assert(condition?: boolean, ...data: any[]): void;\n table(tabularData?: any, properties?: string[]): void;\n\n dir(item?: any, options?: any): void;\n dirxml(...data: any[]): void;\n\n group(...data: any[]): void;\n groupCollapsed(...data: any[]): void;\n groupEnd(): void;\n\n count(label?: string): void;\n countReset(label?: string): void;\n\n time(label?: string): void;\n timeEnd(label?: string): void;\n timeLog(label?: string, ...data: any[]): void;\n timeStamp(label?: string): void;\n}\n\ndeclare var console: Console;\nusing System; // 命名空间\n\nclass Hello\n{\n static void Main() // Main 静态方法 是 C# 程序的入口点\n {\n string str = "world";\n // Console 类在 System 命名空间下\n Console.WriteLine($"Hello, {str}");\n // 相当于 System.Console.WriteLine\n }\n}\nC#语言介绍
C# 有两种类型：值类型和引用类型
sbyte、short、int、longbyte、ushort、uint、ulongchar （表示 UTF-16 代码单元）float、doubledecimalbool （true 或 false）enum E {...} struct S {...}T，都有对应的可以为 null 的类型 T?）(T1, T2, ...)objectstring （表示 UTF-16 代码单元序列）class C {...}interface I {...}int[]、int[,] 和 int[][]）delegate int D(...)record 类型（record struct 或 record class）class、struct、interface 和 delegate 类型全部支持泛型
数组隐式派生自 System.Array 类
例如： int 类型实际为 System.Int32
int i = 123;\nobject o = i; // 将值类型的值分配给 object 对象引用时，会分配一个“箱”来保存此值。 该箱是引用类型的实例，此值会被复制到该箱。\nint j = (int)o; // 当 object 引用被显式转换成值类型时，将检查引用的 object 是否是具有正确值类型的箱。 如果检查成功，则会将箱中的值复制到值类型\nvar p1 = new Point(0, 10); // 类型为 Point?\nPoint p2 = new(10, 20); // 类型为 Point\nvar p3 = new Point(0, 0) { X = 20, Y = 30 }; // (20, 30)\n\nConsole.WriteLine(p1);\nConsole.WriteLine(p2);\nConsole.WriteLine(p3);\n\npublic class Point\n{\n public int X;\n public int Y;\n\n public (int, int) Pos // 属性访问器\n {\n get => (X, Y);\n set => (X, Y) = value; // value 代表等号右边的值\n }\n\n public Point(int x, int y) => (X, Y) = (x, y);\n\n public override string ToString()\n {\n return $"({X}, {Y})";\n }\n}\nreadonly 修饰符声明 只读字段
public class Color\n{\n public static readonly Color Black = new(0, 0, 0);\n public static readonly Color White = new(255, 255, 255);\n\n public static readonly Color Red = new(255, 0, 0);\n public static readonly Color Green = new(0, 255, 0);\n public static readonly Color Blue = new(0, 0, 255);\n\n public byte R;\n public byte G;\n public byte B;\n\n public Color(byte r, byte g, byte b)\n {\n R = r;\n G = g;\n B = b;\n }\n public override string ToString() => $"({r},{g},{b})";\n}\npublic class Pair<TFirst, TSecond>\n{\n public TFirst First { get; }\n public TSecond Second { get; }\n\n public Pair(TFirst first, TSecond second) => (First, Second) = (first, second);\n}\n\nvar pair = new Pair<int, string>(1, "two");\nint i = pair.First; //TFirst int\nstring s = pair.Second; //TSecond string\n其他类型函数成员：构造函数、属性、索引器、事件、运算符和终结器
\npublic class Point3D : Point\n{\n public int Z { get; set; }\n\n public Point3D(int x, int y, int z) : base(x, y)\n {\n Z = z;\n }\n}\n\nPoint a = new(10, 20);\nPoint b = new Point3D(10, 20, 30);\npublic struct Point\n{\n public double X { get; }\n public double Y { get; }\n\n public Point(double x, double y) => (X, Y) = (x, y);\n}\ninterface IControl\n{\n void Paint();\n}\n\ninterface ITextBox : IControl\n{\n void SetText(string text);\n}\n\ninterface IListBox : IControl\n{\n void SetItems(string[] items);\n}\n\ninterface IComboBox : ITextBox, IListBox { }\n实现接口
\ninterface IDataBound\n{\n void Bind(Binder b);\n}\n\npublic class EditBox : IControl, IDataBound\n{\n public void Paint() { }\n public void Bind(Binder b) { }\n}\n\nEditBox editBox = new();\nIControl control = editBox;\nIDataBound dataBound = editBox;\npublic enum SomeRootVegetable\n{\n HorseRadish,\n Radish,\n Turnip\n}\n[Flags]\npublic enum Seasons\n{\n None = 0,\n Summer = 1,\n Autumn = 2,\n Winter = 4,\n Spring = 8,\n All = Summer | Autumn | Winter | Spring\n}\nvar turnip = SomeRootVegetable.Turnip;\n\nvar spring = Seasons.Spring;\nvar startingOnEquinox = Seasons.Spring | Seasons.Autumn;\nvar theYear = Seasons.All;\n(string Key, int Value) tp = ("branch", 666);\nConsole.WriteLine($"1 little black mole {tp.Key} {tp.Value}");\n\nvar (branch, six) = tp;\nConsole.WriteLine(branch + " " + six);\n\n(_, var a, string b) = ("black mole", false, "branch"); // 手动声明类型\n通过Deconstruct方法实现自定义析构：\nhttps://learn.microsoft.com/zh-cn/dotnet/csharp/fundamentals/functional/deconstruct#user-defined-types
可为 null 引用类型和可为 null 值类型提供类似的语义概念：变量可表示值或对象，或者该变量可以为 null。 但可为 null 引用类型和可为 null 值类型的实现方式不同：可为 null 值类型是使用 System.Nullable<T> 实现的，而可为 null 引用类型是使用编译器读取的属性实现的。 例如，string? 和 string 由同一类型表示：System.String。 但 int? 和 int 分别由 System.Nullable<System.Int32> 和 System.Int32 表示
本质为 System.Nullable<T>
double? pi = 3.14;\nchar? letter = 'a';\n\nint m2 = 10;\nint? m = m2;\n\nbool? flag = null;\nint?[] arr = new int?[10];\nis 运算符和类型模式
\nint? a = 42;\nif (a is int valueOfA)\n{\n Console.WriteLine($"a is {valueOfA}");\n}\nelse // if (a is null)\n{\n Console.WriteLine("a does not have a value");\n}\n或者通过 Nullable<T> 实例
int? c = 7;\nif (c != null) // or: if (c.HasValue)\n{\n Console.WriteLine($"c is {c.Value}");\n}\nelse\n{\n Console.WriteLine("c does not have a value");\n}\nBoxing & Unboxing
\nint a = 41;\nobject aBoxed = a;\nint? aNullable = (int?)aBoxed;\nConsole.WriteLine($"Value of aNullable: {aNullable}");\n// Value of aNullable: 41\n\nobject aNullableBoxed = aNullable;\nif (aNullableBoxed is int valueOfA)\n{\n Console.WriteLine($"aNullableBoxed is boxed int: {valueOfA}");\n// aNullableBoxed is boxed int: 41\n}\n取消引用值为 null 的变量时，运行时会引发 System.NullReferenceException。
\nstring message = null;\n\ntry {\n Console.WriteLine($"The length of the message is {message.Length}");\n} catch {\n Console.Write("NullReferenceException");\n}\n对于返回值，T? 等效于 [MaybeNull]T
对于参数值，T? 等效于 [AllowNull]T
E is T\n// 返回布尔值\npublic class Animal { }\n\npublic class Giraffe : Animal { }\n\npublic static class TypeOfExample\n{\n public static void Main()\n {\n object b = new Giraffe();\n Console.WriteLine(b is Animal); // output: True\n Console.WriteLine(b.GetType() == typeof(Animal)); // output: False\n\n Console.WriteLine(b is Giraffe); // output: True\n Console.WriteLine(b.GetType() == typeof(Giraffe)); // output: True\n }\n}\nE as T\n// 相当于\nE is T ? (T)(E) : (T)null\ntypeof 运算符的实参必须为 类型 （或 类型形参，即泛型参数）
返回 Type 类型实例
Console.WriteLine(typeof(List<string>));\n\nvoid PrintType<T>() => Console.WriteLine(typeof(T));\nPrintType<int>();\nPrintType<System.Int32>();\nPrintType<Dictionary<int, char>>();\n引用参数 使用 ref 修饰符进行声明
static void Swap(ref int x, ref int y)\n{\n int temp = x;\n x = y;\n y = temp;\n}\n\npublic static void SwapExample()\n{\n int i = 1, j = 2;\n Swap(ref i, ref j);\n Console.WriteLine($"{i} {j}"); // "2 1"\n}\n输出参数 使用 out 修饰符进行声明
static void Divide(int x, int y, out int quotient, out int remainder)\n{\n quotient = x / y;\n remainder = x % y;\n}\n\npublic static void OutUsage()\n{\n Divide(10, 3, out int quo, out int rem);\n Console.WriteLine($"{quo} {rem}");\t// "3 1"\n}\n参数数组 （不定参数）使用 params 修饰符进行声明
public class Console\n{\n public static void Write(string fmt, params object[] args) { }\n public static void WriteLine(string fmt, params object[] args) { }\n // ...\n}\nint x = 3, y = 4, z = 5;\nConsole.WriteLine("x={0} y={1} z={2}", x,y,z);\n// 相当于\nobject[] args = new object[3] {x,y,z};\nConsole.WriteLine("x={0} y={1} z={2}", args);\ndelegate 关键字声明 委托 类型
委托类型可为 lambda 表达式 提供类型
using System;\n\npublic class Program\n{\n public delegate int Add(int a, int b);\n public static void Main()\n {\n Add add = (a, b) => a + b;\n Console.WriteLine( add(1,2) );\n }\n}\n异步函数返回 System.Threading.Tasks.Task 泛型类
using System;\nusing System.Threading.Tasks;\n\nclass Test {\n public static async Task<string> asyncMethod()\n {\n return nameof(asyncMethod);\n }\n}\n\npublic class Program\n{\n public static async void Main()\n {\n Console.WriteLine("before");\n Console.WriteLine(await Test.asyncMethod());\n Console.WriteLine("after");\n }\n}\nhttps://learn.microsoft.com/zh-cn/dotnet/csharp/tour-of-csharp/features#attributes
\nclass Program\n{\n public class HelpAttribute : Attribute\n {\n string _url;\n string _topic;\n\n public HelpAttribute(string url) => _url = url;\n\n public string Url => _url;\n\n public string Topic\n {\n get => _topic;\n set => _topic = value;\n }\n }\n\n // HelpAttribute 以 Attribute 结尾，可省略为 Help\n [Help("https://docs.microsoft.com/dotnet/csharp/tour-of-csharp/features")]\n public class Widget\n {\n [Help("https://docs.microsoft.com/dotnet/csharp/tour-of-csharp/features",\n Topic = "Display")]\n public void Display(string text) { }\n }\n\n public static void Main()\n {\n Type widgetType = typeof(Widget);\n\n object[] widgetClassAttributes = widgetType.GetCustomAttributes(typeof(HelpAttribute), /* inherit */false);\n\n if (widgetClassAttributes.Length > 0)\n {\n HelpAttribute attr = (HelpAttribute)widgetClassAttributes[0];\n Console.WriteLine($"Widget class help URL : {attr.Url} - Related topic : {attr.Topic}");\n }\n\n System.Reflection.MethodInfo displayMethod = widgetType.GetMethod(nameof(Widget.Display));\n\n object[] displayMethodAttributes = displayMethod.GetCustomAttributes(typeof(HelpAttribute), false);\n\n if (displayMethodAttributes.Length > 0)\n {\n HelpAttribute attr = (HelpAttribute)displayMethodAttributes[0];\n Console.WriteLine($"Display method help URL : {attr.Url} - Related topic : {attr.Topic}");\n }\n }\n}\nhttps://learn.microsoft.com/zh-cn/dotnet/csharp/fundamentals/types/anonymous-types
\nvar v = new { Amount = 108, Message = "Hello" };\nConsole.WriteLine(v.Amount + v.Message);\nhttps://learn.microsoft.com/zh-cn/dotnet/csharp/fundamentals/exceptions/
\nhttps://learn.microsoft.com/zh-cn/dotnet/csharp/tutorials/working-with-linq
\n","tags":["csharp"]},{"id":"tail-call","url":"https://yieldray.fun/posts/tail-call","title":"尾调用","date_published":"2023-03-14T17:00:00.000Z","date_modified":"2023-03-14T17:00:00.000Z","content_text":"尾调用是指一个函数内的最后一个动作是返回一个函数的调用结果的情形。
函数最后返回的位置成为尾位置。
function fn(args) {\n if (x) return a();\n return b();\n}\n尾位置是函数调用时，当前函数（可以）无需保留自身调用栈。因为函数捕获的变量可以直接成为尾调用函数的参数。
\n若函数在尾位置调用自身（或是一个尾调用本身的其他函数等等），则称这种情况为尾递归。
\nfunction factorial(n) {\n if (n === 1) return 1;\n return n * factorial(n - 1);\n}\n\nfunction factorial(n, total = 1 /* 这个参数永远不应该被实际提供 */) {\n if (n === 1) return total;\n return factorial(n - 1, n * total);\n}\n// 注：需要 "use strict"\n参见：https://zh.wikipedia.org/wiki/%E5%B0%BE%E8%B0%83%E7%94%A8
参见：https://es6.ruanyifeng.com/#docs/function#%E5%B0%BE%E8%B0%83%E7%94%A8%E4%BC%98%E5%8C%96
文档：https://git-scm.com/docs
pro-git：https://git-scm.com/book/zh/v2/
github：https://github.com/git-guides
参考：https://github.com/xjh22222228/git-manual/blob/main/README.md
git commit [-m <message>]\ngit commit -a\ngit commit --amend\n\ngit status\ngit log [--oneline]\ngit diff\ngit branch <branch>\ngit checkout <branch>\ngit checkout -b <branch>\n\ngit switch <branch>\ngit switch -c <branch>\n\ngit branch -d <branch>\ngit push <remote> --delete <branch>\ngit branch -m <branch> # 重命名当前\ngit branch -m <branch> <new-name> # 重命名指定\ngit push origin :<branch> # 删除旧分支\ngit push -u origin <new-name> # 推送新分支\ngit fetch --all\ngit branch -a\ngit branch -vv # 查看本地分支所关联的远程分支\n\ngit remote add <remote> <url>\ngit remote # 查看远程仓库\ngit remote -v # 查看当前远程仓库地址\n\ngit remote show <remote> # 查看指定远程仓库信息\ngit remote rename <remote> <new-name>\ngit remote remove <remote>\ngit remote set-url origin <url>\n\ngit fetch <remote>\ngit fetch <remote>/<branch>\n\ngit push <remote> [<branch>]\ngit push <remote> <branch>:<remote-branch>\ngit push <remote> --delete <branch>\n\ngit checkout -b <branch> <remote>/<branch>\ngit checkout --track <remote>/<branch>\ngit checkout <branch> # 从远程分支创建同名本地分支\n\ngit branch -u <remote>/<branch> # 将当前分支关联至远程分支\ngit push -u <remote> <branch> # 关联并推送\ngit show <tag>\ngit tag <tag>\ngit tag -a <tag> -m <msg> [<hash>]\ngit push <remote> <tag>\ngit push <remote> --tags\ngit tag -d <tag>\ngit push <remote> --delete <tag>\ngit checkout master\ngit merge fix\n\ngit checkout fix\ngit rebase master\ngit reset --soft <commit-hash> # 仅回退提交历史，保留修改\ngit reset --hard <commit-hash> # 完全回退提交、暂存区和工作区的更改\ngit revert <commit-id> # 生成一个新提交，来撤销指定的提\necho "# test" >> README.md\ngit init\ngit add README.md\ngit commit -m "first commit"\ngit branch -M main # 将默认的master分支强制改为main\ngit remote add origin https://github.com/user/repo.git # 添加远程仓库origin\ngit push -u origin main # 将main分支关联并推送至远程origin\nhttps://violentmonkey.github.io/api/gm/
https://www.tampermonkey.net/documentation.php?locale=zh
https://wiki.greasespot.net/Greasemonkey_Manual:API
https://docs.scriptcat.org/docs/dev/api/
https://www.chromium.org/developers/design-documents/user-scripts/
// ==UserScript==\n// @name Violentmonkey Script\n// @name:zh-CN 暴力猴脚本\n// @namespace https://violentmonkey.github.io #此字段一般填写项目主页，非必须\n// @version 1.0\n// @description This script rocks.\n// @description:zh-CN 这个脚本很棒！\n// @icon https://my.cdn.com/icon.png #也可以使用 data:image/jpeg;base64,xxx\n// ==/UserScript==\n// @require https://my.cdn.com/jquery.js\n// @run-at #考虑到兼容性此字段可以不填，一般默认运行在DOMContentLoaded事件发送后\n// @noframes #不需要值，出现此字段则脚本不在frame中执行\n// @resource logo https://my.cdn.com/logo.png #此字段声明了允许通过GM_getResourceText()和GM_getResourceURL()函数拿到的资源\n// @resource text https://my.cdn.com/some-text.txt\n// @connect tampermonkey.net #此字段声明了允许通过GM_xmlhttpRequest()函数访问的域名，指定顶级域名会同时允许其子域名\n// @grant none #默认值，允许脚本直接获取真实的DOM，相当于直接在页面中载入了一个脚本（但可以获取GM_info对象，@require同理）\n// @grant unsafeWindow #隔离浏览器上下文，unsafeWindow指向真实页面的window对象（@require虽然也隔离上下文，但可以直接访问DOM）\n// @grant GM_setValue\n// @grant GM_getValue\n// @grant GM_setClipboard\n// @grant window.close\n// @grant window.focus\n// @grant window.onurlchange\n小技巧，绕过 unsafeWindow
\nconsole.log(GM_setValue); // OK\n\nfunction main() {\n console.log(window);\n // console.log(GM_setValue); // Uncaught ReferenceError: GM_setValue is not defined\n}\nconst script = document.createElement("script");\nscript.textContent = "(" + main.toString() + ")();";\ndocument.body.appendChild(script);\nhttps://developer.chrome.com/docs/extensions/mv3/match_patterns/
\n// @match *://*.google.com/foo*bar #不匹配锚点\n// @include /\\.com\\.hk\\// #不建议使用，使用@match即可\n// @exclude 与include相反\n// @downloadURL #此字段用于检测更新\n// @supportURL #此字段指定了“反馈”按钮指向的地址\n// @homepageURL #主页\n键名为字符串，值是通过 JSON 序列化
\nlet value = GM_getValue(key, defaultValue);\n\nGM_setValue(key, value); // GM_setValue(String(key), value)\n\nGM_deleteValue(key);\n\nlet arrayOfKeys = GM_listValues();\n\nlet listenerId = GM_addValueChangeListener(key, (key, oldValue, newValue, remote) => void);\n\nGM_removeValueChangeListener(listenerId)\n// @resource logo https://my.cdn.com/logo.png\n// @resource text https://my.cdn.com/some-text.txt\n\nlet text = GM_getResourceText("text");\n\nlet blobUrl = GM_getResourceURL("logo");\nlet blobOrDataUrl = GM_getResourceURL("logo", isBlobUrl);\nlet element1 = GM_addElement(tagName, attributes);\nlet element2 = GM_addElement(parentNode, tagName, attributes);\n\nlet styleElement = GM_addStyle(css);\n\nlet tabControl = GM_openInTab(url, openInBackground);\nlet tabControl = GM_openInTab(url);\ntabControl.onclose = () => console.log(tabControl.closed === true);\ntabControl.close();\nconst id = GM_registerMenuCommand(caption, onClick);\nGM_unregisterMenuCommand(caption);\n\nGM_setClipboard(data, type ?? "text/plain");\n\nGM_notification({ text, title, image, onclick, ondone });\nGM_notification(text, title, image, onclick);\n\n// 不受限制的 xmlhttpRequest\nlet control = GM_xmlhttpRequest({\n url: "https://example.net/",\n method: "POST",\n data: "string | ArrayBuffer | Blob | DataView | FormData | ReadableStream | TypedArray | URLSearchParams",\n headers: {\n Referer: "https://example.com/",\n "User-Agent": "GM",\n },\n responseType: "text", // or "json" or "blob" or "arraybuffer"\n timeout: 3000,\n});\ncontrol.onabort = (res) => {};\ncontrol.onerror = (res) => {};\ncontrol.onload = (res) => {};\ncontrol.onloadend = (res) => {};\ncontrol.onloadstart = (res) => {};\ncontrol.onprogress = (res) => {};\ncontrol.onreadystatechange = (res) => {};\ncontrol.ontimeout = (res) => {};\n// const { status, statusText, readyState, responseHeaders, response, finalUrl } = res;\n\nGM_download({ url, name /* 选项同 GM_xmlhttpRequest */ });\nGM_download(url, name);\n通过 GM_xmlhttpRequest 实现 GM_fetch，参见
https://github.com/Trim21/gm-fetch
https://github.com/AlttiRi/gm_fetch
https://github.com/mitchellmebane/GM_fetch
/* 例如 */\n\n// ==UserScript==\n// @name GM_fetch\n// @match *://*/*\n// @connect *\n// @grant unsafeWindow\n// @grant GM_xmlhttpRequest\n// @require https://raw.githubusercontents.com/mitchellmebane/GM_fetch/master/GM_fetch.min.js\n// ==/UserScript==\n\nGM_fetch("http://ip.42.pl/raw")\n .then((res) => res.text())\n .then(console.log);\nGM.* asynchttps://violentmonkey.github.io/api/gm/#gm
\n","tags":["js"]},{"id":"css-flexbox","url":"https://yieldray.fun/posts/css-flexbox","title":"CSS flexible box / grid layout","date_published":"2023-01-15T14:30:00.000Z","date_modified":"2023-01-15T14:30:00.000Z","content_text":"https://css-tip.com/explore/alignment/
https://2ality.com/2025/10/css-layout.html
displaydisplay =\n [ <display-outside> || <display-inside> ] | ...\n当容器元素 display 为 [inline-]{flex,grid} 时，其子元素显然参与的不是流布局（而是flex或grid布局），故而此时子元素的外部显示类型无意义。
举个例子：子元素设置为 display:inline 和 display:block 效果相同。设置为 display:inline-flex 和 display:flex 效果相同。
https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Flexbox
https://developer.mozilla.org/docs/Web/CSS/CSS_flexible_box_layout
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
flex-direction主轴
\nrow (horizontal)
column (vertical)
flex-wrap是否允许换行
\nnowrap (default)
wrap
wrap-reverse
{justify,align}-{content,items}| \n | \n |
|---|---|
justify | \n沿主轴定位 | \n
align | \n沿交叉轴定位 | \n
https://developer.mozilla.org/docs/Web/CSS/justify-content
https://developer.mozilla.org/docs/Web/CSS/justify-items
https://developer.mozilla.org/docs/Web/CSS/align-content
https://developer.mozilla.org/docs/Web/CSS/align-items
| \n | \n |
|---|---|
content | \n指定这组元素在（整个）剩余空间的定位 | \n
items | \n指定元素在（元素自身）剩余空间内的位置 | \n
\n\ncontent 指整个容器方向的空间（单数，一个容器）；items 为复数形式，指每个元素自己可占据的空间。
\n
主轴，justify，默认为水平方向。这些属性在 grid 布局中具有相同的语义。
{justify,align}-selfhttps://developer.mozilla.org/docs/Web/CSS/justify-self
https://developer.mozilla.org/docs/Web/CSS/align-self
justify-items 为每个元素的 justify-self 指定默认值
align-items 为每个元素的 align-self 指定默认值
显然，在不允许换行的情况下，交叉轴上不会出现一组元素，此时 align-content 无效
\nflex-basis指定元素的基础大小/尺寸（而无需 box-sizing: border-box）
在 flex-direction: row 下，相当于 width
在 flex-direction: column 下，相当于 height
flex-grow指定元素在（容器）有剩余空间 时，元素 分担 增长尺寸的 比例，默认值是 0
\n（每个元素）增长的尺寸 = 剩余空间 * （这个元素）根据比例得出百分比
\n\n\n剩余空间 = 容器尺寸 - 所有元素的基础尺寸（flex-basis）
\n
根据比例得出百分比 = 这个元素的比例 / 所有元素的比例之和
flex-shrink指定元素在（容器）溢出 时，元素 分担 减小尺寸（收缩一词并不准确）的 比例，默认值是 1
\n（每个元素）减小的尺寸 = 溢出空间 * （这个元素）根据比例得出百分比
\n\n\n溢出空间 = 容器尺寸 - 所有元素的基础尺寸（flex-basis）
\n
其实和剩余空间的计算方法相同
由于默认值是 1，所以溢出时，每个元素都会收缩。对不应该收缩的元素指定 flex-shrink: 0 即可
此属性会受到元素指定的最小尺寸的影响，如 min-width
min-width 的优先级更高。一旦元素收缩到最小尺寸将不再收缩
一些元素有默认的最小尺寸，如 input[type="text"] 的最小尺寸是 170px-200px
要使这种元素也收缩，可以指定其 min-width: 0px
flexflex =\n none |\n [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]\n注意，在指定 flex 简写属性时：
省略 <flex-grow>时，默认值为 1
省略 <flex-shrink> 时，看是否指定了 <flex-basis>；若指定则 <flex-shrink> = 1，否则 <flex-shrink> = 0
省略 <flex-basis> 时，默认值为 0
作为单独属性时，flex-grow 默认值为 0，flex-shrink 默认值为 1
\nplace-items相当于同时指定 {justify,align}-items
place-items =\n <'align-items'> <'justify-items'>?\nplace-content相当于同时指定 {justify,align}-content
place-content =\n <'align-content'> <'justify-content'>?\nplace-self相当于同时指定 {justify,align}-self
place-self =\n <'align-self'> <'justify-self'>?\ngrid-template-{columns,rows}grid-template-areas grid-areagrid-{column,row}[-{start,end}]grid-auto-{columns,rows}grid-auto-flowgridtkinter 适合简单的 GUI 程序
文档：https://docs.python.org/zh-cn/3/library/tk.html
参考：https://www.pytk.net/tkinter.html
# tkinter 控件\nfrom tkinter import *\nfrom tkinter import messagebox, filedialog\nfrom tkinter.scrolledtext import ScrolledText\n\n# ttk 控件\nfrom tkinter.ttk import *\n\nimport time\nimport os\n\n\nwindow = Tk()\nscreen_w = window.winfo_screenwidth()\nscreen_h = window.winfo_screenheight()\nwindow_w = 800\nwindow_h = 600\nwindow.geometry(\n f"{window_w}x{window_h}+{int((screen_w-window_w)/2+0.5)}+{int((screen_h-window_h)/2+0.5)}")\n# 宽x高+横坐标+纵坐标 （整数，坐标可以是负数）\nwindow.title("Tkinter 测试")\n\nif os.path.isfile("favicon.ico"):\n window.iconbitmap("favicon.ico")\n\n# 布局\n# pack/grid/place\n# pack 和 grid 不能混用\n\n# msg = Message(window, text="你好", width=60)\n# msg.pack()\n# msg.config(text="世界")\n# msg["text"] = "再见"\n\ndystr = StringVar()\n\n\ndef set_time():\n dystr.set(time.strftime("%Y年%M月%d日 %H:%M:%S"))\n window.after(1000, set_time)\n\n\nset_time()\n\nLabel(window, textvariable=dystr, font=("微软雅黑", 16)).grid()\n\n\n########################################################\n\nLabel(window, text="账号：").grid(row=1)\nEntry(window).grid(row=1, column=1, padx=0, pady=5)\nLabel(window, text="密码：").grid(row=2)\nEntry(window, show="*").grid(row=2, column=1, padx=0, pady=5)\n\n\ndef ask_for_quit():\n result = messagebox.askokcancel("提示", "确认退出?", default=messagebox.CANCEL)\n if result:\n window.quit()\n\n\nButton(window, text="按钮", command=ask_for_quit).grid(row=3, pady=2)\nButton(window, text="退出", command=window.quit).grid(row=3, column=1)\n\n\n########################################################\n\narea = Frame(window)\narea.grid(row=4, rowspan=2, columnspan=5)\n\ntextarea = Text(area, width=50, height=10)\ntextarea.pack(side=LEFT)\n\nsb = Scrollbar(area, orient=VERTICAL, command=textarea.yview)\nsb.pack(side=RIGHT, fill=Y)\n\ntextarea.configure(yscrollcommand=sb.set)\ntextarea.insert(INSERT, "多段文字\\n"*20)\n# area.update()\n\n########################################################\n\nSpinbox(window, values=("Apple", "Banana", "Cookie")).grid()\n\ncbox = Combobox(window, values=["Apple", "Banana", "Cookie"])\ncbox.bind("<<ComboboxSelected>>",\n lambda e: messagebox.showinfo("选中", cbox.get()))\ncbox.grid()\n\n\n########################################################\n\ndybool = BooleanVar(value=False)\ncbtn = Checkbutton(window, text="Proxy?", onvalue=True,\n offvalue=False, variable=dybool,\n command=lambda: messagebox.showinfo("提示", str(dybool.get())))\n\ncbtn.grid()\n\n########################################################\n\n\ndef menuCommand(e=None):\n messagebox.showinfo("菜单", "这是菜单")\n\n\nmain_menu = Menu(window)\n\nsub_menu = Menu(main_menu, tearoff=False) # tearoff=False 不显示分割线\nsub_menu.add_command(label="新建", command=menuCommand, accelerator="Ctrl+N")\nsub_menu.add_command(label="打开", command=menuCommand, accelerator="Ctrl+O")\nsub_menu.add_command(label="保存", command=menuCommand, accelerator="Ctrl+S")\nwindow.bind("<Control-n>", menuCommand)\nwindow.bind("<Control-N>", menuCommand)\nwindow.bind("<Control-o>", menuCommand)\nwindow.bind("<Control-O>", menuCommand)\nwindow.bind("<Control-s>", menuCommand)\nwindow.bind("<Control-S>", menuCommand)\nsub_menu.add_separator()\nsub_menu.add_command(label="退出", command=window.quit)\n\nmain_menu.add_cascade(label="文件", menu=sub_menu)\nmain_menu.add_command(label="编辑", command=menuCommand)\nmain_menu.add_command(label="帮助", command=menuCommand)\nwindow.config(menu=main_menu)\n\n########################################################\n\nclick_menu = Menu(window, tearoff=False)\nclick_menu.add_command(label="前进")\nclick_menu.add_command(label="后退")\nwindow.bind("<Button-3>", lambda e: click_menu.post(e.x_root, e.y_root))\n\n########################################################\n\n\ndef create_top_level():\n t = Toplevel()\n t.title("标题")\n t.geometry("500x500")\n\n pb = Progressbar(t, mode="indeterminate")\n pb.start()\n pb.pack()\n\n tree = Treeview(t, columns=["1", "2", "3"],\n selectmode="none", show="headings")\n tree.column("1", width=100, anchor=W)\n tree.column("2", width=100, anchor=CENTER)\n tree.column("3", width=100, anchor=E)\n tree.heading("1", text="column one")\n tree.heading("2", text="column two")\n tree.heading("3", text="column three")\n tree.insert("", "end", values=["aaa", "bbb", "ccc"])\n tree.pack()\n\n Label(t, text="LabelView").pack()\n Message(t, text="MessageView").pack()\n\n textarea = ScrolledText(t)\n textarea.insert(END, "自带滚动条的文本框组件"*100)\n textarea.pack()\n\n\nmenu_btn = Menubutton(window, text="菜单按钮")\nmenu_btn.place(x=400, y=400)\nmenu_menu = Menu(menu_btn, tearoff=False)\nmenu_menu.add_command(label="确定", command=create_top_level)\nmenu_menu.add_command(label="取消")\nmenu_btn["menu"] = menu_menu\n\n########################################################\n\n\ndef ask_for_file():\n path = filedialog.askopenfilename()\n if path != "":\n lb.config(text=path)\n else:\n lb.config(text="未选择文件")\n\n\nbtn = Button(window, text="点击选择文件", command=ask_for_file)\nbtn.grid()\nlb = Label(window, text="选择文件")\nlb.grid()\n\n########################################################\n\ncvs = Canvas(window, bg="black")\ncvs.create_text(50, 75, text="Consolas", fill="white",\n anchor=W, font=("Consolas", 40, "bold"))\ncvs.grid()\n\n\ndef show_event(e: Event):\n def obj_info(obj):\n s = ""\n keys = filter(lambda attr: not attr.startswith("_"), dir(obj))\n for k in keys:\n s += f"{k}: {getattr(obj, k)}\\n"\n return s\n messagebox.showinfo(repr(e), obj_info(e))\n\n\n# <[{事件修饰符}-]{事件类型}[-{事件选项}]>\ncvs.bind("<ButtonPress-1>", show_event)\n\n########################################################\n\nwindow.mainloop()\nvenv 的使用，参见此处
mkdir my_proj\ncd my_proj\npython -m venv ./\nvim test.py\npyinstaller test.py -w # -w 选项，在 Windows 下不打开命令行窗口\n\n# 指定图标\npyinstaller test.py -w -i favicon.ico\n# 打包成单文件（不建议，会使程序启动变慢）\npyinstaller test.py -w -F\npyinstaller 会使用 upx 进行压缩
\n","tags":["python"]},{"id":"python-asyncio-task","url":"https://yieldray.fun/posts/python-asyncio-task","title":"python协程与任务","date_published":"2023-01-13T17:44:44.000Z","date_modified":"2023-01-13T17:44:44.000Z","content_text":"https://docs.python.org/zh-cn/3/library/asyncio-task.html
\nhttps://docs.python.org/zh-cn/3/library/asyncio-eventloop.html
\n要运行 Coroutine，需要获取事件循环
import asyncio\n\nloop = asyncio.new_event_loop() # 创建一个事件循环\nasyncio.set_event_loop(loop) # 将当前线程的事件循环设置为该事件循环\nprint(loop == asyncio.get_event_loop()) # 当前事件循环就是刚才设置的事件循环\n# True\nimport asyncio\nfrom asyncio import Future, Task\nfrom typing import Coroutine, Awaitable\n\nf"{Coroutine, Future, Task} 都是 {Awaitable} 对象"\n\nasync def async_func(x=0.1, /):\n await asyncio.sleep(x)\n return x\n\ncoroutine = async_func(1) # async 函数返回 Coroutine 对象\nasyncio.run(coroutine) # 运行 Coroutine 的最简单方法是使用 asyncio.run() 函数（无需事件循环）\n\nloop = asyncio.new_event_loop()\nasyncio.set_event_loop(loop)\n\nloop.run_until_complete(async_func()) # 将 Coroutine 注册到事件循环，并启动事件循环\n# 相当于:（asyncio.create_task() 方法接受一个 Coroutine 或 Generator）\n# 当一个 Coroutine 通过 asyncio.create_task() 等函数被封装为一个 Task 时，该 Coroutine 会被自动调度执行\ntask = loop.create_task(async_func()) # 创建 Task。此时的 Task 尚未加入事件循环，状态为 pending\nloop.run_until_complete(task) # 将 Task 注册到事件循环，并启动事件循环。Task 执行完后，状态为 finished\n\n\n# Task 对象允许设置完成时的回调\ndef callback(future: Future):\n # Task 是 Future 的子类\n print(future.result())\n\n\ntask = loop.create_task(async_func(0.12))\ntask.add_done_callback(callback)\nloop.run_until_complete(task)\n\n# Future 是一种特殊的低层级 Awaitable 对象，表示一个异步操作的最终结果。\n# ensure_future 函数将 Coroutine 或 Awaitable 对象包装成 Future\nfuture = asyncio.ensure_future(async_func())\nloop.run_until_complete(future)\n\n\n# 并发运行任务\n\n# asyncio.wait 函数将 Future 迭代器组合成一个协程\nloop.run_until_complete(\n asyncio.wait([\n asyncio.ensure_future(async_func(0.1)),\n asyncio.ensure_future(async_func(0.2)),\n asyncio.ensure_future(async_func(0.3)),\n ])\n)\n\n# asyncio.gather 函数将传入的所有 Future 参数组合成一个迭代器\nloop.run_until_complete(\n asyncio.gather(\n asyncio.ensure_future(async_func(0.1)),\n asyncio.ensure_future(async_func(0.2)),\n asyncio.ensure_future(async_func(0.3)),\n )\n)\npython 3.11 还提供了 TaskGroup
\nasync def main():\n async with asyncio.TaskGroup() as tg:\n task1 = tg.create_task(some_coro(...))\n task2 = tg.create_task(another_coro(...))\n print("Both tasks have completed now.")\n进程：https://docs.python.org/zh-cn/3/library/multiprocessing.html#process-and-exceptions
\nos 模块提供了操作系统相关的系统调用，multiprocessing 模块提供了跨平台的多进程
\nfrom multiprocessing import Process\nimport os\n\ndef info(title):\n print(title)\n print('module name:', __name__)\n print('parent process:', os.getppid())\n print('process id:', os.getpid())\n\ndef f(name):\n info('function f')\n print('hello', name)\n\nif __name__ == '__main__':\n info('main line')\n p = Process(target=f, args=('bob',))\n p.start()\n p.join()\n进程间通信，参见：https://docs.python.org/zh-cn/3/library/multiprocessing.html#exchanging-objects-between-processes
\n进程池：https://docs.python.org/zh-cn/3/library/multiprocessing.html#multiprocessing.pool.Pool
\nfrom multiprocessing import Pool\nimport os\nimport time\nimport random\n\ndef long_time_task(name):\n process_info = f'({name} pid={os.getpid():5})'\n print(f'[Start Process] {process_info}')\n start = time.time()\n time.sleep(random.random() * 3)\n end = time.time()\n print(f'[End Process] {process_info} takes {(end - start):.2f} seconds.')\n\nif __name__ == '__main__':\n print(f'[Parent Process] (pid={os.getpid()})')\n p = Pool(4)\n for i in range(5):\n p.apply_async(long_time_task, args=(i,))\n print('Waiting for all subprocesses done...')\n p.close()\n p.join() # 必须先关闭进程池\n print('All subprocesses done.')\n子进程：https://docs.python.org/zh-cn/3/library/subprocess.html
\nimport subprocess\n\nsubprocess.run(["ls", "-l"])\n\np = subprocess.run(["ls", "-l"], capture_output=True)\nprint(p.stdout.decode("utf-8"))\n\np = subprocess.run(["ls", "-l"], capture_output=True, encoding="utf-8")\nprint(p.stdout)\n\n\np = subprocess.Popen(["nslookup"], stdin=subprocess.PIPE,\n stdout=subprocess.PIPE, stderr=subprocess.PIPE,\n )\noutput, err = p.communicate(\n br"""\nset q=mx\npython.org\nexit\n""")\nprint(output)\nprint('Exit code:', p.returncode)\n线程：https://docs.python.org/zh-cn/3/library/threading.html#threading.Thread
\nimport threading\nfrom threading import Thread\n\nprint(threading.current_thread().name) # MainThread\n\n\ndef runnable(*args):\n print(threading.current_thread().name)\n print(args)\n\n\nt1 = Thread(target=runnable, args=("hello", "world"))\nt1.start()\nt1.join()\n\n\n# 若继承Thread对象，则可以覆写run方法（与java相似）\nclass MyThread(Thread):\n def run(self):\n print(threading.current_thread().name)\n\n\nt2 = MyThread()\nt2.start()\nt2.join()\n线程锁：https://docs.python.org/zh-cn/3/library/threading.html#lock-objects
\nimport threading\nfrom threading import Thread, Lock, RLock\n\nlock = Lock()\nrlock = RLock() # 可重入锁\na = 0\n\n\ndef runnable1():\n global a\n lock.acquire()\n a += 1\n a -= 1\n lock.release()\n print(a)\n\n\ndef runnable2():\n # 保证锁可释放\n global a\n lock.acquire()\n try:\n a += 1\n a -= 1\n finally:\n lock.release()\n print(a)\n\n\ndef runnable3():\n # with 语法糖\n global a\n with lock:\n a += 1\n a -= 1\n print(a)\n\n\n# 创建线程本地数据\nmydata = threading.local()\n\ndef use_local_1():\n mydata.x = 1\n\n\ndef use_local_2():\n mydata.x = 2\n标准库还提供了信号量和事件等机制：https://docs.python.org/zh-cn/3/library/threading.html
\nhttps://docs.python.org/zh-cn/3/library/concurrent.futures.html
\n参见：https://python-parallel-programmning-cookbook.readthedocs.io/zh_CN/latest/
\n","tags":["python"]},{"id":"python-date-time","url":"https://yieldray.fun/posts/python-date-time","title":"python时间与日期","date_published":"2023-01-11T15:53:39.000Z","date_modified":"2023-01-11T15:53:39.000Z","content_text":"参见：https://docs.python.org/zh-cn/3/library/datetime.html
\nfrom datetime import datetime, timedelta, timezone\n\nprint(datetime(2023, 1, 2, 3, 4, 5, 6)) # datetime对象实现了__str__方法\nprint(datetime.now())\nprint(datetime.fromtimestamp(1672502400.000)) # python时间戳单位为秒而不是毫秒\nprint(datetime.strptime('2023/12/12 12:12:12',\n '%Y/%m/%d %H:%M:%S')) # 从字符串中通过占位符读取\n\nprint(datetime(2022, 1, 1) + timedelta(days=22)) # 计算时间差\n\nprint(datetime.now().strftime('%a, %b %d %H:%M')) # datetime对象格式化为字符串\n\n\nutc_tz = timezone.utc\nutc_8_tz = timezone(timedelta(hours=8)) # UTC+8:00\n\nprint(datetime.utcnow()) # 当前UTC时间\nprint(datetime.now().astimezone(utc_tz)) # 转换为指定时区\nprint(datetime.utcnow().replace(tzinfo=utc_8_tz)) # 通过replace方法强制设置时区\nhttps://docs.python.org/zh-cn/3/tutorial/modules.html
https://docs.python.org/zh-cn/3/tutorial/venv.html
https://docs.python.org/zh-cn/3/installing/
模块包含可执行语句及函数定义。这些语句用于初始化模块，且仅在 import 语句 第一次 遇到模块名时执行
(文件作为脚本运行时，也会执行这些语句)
每个模块都有自己的独立命名空间，import 语句并不限制必须置于脚本开头
\n模块内部的全局变量 __name__ 包含了模块名(字符串)
当通过 import 导入时，__name__ = 模块名
当直接运行脚本时，__name__ = '__main__'
if __name__ == "__main__":\n from sys import argv, __name__\n print(__name__) # sys\n print(argv) # ['xxx.py']\n当一个名为 xxx 的模块被导入时，解释器首先搜索具有该名称的内置模块（这些模块的名字被列在 sys.builtin_module_names 中）
如果没有找到，它就在变量 sys.path 给出的目录列表中搜索一个名为 xxx.py 的文件，sys.path 从这些位置初始化:
PYTHONPATH （目录列表，与 shell 变量 PATH 的语法一样）site-packages 目录，由 site 模块处理。linux 下是 dist-packages）\n\n更多细节请参阅 sys.path 模块搜索路径的初始化。
\n
例如，直接通过 pip 安装的模块位于 Python\\Python312\\Lib\\site-packages\\ (windows) 目录
默认情况下 PYTHONPATH 是未配置的。
dir() 函数返回模块（暴露的）变量列表，不带参数时返回当前定义的变量列表。
def dir(模块对象 = 当前模块) -> list[str]: ...\n包就是包含模块的目录，搜索方式和模块一致（包是特殊的模块，即包含模块的模块）
python 仅将目录下包含 __init__.py 文件的目录当成包\n该脚本在包初始化时执行，还可以包含一个 __all__ 列表变量，指定包导出的模块/自包名
仅子包中可以使用相对导入，导入父包中或相同层级包中的内容
\nfrom . import echo\nfrom .. import formats\nfrom ..filters import equalizer\n# 安装最新版本\npip install requests\n\n# 安装指定版本\npip install requests==2.28.1\npip install "SomeProject>=1,<2"\npip install "SomeProject~=1.4.2"\n\n# 从git仓库安装 (-e: editable mode)\npip install -e git+https://git.repo/some_pkg.git#egg=SomeProject\npip install -e git+https://git.repo/some_pkg.git@BranchName#egg=SomeProject\n\n# 安装可选(额外)依赖\npip install SomePackage[PDF]\n\n# 升级到最新版本\npip install --upgrade requests\n\n# 显示安装的模块\npip list\n\n# 显示模块信息\npip show requests\n\n# 锁定版本\npip freeze > requirements.txt\npip install -r requirements.txt\nvenv 是 python 的内置模块（>=3.3）
\n$ python3 -m venv <dirname>\n$ cd <dirname>\n首先需要执行脚本以进入虚拟环境
\n# Windows\n.\\Scripts\\activate.bat\n\n# Windows MinGW/msys\nsource ./Scripts/activate\n\n# Unix\nsource ./bin/activate\n这样通过 pip 安装的包就会安装在当前项目路径下
执行对应的 deactivate 脚本 退出虚拟环境
pip 作为内置模块，与当前解释器版本是绑定的。
\nvirtualenv 是 venv 的高级版本，提供更多功能。例如可使用不同解释器版本。
\n\n\n\n
pip 会将包安装在当前解释器的 site-packages 目录下
\npython -m site --user-site\n对于包含可执行脚本的包，例如：
\n# setup.py\nfrom setuptools import setup\n\nsetup(\n # ... 其他参数\n entry_points={\n 'console_scripts': [\n 'my_script = my_package.my_module:main',\n # 命令行中使用的脚本名 = 包名.模块名.可执行函数名\n ],\n }\n)\n# 对于 pyproject.toml，此处从略\npip 会创建包装脚本并将其放在当前解释器环境的 bin 目录下。
\n总之，pip 安装的包的路径与当前解释器路径相关。
\npipx 用于安装和运行 Python 打包的应用程序, 而不是作为库使用（区别于 pip）。
\npipx 将每个应用程序安装到独立的虚拟环境中，并将其可执行文件链接到当前 shell 环境中。
\npipenv 可以看作是 virtualenv 和 pip 的结合体，能够自动管理虚拟环境和依赖关系。
\nhatch 是一款现代的、可扩展的 Python 项目管理器。
\npoetry 是一个项目（包）管理工具，每个项目都是一个包，并为当前项目创建虚拟环境。
\npdm 是支持最新 PEP 标准的现代 Python 软件包和依赖关系管理器。
\nRye 是适用于 Python 的全面项目和包管理解决方案。
\n\n\n新项目建议使用 uv
\n
uv 是一个 Rust 写的极速包管理和项目管理工具。
\n","tags":["python"]},{"id":"python-functional","url":"https://yieldray.fun/posts/python-functional","title":"python函数式编程","date_published":"2023-01-09T22:19:59.000Z","date_modified":"2023-01-09T22:19:59.000Z","content_text":"函数式编程指引
https://docs.python.org/zh-cn/3/howto/functional.html
def gen():\n s = ""\n while True:\n val = (yield s)\n if type(val) is str:\n s += val\n\n\ny = gen()\nprint(next(y)) # 相当于 print(y.send(None))\n# send 方法向下一个 yield 语句发送值\n# yield 若未接收值，则 yield 语句返回 None\n# 不过 send 方法无法向刚开始的生成器发送非 None 值\nprint(y.send("hello")) # hello\nprint(y.__next__()) # hello\nprint(y.send("world")) # helloworld\ny.close() # 调用 close 方法关闭生成器\n注意！map 是一个类而不只是函数（因为要实现迭代器）
\n# 部分定义\nclass map(Iterator[_S], Generic[_S]):\n @overload\n def __init__(self, __func: Callable[[_T1], _S], __iter1: Iterable[_T1]) -> None: ...\n @overload\n def __init__(self, __func: Callable[[_T1, _T2], _S], __iter1: Iterable[_T1], __iter2: Iterable[_T2]) -> None: ...\n\n\nprint(list(\n map(lambda x: x**2, [1, 2, 3])\n # [1, 4, 9]\n))\n\nprint(list(\n map(lambda x, y: (x**2, y**2), [1, 2, 3], [2, 3, 4])\n # [(1, 4), (4, 9), (9, 16)]\n))\n# 定义大概可以写成这样\nfrom typing import TypeVar, Iterable, Callable\nT = TypeVar('T')\ndef reduce(function: Callable[[T, T], T], sequence: Iterable[T], initial: T): ...\n\n\nfrom functools import reduce\nprint(\n reduce(lambda x, y: x*10+y, [3, 4, 5], 0)\n # 345\n)\n\nprint(\n reduce(lambda x, y: x+y, [3, 3, 3], 1)\n # 10\n # 相当于\n # reduce(lambda x, y: x+y, [1, 3, 3, 3])\n)\nfilter 也是一个类，同样是因为要实现迭代器
\n# 部分定义\nclass filter(Iterator[_T], Generic[_T]):\n @overload\n def __init__(self, __function: Callable[[_S], TypeGuard[_T]], __iterable: Iterable[_S]) -> None: ...\n @overload\n def __init__(self, __function: Callable[[_T], Any], __iterable: Iterable[_T]) -> None: ...\n\n\nprint(list(\n filter(lambda x: x % 2 == 0, [-2, -1, 0, 1, 2, 3])\n # [-2, 0, 2]\n))\n装饰器是高阶函数
\nimport functools\n\n\ndef decorator(fn): # fn 是装饰器修饰的函数对象\n # @functools.wraps(fn)\n # functools.wraps 这个装饰器保证被装饰器装饰后的函数还拥有原来的属性\n def wrapper(*args, **kw): # 装饰器返回的 wrapper 函数是实际调用的函数对象。换言之，装饰器修饰的函数被 wrapper 替代\n # wrapper.__name__ = fn.__name__\n print("{}(args={}, kw={})".format(fn.__name__, args, kw))\n return fn(*args, **kw)\n return wrapper\n\n\ndef decorator_lambda(fn): # 装饰器就是返回函数的函数。使用匿名函数替代如下\n return lambda *args, **kw: print("{}(args={}, kw={})".format(fn.__name__, args, kw))\n\n\ndef decorator_with_param(*params): # 带参数的装饰器，是一个返回装饰器的函数\n print("@decorator_with_param{}".format(params))\n\n def decorator(fn):\n def wrapper(*args, **kw):\n print("{}(args={}, kw={})".format(fn.__name__, args, kw))\n return fn(*args, **kw)\n return wrapper\n return decorator\n\n\ndef decorator_with_param_lambda(*params): # 使用匿名函数替代如下\n print("@decorator_with_param{}".format(params))\n return lambda fn: lambda *args, **kw: print("{}(args={}, kw={})".format(fn.__name__, args, kw))\n\n\n# TEST\n\n@decorator\ndef test1(a, b, c):\n pass\n\n\n@decorator_with_param("param1", "param2")\ndef test2(a, b, c):\n pass\n\n\ntest1(1, 2, c=3)\ntest2(4, 5, c=6)\nhttps://github.com/features/actions
https://docs.github.com/actions
https://www.actionsbyexample.com/
Github Actions 是一个 CI/CD 平台
\n配置文件置于.github/workflows目录，文件名任意，后缀需为.yml 语法文档
# https://docs.github.com/actions/learn-github-actions/understanding-github-actions\n\nname: GitHub Actions Demo\nrun-name: ${{ github.actor }} is testing out GitHub Actions 🚀\non: [push, workflow_dispatch]\n\njobs:\n Explore-GitHub-Actions:\n runs-on: ubuntu-latest\n steps:\n - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."\n - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by GitHub!"\n - run: echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."\n - name: Check out repository code\n uses: actions/checkout@v3\n - run: echo "💡 The ${{ github.repository }} repository has been cloned to the runner."\n - run: echo "🖥️ The workflow is now ready to test your code on the runner."\n - name: List files in the repository\n run: |\n ls ${{ github.workspace }}\n - run: echo "🍏 This job's status is ${{ job.status }}."\nhttps://docs.github.com/en/actions/learn-github-actions/understanding-github-actions
\n![\"\"](\"https://s2.loli.net/2023/06/25/b8dXnfajB6mKJsu.webp\")
每一个 yaml 文件配置了一个 workflow
\n指定的 events 触发 workflow 的运行 （所有 events）
\njobs 是一组 steps 的集合，这组 steps 运行于同一个 runner 环境下（参见）
\nstep 可以是 shell 命令，亦或是 actions
\nactions 是特殊的 step，类似于函数，允许提供参数来调用（参见）
\nrunner 实际上就是运行的操作系统类型（例如： windows-latest ubuntu-latest macos-latest）
参考：https://github.com/actions/starter-workflows/blob/main/pages/static.yml
\n以下是一个部署 hexo 的示例，首先需要在 repo 中设置好 pages 从 actions 部署![\"\"](\"https://s2.loli.net/2023/06/25/2Zs5zGveXapCtYW.png\")
然后，假设目录名为 repo，创建 repo/.github/workflows/pages.yml 文件，内容如下
# Simple workflow for deploying static content to GitHub Pages\nname: Deploy static content to Pages\n\non:\n # Runs on pushes targeting the default branch\n push:\n branches: ["main"]\n\n # Allows you to run this workflow manually from the Actions tab\n workflow_dispatch:\n\n# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages\npermissions:\n contents: read\n pages: write\n id-token: write\n\n# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.\n# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.\nconcurrency:\n group: "pages"\n cancel-in-progress: false\n\njobs:\n # Single deploy job since we're just deploying\n deploy:\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v4\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n\n - name: Node.js\n run: node -v\n\n - name: Npm install\n run: npm install\n\n - name: Npm build\n run: npm run build\n\n - name: Setup Pages\n uses: actions/configure-pages@v3\n\n - name: Upload artifact\n uses: actions/upload-pages-artifact@v1\n with:\n # Upload ./public\n path: "public"\n\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v2\n以下 Typescript 定义为节选
\nhttps://developer.mozilla.org/docs/Web/API/MouseEvent
\nmousedown/mouseup
mouseover/mouseout
mousemove
click/dblclick/contextmenu
坐标系原点为左上角
\n// prettier-ignore\ninterface MouseEvent extends UIEvent {\n readonly altKey: boolean;\n readonly shiftKey: boolean;\n readonly ctrlKey: boolean;\n readonly metaKey: boolean;\n readonly button: number; // 左键0，中键1，右键2\n readonly buttons: number; // 所有按键的数值做或运算\n\n readonly clientX: number; // 相对于窗口的横坐标\n readonly clientY: number; // 相对于窗口的纵坐标\n readonly x: number; // 同 clientX\n readonly y: number; // 同 clientY\n\n readonly pageX: number; // 相对于文档的横坐标\n readonly pageY: number; // 相对于文档的纵坐标\n\n readonly screenX: number; // 相对于显示器的横坐标\n readonly screenY: number; // 相对于显示器的纵坐标\n\n readonly movementX: number; // 相对于最后mousemove事件位置的横坐标\n readonly movementY: number; // 相对于最后mousemove事件位置的纵坐标\n\n readonly relatedTarget: EventTarget | null;\n /* 继承的 readonly target: EventTarget */\n readonly offsetX: number; // 相对于target的padding-box的横坐标（若在边框上，则为负数）\n readonly offsetY: number; // 相对于target的padding-box的纵坐标（若在边框上，则为负数）\n /* ... */\n}\n往往需要阻止默认事件
\nelement.ondragstart = () => false;\nElement.prototype.getBoundingClientRect(): DOMRect返回元素 border-box 相当于窗口左上角的距离（精确到小数位）。
\n![\"element-box-diagram\"](\"https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect/element-box-diagram.png\")
interface DOMRect extends /* ... */ {\n readonly left: number; // 元素border-box左边相对窗口的距离\n readonly top: number;\n readonly bottom: number;\n readonly right: number;\n\n x: number; // 元素起始点横坐标\n y: number; // 元素起始点纵坐标\n width: number; // 可为负数\n height: number; // 可为负数\n /* ... */\n}\nhttps://developer.mozilla.org/docs/Web/API/Element
https://developer.mozilla.org/docs/Web/API/HTMLElement
这些属性的值会四舍五入
\ninterface Element extends /* ... */ {\n // border + scrollBar\n readonly clientLeft: number; // 元素padding外部与border外部的水平距离（若无滚动条，即为边框宽度）\n readonly clientTop: number; // 元素padding外部与border外部的垂直距离（若无滚动条，即为边框高度）\n\n // content + padding\n readonly clientWidth: number; // 元素padding-box宽度（不包括滚动条宽度）\n readonly clientHeight: number; // 元素padding-box高度（不包括滚动条宽度）\n\n // scroll + content + padding\n readonly scrollWidth: number; // 元素border-box宽度，包括滚动出的部分（不包括滚动条宽度）\n readonly scrollHeight: number; // 元素border-box高度，包括滚动出的部分（不包括滚动条宽度）\n\n // scroll\n scrollTop: number; // 元素滚动出的垂直距离\n scrollLeft: number; // 元素滚动出的水平距离\n /* ... */\n}\n\ninterface HTMLElement extends Element /* ... */ {\n // border + padding + content\n readonly offsetWidth: number; // 元素border-box宽度\n readonly offsetHeight: number; // 元素border-box高度\n\n readonly offsetParent: Element | null; // 最接近的祖先元素（定位）\n readonly offsetLeft: number; // 元素相对offsetParent的border-box左上角的水平距离\n readonly offsetTop: number; // 元素相对offsetParent的border-box左上角的垂直距离\n /* ... */\n}\n![\"\"](\"https://developer.mozilla.org/docs/Web/API/Window/outerHeight/firefoxinnervsouterheight2.png\")
interface Window extends EventTarget /* ... */ {\n // 包括滚动条的宽高（不包括滚动部分）\n readonly innerHeight: number;\n readonly innerWidth: number;\n\n // 整个浏览器窗口的宽高\n readonly outerHeight: number;\n readonly outerWidth: number;\n\n // 文档当前滚动距离，相当于document.documentElement.scrollTop/scrollLeft\n readonly scrollX: number;\n readonly scrollY: number;\n // 下面的两个属性只是上面的别名\n readonly pageXOffset: number;\n readonly pageYOffset: number;\n\n // 浏览器与显示器边界的距离\n readonly screenX: number;\n readonly screenY: number;\n // 下面的两个属性只是上面的别名\n readonly screenLeft: number;\n readonly screenTop: number;\n\n readonly screen: {\n readonly availHeight: number;\n readonly availWidth: number;\n readonly width: number;\n readonly height: number;\n readonly colorDepth: number;\n readonly pixelDepth: number;\n readonly orientation: ScreenOrientation;\n };\n /* ... */\n}\ninterface ScrollOptions {\n behavior?: "auto" | "smooth";\n}\n\ninterface ScrollToOptions extends ScrollOptions {\n left?: number;\n top?: number;\n}\n\ninterface ScrollIntoViewOptions extends ScrollOptions {\n block?: "center" | "end" | "nearest" | "start";\n inline?: "center" | "end" | "nearest" | "start";\n}\ninterface Element /* ... */ {\n /* ... */\n scroll(options?: ScrollToOptions): void;\n scroll(x: number, y: number): void;\n scrollBy(options?: ScrollToOptions): void;\n scrollBy(x: number, y: number): void;\n scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;\n scrollTo(options?: ScrollToOptions): void;\n scrollTo(x: number, y: number): void;\n}\n\ninterface Window /* ... */ {\n /* ... */\n scroll(options?: ScrollToOptions): void;\n scroll(x: number, y: number): void;\n scrollBy(options?: ScrollToOptions): void;\n scrollBy(x: number, y: number): void;\n scrollTo(options?: ScrollToOptions): void;\n scrollTo(x: number, y: number): void;\n}\nlib.dom.d.ts![\"httpszh.javascript.infobasic-dom-node-properties.png\"](\"https://s2.loli.net/2022/11/30/BYK8bWmaS5ARkZO.png\")
/** Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. */\ninterface Element extends Node, ARIAMixin, Animatable, ChildNode, InnerHTML, NonDocumentTypeChildNode, ParentNode, Slottable {\n readonly attributes: NamedNodeMap;\n /** Allows for manipulation of element's class content attribute as a set of whitespace-separated tokens through a DOMTokenList object. */\n readonly classList: DOMTokenList;\n /** Returns the value of element's class content attribute. Can be set to change it. */\n className: string;\n readonly clientHeight: number;\n readonly clientLeft: number;\n readonly clientTop: number;\n readonly clientWidth: number;\n /** Returns the value of element's id content attribute. Can be set to change it. */\n id: string;\n /** Returns the local name. */\n readonly localName: string;\n /** Returns the namespace. */\n readonly namespaceURI: string | null;\n onfullscreenchange: ((this: Element, ev: Event) => any) | null;\n onfullscreenerror: ((this: Element, ev: Event) => any) | null;\n outerHTML: string;\n readonly ownerDocument: Document;\n readonly part: DOMTokenList;\n /** Returns the namespace prefix. */\n readonly prefix: string | null;\n readonly scrollHeight: number;\n scrollLeft: number;\n scrollTop: number;\n readonly scrollWidth: number;\n /** Returns element's shadow root, if any, and if shadow root's mode is "open", and null otherwise. */\n readonly shadowRoot: ShadowRoot | null;\n /** Returns the value of element's slot content attribute. Can be set to change it. */\n slot: string;\n /** Returns the HTML-uppercased qualified name. */\n readonly tagName: string;\n /** Creates a shadow root for element and returns it. */\n attachShadow(init: ShadowRootInit): ShadowRoot;\n /** Returns the first (starting at element) inclusive ancestor that matches selectors, and null otherwise. */\n closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;\n closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;\n closest<E extends Element = Element>(selectors: string): E | null;\n /** Returns element's first attribute whose qualified name is qualifiedName, and null if there is no such attribute otherwise. */\n getAttribute(qualifiedName: string): string | null;\n /** Returns element's attribute whose namespace is namespace and local name is localName, and null if there is no such attribute otherwise. */\n getAttributeNS(namespace: string | null, localName: string): string | null;\n /** Returns the qualified names of all element's attributes. Can contain duplicates. */\n getAttributeNames(): string[];\n getAttributeNode(qualifiedName: string): Attr | null;\n getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;\n getBoundingClientRect(): DOMRect;\n getClientRects(): DOMRectList;\n /** Returns a HTMLCollection of the elements in the object on which the method was invoked (a document or an element) that have all the classes given by classNames. The classNames argument is interpreted as a space-separated list of classes. */\n getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;\n getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;\n getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;\n getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;\n getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;\n getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;\n getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;\n /** Returns true if element has an attribute whose qualified name is qualifiedName, and false otherwise. */\n hasAttribute(qualifiedName: string): boolean;\n /** Returns true if element has an attribute whose namespace is namespace and local name is localName. */\n hasAttributeNS(namespace: string | null, localName: string): boolean;\n /** Returns true if element has attributes, and false otherwise. */\n hasAttributes(): boolean;\n hasPointerCapture(pointerId: number): boolean;\n insertAdjacentElement(where: InsertPosition, element: Element): Element | null;\n insertAdjacentHTML(position: InsertPosition, text: string): void;\n insertAdjacentText(where: InsertPosition, data: string): void;\n /** Returns true if matching selectors against element's root yields element, and false otherwise. */\n matches(selectors: string): boolean;\n releasePointerCapture(pointerId: number): void;\n /** Removes element's first attribute whose qualified name is qualifiedName. */\n removeAttribute(qualifiedName: string): void;\n /** Removes element's attribute whose namespace is namespace and local name is localName. */\n removeAttributeNS(namespace: string | null, localName: string): void;\n removeAttributeNode(attr: Attr): Attr;\n /**\n * Displays element fullscreen and resolves promise when done.\n *\n * When supplied, options's navigationUI member indicates whether showing navigation UI while in fullscreen is preferred or not. If set to "show", navigation simplicity is preferred over screen space, and if set to "hide", more screen space is preferred. User agents are always free to honor user preference over the application's. The default value "auto" indicates no application preference.\n */\n requestFullscreen(options?: FullscreenOptions): Promise<void>;\n requestPointerLock(): void;\n scroll(options?: ScrollToOptions): void;\n scroll(x: number, y: number): void;\n scrollBy(options?: ScrollToOptions): void;\n scrollBy(x: number, y: number): void;\n scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;\n scrollTo(options?: ScrollToOptions): void;\n scrollTo(x: number, y: number): void;\n /** Sets the value of element's first attribute whose qualified name is qualifiedName to value. */\n setAttribute(qualifiedName: string, value: string): void;\n /** Sets the value of element's attribute whose namespace is namespace and local name is localName to value. */\n setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;\n setAttributeNode(attr: Attr): Attr | null;\n setAttributeNodeNS(attr: Attr): Attr | null;\n setPointerCapture(pointerId: number): void;\n /**\n * If force is not given, "toggles" qualifiedName, removing it if it is present and adding it if it is not present. If force is true, adds qualifiedName. If force is false, removes qualifiedName.\n *\n * Returns true if qualifiedName is now present, and false otherwise.\n */\n toggleAttribute(qualifiedName: string, force?: boolean): boolean;\n /** @deprecated This is a legacy alias of `matches`. */\n webkitMatchesSelector(selectors: string): boolean;\n addEventListener<K extends keyof ElementEventMap>(\n type: K,\n listener: (this: Element, ev: ElementEventMap[K]) => any,\n options?: boolean | AddEventListenerOptions\n ): void;\n addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;\n removeEventListener<K extends keyof ElementEventMap>(\n type: K,\n listener: (this: Element, ev: ElementEventMap[K]) => any,\n options?: boolean | EventListenerOptions\n ): void;\n removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;\n}\n\ndeclare var Element: {\n prototype: Element;\n new (): Element;\n};\n\ninterface ElementCSSInlineStyle {\n readonly style: CSSStyleDeclaration;\n}\n\ninterface ElementContentEditable {\n contentEditable: string;\n enterKeyHint: string;\n inputMode: string;\n readonly isContentEditable: boolean;\n}\n\ninterface ElementInternals extends ARIAMixin {\n /** Returns the form owner of internals's target element. */\n readonly form: HTMLFormElement | null;\n /** Returns a NodeList of all the label elements that internals's target element is associated with. */\n readonly labels: NodeList;\n /** Returns the ShadowRoot for internals's target element, if the target element is a shadow host, or null otherwise. */\n readonly shadowRoot: ShadowRoot | null;\n /** Returns the error message that would be shown to the user if internals's target element was to be checked for validity. */\n readonly validationMessage: string;\n /** Returns the ValidityState object for internals's target element. */\n readonly validity: ValidityState;\n /** Returns true if internals's target element will be validated when the form is submitted; false otherwise. */\n readonly willValidate: boolean;\n /** Returns true if internals's target element has no validity problems; false otherwise. Fires an invalid event at the element in the latter case. */\n checkValidity(): boolean;\n /** Returns true if internals's target element has no validity problems; otherwise, returns false, fires an invalid event at the element, and (if the event isn't canceled) reports the problem to the user. */\n reportValidity(): boolean;\n /**\n * Sets both the state and submission value of internals's target element to value.\n *\n * If value is null, the element won't participate in form submission.\n */\n setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;\n /** Marks internals's target element as suffering from the constraints indicated by the flags argument, and sets the element's validation message to message. If anchor is specified, the user agent might use it to indicate problems with the constraints of internals's target element when the form owner is validated interactively or reportValidity() is called. */\n setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n}\n\ndeclare var ElementInternals: {\n prototype: ElementInternals;\n new (): ElementInternals;\n};\n/** Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */\ninterface HTMLElement extends Element, DocumentAndElementEventHandlers, ElementCSSInlineStyle, ElementContentEditable, GlobalEventHandlers, HTMLOrSVGElement {\n accessKey: string;\n readonly accessKeyLabel: string;\n autocapitalize: string;\n dir: string;\n draggable: boolean;\n hidden: boolean;\n inert: boolean;\n innerText: string;\n lang: string;\n readonly offsetHeight: number;\n readonly offsetLeft: number;\n readonly offsetParent: Element | null;\n readonly offsetTop: number;\n readonly offsetWidth: number;\n outerText: string;\n spellcheck: boolean;\n title: string;\n translate: boolean;\n attachInternals(): ElementInternals;\n click(): void;\n addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;\n addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;\n removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;\n removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;\n}\n\ndeclare var HTMLElement: {\n prototype: HTMLElement;\n new(): HTMLElement;\n};\n\n/** Node is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way. */\ninterface Node extends EventTarget {\n /** Returns node's node document's document base URL. */\n readonly baseURI: string;\n /** Returns the children. */\n readonly childNodes: NodeListOf<ChildNode>;\n /** Returns the first child. */\n readonly firstChild: ChildNode | null;\n /** Returns true if node is connected and false otherwise. */\n readonly isConnected: boolean;\n /** Returns the last child. */\n readonly lastChild: ChildNode | null;\n /** Returns the next sibling. */\n readonly nextSibling: ChildNode | null;\n /** Returns a string appropriate for the type of node. */\n readonly nodeName: string;\n /** Returns the type of node. */\n readonly nodeType: number;\n nodeValue: string | null;\n /** Returns the node document. Returns null for documents. */\n readonly ownerDocument: Document | null;\n /** Returns the parent element. */\n readonly parentElement: HTMLElement | null;\n /** Returns the parent. */\n readonly parentNode: ParentNode | null;\n /** Returns the previous sibling. */\n readonly previousSibling: ChildNode | null;\n textContent: string | null;\n appendChild<T extends Node>(node: T): T;\n /** Returns a copy of node. If deep is true, the copy also includes the node's descendants. */\n cloneNode(deep?: boolean): Node;\n /** Returns a bitmask indicating the position of other relative to node. */\n compareDocumentPosition(other: Node): number;\n /** Returns true if other is an inclusive descendant of node, and false otherwise. */\n contains(other: Node | null): boolean;\n /** Returns node's root. */\n getRootNode(options?: GetRootNodeOptions): Node;\n /** Returns whether node has children. */\n hasChildNodes(): boolean;\n insertBefore<T extends Node>(node: T, child: Node | null): T;\n isDefaultNamespace(namespace: string | null): boolean;\n /** Returns whether node and otherNode have the same properties. */\n isEqualNode(otherNode: Node | null): boolean;\n isSameNode(otherNode: Node | null): boolean;\n lookupNamespaceURI(prefix: string | null): string | null;\n lookupPrefix(namespace: string | null): string | null;\n /** Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes. */\n normalize(): void;\n removeChild<T extends Node>(child: T): T;\n replaceChild<T extends Node>(node: Node, child: T): T;\n readonly ATTRIBUTE_NODE: number;\n /** node is a CDATASection node. */\n readonly CDATA_SECTION_NODE: number;\n /** node is a Comment node. */\n readonly COMMENT_NODE: number;\n /** node is a DocumentFragment node. */\n readonly DOCUMENT_FRAGMENT_NODE: number;\n /** node is a document. */\n readonly DOCUMENT_NODE: number;\n /** Set when other is a descendant of node. */\n readonly DOCUMENT_POSITION_CONTAINED_BY: number;\n /** Set when other is an ancestor of node. */\n readonly DOCUMENT_POSITION_CONTAINS: number;\n /** Set when node and other are not in the same tree. */\n readonly DOCUMENT_POSITION_DISCONNECTED: number;\n /** Set when other is following node. */\n readonly DOCUMENT_POSITION_FOLLOWING: number;\n readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;\n /** Set when other is preceding node. */\n readonly DOCUMENT_POSITION_PRECEDING: number;\n /** node is a doctype. */\n readonly DOCUMENT_TYPE_NODE: number;\n /** node is an element. */\n readonly ELEMENT_NODE: number;\n readonly ENTITY_NODE: number;\n readonly ENTITY_REFERENCE_NODE: number;\n readonly NOTATION_NODE: number;\n /** node is a ProcessingInstruction node. */\n readonly PROCESSING_INSTRUCTION_NODE: number;\n /** node is a Text node. */\n readonly TEXT_NODE: number;\n}\n\ndeclare var Node: {\n prototype: Node;\n new(): Node;\n readonly ATTRIBUTE_NODE: number;\n /** node is a CDATASection node. */\n readonly CDATA_SECTION_NODE: number;\n /** node is a Comment node. */\n readonly COMMENT_NODE: number;\n /** node is a DocumentFragment node. */\n readonly DOCUMENT_FRAGMENT_NODE: number;\n /** node is a document. */\n readonly DOCUMENT_NODE: number;\n /** Set when other is a descendant of node. */\n readonly DOCUMENT_POSITION_CONTAINED_BY: number;\n /** Set when other is an ancestor of node. */\n readonly DOCUMENT_POSITION_CONTAINS: number;\n /** Set when node and other are not in the same tree. */\n readonly DOCUMENT_POSITION_DISCONNECTED: number;\n /** Set when other is following node. */\n readonly DOCUMENT_POSITION_FOLLOWING: number;\n readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;\n /** Set when other is preceding node. */\n readonly DOCUMENT_POSITION_PRECEDING: number;\n /** node is a doctype. */\n readonly DOCUMENT_TYPE_NODE: number;\n /** node is an element. */\n readonly ELEMENT_NODE: number;\n readonly ENTITY_NODE: number;\n readonly ENTITY_REFERENCE_NODE: number;\n readonly NOTATION_NODE: number;\n /** node is a ProcessingInstruction node. */\n readonly PROCESSING_INSTRUCTION_NODE: number;\n /** node is a Text node. */\n readonly TEXT_NODE: number;\n};\n\n/** An iterator over the members of a list of the nodes in a subtree of the DOM. The nodes will be returned in document order. */\ninterface NodeIterator {\n readonly filter: NodeFilter | null;\n readonly pointerBeforeReferenceNode: boolean;\n readonly referenceNode: Node;\n readonly root: Node;\n readonly whatToShow: number;\n /** @deprecated */\n detach(): void;\n nextNode(): Node | null;\n previousNode(): Node | null;\n}\n\ndeclare var NodeIterator: {\n prototype: NodeIterator;\n new(): NodeIterator;\n};\n\n/** NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll(). */\ninterface NodeList {\n /** Returns the number of nodes in the collection. */\n readonly length: number;\n /** Returns the node with index index from the collection. The nodes are sorted in tree order. */\n item(index: number): Node | null;\n /**\n * Performs the specified action for each node in an list.\n * @param callbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the list.\n * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.\n */\n forEach(callbackfn: (value: Node, key: number, parent: NodeList) => void, thisArg?: any): void;\n [index: number]: Node;\n}\n\ndeclare var NodeList: {\n prototype: NodeList;\n new(): NodeList;\n};\n\ninterface NodeListOf<TNode extends Node> extends NodeList {\n item(index: number): TNode;\n /**\n * Performs the specified action for each node in an list.\n * @param callbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the list.\n * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.\n */\n forEach(callbackfn: (value: TNode, key: number, parent: NodeListOf<TNode>) => void, thisArg?: any): void;\n [index: number]: TNode;\n}\n\ninterface NonDocumentTypeChildNode {\n /** Returns the first following sibling that is an element, and null otherwise. */\n readonly nextElementSibling: Element | null;\n /** Returns the first preceding sibling that is an element, and null otherwise. */\n readonly previousElementSibling: Element | null;\n}\n\ninterface NonElementParentNode {\n /** Returns the first element within node's descendants whose ID is elementId. */\n getElementById(elementId: string): Element | null;\n}\n\n/** Events providing information related to errors in scripts or in files. */\ninterface ErrorEvent extends Event {\n readonly colno: number;\n readonly error: any;\n readonly filename: string;\n readonly lineno: number;\n readonly message: string;\n}\n\ndeclare var ErrorEvent: {\n prototype: ErrorEvent;\n new(type: string, eventInitDict?: ErrorEventInit): ErrorEvent;\n};\n\n/** An event which takes place in the DOM. */\ninterface Event {\n /** Returns true or false depending on how event was initialized. True if event goes through its target's ancestors in reverse tree order, and false otherwise. */\n readonly bubbles: boolean;\n cancelBubble: boolean;\n /** Returns true or false depending on how event was initialized. Its return value does not always carry meaning, but true can indicate that part of the operation during which event was dispatched, can be canceled by invoking the preventDefault() method. */\n readonly cancelable: boolean;\n /** Returns true or false depending on how event was initialized. True if event invokes listeners past a ShadowRoot node that is the root of its target, and false otherwise. */\n readonly composed: boolean;\n /** Returns the object whose event listener's callback is currently being invoked. */\n readonly currentTarget: EventTarget | null;\n /** Returns true if preventDefault() was invoked successfully to indicate cancelation, and false otherwise. */\n readonly defaultPrevented: boolean;\n /** Returns the event's phase, which is one of NONE, CAPTURING_PHASE, AT_TARGET, and BUBBLING_PHASE. */\n readonly eventPhase: number;\n /** Returns true if event was dispatched by the user agent, and false otherwise. */\n readonly isTrusted: boolean;\n /** @deprecated */\n returnValue: boolean;\n /** @deprecated */\n readonly srcElement: EventTarget | null;\n /** Returns the object to which event is dispatched (its target). */\n readonly target: EventTarget | null;\n /** Returns the event's timestamp as the number of milliseconds measured relative to the time origin. */\n readonly timeStamp: DOMHighResTimeStamp;\n /** Returns the type of event, e.g. "click", "hashchange", or "submit". */\n readonly type: string;\n /** Returns the invocation target objects of event's path (objects on which listeners will be invoked), except for any nodes in shadow trees of which the shadow root's mode is "closed" that are not reachable from event's currentTarget. */\n composedPath(): EventTarget[];\n /** @deprecated */\n initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;\n /** If invoked when the cancelable attribute value is true, and while executing a listener for the event with passive set to false, signals to the operation that caused event to be dispatched that it needs to be canceled. */\n preventDefault(): void;\n /** Invoking this method prevents event from reaching any registered event listeners after the current one finishes running and, when dispatched in a tree, also prevents event from reaching any other objects. */\n stopImmediatePropagation(): void;\n /** When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object. */\n stopPropagation(): void;\n readonly AT_TARGET: number;\n readonly BUBBLING_PHASE: number;\n readonly CAPTURING_PHASE: number;\n readonly NONE: number;\n}\n\ndeclare var Event: {\n prototype: Event;\n new(type: string, eventInitDict?: EventInit): Event;\n readonly AT_TARGET: number;\n readonly BUBBLING_PHASE: number;\n readonly CAPTURING_PHASE: number;\n readonly NONE: number;\n};\n\ninterface EventCounts {\n forEach(callbackfn: (value: number, key: string, parent: EventCounts) => void, thisArg?: any): void;\n}\n\ndeclare var EventCounts: {\n prototype: EventCounts;\n new(): EventCounts;\n};\n\ninterface EventListener {\n (evt: Event): void;\n}\n\ninterface EventListenerObject {\n handleEvent(object: Event): void;\n}\n\ninterface EventSourceEventMap {\n "error": Event;\n "message": MessageEvent;\n "open": Event;\n}\n\ninterface EventSource extends EventTarget {\n onerror: ((this: EventSource, ev: Event) => any) | null;\n onmessage: ((this: EventSource, ev: MessageEvent) => any) | null;\n onopen: ((this: EventSource, ev: Event) => any) | null;\n /** Returns the state of this EventSource object's connection. It can have the values described below. */\n readonly readyState: number;\n /** Returns the URL providing the event stream. */\n readonly url: string;\n /** Returns true if the credentials mode for connection requests to the URL providing the event stream is set to "include", and false otherwise. */\n readonly withCredentials: boolean;\n /** Aborts any instances of the fetch algorithm started for this EventSource object, and sets the readyState attribute to CLOSED. */\n close(): void;\n readonly CLOSED: number;\n readonly CONNECTING: number;\n readonly OPEN: number;\n addEventListener<K extends keyof EventSourceEventMap>(type: K, listener: (this: EventSource, ev: EventSourceEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;\n addEventListener(type: string, listener: (this: EventSource, event: MessageEvent) => any, options?: boolean | AddEventListenerOptions): void;\n addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;\n removeEventListener<K extends keyof EventSourceEventMap>(type: K, listener: (this: EventSource, ev: EventSourceEventMap[K]) => any, options?: boolean | EventListenerOptions): void;\n removeEventListener(type: string, listener: (this: EventSource, event: MessageEvent) => any, options?: boolean | EventListenerOptions): void;\n removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;\n}\n\ndeclare var EventSource: {\n prototype: EventSource;\n new(url: string | URL, eventSourceInitDict?: EventSourceInit): EventSource;\n readonly CLOSED: number;\n readonly CONNECTING: number;\n readonly OPEN: number;\n};\n\n/** EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them. */\ninterface EventTarget {\n /**\n * Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.\n *\n * The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.\n *\n * When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.\n *\n * When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.\n *\n * When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.\n *\n * If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.\n *\n * The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.\n */\n addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;\n /** Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise. */\n dispatchEvent(event: Event): boolean;\n /** Removes the event listener in target's event listener list with the same type, callback, and options. */\n removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;\n}\n\ndeclare var EventTarget: {\n prototype: EventTarget;\n new(): EventTarget;\n};\nhttps://www.canvasapi.cn/
https://wangdoc.com/webapi/canvas
https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
本页面的 Typescript 定义是经过省略的
\n/** 提供用于操作 <canvas> 元素布局和显示的属性和方法。HTMLCanvasElement 接口还继承了 HTMLElement 接口的属性和方法 */\ninterface HTMLCanvasElement extends HTMLElement {\n /** 获取或设置文档中 canvas 元素的高度 */\n height: number;\n /** 获取或设置文档中 canvas 元素的宽度 */\n width: number;\n captureStream(frameRequestRate?: number): MediaStream;\n /**\n * 返回上下文对象，该对象提供在文档中 canvas 元素上绘制和操作图像和图形的方法和属性。上下文对象包括关于颜色、线宽、字体和其他可以在 canvas 上绘制的图形参数的信息。\n * @param contextId 要创建的 canvas 类型的标识符。IE 9 和 IE 10 仅支持使用 canvas.getContext("2d") 的二维上下文；IE11 Preview 还支持通过 canvas.getContext("experimental-webgl") 获取 3-D 或 WebGL 上下文\n */\n getContext(contextId: "2d", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null;\n toBlob(callback: BlobCallback, type?: string, quality?: any): void;\n /**\n * 将当前 canvas 作为图形返回，可以用作其它 canvas 或 HTML 元素的源\n * @param type 指定返回图像的标准 MIME 类型，默认为 PNG 格式\n */\n toDataURL(type?: string, quality?: any): string;\n}\n\n/** CanvasRenderingContext2D 接口是 Canvas API 的一部分，它为 <Canvas> 元素的绘图表面提供 2D 渲染上下文。它用于绘制形状、文本、图像和其他对象 */\n// prettier-ignore\ninterface CanvasRenderingContext2D extends CanvasCompositing,CanvasDrawImage,CanvasDrawPath,CanvasFillStrokeStyles,CanvasFilters,CanvasImageData,CanvasImageSmoothing,CanvasPath,CanvasPathDrawingStyles,CanvasRect,CanvasShadowStyles,CanvasState,CanvasText,CanvasTextDrawingStyles,CanvasTransform,CanvasUserInterface {\n readonly canvas: HTMLCanvasElement;\n getContextAttributes(): CanvasRenderingContext2DSettings;\n}\nconst canvas = document.createElement("canvas");\n// 左上角为坐标原点\ncanvas.height = 150;\ncanvas.width = 150;\ndocument.body.append(canvas);\nconst ctx = canvas.getContext("2d");\ninterface CanvasDrawPath {\n beginPath(): void;\n clip(fillRule?: CanvasFillRule): void;\n clip(path: Path2D, fillRule?: CanvasFillRule): void;\n fill(fillRule?: CanvasFillRule): void;\n fill(path: Path2D, fillRule?: CanvasFillRule): void;\n isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;\n isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;\n isPointInStroke(x: number, y: number): boolean;\n isPointInStroke(path: Path2D, x: number, y: number): boolean;\n stroke(): void;\n stroke(path: Path2D): void;\n}\ninterface CanvasPath {\n arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;\n arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;\n bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;\n closePath(): void;\n // prettier-ignore\n ellipse(x: number,y: number,radiusX: number,radiusY: number,rotation: number,startAngle: number,endAngle: number,counterclockwise?: boolean\n ): void;\n lineTo(x: number, y: number): void;\n moveTo(x: number, y: number): void;\n quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;\n rect(x: number, y: number, w: number, h: number): void;\n}\ninterface CanvasRect {\n clearRect(x: number, y: number, w: number, h: number): void;\n fillRect(x: number, y: number, w: number, h: number): void;\n strokeRect(x: number, y: number, w: number, h: number): void;\n}\n/** Canvas 2D API 接口用于声明一个路径，然后可以在 CanvasRenderingContext2D 上下文对象上使用该路径。CanvasRenderingContext2D 接口的路径方法也出现在这个接口上，允许我们在需要时方便地保留和重放路径 */\ninterface Path2D extends CanvasPath {\n /** 将给定参数的路径添加到Path2D对象上 */\n addPath(path: Path2D, transform?: DOMMatrix2DInit): void;\n}\ndeclare var Path2D: {\n prototype: Path2D;\n new (path?: Path2D | string): Path2D;\n};\n// 绘制矩形，参数为 x y width height 单位为px\nctx.fillRect(0, 0, 20, 20);\nctx.strokeRect(25, 25, 20, 20);\nctx.clearRect(15, 15, 20, 20);\n\n// 绘制路径\nctx.beginPath();\nctx.moveTo(0, 50); // 通常表示路径绘制的起始点\n// lineTo方法用于指定直线路径\nctx.lineTo(0, 70);\nctx.lineTo(20, 70);\nctx.stroke(); // 执行此方法才画线\nctx.closePath(); // 此方法不是必须的\n\nctx.beginPath();\nctx.moveTo(0, 80);\nctx.lineTo(10, 80);\nctx.lineTo(5, 80 + 5 * Math.sqrt(3));\nctx.fill(); // 执行此方法才填充\nctx.closePath();\n\n// 单位一律为弧度\nctx.beginPath();\n// arc方法通过圆心和半径指定弧形路径\n// 参数为 x, y, radius, startAngle, endAngle [, anticlockwise]\nctx.arc(20, 100, 5, 0, Math.PI * 2, true); // 此方法仅移动画笔\nctx.stroke();\nctx.closePath();\n\nctx.beginPath();\nctx.moveTo(70, 70);\n// arcTo方法通过给定两个控制点和半径指定弧形路径\n// 参数为 x1, y1, x2, y2, radius\nctx.arcTo(88, 146, 115, 90, 50);\nctx.lineTo(115, 70);\nctx.stroke();\n// quadraticCurveTo 二次贝塞尔曲线\n// bezierCurveTo 三次贝塞尔曲线\n\nctx.rect(100, 100, 50, 50); // 矩形路径\nctx.fill();\n\n/* Path2D 对象。表示一段自定义路径，通过构造函数可以从其它Path2D对象或SVG字符串派生 */\n// https://developer.mozilla.org/docs/Web/API/Path2D\nconst myFirstPath = new Path2D();\nmyFirstPath.moveTo(50, 50);\nmyFirstPath.lineTo(60, 60);\nctx.stroke(myFirstPath);\ninterface CanvasPathDrawingStyles {\n lineCap: "butt" | "round" | "square";\n lineDashOffset: number;\n lineJoin: "bevel" | "miter" | "round";\n lineWidth: number;\n miterLimit: number;\n getLineDash(): number[];\n setLineDash(segments: number[]): void;\n}\n应指定为符合 CSS3 颜色值标准 的有效字符串
\nctx.strokeStyle = "red";\nctx.fillStyle = "blue";\n\n// 设置画布的全局透明度，范围[0, 1]，指定为范围外的值会被忽略\nctx.globalAlpha = 0.5;\n// 设置线条宽度。默认为1\nctx.lineWidth = 1;\n\n// 设置线条端点样式。可选：buzz(默认) round square\nctx.lineCap = "square";\n\n// 设定线条转角处的样式。可选：miter(默认) round bevel\nctx.lineJoin = "bevel";\n\n// 当lineJoin类型是miter时，miter效果生效的限制值。\nctx.miterLimit = 2;\n\n// 设置当前虚线样式\nctx.setLineDash([2, 1]);\n\n// 返回当前虚线样式。并不总是与设置的虚线样式数组内容相同\nctx.getLineDash(); // => [2, 1]\n\n// 指定虚线绘制的偏移距离\nctx.lineDashOffset = 2;\ninterface CanvasFillStrokeStyles {\n fillStyle: string | CanvasGradient | CanvasPattern;\n strokeStyle: string | CanvasGradient | CanvasPattern;\n createConicGradient(startAngle: number, x: number, y: number): CanvasGradient;\n createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;\n createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;\n createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;\n}\n/** 描述渐变的不透明对象。由 CanvasRenderingContext2D.createLinearGradient() 或 CanvasRenderingContext2D.createRadialGradient() 方法返回 */\ninterface CanvasGradient {\n /**\n * 将具有给定颜色的色标添加到渐变中的给定偏移量处。0.0 是渐变一端的偏移，1.0 是另一端的偏移。\n * 偏移量超出范围时抛出 "IndexSizeError" DOMException。 当颜色无法解析时抛出 "SyntaxError" DOMException。\n */\n addColorStop(offset: number, color: string): void;\n}\ndeclare var CanvasGradient: {\n prototype: CanvasGradient;\n new (): CanvasGradient;\n};\nctx.fillStyle = (() => {\n const lingrad = ctx.createLinearGradient(0, 0, 0, 150);\n lingrad.addColorStop(0, "#00ABEB");\n lingrad.addColorStop(0.5, "#fff");\n lingrad.addColorStop(0.5, "#26C000");\n lingrad.addColorStop(1, "#fff");\n return lingrad;\n})();\n\nctx.fillRect(10, 10, 130, 130);\nconst img = new Image();\nimg.src =\n "https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors/canvas_createpattern.png";\nimg.onload = () => {\n const ptrn = ctx.createPattern(img, "repeat"); // 此方法需要保证图片加载完毕\n ctx.fillStyle = ptrn;\n ctx.fillRect(0, 0, 150, 150);\n};\ninterface CanvasShadowStyles {\n shadowBlur: number;\n shadowColor: string;\n shadowOffsetX: number;\n shadowOffsetY: number;\n}\nctx.shadowOffsetX = 2;\nctx.shadowOffsetY = 2;\nctx.shadowBlur = 2;\nctx.shadowColor = "rgba(0, 0, 0, 0.5)";\n\nctx.font = "20px Times New Roman";\nctx.fillStyle = "Black";\nctx.fillText("Sample String", 5, 30);\ntype CanvasFillRule = "evenodd" | "nonzero";\n\ninterface CanvasDrawPath {\n beginPath(): void;\n clip(fillRule?: CanvasFillRule): void;\n clip(path: Path2D, fillRule?: CanvasFillRule): void;\n fill(fillRule?: CanvasFillRule): void;\n fill(path: Path2D, fillRule?: CanvasFillRule): void;\n isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean;\n isPointInPath(path: Path2D, x: number, y: number, fillRule?: CanvasFillRule): boolean;\n isPointInStroke(x: number, y: number): boolean;\n isPointInStroke(path: Path2D, x: number, y: number): boolean;\n stroke(): void;\n stroke(path: Path2D): void;\n}\nctx.beginPath();\nctx.arc(50, 50, 30, 0, Math.PI * 2, true);\nctx.arc(50, 50, 15, 0, Math.PI * 2, true);\nctx.fill("evenodd");\ninterface CanvasText {\n // x 和 y 指定的是文本基线的起始点坐标\n fillText(text: string, x: number, y: number, maxWidth?: number): void;\n strokeText(text: string, x: number, y: number, maxWidth?: number): void;\n measureText(text: string): TextMetrics;\n}\ninterface CanvasTextDrawingStyles {\n font: string;\n direction: "inherit" | "ltr" | "rtl";\n textAlign: "center" | "end" | "left" | "right" | "start";\n textBaseline: "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";\n}\n/** canvas 中一段文本的尺寸，通过 CanvasRenderingContext2D.measureText() 方法创建 */\ninterface TextMetrics {\n readonly actualBoundingBoxAscent: number;\n readonly actualBoundingBoxDescent: number;\n readonly actualBoundingBoxLeft: number;\n readonly actualBoundingBoxRight: number;\n readonly fontBoundingBoxAscent: number;\n readonly fontBoundingBoxDescent: number;\n readonly width: number; // 常用\n}\ndeclare var TextMetrics: {\n prototype: TextMetrics;\n new (): TextMetrics;\n};\nctx.arc(0, 10, 1, 0, 2 * Math.PI);\nctx.fill(); // 基线默认是alphabetic，因此在文本的左下角绘制一个圆\nctx.font = "16px serif";\nctx.fillText("Hello world", 0, 10);\n// prettier-ignore\nconst { actualBoundingBoxAscent, actualBoundingBoxDescent, actualBoundingBoxLeft, actualBoundingBoxRight, fontBoundingBoxAscent, fontBoundingBoxDescent, width } = ctx.measureText("Hello world");\nhttps://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage
https://www.canvasapi.cn/CanvasRenderingContext2D/drawImage
type CanvasImageSource = HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;\n// prettier-ignore\ninterface CanvasDrawImage {\n drawImage(image: CanvasImageSource, dx: number, dy: number): void;\n drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;\n drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;\n}\nhttps://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Transformations
\ninterface CanvasState {\n restore(): void;\n save(): void;\n}\ninterface CanvasTransform {\n getTransform(): DOMMatrix;\n resetTransform(): void;\n rotate(angle: number): void;\n scale(x: number, y: number): void;\n setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;\n setTransform(transform?: DOMMatrix2DInit): void;\n transform(a: number, b: number, c: number, d: number, e: number, f: number): void;\n translate(x: number, y: number): void;\n}\nhttps://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Compositing
\nhttps://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
\n","tags":["web-api","dom"]},{"id":"js-lit-note","url":"https://yieldray.fun/posts/js-lit-note","title":"lit笔记","date_published":"2022-11-20T14:00:00.000Z","date_modified":"2022-11-20T14:00:00.000Z","content_text":"使用 Lit 必须提前了解 WebComponents
\nDoc https://lit.dev/docs/
API https://lit.dev/docs/api/LitElement/
另见 https://lit.how/
在 Typescript 中可以使用以下方式将自定义元素合并到 HTMLElementTagNameMap
\ndeclare global {\n interface HTMLElementTagNameMap {\n "my-element": MyElement;\n }\n}\nhttps://lit.dev/docs/templates/expressions/
\n子节点
\nhtml`\n<h1>Hello ${name}</h1>\n<ul>\n ${listItems}\n</ul>\n`\n标签属性
\nhtml`\n<div class="${highlightClass}"></div>\n`\n布尔值标签属性
\nhtml`\n<div ?hidden="${!show}"></div>\n`\n对象属性
\nhtml`<input .value="${value}" />`\n事件监听器
\nhtml`<button @click="${this._clickHandler}">点我</button>`\n元素指令（获取 ref）
\nhtml`<input ${ref(inputRef)} />`\n属性可以被外部访问（应视为外部输入），属性是响应式的（即，会自动触发重渲染）。
属性的相等性默认通过严格相等比较运算判断，因此非原始类型若要自动触发变更则需修改引用，
但可调用 this.requestUpdate() 手动触发重渲染。重渲染会推迟到下一个微任务进行。
状态是一种特殊的（内部）属性，lit 不为其分配外部接口（标签属性 attr 和对象属性 prop）
\n\n\nlit 默认为我们声明的响应式属性生成 accessor，定义在当前类的 prototype 上
\n
很少需要创建自定义 accessor。避免设置同名实例属性，防止覆盖 accessor。
property 装饰器选项：https://lit.dev/docs/components/properties/#property-options
\nimport { LitElement, html } from "lit";\nimport { customElement } from "lit/decorators.js";\n\n@customElement("my-element")\nexport class MyElement extends LitElement {\n // 最简单的属性\n @property()\n name: string;\n\n // 最简单的状态（往往标记为 private 或 protected）\n @state()\n private _counter = 0;\n\n // 不生成标签属性\n @property({ attribute: false })\n myData = {};\n\n // 生成指定名称的标签属性。默认是直接转换成小写（并不会将驼峰转为短横线）\n @property({ attribute: "my-name" })\n myName = "Ogden";\n\n // 转换器\n // 由于标签属性都是 DOM String，因此需要转换器转换\n // converter 若指定为函数，相当于只指定了 fromAttribute\n @property({\n converter: {\n fromAttribute: (value, type) => {\n // `value` is a string\n // Convert it to a value of type `type` and return it\n },\n toAttribute: (value, type) => {\n // `value` is of type `type`\n // Convert it to a string and return it\n },\n },\n })\n myTime = new Date();\n\n // 使用内置转换器 string -> number\n // 内置的转换器有；String(默认) Number Boolean Object Array\n @property({ type: Number })\n aNumber: number = 5;\n\n // reflect选项，是否将属性反映到标签属性attr上\n @property({ type: Boolean, reflect: true })\n active: boolean = false;\n\n // 自定义相等性比较\n @property({\n hasChanged(newVal: string, oldVal: string) {\n return newVal?.toLowerCase() !== oldVal?.toLowerCase();\n },\n })\n myProp: string | undefined;\n}\nimport { LitElement, html, css, unsafeCSS } from "lit";\nimport { customElement } from "lit/decorators.js";\n\n@customElement("my-element")\nexport class MyElement extends SuperElement {\n // css 模板字符串函数\n mainColor: CSSResultGroup = css`red`;\n static styles = css`\n div {\n color: ${mainColor};\n }\n `;\n\n // unsafeCSS 函数用于渲染字符串 css\n mainColor: CSSResultGroup = "red";\n static styles = css`\n div {\n color: ${unsafeCSS(mainColor)};\n }\n `;\n\n // styles 其实是一个数组（adoptedStyleSheets）\n // 由于 styles 是静态属性，因此也可以访问父类的 styles\n static styles: CSSResultGroup = [\n SuperElement.styles,\n css`\n div {\n color: red;\n }\n `,\n ];\n\n // html 模板中也可以使用 style 标签。style 标签对每个实例求值，静态 styles 属性则对每个类求值\n protected render() {\n return html`\n <p>I am green!</p>\n <style>\n :host {\n color: green;\n }\n </style>\n `;\n }\n}\n\n// classMap 和 styleMap 实用函数\nimport { classMap } from "lit/directives/class-map.js";\nimport { styleMap } from "lit/directives/style-map.js";\n\n@customElement("my-element")\nexport class MyElement extends LitElement {\n static styles = css`\n .someclass {\n border: 1px solid red;\n padding: 4px;\n }\n .anotherclass {\n background-color: navy;\n }\n `;\n @property()\n classes = { someclass: true, anotherclass: true };\n @property()\n styles = { color: "lightgreen", fontFamily: "Roboto" };\n protected render() {\n return html` <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>Some content</div> `;\n }\n}\nLitElement 继承了 HTMLElement 的生命周期，即 WebComponents 的生命周期
\nconnectedCallback() {\n super.connectedCallback();\n this._timerInterval = setInterval(() => this.requestUpdate(), 1000);\n}\n\ndisconnectedCallback() {\n super.disconnectedCallback();\n clearInterval(this._timerInterval);\n}\nPre-Update![\"Pre-Update\"](\"https://i0.wp.com/lit.dev/images/docs/components/update-1.jpg\")
![\"Pre-Update\"](\"https://i0.wp.com/lit.dev/images/docs/components/update-2.jpg\")
Update![\"Update\"](\"https://i0.wp.com/lit.dev/images/docs/components/update-3.jpg\")
Post-Update![\"Post-Update\"](\"https://i0.wp.com/lit.dev/images/docs/components/update-4.jpg\")
import {LitElement, html, PropertyValues} from 'lit';\n...\n shouldUpdate(changedProperties: PropertyValues<this>) {\n ...\n }\n初次渲染的生命周期函数顺序如下（cp=changedProperties）：
\n响应式属性变化后：
\n其余生命周期可用于自定义渲染时机，此处略
\n\n\n参见此示例\n演示代码如下：
\n
import { html, LitElement, PropertyValues } from "lit";\nimport { customElement, property } from "lit/decorators.js";\nimport { ref } from "lit/directives/ref.js";\n\n// https://lit.dev/docs/components/lifecycle/\n@customElement("life-cycle")\nexport class LifeCycle extends LitElement {\n // Standard custom element lifecycle\n constructor() {\n super();\n console.log("constructor");\n }\n connectedCallback() {\n super.connectedCallback();\n console.log("connectedCallback");\n }\n disconnectedCallback() {\n super.disconnectedCallback();\n console.log("disconnectedCallback");\n }\n attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {\n super.attributeChangedCallback(name, oldVal, newVal);\n console.log("attributeChangedCallback", name, oldVal, newVal);\n }\n adoptedCallback() {\n console.log("adoptedCallback");\n }\n\n // Reactive update cycle\n // note that we call super only when necessary\n shouldUpdate(changedProperties: PropertyValues<this>) {\n console.log("shouldUpdate", changedProperties);\n return true;\n }\n willUpdate(changedProperties: PropertyValues<this>) {\n console.log("willUpdate", changedProperties);\n }\n update(changedProperties: PropertyValues<this>) {\n super.update(changedProperties);\n console.log("update", changedProperties);\n }\n firstUpdated(changedProperties: PropertyValues<this>) {\n console.log("firstUpdated", changedProperties);\n }\n updated(changedProperties: PropertyValues<this>) {\n console.log("updated", changedProperties);\n }\n\n @property({\n hasChanged(newVal: string, oldVal: string) {\n console.log("hasChanged", newVal, oldVal);\n return newVal !== oldVal;\n },\n })\n msg = "msg";\n\n render() {\n console.log("render");\n this.updateComplete.then(() => console.log("updateComplete resolved"));\n return html` <p ${ref(() => console.log("ref"))}>${this.msg}</p>\n <input .value=${this.msg} @input=${(e) => (this.msg = e.target.value)} />`;\n }\n}\n在 lit 中，shadowRoot 可以通过组件的 renderRoot 属性访问
\n// 可以在生命周期中访问\nfirstUpdated() {\n this.staticNode = this.renderRoot.querySelector('#static-node');\n}\n\n// 可以作为getter访问器\nget _closeButton() {\n return this.renderRoot.querySelector('#close-button');\n}\n不过 lit 也提供了装饰器
\nimport { LitElement, html } from "lit";\nimport { query, queryAll } from "lit/decorators/query.js";\n\nclass MyElement extends LitElement {\n @query("#first")\n _first;\n // 相当于\n get _first() {\n return this.renderRoot?.querySelector("#first") ?? null;\n }\n\n @queryAll("button")\n _buttons!: NodeListOf<HTMLButtonElement>;\n\n render() {\n return html`\n <div id="first"></div>\n <div id="second"></div>\n `;\n }\n}\nlit 内置装饰器参见此处
\n事件监听参数实际上就是传入 addEventListener() 的参数
render() {\n return html`<button @click=${{handleEvent: () => this.onClick(), once: true}}>click</button>`\n}\n使用组件实例的 dispatchEvent() 方法传入 CustomEvent 调度事件
\n当自定义事件同时指定 bubbles 和 composed 时，该事件可冒泡至 ShadowDOM 外部
\nthis.dispatchEvent(\n new CustomEvent("my-event", {\n detail: { message: "my-event happened." },\n bubbles: true,\n composed: true,\n cancelable: true,\n }),\n);\n插槽中的事件根据实际渲染 DOM 节点的位置传递
\n动态标签和动态标签属性是不支持的
\nimport { LitElement } from "lit";\nimport { customElement, property } from "lit/decorators.js";\nimport { html, literal } from "lit/static-html.js";\n\n@customElement("my-button")\nclass MyButton extends LitElement {\n // tag = "button" 是错误的，必须以下面的方式声明\n tag = literal`button`;\n activeAttribute = literal`active`;\n @property() caption = "Hello static";\n @property({ type: Boolean }) active = false;\n\n render() {\n return html`\n <${this.tag} ${this.activeAttribute}?=${this.active}>\n <p>${this.caption}</p>\n </${this.tag}>`;\n }\n}\n\n@customElement("my-anchor")\nclass MyAnchor extends MyButton {\n tag = literal`a`;\n}\ntextarea 标签，在渲染动态内容时，一般使用对象属性
渲染静态内容时则无所谓
<!--这样会丢失引用-->\n<textarea>${content}</textarea>\n\n<!--使用对象属性可保持引用-->\n<textarea .value="${content}"></textarea>\nwhen 指令
\nhtml`\n ${when(\n this.user, // 转化为布尔值判断\n () => html`User: ${this.user.username}`,\n () => html`Sign In...`,\n )}\n`;\nchoose 指令
\nhtml`\n ${choose(\n this.section, // "home" or "about" or OTHER\n [\n ["home", () => html`<h1>Home</h1>`],\n ["about", () => html`<h1>About</h1>`],\n ],\n () => html`<h1>Error</h1>`, // if is OTHER\n )}\n`;\nifDefined 指令
\n@customElement("my-element")\nclass MyElement extends LitElement {\n @property()\n filename: string | undefined = undefined;\n\n @property()\n size: string | undefined = undefined;\n\n render() {\n // src attribute not rendered if either size or filename are undefined\n return html`<img src="/images/${ifDefined(this.size)}/${ifDefined(this.filename)}" />`;\n }\n}\ncache 指令
\nhtml`${cache(this.userName ? html`Welcome ${this.userName}` : html`Please log in <button>Login</button>`)}`;\nnothing（Symbol）
\nhtml`<user-name>${this.userName ?? nothing}</user-name>`;\n\nhtml`<button aria-label="${this.ariaLabel || nothing}"></button>`;\nrepeat 指令
\n@customElement("my-element")\nclass MyElement extends LitElement {\n @property()\n items: Array<{ id: number; name: string }> = [];\n\n render() {\n return html`\n <ul>\n ${repeat(\n this.items,\n (item) => item.id,\n (item, index) => html` <li>${index}: ${item.name}</li>`,\n )}\n </ul>\n `;\n }\n}\nmap 指令
\nhtml`<ul>\n ${map(items, (i) => html`<li>${i}</li>`)}\n</ul>`;\nrange 指令
\nhtml`${map(range(8), (i) => html`${i + 1}`)}`;\n传入 Ref 对象
\n@customElement("my-element")\nclass MyElement extends LitElement {\n inputRef: Ref<HTMLInputElement> = createRef();\n\n render() {\n // 将 Ref 对象传入ref指令后，Ref 对象的 value 属性将是对元素的引用\n return html`<input ${ref(this.inputRef)} />`;\n }\n\n firstUpdated() {\n const input = this.inputRef.value!;\n input.focus();\n }\n}\n传入回调函数
\n@customElement("my-element")\nclass MyElement extends LitElement {\n render() {\n // 将回调函数传入 ref 指令，将在被引用的元素变更时调用\n return html`<input ${ref(this.inputChanged)} />`;\n }\n\n inputChanged(input?: HTMLInputElement) {\n input?.focus();\n }\n}\nhttps://lit.dev/docs/templates/directives/
\nhttps://lit.dev/docs/templates/custom-directives/
\nlit 是基于类实现的，因此有一些设计很像 flutter
\nControllers：https://lit.dev/docs/composition/controllers/
Context：https://lit.dev/docs/data/context/
AsyncTasks：https://lit.dev/docs/data/task/
\n\n翻译自：https://markodenic.com/css-tips/，部分省略
\n
原理参见：https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/
\n\n\n本例核心为
\nhtml {\n scroll-behavior: smooth;\n}\n核心在于
\n.overflow-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n参见：https://developer.mozilla.org/docs/Web/CSS/text-overflow
\n\n\n目前仅 webkit 内核支持 line-clamp 属性，可以把 块容器 中的内容限制为指定的行数。
\n参见：https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp
\n.line-clamp {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n /* 上面的两个属性必须指定，否则-webkit-line-clamp无效 */\n -webkit-line-clamp: 3; /* 裁剪为3行 */\n overflow: hidden;\n}\n::selection 伪元素::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）
参见：https://developer.mozilla.org/docs/Web/CSS/::selection
\n.custom-highlighting::selection {\n /* 只有一小部分 CSS 属性可以用于::selection 选择器，具体请参见 MDN */\n}\n参见：https://developer.mozilla.org/docs/Web/CSS/:target
\n\n\n灵活使用:target伪类，可以实现诸如显示/隐藏屏幕侧边栏的效果
但由于会修改 URL 锚点，在某些情况下（如 hashRouter）就无法使用了
:empty 伪类:empty 伪类在样式化占位内容时很实用
参见：https://developer.mozilla.org/docs/Web/CSS/:empty
\n\n\n参见：
scroll-snap-type
scroll-snap-align
scroll-snap-stop
https://www.zhangxinxu.com/wordpress/2018/11/know-css-scroll-snap/
\ncaret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
参见：https://developer.mozilla.org/docs/Web/CSS/caret-color
\n:in-range 和 ::out-of-range 伪类核心在于
\n.gradient-border {\n border: solid 5px transparent; /* 颜色需定义为透明 */\n background-origin: border-box;\n background-clip: content-box, border-box;\n}\n参见：
background-clip\nbackground-origin
参见：https://www.zhangxinxu.com/wordpress/2021/02/css-aspect-ratio/
\naspect-ratio：https://developer.mozilla.org/docs/Web/CSS/aspect-ratio\naspect-ratio 媒体查询：https://developer.mozilla.org/docs/Web/CSS/@media/aspect-ratio
\nfilter 是作用在元素本身上的滤镜，backdrop-filter 则作用在元素 z 轴后面的部分
\n参见：https://developer.mozilla.org/docs/Web/CSS/backdrop-filter
\n使用滤镜需考虑性能问题，可以通过 transform:translateZ(0) 和 will-change 开启 GPU 加速
\nhttps://developer.mozilla.org/docs/Web/CSS/clip-path
\nhttps://developer.mozilla.org/docs/Web/CSS/mix-blend-mode
https://developer.mozilla.org/docs/Web/CSS/background-blend-mode
https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/
https://developer.mozilla.org/docs/Web/CSS/mask
https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/
object-fit 属性指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框。
\nhttps://developer.mozilla.org/docs/Web/CSS/object-fit
\nobject-position 属性规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景（background）。
\nhttps://developer.mozilla.org/docs/Web/CSS/object-position
\noffset 属性可以使元素沿着不规则的路径移动
\nhttps://developer.mozilla.org/docs/Web/CSS/offset
\noverscroll-behavior 指定滚动嵌套时的表现
\nhttps://developer.mozilla.org/docs/Web/CSS/overscroll-behavior
https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/
这些属性可以单独声明 transform 变换（独立于 transform 属性），避免了 transform 属性的使用
\nhttps://developer.mozilla.org/docs/Web/CSS/rotate
https://developer.mozilla.org/docs/Web/CSS/scale
https://developer.mozilla.org/docs/Web/CSS/translate
可以单独设置行或列的间距
\nhttps://developer.mozilla.org/docs/Web/CSS/column-gap
https://developer.mozilla.org/docs/Web/CSS/row-gap
shape-outside 可以指定一种形状，相邻的行内（inline）元素围绕该形状换行
\nhttps://developer.mozilla.org/docs/Web/CSS/shape-outside
\nshape-margin 属性可以设定 shape-outside 创建的 CSS 形状的外边距
\nhttps://developer.mozilla.org/docs/Web/CSS/shape-margin
\nuser-select 属性控制用户选中文本的行为
\nhttps://developer.mozilla.org/docs/Web/CSS/user-select
\nvertical-align 属性用于指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
\nhttps://developer.mozilla.org/docs/Web/CSS/vertical-align
\n","tags":["css"]},{"id":"makefile-intro","url":"https://yieldray.fun/posts/makefile-intro","title":"makefile-intro","date_published":"2022-11-16T16:00:00.000Z","date_modified":"2022-11-16T16:00:00.000Z","content_text":"参考
https://github.com/seisman/how-to-write-makefile
https://makefiletutorial.com/
迭代协议分为 可迭代协议 和 迭代器协议。
\n\n\n注：在下文中我们会将实现 可迭代协议 的对象称为 可迭代对象，将实现了 迭代器协议 的对象称为 迭代器对象（简称：迭代器）。
\n
可以使用 可迭代对象 的地方有： for...of 循环、... （spread 运算符）、yield* 语法 和 数组解构。
而 可迭代对象 的功能实际上是由 迭代器 来提供的。
因此，迭代器对象 无法脱离 迭代器，而 迭代器 可以离开 可迭代对象 使用。
type Value = number; // 仅为了标识被迭代的泛型\n\nconst example1: Iterable<Value> = {\n // 可迭代对象 的 Symbol.iterator 属性是返回 迭代器对象 的函数\n // （对于 ts 而言就是实现 Iterable 接口）\n [Symbol.iterator]: () => {\n const iterator: Iterator<Value> = {\n next() {\n const result: IteratorResult<Value> = { value: 123, done: true };\n return result;\n },\n };\n return iterator;\n },\n};\n\n// IterableIterator 是 ts 提供的实用接口，它把 可迭代对象 和 迭代器对象 结合成一个对象\nconst example2: IterableIterator<Value> = {\n next() {\n return { value: 123, done: true };\n },\n [Symbol.iterator]() {\n return this;\n },\n};\n\n// 生成器返回 Generator 对象，它是可迭代的迭代器\nconst viaGenerator: Iterable<Value> = {\n [Symbol.iterator]: function* () {\n yield 123;\n yield 456;\n yield 789;\n },\n};\n// lib.es2015.iterable.d.ts\n\ninterface IteratorYieldResult<TYield> {\n done?: false;\n value: TYield;\n}\n\ninterface IteratorReturnResult<TReturn> {\n done: true;\n value: TReturn;\n}\n\ntype IteratorResult<T, TReturn = any> = IteratorYieldResult<T> | IteratorReturnResult<TReturn>;\n\ninterface Iterator<T, TReturn = any, TNext = undefined> {\n // NOTE: 'next' is defined using a tuple to ensure we report the correct assignability errors in all places.\n next(...args: [] | [TNext]): IteratorResult<T, TReturn>;\n return?(value?: TReturn): IteratorResult<T, TReturn>;\n throw?(e?: any): IteratorResult<T, TReturn>;\n}\n\ninterface Iterable<T> {\n [Symbol.iterator](): Iterator<T>;\n}\n\ninterface IterableIterator<T> extends Iterator<T> {\n [Symbol.iterator](): IterableIterator<T>;\n}\n生成器函数返回一个实现 Generator 接口的对象Generator 继承 Iterator，但仔细看可以发现 Generator 其实完全相当与 Required<IterableIterator>
也就是说生成器函数返回的对象同时是 可迭代对象 和 迭代器对象
使用生成器可以参见此处：https://zh.javascript.info/generators
\n// lib.es2015.generator.d.ts\n\ninterface Generator<T = unknown, TReturn = any, TNext = unknown> extends Iterator<T, TReturn, TNext> {\n // NOTE: 'next' is defined using a tuple to ensure we report the correct assignability errors in all places.\n next(...args: [] | [TNext]): IteratorResult<T, TReturn>;\n return(value: TReturn): IteratorResult<T, TReturn>;\n throw(e: any): IteratorResult<T, TReturn>;\n [Symbol.iterator](): Generator<T, TReturn, TNext>;\n}\n\ninterface GeneratorFunction {\n /**\n * Creates a new Generator object.\n * @param args A list of arguments the function accepts.\n */\n new (...args: any[]): Generator;\n /**\n * Creates a new Generator object.\n * @param args A list of arguments the function accepts.\n */\n (...args: any[]): Generator;\n /**\n * The length of the arguments.\n */\n readonly length: number;\n /**\n * Returns the name of the function.\n */\n readonly name: string;\n /**\n * A reference to the prototype.\n */\n readonly prototype: Generator;\n}\n\ninterface GeneratorFunctionConstructor {\n /**\n * Creates a new Generator function.\n * @param args A list of arguments the function accepts.\n */\n new (...args: string[]): GeneratorFunction;\n /**\n * Creates a new Generator function.\n * @param args A list of arguments the function accepts.\n */\n (...args: string[]): GeneratorFunction;\n /**\n * The length of the arguments.\n */\n readonly length: number;\n /**\n * Returns the name of the function.\n */\n readonly name: string;\n /**\n * A reference to the prototype.\n */\n readonly prototype: GeneratorFunction;\n}\nGeneratorFunctionConstructor 接口并没有什么实用意义，其对应 FunctionConstructorFunctionConstructor 接口 被 Function 构造函数实现， 定义如下
interface FunctionConstructor {\n /**\n * Creates a new function.\n * @param args A list of arguments the function accepts.\n */\n new (...args: string[]): Function;\n (...args: string[]): Function;\n readonly prototype: Function;\n}\n\ndeclare var Function: FunctionConstructor;\n注：通过原型获取生成器函数构造器
\nconst GeneratorFunction = Object.getPrototypeOf(function* () {}).constructor;\n异步迭代器只不过是支持异步的迭代器，但注意同时实现 迭代协议 与 异步迭代协议 显然是不冲突的。
\ntype Value = number; // 仅为了标识被迭代的泛型\n\nconst example3: AsyncIterable<Value> = {\n [Symbol.asyncIterator]: () => {\n const asyncIterator: AsyncIterator<Value> = {\n // 不同之处就在于这里的 async\n async next() {\n const result: IteratorResult<Value> = { value: 123, done: true };\n return result;\n },\n };\n return asyncIterator;\n },\n};\n\nconst example4: AsyncIterableIterator<Value> = {\n async next() {\n return { value: 123, done: true };\n },\n [Symbol.asyncIterator]() {\n return this;\n },\n};\n\nconst viaAsyncGenerator: AsyncIterable<Value> = {\n [Symbol.asyncIterator]: async function* () {\n yield 123;\n yield 456;\n yield 789;\n },\n};\n// lib.es2018.asynciterable.d.ts\n\ninterface AsyncIterator<T, TReturn = any, TNext = undefined> {\n // NOTE: 'next' is defined using a tuple to ensure we report the correct assignability errors in all places.\n next(...args: [] | [TNext]): Promise<IteratorResult<T, TReturn>>;\n return?(value?: TReturn | PromiseLike<TReturn>): Promise<IteratorResult<T, TReturn>>;\n throw?(e?: any): Promise<IteratorResult<T, TReturn>>;\n}\n\ninterface AsyncIterable<T> {\n [Symbol.asyncIterator](): AsyncIterator<T>;\n}\n\ninterface AsyncIterableIterator<T> extends AsyncIterator<T> {\n [Symbol.asyncIterator](): AsyncIterableIterator<T>;\n}\n// lib.es2018.asyncgenerator.d.ts\n\ninterface AsyncGenerator<T = unknown, TReturn = any, TNext = unknown> extends AsyncIterator<T, TReturn, TNext> {\n // NOTE: 'next' is defined using a tuple to ensure we report the correct assignability errors in all places.\n next(...args: [] | [TNext]): Promise<IteratorResult<T, TReturn>>;\n return(value: TReturn | PromiseLike<TReturn>): Promise<IteratorResult<T, TReturn>>;\n throw(e: any): Promise<IteratorResult<T, TReturn>>;\n [Symbol.asyncIterator](): AsyncGenerator<T, TReturn, TNext>;\n}\n\ninterface AsyncGeneratorFunction {\n /**\n * Creates a new AsyncGenerator object.\n * @param args A list of arguments the function accepts.\n */\n new (...args: any[]): AsyncGenerator;\n /**\n * Creates a new AsyncGenerator object.\n * @param args A list of arguments the function accepts.\n */\n (...args: any[]): AsyncGenerator;\n /**\n * The length of the arguments.\n */\n readonly length: number;\n /**\n * Returns the name of the function.\n */\n readonly name: string;\n /**\n * A reference to the prototype.\n */\n readonly prototype: AsyncGenerator;\n}\n\ninterface AsyncGeneratorFunctionConstructor {\n /**\n * Creates a new AsyncGenerator function.\n * @param args A list of arguments the function accepts.\n */\n new (...args: string[]): AsyncGeneratorFunction;\n /**\n * Creates a new AsyncGenerator function.\n * @param args A list of arguments the function accepts.\n */\n (...args: string[]): AsyncGeneratorFunction;\n /**\n * The length of the arguments.\n */\n readonly length: number;\n /**\n * Returns the name of the function.\n */\n readonly name: string;\n /**\n * A reference to the prototype.\n */\n readonly prototype: AsyncGeneratorFunction;\n}\nfor...of for await..offor (const value of example1) console.log(value);\n// => 123\n\nfor await (const value of example3) console.log(value);\n// => 123\n注意，for await 也可用于迭代普通迭代器 （反之则不行）
for await (var value of example1) console.log(value);\n\n// 就像 await 也可用于任意值一样\nconsole.log(await "test");\n注意：本篇为 experimental stage 2 装饰器，需要在 tsconfig.json 启用 experimentalDecorators 选项
\n{\n "compileOptions": {\n "experimentalDecorators": true\n }\n}\nstage 3 装饰器自 typescript 5.0 无需配置直接支持，此时启用 experimentalDecorators 选项将导致使用 stage 2 装饰器
\n参见:
https://www.typescriptlang.org/docs/handbook/decorators.html
https://mirone.me/zh-hans/a-complete-guide-to-typescript-decorator/
https://bosens-china.github.io/Typescript-manual/download/zh/reference/decorators.html
Playground:
https://www.typescriptlang.org/zh/play
装饰器是函数。
一共有四种这样的函数，用于修饰不同的目标类型
interface TypedPropertyDescriptor<T> {\n enumerable?: boolean;\n configurable?: boolean;\n writable?: boolean;\n value?: T;\n get?: () => T;\n set?: (value: T) => void;\n}\n\n// 类装饰器\ndeclare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;\n\n// 属性装饰器\ndeclare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;\n\n// 方法装饰器 & 访问器装饰器\ndeclare type MethodDecorator = <T>(\n target: Object,\n propertyKey: string | symbol,\n descriptor: TypedPropertyDescriptor<T>,\n) => TypedPropertyDescriptor<T> | void;\n\n// 参数装饰器\ndeclare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;\nJavaScript 中的类就是构造函数
\n下面的装饰器作用于构造函数（但不修改）。很明显，装饰器函数在构造函数声明后被调用。
\nfunction sealed(constructor: Function) {\n Object.seal(constructor);\n Object.seal(constructor.prototype);\n}\n\n@sealed\nclass Greeter {\n greeting: string;\n constructor(message: string) {\n this.greeting = message;\n }\n greet() {\n return "Hello, " + this.greeting;\n }\n}\n可以看作是
\nconst Greeter = (() => {\n // prettier-ignore\n class Greeter {/* 略 */}\n return sealed(_Greeter) ?? Greeter;\n})();\n类装饰器若返回一个类，则声明的构造函数被替换
\nfunction classDecorator<T extends { new (...args: any[]): {} }>(constructor: T) {\n return class extends constructor {\n newProperty = "new property";\n hello = "override";\n };\n}\n\n@classDecorator\nclass Greeter {\n property = "property";\n hello: string;\n constructor(m: string) {\n this.hello = m;\n }\n}\n装饰器工厂是返回装饰器的函数，据此实现带参装饰器
\n方法装饰器/访问器装饰器 有三个参数：
\n1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2.成员的名字
3.成员的属性描述符
如果 方法装饰器/访问器装饰器 返回一个值，它会被用作方法的属性描述符。
\n注意，同名访问器的 getter 和 setter 只需在文档顺序的第一个上应用装饰器
\nfunction enumerable(value: boolean) {\n return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n descriptor.enumerable = value;\n };\n}\n\nfunction configurable(value: boolean) {\n return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {\n descriptor.configurable = value;\n };\n}\n\n// 方法装饰器\nclass Greeter {\n greeting: string;\n constructor(message: string) {\n this.greeting = message;\n }\n\n @enumerable(false)\n greet() {\n return "Hello, " + this.greeting;\n }\n}\n\n// 访问器装饰器\nclass Point {\n private _x: number;\n private _y: number;\n constructor(x: number, y: number) {\n this._x = x;\n this._y = y;\n }\n\n @configurable(false)\n get x() {\n return this._x;\n }\n\n @configurable(false)\n get y() {\n return this._y;\n }\n}\n\n\n注意
\n
属性描述符不会作为(第三个)参数传入属性装饰器，这与 TypeScript 是如何初始化属性装饰器的有关。
因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且无法监视或修改一个属性的初始化方法。返回值也会被忽略。
因此，属性描述符只能用来监视类中是否声明了某个名字的属性。
\n\n","tags":["typescript"]},{"id":"posix-ref","url":"https://yieldray.fun/posts/posix-ref","title":"POSIX参考","date_published":"2022-11-13T22:22:22.000Z","date_modified":"2022-11-13T22:22:22.000Z","content_text":"与属性装饰器相似，但第三个参数传入的是参数在函数参数列表中的索引
\n
规范
https://pubs.opengroup.org/onlinepubs/9699919799/
glibc 文档
https://www.gnu.org/software/libc/manual/
man-pages
https://www.kernel.org/doc/man-pages/
中文参考
https://github.com/guodongxiaren/LinuxAPI/wiki
https://github.com/getiot/linux-c-functions
C/C++参考
https://cplusplus.com/reference/
https://zh.cppreference.com/
https://c-cpp.com/
https://learn.microsoft.com/zh-cn/cpp/
https://learn.microsoft.com/zh-cn/cpp/c-language/c-language-reference
https://learn.microsoft.com/zh-cn/cpp/cpp/cpp-language-reference
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
\n注意：在严格模式下，违反属性描述符会抛出 TypeError 异常\n在非严格模式下则是静默失败
\n通过直接的赋值和属性初始化的属性，属性描述符都为 true
\ninterface PropertyDescriptor {\n // 是否可配置，若设置为不可配置，则不能删除指定属性，且不能再修改属性描述符（除了将 writable: true 更改为 false）\n // 务必注意这里的不可修改，就是不能再次定义已经定义的属性描述符，但如果本来未定义（默认行为）则可以修改\n configurable?: boolean;\n // 是否可枚举，如 for..in 循环\n enumerable?: boolean;\n // 是否可写\n writable?: boolean;\n // value和writeable 与 getter和setter 只能二选一，否则抛出TypeError\n value?: any;\n get?(): any;\n set?(v: any): void;\n}\n\ninterface PropertyDescriptorMap {\n [key: PropertyKey]: PropertyDescriptor;\n}\n两个方法可以设置属性描述符
\nconst obj = {};\n\nObject.defineProperty(obj, "foo", {\n enumerable: true,\n get() {\n return "foo";\n },\n});\n\nObject.defineProperty(obj, "bar", {\n enumerable: false,\n writable: true,\n value: "bar",\n});\n\nObject.defineProperty(obj, "bar", {\n writable: false, // 例外\n value: "baz",\n});\n\nObject.defineProperty(obj, "PI", {\n configurable: false,\n writable: false,\n enumerable: true,\n value: 3.14, // 相当于常量\n});\n\nfor (const [k, v] of Object.entries(obj)) console.log("%s=%s", k, v);\n// 输出\n// foo=foo\n// PI=3.14\n对应的两个方法可以获取属性描述符
\nObject.getOwnPropertyDescriptor(obj, "foo");\nObject.getOwnPropertyDescriptors(obj);\n属性描述符在单个属性的级别上工作。
\n还有一些限制访问 整个 对象的方法：
\n// 阻止在对象上添加新属性\nObject.preventExtensions(obj);\n// 阻止在对象上添加新属性，并将所有现有属性标记为不可配置\nObject.seal(obj);\n// 阻止在对象上添加新属性，并将所有现有属性标记为不可配置、不可修改\nObject.freeze(obj);\n\nObject.isExtensible(obj);\n\nObject.isSealed(obj);\n\nObject.isFrozen(obj);\n// 设置对象的内部 [[Prototype]] 属性\nObject.setPrototypeOf(obj, proto);\n\n// 获取对象的内部 [[Prototype]] 属性\nObject.getPrototypeOf(obj);\n\n// 返回是否对象自身上具有指定属性，而不会从原型上查找\nObject.hasOwn(instance, prop);\n\n// 通过指定原型和可选的属性描述符映射创建新对象\nObject.create(proto[, propertyDescriptorMap]);\n// 请注意！这里属性描述符映射中的属性描述符默认全为 false！\nhttps://developer.mozilla.org/docs/Web/JavaScript/Enumerability_and_ownership_of_properties
\n注意，for...in 循环遍历时，先遍历对象自身，再遍历原型
// 返回由给定对象 自身的 可枚举属性名组成的数组\nObject.keys(obj);\n\n// 返回由给定对象 自身的 可枚举属性值组成的数组\nObject.values(obj);\n\n// 返回由给定对象 自身的 可枚举属性键值对组成的数组\nObject.entries(obj);\n\n// 将键值对可迭代对象转换为一个对象\nObject.fromEntries(iterable);\n// https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols\n// 返回由给定对象 自身的 所有非 Symbol 属性名组成的数组\nObject.getOwnPropertyNames(obj);\n\n// 返回由给定对象 自身的 所有 Symbol 属性名组成的数组\nObject.getOwnPropertySymbols(obj);\n// 将（一个或多个）源对象自身的所有可枚举属性复制到目标对象上，然后返回目标对象\nObject.assign(target, ...sources);\n\n// 方法判断两个值是否为同一个值\nObject.is(value1, value2);\n\n// 演示\nObject.is(+0, -0); // => false\n+0 === -0; // => true\nObject.is(NaN, NaN); // => true\nNaN === NaN; // => false\nObject.prototype 上定义的方法
// 判断当前对象自身的指定属性是否可枚举\nObject.prototype.propertyIsEnumerable(prop);\n\n// 判断当前对象自身是否具有指定的属性\nObject.prototype.hasOwnProperty(prop);\n\n// 判断当前对象是否在另一个对象的原型链上，与instanceof的区别在于后者判断的是构造函数，而不是原型对象本身\nObject.prototype.isPrototypeOf(obj);\n\n// 下面两个无参方法主要用于类型转换\n// 参见：https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive\nObject.prototype.valueOf();\nObject.prototype.toString();\n手册
https://www.gnu.org/software/bash/manual/
https://dashdash.io/1/bash\n参考
https://wangdoc.com/bash/
https://github.com/onceupon/Bash-Oneliner
https://github.com/jaywcjlove/shell-tutorial
https://github.com/skywind3000/awesome-cheatsheets/blob/master/languages/bash.sh
基本命令参见 此处，命令帮助参见 此处，本篇主要在于 shell 编程
\n分号是命令的分隔符，但不必要，也可以用换行代替
\ncommand [ arg1 ... [ argN ]]\n退出时，脚本会返回一个退出值。脚本的退出值，0 表示正常，1 表示发生错误，2 表示用法不对，126 表示不是可执行脚本，127 表示命令没有发现。如果脚本被信号 N 终止，则退出值为 128 + N。简单来说，只要退出值非 0，就认为执行出错
\n# 不带参数\nexit\n\n# 退出值为0（成功）\nexit 0\n\n# 退出值为1（失败）\nexit 1\n放在脚本的第一行，指定解释器
\n# 使用系统默认shell\n#!/bin/sh\n\n# 指定为bash\n#!/bin/bash\n\n# 通过env命令指定为bash\n#!/usr/bin/env bash\nenv 命令指向 /usr/bin/env 这个程序，该命令用于获取环境变量
env [OPTION]... [-] [NAME=VALUE]... [COMMAND [ARG]...]\nBash 没有数据类型的概念，所有的变量值都是字符串
\n声明变量不需要美元符号$，引用变量需要$
等号之间不能有空格
myvar="hello world"\nmyvar=hello,world\nsingle_quota='a\\nb' # 单引号不转义\ndouble_quota="a\\nb" # 双引号转义\ncmd=$(ls -l)\ncmd=`ls -l`\ncmd=$((5 * 7))\n\n# 单引号和双引号都是支持多行字符串的\nmyvar="hello\nworld"\n# 美元符号（$）、反引号（`）和反斜杠（\\），这三个字符在双引号之中会被自动扩展\n# 单引号则保留字符的字面含义，上面三个特殊字符也不会扩展\necho "$(( 2 * 3 )) = 6" # 6 = 6\necho '$(( 2 * 3 )) = 6' # $(( 2 * 3 )) = 6\n\n# Here文档，相当于管道\ncat << _token_\n$foo\n"$foo"\n'$foo'\n_token_\n\n# 将变量值转为标准输入\ncat <<< 'hi there'\necho 'hi there' | cat\nRead a line from the standard input and split it into fields.
\nread [-ers] [-a array] [-d delim] [-i text] [-n nchars] [-N nchars] [-p prompt] [-t timeout] [-u fd] [name ...]\n\n# 从标准输入读入变量\nread text\necho "输入了：$text"\n\n# 可以读入多个值\n# 如果用户的输入项少于read命令给出的变量数目，那么额外的变量值为空。\n# 如果用户的输入项多于定义的变量，那么多余的输入项会包含到最后一个变量中。\nread FN LN\necho "Hi! $LN, $FN !"\n\n# 如果read命令之后没有定义变量名，那么环境变量REPLY会包含所有的输入。\nread\necho "$REPLY"\n\n\n# read命令也可以读入文件\nfilename='/etc/hosts'\nwhile read myline\ndo\n echo "$myline"\ndone < $filename\nread 参数
\n# -t 参数，指定等待输入的时间，单位为秒\n# 若超时，则 read 命令失败退出\nif read -t 3 response; then\n echo "用户已经输入了"\nelse\n echo "用户没有输入"\nfi\n\n# 环境变量TMOUT也可以起到同样作用\nTMOUT=3\nread response\n# -p 参数，指定提示信息\nread -p "Enter one or more values > "\necho "$REPLY"\n# 相当于\necho -n "Enter one or more values > "\nread\necho "$REPLY"\nIFS 环境变量（Internal Field Separator）
\n# read命令读取的值，默认以空格分隔\n# 可以通过自定义环境变量 IFS 修改分隔标志\nIFS=":" read input\n# 将 IFS 和 read 写在一行，则 IFS 仅在这一行生效（到了下一行就恢复）\na=test\ntest=123\nb="$a $test"\n\n# echo命令，不加引号，变量解释为多个参数，故只有一个空格\necho $b # test 123\n\n# 加上双引号（转义，单引号不转义），变量作为一个字符串整体，而作为 echo 命令的一个参数，故保留了空格格式\necho "$b" # test 123\n\n# 未声明的变量，相当于空字符串\necho $a_file # <空>\n\n# ${变量名} 方式获取变量，防止与其它字符混淆\necho ${a}_file # test_file\n\n# ${!保存变量名的变量} 表示变量名本身也是变量，下面相当于 echo $test\necho ${!a} # 123\nmyvar=123\nunset $myvar\n# 不存在的变量，相当于空字符串，故unset命令等效于下面的其一\nmyvar=''\nmyvar=\nexport 命令，将变量传递给子 shell
（相当于给启动的程序传递环境变量）
NAME=foo\nexport NAME\n# 或者\nexport NAME=foo\n$? 返回上一个命令的退出码
$$ 返回当前 shell 的进程 ID
$- 返回当前 Shell 的启动参数
$_ 返回上一个命令的最后一个参数
$! 返回最近一个后台执行的异步命令的进程 ID
$0 ~ $9 (超过 9 的以 ${10} 形式获取) 参数列表，相当于 C 语言的 argv （注意，$0 一般为当前脚本文件名）
$# 参数的总数，相当于 C 语言的 argc
$@ 全部的参数，以空格分隔
$* 全部的参数，参数之间使用变量 $IFS 值的第一个字符分隔，默认为空格，但是可以自定义。
# declare 命令，声明特殊类型的变量\ndeclare [-aAfFgiIlnrtux] [-p] [name[=value] ...]\n\n# readonly 命令，声明只读变量\nreadonly [-aAf] [name[=value] ...] or readonly -p\n\n# let 命令，执行数学运算表达式\nlet arg [arg ...]\n参见
https://wangdoc.com/bash/variable#declare-%E5%91%BD%E4%BB%A4
https://cn.tldr.inbrowser.app/pages/common/declare
array[0]=value0\narray[1]=value1\narray[2]=value2\n\narray=(value0 value1 value3)\n# 可以写成多行\narray=(\n value0\n value1\n value2\n)\n# 可以指定下标\narray=([2]=value2 [0]=value0 [1]=value1)\n# 省略\narray=(value0 [2]=value2 value1)\n# 使用通配符，自动展开\ntxts=( *.txt )\n\n# declare -a 选项，声明数组\ndeclare -a ARRAYNAME\n# read -a 选项，读入数组\nread -a ARRAYNAME\n# 获取数组成员时，必须使用花括号\necho ${array[0]}\n# 不能这样，因为此时方括号会单独解释\necho $array[0]\n# 若变量存在，则返回+后面的值\n${varname:+value_if_exist}\n# 若变量不存在，则返回-后面的值\n${varname:-value_if_not_exist}\n# 若变量不存在，则返回=后面的值，且将变量设置为=后面的值\n${varname:=set_if_not_exist}\n# 若变量不存在，则打印?后面的值，并中断脚本的执行\n${varname:?exit_if_not_exist}\n例如，可以编写以下脚本，要求传入第一个参数 $1。若不存在，则打印 filename missing. 并退出脚本的运行
filename=${1:?"filename missing."}\necho hello world\necho -n "无换行"\necho -e "解释特殊字符\\n单引号和双引号皆有效"\n\n# 反斜线，将下一行命令和当前行一起解释\necho hello,\\\nworld\n匹配模式 pattern 可以使用*、?、[]等通配符。
# 字符串长度\n${#variable}\n# 提取字字符串。如果省略length，则从位置offset开始，一直返回到字符串的结尾。\n# offset和length可为负值，注意冒号后必须有一空格，${variable: -offset:-length}\n${variable:offset:length}\n\n\n# 匹配字符串的开头\n# 返回字符串中移除了匹配的部分\n${variable#pattern} # 非贪婪\n${variable##pattern} # 贪婪\n\n# 匹配字符串的末尾，同上\n${variable%pattern} # 非贪婪\n${variable%%pattern} # 贪婪\n\n# 返回字符串中匹配部分被替换为给定字符串后的结果\n${variable/pattern/string} # 贪婪，只替换第一处\n${variable//pattern/string} # 贪婪，替换所有\n${variable/#pattern/string} # 模式必须出现在字符串的开头\n${variable/%pattern/string} # 模式必须出现在字符串的结尾\n\n# 全部转为大写\n${varname^^}\n\n# 全部转为小写\n${varname,,}\n((...)) 语法可以进行整数的算术运算
# 这个语法不返回值\n# 只要算术结果不是 0，该命令退出码 0；否则为 1。（可以通过 $? 变量获取返回值）\n(( expression ))\n# 加上美元符号 $ 后，该命令返回运算结果\n$(( expression ))\n也可以使用 expr 命令，同样只支持整数
\nexpr {{expression}}\nlet 命令用于将算术运算的结果赋予一个变量，等号之间不能有空格
\nlet x=2+3\nsource 命令在当前 shell 执行一个脚本
\nsource {{file}}\nshift 命令移除脚本的前 n 个参数（不包括$0）。若未指定 n，则为 n 为 1
若 n 大于 $# （或 n 为负数），则该命令失败；否则成功
shift {{n}}\ngetopt/getopts 命令用于解析命令参数
\ngetopts optstring name [arg ...]\n\ngetopt <optstring> <parameters>\ngetopt [options] [--] <optstring> <parameters>\ngetopt [options] -o|--options <optstring> [options] [--] <parameters>\ntrap 命令捕获该命令之后的系统信号（和其它事件）
\ntrap [-lp] [[arg] signal_spec ...]\n简单的用法就是一旦捕获到 signal，就执行 command
\ntrap {{command}} {{signal}}\n\n# -l 选项列出所有信号（及对应数字）\ntrap -l\ntest 命令执行成功返回 0；否则返回 1
\n# 写法一\ntest expression\n\n# 写法二（注意，这里的空格是必须的）\n[ expression ]\n\n# 写法三（支持正则判断）\n[[ expression ]]\n参见 https://wangdoc.com/bash/condition#test-%E5%91%BD%E4%BB%A4
\n注意，分号的作用和换行等效
\n若命令返回 0，则判断成立
\nif commands; then\n commands\n[elif commands; then\n commands...]\n[else\n commands]\nfi\nwhile condition; do\n commands\ndone\nuntil condition; do\n commands\ndone\nbreak 和 continue 也是支持的
\nfor (( expression1; expression2; expression3 )); do\n commands\ndone\nfor variable in list; do\n commands\ndone\nselect name [in list]; do\n commands\ndone\ncase $variable in\n $value)\n commands\n ;;\n $value1|$value2[|$value3 ...])\n commands\n ;;\n *)\n default_commands\n break\n ;;\nesac\n# 第一种\nfn() {\n # codes\n}\n\n# 第二种\nfunction fn() {\n # codes\n}\n\n# 调用函数（相当于调用命令，没有括号）\nfn arg1 arg2 ...\n函数内部也有特殊变量，和整个脚本的特殊变量含义相同\n$0 ~ $9 $# $@ $*
fn() {\n return 123\n}\nfn\necho $?\n# 输出 123\n下一个命令可以通过 $? 获取上一个函数的返回值
若不使用 local 命令，函数体中的变量和全局变量相同
也就是说，可以在函数体内创建、访问和修改全局变量
local 命令声明的变量，只在函数体内有效
\n#! /bin/bash\nfn() {\n local foo\n foo=123\n echo $foo\n}\nfn # 123\necho $foo # <空>\n参考：\nhttps://go.dev/doc/modules/managing-dependencies
https://go.dev/blog/using-go-modules
首先创建项目文件夹
\nmkdir mymod\ncd mymod\ngo mod init 命令：在当前目录下初始化新的模块
go mod init example.com/m\n该命令创建 go.mod 文件，内容如下
module example.com/m\n\ngo 1.19\n该文件描述了当前模块和依赖
\nhttps://goproxy.cn/
https://goproxy.io/zh/
https://mirrors.aliyun.com/goproxy/
go get 命令：安装依赖
go get example.com/pkg\n例如：
\ngo get github.com/subosito/gotenv\ngo.mod 文件如下
\nmodule example.com/m\n\ngo 1.19\n\nrequire github.com/subosito/gotenv v1.4.1 // indirect\n为了测试，创建一个 .env 文件
echo -e "APP_ID=1234567\\nAPP_SECRET=abcdef" > .env\n创建一个 go 源代码文件，内容如下
\npackage main\n\nimport (\n "github.com/subosito/gotenv"\n "log"\n "os"\n)\n\nfunc init() {\n gotenv.Load()\n}\n\nfunc main() {\n log.Println(os.Getenv("APP_ID")) // "1234567"\n log.Println(os.Getenv("APP_SECRET")) // "abcdef"\n}\n运行试试
\ngo run test.go\n\n2022/11/06 12:00:00 1234567\n2022/11/06 12:00:01 abcdef\n由于我们已经使用了该依赖，运行 go mod tidy 命令
该命令将去掉 go.mod 文件中项目不需要的依赖
现在，go.mod 内容如下
可以发现，// indirect 注释消失了
module example.com/m\n\ngo 1.19\n\nrequire github.com/subosito/gotenv v1.4.1\n安装的依赖存在于 ~/go/pkg/mod 目录中
运行 go mod vendor 命令，则将在当前项目生成 vendor 目录，保存所有依赖
此后一旦修改了 go.mod 文件，就需要执行 go mod vendor，重新生成 vendor 目录
包名应当与目录名相同
包名为 internal 的包只可被直接父级包和同级的相邻包使用
// mymod/any_name.go\n\npackage mymod\n\nimport "fmt"\n\nfunc Hello(name string) {\n fmt.Printf("Hello, %s!", name)\n}\n要导入上面创建的包，我们再创建一个项目
\ncd ..\nmkdir test\ngo mod init test\n\n# 因为我们的包在本地，所以执行\ngo mod edit -replace example.com/m/mymod=../mymod\ngo get example.com/m/mymod\n// test.go\npackage main\n\nimport "example.com/m/mymod"\n\nfunc main() {\n mymod.Hello("Ray") // Hello, Ray!\n}\n此时 go.mod 文件内容如下
module test\n\ngo 1.19\n\nreplace example.com/m/mymod => ../mymod\n\nrequire example.com/m/mymod v0.0.0-00010101000000-000000000000 // indirect\n运行 go mod tidy 还是可以将 // indirect 注释消除的
# List all of the modules that are dependencies of your current module, along with the latest version available for each:\ngo list -m -u all\n\n# Display the latest version available for a specific module:\ngo list -m -u example.com/theirmodule\n\n# To get the latest version, append the module path with @latest:\ngo get example.com/theirmodule@latest\n参见：https://go.dev/blog/publishing-go-modules
\n","tags":["golang"]},{"id":"golang-intro","url":"https://yieldray.fun/posts/golang-intro","title":"golang入门","date_published":"2022-10-31T17:00:00.000Z","date_modified":"2022-10-31T17:00:00.000Z","content_text":"Playground
https://golang.google.cn/play/
Go 指南
https://tour.go-zh.org/
Go by example
https://gobyexample-cn.github.io/
Go 语言圣经（中文版）
https://gopl-zh.github.io/
Mastering GO
https://github.com/hantmac/Mastering_Go_ZH_CN
https://books.studygolang.com/Mastering_Go_ZH_CN/
Golang for Node.js Developers
https://github.com/miguelmota/golang-for-nodejs-developers
参考
https://books.studygolang.com/
https://github.com/jaywcjlove/golang-tutorial
https://github.com/iswbm/GolangCodingTime
https://github.com/unknwon/the-way-to-go_ZH_CN/blob/master/eBook/directory.md
https://github.com/polaris1119/The-Golang-Standard-Library-by-Example/blob/master/directory.md
标准库
https://pkg.go.dev/std
https://studygolang.com/pkgdoc
分号是可选的！
\n包实现了命名空间的管理
任何一个 Go 语言程序必须属于一个包，即每个 go 程序的开头要写上 package <pkg_name>
package main\n\nimport (\n "fmt"\n "math/rand"\n)\n// 或者\n// import "fmt"\n// import "math/rand"\n\nfunc main() {\n fmt.Println("My favorite number is", rand.Intn(10))\n}\n在 Go 中，如果一个名字以大写字母开头，那么它就是已导出的。
比如函数 rand.Intn 和变量 math.Pi
// 以别名导入\npackage main\n\nimport (\n f "fmt"\n)\n\nfunc main() {\n f.Println("f")\n}\n// 将包的命名空间合并到当前程序的命名空间\npackage main\n\nimport . "fmt"\n\nfunc main() {\n Println("f")\n}\nfunc add(x int, y int) int {\n return x + y\n}\n\n// 连续几个参数类型相同，可以省略前面的类型\nfunc add(x, y int) int {\n return x + y\n}\n\n\n// 可以返回多个值\nfunc swap(x, y string) (string, string) {\n return y, x\n}\n\nfunc main() {\n a, b := swap("hello", "world")\n fmt.Println(a, b)\n}\n\n// 返回值可以被命名，这些命名可以出现在文档中，\n// 最后的 return 不用带参数就可以把命名的返回值全部返回\nfunc split(sum int) (x, y int) {\n x = sum * 4 / 9\n y = sum - x\n return\n}\n函数的类型就是函数声明去除函数名、函数参数名、函数体剩下的部分
当然，此时需标注所有参数的类型
func(int, int) int\n函数也是值
所以闭包也是支持的
add := func(x, y int) int {\n return x + y\n}\n\nfunc addFn(x, y int, fn func(int, int) int) int {\n return fn(x, y)\n}\naddFn(1, 2, add)\nbool
string
int int8 int16 int32 int64
uint uint8 uint16 uint32 uint64 uintptr
byte // uint8 的别名
rune // int32 的别名，表示一个 Unicode 码点
float32 float64
complex64 complex128
没有明确初始值的变量声明会被赋予它们的零值。
数值类型为 0
布尔类型为 false
字符串为 ""
// var 声明一组变量列表\nvar num, i, count int\nvar a, b, c = true, 123, "no!";\n\n// const 声明常量\nconst Pi = 3.14\nconst (\n Big = 1 << 100\n Small = Big >> 99\n)\n\n// `:=` 简洁赋值语句，仅可在函数内使用\nfunc main() {\n var i, j int = 1, 2\n k := 3\n}\n不同的类型之间不会进行隐式转换
显式转换，只需像这样转换到的类型(被转换的变量)：
var i = 42\nvar f = float64(i)\n只有 for，但包含多种功能
\nfunc main() {\n sum := 0\n for i := 0; i < 10; i++ {\n sum += i\n }\n}\n\nfunc main() {\n sum := 1\n for sum < 1000 {\n sum += sum\n }\n}\n\n// 无限循环\nfor {\n // code goes here\n}\nif 语句可以在条件表达式前执行一个简单的语句，该语句声明的变量作用域仅在 if 之内
\nif x:= rand.Intn(10); x > 5 {\n fmt.Println("BIG!")\n} else {\n fmt.Println("Small!")\n}\nswitch 无需 break，作为替代，在有需要时可以使用 fallthrough
此外 case 的值无需为常量（比如可以为一个函数返回值）
没有条件的 switch 同 switch true 一样
func main() {\n fmt.Print("Go runs on ")\n switch os := runtime.GOOS; os {\n case "darwin":\n fmt.Println("OS X.")\n case "linux":\n fmt.Println("Linux.")\n default:\n // freebsd, openbsd,\n // plan9, windows...\n fmt.Printf("%s.\\n", os)\n }\n}\ndefer 语句会将函数推迟到外层函数返回之后执行。
推迟调用的函数其参数会立即求值，但直到外层函数返回前该函数都不会被调用。
推迟的函数调用会被压入一个栈中。当外层函数返回时，被推迟的函数会按照后进先出的顺序调用。
func main() {\n defer fmt.Println("world")\n fmt.Println("hello")\n}\n// hello\n// world\n指针类型*T表示指向T类型的指针&操作符可创建变量的指针，指针的零值为nil*操作符可访问指针指向的值
var i int = 1\nvar p *int = &i\nfmt.Println(i) // 1\nfmt.Println(*p) // 1\n*p = 2\nfmt.Println(i) // 2\ntype Vertex struct {\n X int\n Y int\n}\n\nfunc main() {\n v := Vertex{1, 2} // 相当于 Vertex{X: 1, Y: 2}\n p := &v\n p.X = 1e9 // 相当于 (*p).X\n fmt.Println(v)\n}\n类型 [n]T 表示拥有 n 个 T 类型的值的数组
数组的切片是对数组的引用，切片的零值则是nil
切片下界的默认值为 0，上界则是该切片的长度
func main() {\n var a [2]string\n a[0] = "Hello"\n a[1] = "World"\n fmt.Println(a[0], a[1])\n fmt.Println(a)\n\n primes := [6]int{2, 3, 5, 7, 11, 13}\n fmt.Println(primes)\n\n var s []int = primes[1:4] // 切片，左闭右开！注意，切片的类型相当于对应数组类型但方括号中为空\n fmt.Println(s)\n\n primess := []int{2, 3, 5, 7, 11, 13} // 方括号中没有指明数组容量，则我们得到的是切片而不是数组！\n}\n切片具有长度(len)和容量(cap)
\na := make([]int, 5) // len(a)=5\nb := make([]int, 0, 5) // len(b)=0, cap(b)=5\n\nb = b[:cap(b)] // len(b)=5, cap(b)=5\nb = b[1:] // len(b)=4, cap(b)=4\nfunc append(s []T, vs ...T) []T\n// append 函数创建了一个在原切片上追加元素的新切片\n\n// range循环同时返回切片的下标和对应元素的*副本*\nfor i, v := range []int{1, 2, 3} {\n fmt.Printf("index=%d value=%d\\n", i, v)\n}\n映射的类型是 map[K]V K 是键的类型，V 是值的类型
若指定键不在映射中，那么其对应值是该映射元素类型的零值
m := make(map[string]Vertex)\nm["hello"] = Vertex{3, 6}\nfmt.Println(m["hello"]) // {3 6}\nfmt.Println(m["world"]) // {0 0} 零值\n\n// or\nvar m = map[string]Vertex{\n "hello": Vertex{3, 6},\n "world": Vertex{4, 8},\n}\n// or\nvar m = map[string]Vertex{\n "hello": {3, 6},\n "world": {4, 8},\n}\n\ndelete(m, "key")\nelem := m["key"]\nelem, ok := m["key"]\n方法只是个带接收者参数的函数
\ntype Vertex struct {\n X, Y float64\n}\n\n// 方法\nfunc (v Vertex) Abs() float64 {\n return math.Sqrt(v.X*v.X + v.Y*v.Y)\n}\n\nfunc main() {\n v := Vertex{3, 4}\n fmt.Println(v.Abs())\n}\n\n// 相当于普通函数\nfunc Abs(v Vertex) float64 {\n return math.Sqrt(v.X*v.X + v.Y*v.Y)\n}\n\nfunc main() {\n v := Vertex{3, 4}\n fmt.Println(Abs(v))\n}\n接收者的类型定义和方法声明必须在同一包内
不能为内建类型声明方法（但可以通过给其它（内建）类型起别名来规避）
在需要修改接收者指向的值时，可以为指针接收者声明方法
\nfunc (v *Vertex) Scale(f float64) {\n v.X = v.X * f\n v.Y = v.Y * f\n}\n与普通函数不同的是：以指针为接收者的方法被调用时，接收者既能为值又能为指针
因为此时 Go 会将值解释为指针：v.Scale(5) -> (&v).Scale(5) 从而能对值进行修改\n以值为接收者的方法被调用时，接收者既能为值又能为指针，p.Abs() 会被解释为 (*p).Abs()
类型通过实现一个接口的所有方法来实现该接口
\ntype I interface {\n M()\n}\n\ntype T struct {\n S string\n}\n\nfunc (t *T) M() {\n if t == nil {\n fmt.Println("<nil>")\n return\n }\n fmt.Println(t.S)\n}\n\ntype F float64\n\nfunc (f F) M() {\n fmt.Println(f)\n}\n\nfunc main() {\n var i I\n\n i = &T{"Hello"}\n describe(i) // (&{Hello}, *main.T)\n i.M() // Hello\n\n i = F(math.Pi)\n describe(i) // (3.141592653589793, main.F)\n i.M() // 3.141592653589793\n\n var t *T\n i = t\n describe(i) // (<nil>, *main.T)\n i.M() // <nil>\n\n i = nil\n describe(i) // (<nil>, <nil>)\n i.M() // panic: runtime error: invalid memory address or nil pointer dereference\n}\n\nfunc describe(i I) {\n fmt.Printf("(%v, %T)\\n", i, i)\n}\n空接口 interface{} 可以保存任意类型的值
类型断言t := i.(T)则可以访问接口底层的具体值
类型断言可返回两个值：其底层值以及一个报告断言是否成功的布尔值
func main() {\n var i interface{} = "hello"\n\n s := i.(string)\n fmt.Println(s)\n\n s, ok := i.(string)\n fmt.Println(s, ok)\n\n f, ok := i.(float64)\n fmt.Println(f, ok) // 0 false\n\n f = i.(float64) // panic: interface conversion: interface {} is string, not float64\n fmt.Println(f)\n}\n通过 类型选择 可以按顺序从几个类型断言中进行选择
与一般的 switch 语句相似，不过类型选择中的 case 为类型（而非值）
func do(i interface{}) {\n switch v := i.(type) {\n case int:\n fmt.Printf("Twice %v is %v\\n", v, v*2)\n case string:\n fmt.Printf("%q is %v bytes long\\n", v, len(v))\n default:\n // 没有匹配，v 与 i 的类型相同（这里是 interface{}）\n fmt.Printf("I don't know about type %T!\\n", v)\n }\n}\nGo 程序使用 error 值来表示错误状态
接口 error 是内建接口
type error interface {\n Error() string\n}\n通过检查返回的 error 接口值是否为 nil 得知是否发生错误
\ntype MyError string\n\nfunc (e MyError) Error() string {\n return string(e)\n}\n\nfunc divide(a, b int) (n int, err error) {\n if b == 0 {\n return 0, MyError("除数不能为零")\n }\n return a / b, nil\n}\n\nfunc main() {\n result, err := divide(2, 0)\n if err == nil { // 无错误\n fmt.Println(result)\n } else { // 有错误\n fmt.Println(err)\n }\n}\nGo 程（goroutine）是由 Go 运行时管理的轻量级线程。
\ngo f(x, y, z)启动一个 go 程
go 程通过信道（channel）通信，信道是带有类型的管道
\nfunc sum(s []int, c chan int) {\n sum := 0\n for _, v := range s {\n sum += v\n }\n c <- sum // 将和送入 c\n}\n\nfunc main() {\n s := []int{7, 2, 8, -9, 4, 0}\n\n c := make(chan int)\n go sum(s[:len(s)/2], c)\n go sum(s[len(s)/2:], c)\n x, y := <-c, <-c // 从 c 中接收\n\n fmt.Println(x, y, x+y)\n}\n信道可以是 带缓冲的。将缓冲长度作为第二个参数提供给 make 来初始化一个带缓冲的信道
仅当信道的缓冲区填满后，向其发送数据时才会阻塞。当缓冲区为空时，接受方会阻塞。
func main() {\n ch := make(chan int, 2)\n ch <- 1\n ch <- 2\n fmt.Println(<-ch)\n fmt.Println(<-ch)\n}\n发送者可通过 close 关闭一个信道（向一个已经关闭的信道发送数据会引发 panic）
接收者可以通过为接收表达式分配第二个参数来测试信道是否被关闭 v, ok := <-ch
func fibonacci(n int, c chan int) {\n x, y := 0, 1\n for i := 0; i < n; i++ {\n c <- x\n x, y = y, x+y\n }\n close(c)\n}\n\nfunc main() {\n c := make(chan int, 10)\n go fibonacci(cap(c), c)\n for i := range c {\n fmt.Println(i)\n }\n}\nselect 语句使一个 Go 程可以等待多个通信操作。
\nselect 会阻塞到某个分支可以继续执行为止，这时就会执行该分支。
当多个分支都准备好时会随机选择一个执行。
func fibonacci(c, quit chan int) {\n x, y := 0, 1\n for {\n select {\n case c <- x:\n x, y = y, x+y\n case <-quit:\n fmt.Println("quit")\n return\n }\n }\n}\n\nfunc main() {\n c := make(chan int)\n quit := make(chan int)\n go func() {\n for i := 0; i < 10; i++ {\n fmt.Println(<-c)\n }\n quit <- 0\n }() // 这是一个立即执行表达式，且在go程中执行\n fibonacci(c, quit)\n}\n当 select 中的其它分支都没有准备好时，default 分支就会执行。（不阻塞）
\nfunc main() {\n tick := time.Tick(100 * time.Millisecond)\n boom := time.After(500 * time.Millisecond)\n for {\n select {\n case <-tick:\n fmt.Println("tick.")\n case <-boom:\n fmt.Println("BOOM!")\n return\n default:\n fmt.Println(" .")\n time.Sleep(50 * time.Millisecond)\n }\n }\n}\nsync.Mutex 互斥锁类型，支持互斥操作
\nimport "sync"\n\ntype SafeCounter struct {\n v map[string]int\n mux sync.Mutex\n}\n\nfunc (c *SafeCounter) Inc(key string) {\n c.mux.Lock()\n c.v[key]++ // 临界区\n c.mux.Unlock()\n}\n\nfunc (c *SafeCounter) Value(key string) int {\n c.mux.Lock()\n defer c.mux.Unlock() // 注意defer的用法\n return c.v[key] // 临界区\n}\n文档：java.util.concurrent java.util.function
\n提供一些可以表示 lambda 函数的类型的泛型接口
根据命名，有以下几种类型：
Function<T,R> ( T -> R 的一元函数)Consumer<T> ( T -> void 的一元函数)Predicate<T> (T -> boolean 的一元函数)Supplier<T> (返回 R 的无参函数)UnaryOperator<T> (T -> T 的一元函数)以Function<T,R>为例，实际的方法函数就是 Function::apply 这个函数
令这个函数为 f ，另一函数为 g
则 compose 方法为 f(g())，andThen 方法为 g(f())
此外
\nRunnable (void -> void)Callable<V> (void -> V)// 很容易定义这种函数式接口\n@FunctionalInterface\npublic interface Runnable {\n void run();\n}\n@FunctionalInterface\npublic interface Function<T, R> {\n R apply(T var1);\n\n default <V> Function<V, R> compose(Function<? super V, ? extends T> before) {\n Objects.requireNonNull(before);\n return (v) -> {\n return this.apply(before.apply(v));\n };\n }\n\n default <V> Function<T, V> andThen(Function<? super R, ? extends V> after) {\n Objects.requireNonNull(after);\n return (t) -> {\n return after.apply(this.apply(t));\n };\n }\n\n static <T> Function<T, T> identity() {\n return (t) -> {\n return t;\n };\n }\n}\njava 本身没有 Functor 类，但存在Optional 类作为容器类型。Stream 包中也存在其它的容器，但存储流而非单个值了。
\n@FunctionalInterface\npublic interface Callable<V> {\n V call() throws Exception;\n}\npublic interface Future<V> {\n boolean cancel(boolean var1);\n boolean isCancelled();\n boolean isDone();\n V get() throws InterruptedException, ExecutionException;\n V get(long var1, TimeUnit var3) throws InterruptedException, ExecutionException, TimeoutException;\n}\nFutureTask task = new FutureTask((Callable<Integer>) () -> 123);\nThread t1 = new Thread(task);\nt1.start();\nSystem.out.println(task.get()); // 123\n记录一些直接下载 apk 的网站
\n| url | \n历史版本 | \n中文搜索 | \nAPK Variants | \n是否 play 源 | \n
|---|---|---|---|---|
| https://apkpure.com/cn/ | \n✅ | \n✅ | \n❌ | \nplay 同步 ，且包含其它源 | \n
| https://www.apkmirror.com/ | \n✅ | \n❌ | \n✅ | \n不全，但包含 f-droid 和 github 源 | \n
| https://apkcombo.com/zh/ | \n✅ | \n✅ | \n✅ | \n包含，且含其它源 | \n
| https://androidappsapk.co/ | \n无法下载 | \n✅ | \n✅ | \nplay 同步 | \n
| https://cn.aptoide.com/ | \n✅ | \n✅ | \n❌ | \n大致同步谷歌源 | \n
| https://1mobilemarket.net/ | \n❌ | \n✅ | \n❌ | \n不全，但包含其它源 | \n
| https://freesoft.ru/ | \n✅ | \n❌ | \n❌ | \n未知，包含其它平台 | \n
| https://www.9apps.com/ | \n✅ | \n✅ | \n❌ | \n差 | \n
根据包名下载（play）：
https://apps.evozi.com/apk-downloader/
https://androidappsapk.co/apkdownloader/
源：
https://play.google.com/
https://f-droid.org/packages/
仅记录可以下载、可以搜索的
\n| url | \n历史版本 | \n备注 | \n
|---|---|---|
| https://www.wandoujia.com/ | \n✅ | \n\n |
| https://sj.qq.com/ | \n❌ | \n\n |
| https://3g.lenovomm.com/ | \n❌ | \n仅移动端 | \n
| https://www.shouji.com.cn/soft.html | \n✅ | \n搜索残废 | \n
乱七八糟的图个乐
\nhttps://apkmodyes.com/
https://apkmods.pk/
https://apkmod.fr/
https://apkmody.io/
http://apkmodi.io/
https://apkmodyz.com/
https://apkmody.link/
https://tezapk.com/
https://apkmod.me/
https://apkpik.com/
https://takemod.com/
https://www.apkmody.club/
下面会省略一些 php8 的特性，虽然 php8 对语言的改进还是比较大的
https://www.php.net/releases/8.1/zh.php
unix 下可以使用包管理器安装，或使用 lamp、lnmp 等一键包安装
手动安装参考文档：https://www.php.net/manual/zh/install.php
windows 也可以使用一键包：https://www.apachefriends.org/zh_cn/index.html（同时支持 linux、macOS）
手动安装在此处下载预编译文件：https://windows.php.net/download
一键包一般自带 http 服务器和数据库，但 php 本身也携带了一个轻量 http 服务器
为了简单下面会使用自带的 http 服务器
php 手册：https://www.php.net/manual/zh/
php 语言参考：https://www.php.net/manual/zh/langref.php
php 函数参考：https://www.php.net/manual/zh/funcref.php
composer 是 php 的包管理器
\nphar 即 Php ARchive，与 java 的 jar 是类似的（不过 php 无需编译），可以将 php 源码和其它资源打包
composer 通过 phar 分发
在 windows 下使用安装程序或在 unix 下使用脚本安装时，参见 composer 下载页面：https://getcomposer.org/download/
手动安装时，要先在 composer 下载页面下载 composer.phar
然后参考文档即可：https://getcomposer.org/doc/00-intro.md
# 查看帮助\nphp -h\n\n# 可以用以下命令做一些简单测试\nphp <file> # 执行php文件\nphp -S 0.0.0.0:8080 <file> # 启动开发服务器\nphp -r <code> # 执行php代码\nPHP 支持 10 种原始数据类型：\n标量类型 bool int float string
复合类型 array object callable iterable
特殊类型 resource NULL
<?php\n$a_bool = true;\n$a_str = "foo";\n$an_int = 12;\n\n$tmp = 23.4;\nunset($tmp);\n\n// 基本输出\necho gettype($a_str); // => string\nprint($a_str); // => foo\n\n// 类型检测\nif (is_int($an_int)) $an_int += 4;\nif (is_string($a_bool)) echo "String: $a_bool";\n\n// 类型转换\n$str = (string) $an_int;\n$foo = "5bar";\nsettype($foo, "integer");\necho gettype($foo)."$foo"; // => integer5\n\n// 打印变量的相关信息\nvar_dump($var);\nvar_export($var);\nprint_r($var);\n\n// 可变变量（通过字符串变量来获取指定变量）\n$a = "hello";\n$$a = "world"; // 相当于 $hello = "world"\n${$a} = "world"; // 为了避免误解，可以这样写\n\n// 常量\ndefine("FOO", "something"); // 全局常量\nconst BAR = "something else"; // 作用域常量\n\n// 数组\n$arr = array(1,"2",3);\n$arr = [1,"2",3];\n$arr = [11=>"1", "12"=>2, "key"=>"value"];\necho $arr[11]; // => 1\necho $arr["11"]; // => 1\necho count($arr); // => 3\nforeach ($arr as $key) {\n echo "$key\\n";\n}\nforeach ($arr as $key => $value) {\n echo "$key = $value\\n";\n}\n<?php\nfunction add($a, $b = 0) {\n return $a + $b;\n}\necho add(1,2);\necho add(...[1,2]);\n\nfunction foo(...$args){\n return $args;\n}\n$bar = "foo";\n[$x, $y, $z] = $bar(1, 2, 3);\n// 相当于\n$bar = function foo(...$args){\n return $args;\n}\n\n// 箭头函数\n$y = 1;\n$fn1 = fn($x) => $x + $y;\n$fn2 = function ($x) use ($y) {\n // 相当于通过 value 使用 $y：\n return $x + $y;\n};\n<?php\ninclude 'vars.php';\nrequire('somefile.php'); // 推荐使用下面的形式\nrequire 'somefile.php';\nrequire_once("config.php");\nrequire_once "config.php";\ninclude_once("config.php");\ninclude_once "config.php";\n流程控制与 c 语言类似，并且支持 goto
函数与 js 的函数声明类似
<?php\n// 类声明\nclass SimpleClass\n{\n function __construct() {/* ... */}\n // 默认 public\n public $foo = "foo";\n protected $bar = "bar";\n private $hide = 23.4;\n static $str = "hello";\n const CONSTANT = 'constant value';\n\n public function displayVar() {\n echo $this->var;\n }\n\n function showConstant() {\n echo self::CONSTANT;\n }\n}\n\n// 继承\nclass SubClass extends SimpleClass {\n function __construct() {\n parent::__construct();\n }\n}\n\n// 抽象类\nabstract class AbstractClass\n{\n // 强制要求子类定义这些方法\n abstract protected function getValue();\n abstract protected function prefixValue($prefix);\n // 普通方法（非抽象方法）\n public function printOut() {\n print $this->getValue();\n }\n}\n\n// 接口\ninterface Template\n{\n public function setVariable($name, $var);\n public function getHtml($template);\n}\nclass WorkingTemplate implements Template {/* ... */}\n?>\n\n// trait\ntrait ezcReflectionReturnInfo {\n function getReturnType() { /*1*/ }\n function getReturnDescription() { /*2*/ }\n}\nclass ezcReflectionMethod extends ReflectionMethod {\n use ezcReflectionReturnInfo;\n /* ... */\n}\n<?php\nnamespace my\\name;\nclass MyClass {}\nfunction myfunction() {}\nconst MYCONST = 1;\n<?php\nnamespace my\\name{\n class MyClass {}\n function myfunction() {}\n const MYCONST = 1;\n}\n<?php\n\\my\\name::myfunction();\nmy\\name::myfunction(); // 第一个反斜线代表全局空间，这里可省略\n\nuse my\\name\\myfunction;\nmyfunction();\n\nuse my\\name\\myfunction as myfn;\nmyfn();\n<?php\nfunction divide($a, $b) {\n if($b===0) throw new Exception("分母不能为0");\n return $a / $b;\n}\n\ntry {\n divide(2,0);\n}\ncatch(Exception $e) {\n echo $e->getMessage();\n}\n?>\nPHP 5 错误报告机制
\n<?php\nerror_function(error_level,error_message,error_file,error_line,error_context);\ntrigger_error(error_message,error_types);\nfunction customErrorHandler($errno, $errstr){}\nset_error_handler("customErrorHandler");\nhttps://www.php.net/manual/zh/language.references.php
\n<?php\n$a = &$b;\n\nfunction foo(&$var) {\n $var++;\n}\n\nfunction &bar() {\n $a = 5;\n return $a;\n}\n\nfoo(bar());\n?>\n类型声明https://www.php.net/manual/zh/language.types.declarations.php
注解https://www.php.net/manual/zh/language.attributes.php
枚举https://www.php.net/manual/zh/language.enumerations.php
纤程https://www.php.net/manual/zh/language.fibers.php
web socket 基于 TCP （通过 http 进行握手），可以在浏览器中建立与服务器（可跨域）的双向通信
协议标识符为 ws，默认端口为 80（wss 为 443）
学习参考：https://github.com/Pines-Cheng/blog/issues/37
\nhttps://developer.mozilla.org/docs/Web/API/WebSocket
https://zh.javascript.info/websocket
https://wangdoc.com/webapi/websocket.html
node.js 的 ws 库实现了 WebSocket 服务器和 WebSocket 客户端（WebSocket API）
文档：https://github.com/websockets/ws/blob/master/doc/ws.md
deno 标准库实现了 WebSocket API
\nSocket.IO 是一个实现浏览器和服务器之间实时、双向和基于事件的通信的库。（也有其它语言实现的客户端和服务端）
Socket.IO 不是 WebSocket 实现。它是对 WebSocket 协议的封装，提供了很多实用功能。
Features: HTTP long-polling fallback, Automatic reconnection, Packet buffering, Acknowledgements, Broadcasting, Multiplexing
首先安装 rust 和 nodejs，使用 vscode 开发时，安装 rust-analyzer 和 tauri 插件
\n这里使用官方脚手架来创建项目
\nnpm create tauri-app\n如果 UI 选择 vanilla 那么前端是没有配置构建和开发环境的
为了方便这里选择 vue，会自动配置 vite 并且将前端项目的开发服务器与 tauri 项目的开发环境结合起来。（否则需要手动配置）
✔ Project name · tauri-app\n✔ Choose your package manager · npm\n✔ Choose your UI template · vue\n\nDone, Now run:\n cd tauri-app\n npm install\n npm run tauri dev\n\n\n如果不使用脚手架，顺序是先用 npm 创建前端项目（如： vite，create-react-app）
\n
安装 tauri 命令行工具npm install --save-dev @tauri-apps/cli
然后通过命令行工具来初始化npm tauri init
具体操作，参见文档
下面还是基于脚手架，脚手架配置的 script 字段如下：
\n{\n "type": "module",\n "scripts": {\n "dev": "vite",\n "build": "vite build",\n "preview": "vite preview",\n "tauri": "tauri"\n }\n}\nvite 相关的命令仅用于开发前端，整个 tauri 项目的开发通过 tauri 命令。
\nUSAGE:\n npm run tauri [OPTIONS] <SUBCOMMAND>\n\nOPTIONS:\n -h, --help Print help information\n -v, --verbose Enables verbose logging\n -V, --version Print version information\n\nSUBCOMMANDS:\n build Tauri build\n dev Tauri dev\n help Print this message or the help of the given subcommand(s)\n icon Generates various icons for all major platforms\n info Shows information about Tauri dependencies and project configuration\n init Initializes a Tauri project\n plugin Manage Tauri plugins\n signer Tauri updater signer\n+---package.json\n+---vite.config.js -|\n+---index.html |\n+---public/ ╲\n+---dist/ ╱\n+---src/ |\n| +---App.vue -|\n|---src-tauri/\n +---cargo.toml Cargo\n +---tauri.conf.json 项目总体配置 https://tauri.app/zh/v1/api/config/\n +---build.rs 构建配置\n +---icons/ 图标资源\n +---src/\n +---main.rs 项目初始化配置（读取`tauri.conf.json`）\nhttps://tauri.app/zh/v1/api/js/
可以看到有以下模块
app\ncli\nclipboard\ndialog\nevent\nfs\nglobalShortcut\nhttp\nmocks\nnotification\nos\npath\nprocess\nshell\ntauri\nupdater\nwindow\n像这样导入
\nimport tauri from "@tauri-apps/api";\nimport { invoke } from "@tauri-apps/api/tauri";\n某些 tauri 模块也可以通过全局对象拿到（需要 tauri.conf.json 配置文件中 build.withGlobalTauri 设为 true）
全局对象应该仅在 vanilla 模板下使用，vite 模板是默认设置为 false 的
const tauri = window.__TAURI__.tauri;\nhttps://docs.rs/tauri/latest/tauri/index.html
\n主要是通过此文件 src-tauri/src/main.rs
通过 tauri::Builder 配置整个项目（默认配置文件tauri.conf.json也是由此引入）
https://docs.rs/tauri/latest/tauri/struct.Builder.html
https://tauri.app/v1/guides/features/command/
\n被调用的 rust 函数定义于 src-tauri/src/main.rs，并且需要在主函数中注册
#[tauri::command] // 在这里声明函数\nfn my_custom_command(invoke_message: String) -> String {\n format!(\n "I was invoked from JS, with this message: {}",\n invoke_message\n )\n}\nfn main() {\n tauri::Builder::default()\n .invoke_handler(tauri::generate_handler![my_custom_command]) // 在这里注册函数\n // 注册多个函数： invoke_handler(tauri::generate_handler![cmd_a, cmd_b])\n .run(tauri::generate_context!())\n .expect("error while running tauri application");\n}\n在前端调用时，通过一个对象来指定参数（注意下划线命名与小驼峰命名的转换），并且函数返回的是一个 Promise
如果我们在 rust 中注册一个 async 函数，由于前端本身就返回 Promise，所以调用方法完全一致。
invoke("my_custom_command", { invokeMessage: "Hello!" }).then((message) => console.log(message));\n错误处理很简单，在 rust 中返回 Result 即可，Result<T,U> 的 T 和 U 对应 Promise 的 then 和 catch
#[tauri::command]\nfn my_custom_command() -> Result<String, String> {\n Err("This failed!".into())\n Ok("This worked!".into())\n}\nhttps://tauri.app/v1/guides/features/events
\nhttps://tauri.app/v1/guides/features/icons
\ntauri 提供了命令来创建图标，无需手动适配
\nnpm run tauri icon\nhttps://tauri.app/v1/guides/features/menu
\nhttps://tauri.app/v1/guides/features/multiwindow
\n","tags":["rust"]},{"id":"nodejs-npm-init","url":"https://yieldray.fun/posts/nodejs-npm-init","title":"npm初始化命令","date_published":"2022-09-15T11:11:11.000Z","date_modified":"2022-09-15T11:11:11.000Z","content_text":"npm init 和 npm create 是等效的！
v8 的文档可能有些问题，下面是 v7 的描述
\nnpm init [--yes|-y|--scope]\nnpm init <@scope> (same as `npm exec <@scope>/create`)\nnpm init [<@scope>/]<name> (same as `npm exec [<@scope>/]create-<name>`)\nnpm init [-w <dir>] [args...]\nnpm exec 类似于 npx，但是 npm exec 会先把选项解释为传给 npm 的选项
应该是学习了 yarn 的 yarn create 命令，主要是方便使用一些脚手架
npm create react-app my-app\n# npx create-react-app my-app\n\nnpm init vue@3\nnpm create vue@3\n# npx create-vue\n文档：https://esbuild.github.io/
中文：https://esbuild.docschina.org/
esbuild 提供了打包 js 的 API，可以通过命令行、js 和 go 调用
esbuild 同时支持 esm 和 cjs
esbuild 内置支持 typescript 和代码压缩
esbuild 内置功能都是 go 写的，因此速度快
在 esbuild 中，提供的三种 API 几乎是一致的（这里忽略 go）
\nesbuild app.jsx --bundle --outfile=out.js\nrequire("esbuild")\n .build({\n entryPoints: ["app.jsx"],\n bundle: true,\n outfile: "out.js",\n })\n .catch(() => process.exit(1));\n命令行 API 是相似的，下面就忽略了
\nconst { build, buildSync } = require("esbuild");\nbuildSync({\n entryPoints: ["./src/index.jsx"],\n target: ["chrome58", "firefox57", "safari11", "edge16"],\n external: [], // 需要排除打包的依赖列表\n format: "esm", // 支持 esm commonjs iife\n outdir: "dist",\n bundle: true,\n splitting: true, // 是否开启自动拆包\n minify: true,\n sourcemap: true,\n metafile: true, // 是否生成打包的元信息文件\n watch: false,\n write: true, // 是否将产物写入磁盘\n loader: {\n ".png": "base64",\n ".jpg": "file",\n },\n});\nbuildSync({\n entryPoints: ["app.js"],\n bundle: true,\n platform: "node",\n target: ["node10.4"],\n external: ["fsevents"],\n outfile: "out.js",\n});\n文档：https://cn.rollupjs.org/introduction/
\nnpm install --global rollup\n打包成各种格式：
\nrollup main.js --file bundle.js --format iife\nrollup main.js --file bundle.js --format cjs\nrollup main.js --file bundle.js --format umd --name "myBundle"\n\nrollup m1.js m2.js --dir dist\n{\n "scripts": {\n "build": "rollup -c"\n }\n}\n--config 默认使用 rollup.config.js 配置文件
import pkg from "./package.json" assert { type: "json" };\nimport resolve from "@rollup/plugin-node-resolve"; // 此插件提供查找外部模块的功能（即 node_modules 中的模块）\nimport commonjs from "@rollup/plugin-commonjs"; // 此插件提供转换 commonjs 为 es6 模块的功能\n\nexport default {\n input: "./src/main.js",\n output: [\n {\n file: "./dist/main.esm.js",\n format: "es",\n },\n {\n file: "./dist/main.umd.js",\n format: "umd",\n name: "main",\n },\n ],\n plugins: [resolve(), commonjs()],\n};\n使用 typescript 编写配置文件
\nrollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript\n声明配置文件环境变量
\nrollup -c --environment INCLUDE_DEPS,BUILD:production\n配置文件将接收到 process.env.INCLUDE_DEPS === 'true' 和 process.env.BUILD === 'production'
Rollup 插件中，我们声明一系列钩子，在模块构建的各种步骤中调用，支持异步。
\nimport { CustomPluginOptions, LoadResult, Plugin, PluginContext, ResolveIdResult } from "rollup";\n\nexport default function myExamplePlugin(): Plugin {\n return {\n name: "my-example-plugin", // 此名称将出现在警告和错误中\n // rollup 还支持 resolveDynamicImport 钩子来解析动态导入（即 await import()）\n resolveId(\n // https://cn.rollupjs.org/plugin-development/#resolveid\n this: PluginContext,\n // source 就是 import xxx from 后面的字符串（即被导入的模块路径）\n // 这个钩子用于将 source 解析为 ID\n source: string,\n // importer 就是使用 import xxx from xxx 语句的这个模块被 resolveId 得到的 ID\n // 在解析入口点时，importer 通常为 undefined\n importer: string | undefined,\n options: {\n attributes: Record<string, string>;\n custom?: CustomPluginOptions;\n isEntry: boolean;\n }\n ): ResolveIdResult {\n if (source === "virtual-module") {\n // 这表示 rollup 不应询问其他插件或\n // 从文件系统检查以找到此 ID\n return source;\n }\n return null; // 返回 null，则会转而使用其他 resolveId 函数，最终使用默认的解析行为\n },\n load(\n // https://cn.rollupjs.org/plugin-development/#load\n this: PluginContext,\n // id 就是 resolveId 得到的 ID（未 resolveId 则保持 source 原样）\n id: string\n ): LoadResult {\n if (id === "virtual-module") {\n // "virtual-module" 的源代码\n return 'export default "This is virtual!"';\n }\n return null; // 其他ID应按通常方式处理\n },\n };\n}\nimport { defineConfig } from "rollup";\nimport myExample from "./rollup-plugin-my-example";\n\nexport default defineConfig({\n input: "virtual-module", // 由我们的插件解析\n plugins: [myExample()],\n output: [\n {\n file: "bundle.js",\n format: "es",\n },\n ],\n});\n运行 npx rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript
则会生成 bundle.js
\nvar virtualModule = "This is virtual!";\n\nexport { virtualModule as default };\n实例（摘自文档）
\nfunction svgResolverPlugin() {\n return {\n name: "svg-resolver",\n resolveId(source, importer) {\n if (source.endsWith(".svg")) {\n return path.resolve(path.dirname(importer), source);\n }\n },\n load(id) {\n if (id.endsWith(".svg")) {\n const referenceId = this.emitFile({\n type: "asset",\n name: path.basename(id),\n source: fs.readFileSync(id),\n needsCodeReference: true,\n });\n return `export default import.meta.ROLLUP_FILE_URL_${referenceId};`;\n }\n },\n };\n}\nwebpack 的核心是一个 js 打包器，也可以打包其它前端资源
\n文档：https://webpack.js.org/concepts/
中文：https://webpack.docschina.org/concepts/
参考：http://webpack.wuhaolin.cn/
npm install webpack webpack-cli --save-dev\n# or\nnpm i -D webpack webpack-cli\npackage.json 一般如下配置
{\n "private": true,\n "scripts": {\n "build": "webpack",\n "watch": "webpack --watch"\n }\n}\n一般有如下目录结构
\n|-- src/\n|-- dist/\n|-- package.json\n|-- webpack.config.js\nentry 指定模块的入口（可以是一个文件，也可以是多个）
output 指定输出
const path = require("path");\nmodule.exports = {\n // context: path.resolve(__dirname, "app"),\n entry: "./src/index.js",\n entry: {\n index: "./src/index.js",\n print: "./src/print.js",\n },\n output: {\n // filename: "bundle.js",\n filename: "[name].bundle.js",\n path: path.resolve(__dirname, "dist"), // 指定输出文件目录\n // clear: true,\n },\n};\nchunk 根据 entry 和动态导入 import() 得到，一个 chunk 对应一个生成的文件
module 配置如何处理模块
loader 则是模块转换器
module.exports = {\n /* ... ... */\n module: {\n rules: [\n {\n test: /\\.js$/,\n use: ["babel-loader?cacheDirectory"],\n include: path.resolve(__dirname, "src"),\n },\n {\n test: /\\.css$/i,\n use: ["style-loader", "css-loader"],\n },\n {\n test: /\\.scss$/,\n use: ["style-loader", "css-loader", "sass-loader"],\n exclude: path.resolve(__dirname, "node_modules"),\n },\n {\n test: /\\.(png|svg|jpg|jpeg|gif)$/i,\n type: "asset/resource",\n },\n ],\n },\n};\nplugin 可插入 webpack 的各种生命周期，因此可以实现各种功能
每个 plugin 的配置则与具体插件相关
插件需要安装，例如 npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");\nconst path = require("path");\n\nmodule.exports = {\n entry: "./src/index.js",\n output: {\n path: path.resolve(__dirname, "./dist"),\n filename: "[name].[hash].js",\n },\n plugins: [\n // 这个插件会在指定的输出目录下生成 index.html，其中会自动引入构建产物\n new HtmlWebpackPlugin({\n title: "Webpack Demo",\n }),\n ],\n};\nmode 设置为 "development" 则调整为开发模式
\nconst path = require("path");\nconst HtmlWebpackPlugin = require("html-webpack-plugin");\n\nmodule.exports = {\n mode: "development",\n devtool: "inline-source-map",\n entry: {\n index: "./src/index.js",\n print: "./src/print.js",\n },\n plugins: [\n new HtmlWebpackPlugin({\n title: "Development",\n }),\n ],\n output: {\n filename: "[name].bundle.js",\n path: path.resolve(__dirname, "dist"),\n clean: true,\n },\n};\nhttps://webpack.docschina.org/concepts/under-the-hood/
\n","tags":["js","lib"]},{"id":"js-react","url":"https://yieldray.fun/posts/js-react","title":"React笔记","date_published":"2022-09-11T13:00:00.000Z","date_modified":"2022-09-11T13:00:00.000Z","content_text":"文档：https://zh-hans.react.dev/reference/
\n旧文档：https://zh-hans.legacy.reactjs.org/docs/getting-started.html
\nTypescript：https://react-typescript-cheatsheet.netlify.app/
\n本篇基于 React18，不会出现类 Class Component
\nimport React, { forwardRef, useImperativeHandle } from "react";\nimport ReactDOM from "react-dom/client";\n\ninterface Props {\n children?: React.ReactNode;\n style?: React.CSSProperties;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nfunction Comp(props?: Props): React.ReactNode {\n // 返回 JSX 类型为 React.JSX.Element\n return (\n <>\n <div style={props?.style}>{props?.children}</div>\n <input type="text" onChange={props?.onChange} />\n </>\n );\n}\n// React.ComponentProps<typeof Comp> === Props | undefined\n\nconst FC: React.FunctionComponent<Props> = (props) => (\n <Comp {...props} onChange={(e: React.FormEvent<HTMLInputElement>) => console.log(e)}></Comp>\n);\n\ninterface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {\n specialProp?: string;\n}\nfunction Button({ specialProp, ...props }: ButtonProps) {\n return <button {...props} />;\n}\n\nconst RefDOM = forwardRef<HTMLDivElement, Props>((props, ref) => <div ref={ref}></div>);\n// React.ElementRef<typeof RefDOM> === HTMLDivElement\n\nconst RefImperative = forwardRef<{ justExample: string }>((_, ref) => {\n useImperativeHandle(ref, () => ({ justExample: "ref" }));\n return undefined;\n});\n// React.ElementRef<typeof RefImperative> === { justExample: string }\n\nfunction PassThrough(props: { as: React.ElementType<any> }) {\n const { as: Component } = props;\n return <Component />;\n}\n\nReactDOM.createRoot(document.body).render(\n <React.StrictMode>\n <Comp />\n <FC />\n <RefDOM />\n <Button />\n <RefImperative />\n <PassThrough as="button" />\n </React.StrictMode>,\n);\n在 React 中所有事件都会冒泡（除了 onScroll，它仅适用于你附加到的 JSX 标签）
\n显式调用 e.stopPropagation() 停止冒泡
//prettier-ignore\n<div onClickCapture={() => { /* 这会首先执行 */ }}>\n <button onClick={e => e.stopPropagation()} />\n <button onClick={e => e.stopPropagation()} />\n</div>\n每个事件分三个阶段传播：
\nReact 事件并非原生事件，而是合成事件。
事件监听器不是附加到 JSX 声明的那个元素上，而是委托给渲染根元素（旧版本则是委托给 document）。
因此我们的事件处理函数是由 React 调用，传入由 React 创建的合成事件。
在混合使用原生事件和 React 事件时，需要注意。
\nconst [count, setCount] = useState(0);\n// 我们只是提供了初始值。useState 知道上一次渲染的 state，返回每次 state 的快照\n\nconsole.log(count); // => 0\n// count 是由 useState 返回的值，并不是由我们显式赋的值\n\nsetCount(count + 1);\n// 调用 set 函数，schedule 下一次渲染\n// set 函数真正接收的是 根据上一个状态得到下一个状态的函数\n\nconsole.log(count); // => 0\n// JavaScript 并没有获取一个变量的引用的机制，而 count 并没有被赋值，当然还是 0\n// 此外注意到我们使用 const 声明，阻止引用被改变\nuseState 是通过数组实现的，每个 state 按顺序关联到数组中的一项，因此其依托于一个稳定的调用顺序。
这就是为什么只能在组件顶层调用 useState，因为组件函数由 React 调用，其顺序是预期的。
React 文档给出了一个简化版实现。
\nstate 被 fiber 树节点（暂且可以简单地看作是 React.ReactElement）持有。这意味着只有 fiber 被销毁，state 才会被销毁。
在 React 中，fiber 树中（而非 JSX 中） 相同位置 的 相同组件 被认为是同一 fiber，仅发生修改，而非重建。
\n\n相同组件：对于原生标签，则根据标签名；对于函数组件，则比较是否为同一函数
\n
function App() {\n const [bool, setBool] = useState(false);\n\n return (\n <>\n <input type="checkbox" checked={bool} onChange={(e) => setBool(e.target.checked)} />\n {/* 相同位置，相同组件 */}\n {isGood ? <Comp isGood={true} /> : <Comp isGood={false} />}\n {/* 注意空值：如 undefined、null 也会创建 fiber */}\n </>\n );\n}\n设置 key 属性，可以使 diff 算法根据给定的 key 来判断是否需要（在父 fiber 内部）重建。
\nref 也被 fiber 树持有，但不会触发重渲染。
换言之，可以看作是：
function useRef(initialValue) {\n const [ref, unused] = useState({ current: initialValue });\n return ref;\n}\neffect 在渲染结束后运行，用于与外部系统同步（副作用），返回函数用于清理副作用（另一处可以运行副作用代码的地方是事件处理函数）。
依赖数组决定（通过 Object.is() 比较）重渲染后是否需要重新运行（不传表示每次都要运行）
\n\nReact18 提供了
\nuseSyncExternalStore，方便与外部 store 同步，并对 Server Component 友好
useContext<T>(context: Context<T>): Timport { createContext, useContext, useState } from "react";\n\nconst ThemeContext = createContext<"light" | "dark">("light"); // 默认值\n\nexport default function App() {\n const [theme, setTheme] = useState<"light" | "dark">("light");\n return (\n <ThemeContext.Provider value={theme}>\n <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>toggle theme</button>\n <Consumer />\n </ThemeContext.Provider>\n );\n}\n\nfunction Consumer() {\n const themeContext = useContext(ThemeContext);\n // useContext 只在调用它的组件树上方寻找最近的 Provider\n // 很明显是不可能能够考虑组件内部的 Provider 的\n return <div>{themeContext}</div>;\n}\n使用 useContext 需要往往需要考虑性能，比如使用 useCallback、useMemo 和 momo。
\nstartTransition(scope: TransitionFunction): void\n\n什么是 transition？
\n
这里的 transition 当然不是指 css transition，而是由于 setState 函数调用导致的重渲染而发生的 transition
最需要该 API 的地方是完整的渲染很耗时的情况，因为同步渲染会阻塞 UI 线程，使得用户无法与页面交互
React18 支持为渲染标记优先级。startTransition 传入一个无参的 scope 函数并立即执行它，
但在该函数内部的 setState 函数触发的状态变更被标记为非阻塞（也就是不立即发生实际渲染，注意 React18 是以 concurrent mode 渲染）。
这意味着如果有其它状态变更（优先级更高）发生，那么 React 优先处理该变更，然后才是 scope 内部变更。
\n\n非阻塞渲染也即后台渲染。由事件（例如输入）引起的任何更新都会中断后台渲染，并被优先处理。
\n
useTransition(): [boolean, TransitionStartFunction]useTransition 是 startTransition 的强化，它返回 [isPending, startTransition]
其中 isPending 告诉我们 transition 是否还在处理
useDeferredValue<T>(value: T): TuseDeferredValue 函数接受一个 state 变量，返回该 state 的延迟版本。
当 setState 触发组件更新时，如果新旧 state 不同（通过 Object.is() 比较），
那么 React 将先尝试使用延迟值（也就是与上一次相同的值，旧 state）进行渲染，
然后在后台使用新值再渲染一次（第一次渲染除外，因为第一次不存在旧值）。
其中 Effect 将在后台渲染完成，提交到屏幕之后运行。
\n注意由于使用 Object.is()，对象之间比较引用，所以需要防止向 useDeferredValue 传入
组件函数内部创建的对象，因为函数每次调用都产生不同的对象，导致不必要的重渲染
<Suspense>import React from "react";\nconst MarkdownPreview = React.lazy(() => import("./MarkdownPreview.js"));\n\nclass ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true };\n }\n\n componentDidCatch(error, info) {\n console.error(error, info.componentStack);\n }\n\n render() {\n if (this.state.hasError) {\n return <div>Error: Something is wrong!</div>;\n }\n return this.props.children;\n }\n}\n\nfunction App() {\n return (\n <ErrorBoundary>\n <React.Suspense fallback={<div>Loading...</div>}>\n <h2>Preview</h2>\n <MarkdownPreview />\n </React.Suspense>\n </ErrorBoundary>\n );\n}\nflushSync<R>(fn: () => R): R flushSync<A, R>(fn: (a: A) => R, a: A): RReact 并非使用微任务更新 DOM，因此 React 提供了 flushSync 函数。
该函数立即调用 callback，并使内部的 setState 函数立即更新 DOM
\n\nvue.js 使用微任务，因此其提供的是 nextTick(callback?): Promise
\n
<script type="importmap">\n {\n "imports": {\n "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"\n }\n }\n</script>\n\n<div id="app">{{ message }}</div>\n\n<script type="module">\n import { createApp, ref } from "vue";\n\n const app = createApp({\n setup() {\n const message = ref("Hello Vue!");\n return {\n message,\n };\n },\n }).mount("#app");\n</script>\nvue2 版本如下，vue2 默认导出 Vue 对象。
本文仅使用 vue3，而不是 vue2。
const app = new Vue({\n el: "#app",\n data: {\n message: "Hello Vue!",\n },\n});\nvue 使用 Mustache 语法
\n<span>Message: {{ msg }}</span>\n<span v-html="rawHtml"></span>\n\n<!-- 绑定属性 -->\n<div v-bind:id="dynamicId"></div>\n<div :id="dynamicId"></div>\n<div v-bind="objectOfAttrs"></div>\n\n<!-- vue 建议事件以 kebab-case 命名，但支持自动转换 -->\n<a v-on:event.modifier="handler"></a>\n<a @event.modifier="handler"></a>\n\n<!-- 动态属性 -->\n<a v-bind:[attributeName]="url"></a>\n<a :[attributeName]="url"></a>\n\n<!-- v-model 组件展开 -->\n<input v-model="searchText" />\n<input :value="searchText" @input="searchText = $event.target.value" />\n\n<!-- 对于组件，v-model 默认绑定 model-value 属性 -->\n<CustomInput v-model="searchText" />\n<CustomInput :model-value="searchText" @update:model-value="(newValue) => (searchText = newValue)" />\n\n<!-- 循环数组或对象 -->\n<div v-for="(item, index) in items"></div>\n<div v-for="(value, key) in object"></div>\n<div v-for="(value, name, index) in object"></div>\n\n<!-- 默认插槽名 default 可以省略 -->\n<template v-slot:slot-name="slotProps">fallback</template>\n<template #slot-name="slotProps">具名插槽简写</template>\n<template #default="slotProps">默认插槽简写</template>\n<template #[dynamicSlotName]>动态插槽名</template>\nclass/style 绑定：https://cn.vuejs.org/guide/essentials/class-and-style.html
\n\n\n\n
模板表达式中能够访问变量实际是当前组件暴露的属性或方法
即 xxx 相当于 this.xxx，因此无法访问全局对象上的属性
但 vue 提供了一个有限的全局对象列表，提供给模板使用（比如 Math 和 Date）
使用 app.config.globalProperties 可注册能够被应用内所有组件实例访问到的全局属性的对象
interface AppConfig {\n globalProperties: Record<string, any>;\n}\n\nObject.assign(app.config.globalProperties, {\n alert: window.alert,\n // 有限的全局对象列表不含 alert 方法\n});\n\n// 应用内其它任意组件\nexport default {\n mounted() {\n console.assert(this.alert, window.alert);\n },\n};\n<script lang="ts">\n import { ref, reactive，nextTick } from "vue";\n\n const component: Component = {\n setup() {\n const count = ref(0);\n async function increment() {\n count.value++;\n await nextTick()\n // 现在 DOM 已经更新了\n }\n const state = reactive({ count: 0 });\n return {\n // setup 函数的返回值会暴露给模板\n count,\n increment,\n state,\n };\n },\n };\n\n export default component;\n</script>\n<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。
<script setup>\n import { ref, reactive，nextTick } from "vue";\n const count = ref(0);\n async function increment() {\n count.value++;\n await nextTick()\n // 现在 DOM 已经更新了\n }\n const state = reactive({ count: 0 });\n</script>\n在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
即，顶级 ref 无需 .value（语法糖，编译器实现），非顶级 ref 需要 .value
\n\n对于
\nrefreactiveAPI，vue 实现了深层响应式，即 vue 递归监听对象的所有属性
vue 还提供了进阶 API：https://cn.vuejs.org/api/reactivity-advanced.html
vue3 基于 Proxy 监听对象属性的变化。对于解构赋值，则无法被监听
此外，响应式对象是 Proxy 实例而不是源对象。
vue 提供了响应式工具函数：https://cn.vuejs.org/api/reactivity-utilities.html
可用于帮助解决这些问题
// 只读\nfunction computed<T>(getter: () => T, debuggerOptions?: DebuggerOptions): Readonly<Ref<Readonly<T>>>;\n\n// 可读写\nfunction computed<T>(\n options: {\n get: () => T;\n set: (value: T) => void;\n },\n debuggerOptions?: DebuggerOptions,\n): Ref<T>;\n\ntype DebuggerOptions = {\n // 当响应式对象被追踪为依赖时触发（即读取时触发）\n onTrack?: (e: DebuggerEvent) => void;\n // 当响应式对象被更改时触发\n onTrigger?: (e: DebuggerEvent) => void;\n};\n\ntype DebuggerEvent = {\n effect: ReactiveEffect;\n target: object;\n type: TrackOpTypes /* 'get' | 'has' | 'iterate' */ | TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */;\n key: any;\n newValue?: any;\n oldValue?: any;\n oldTarget?: Map<any, any> | Set<any>;\n};\n上面以 computed() 举例，响应式核心 API 还包括readonly() watchEffect() watch()
app.component() 方法用于注册组件。该方法需要提供组件名称以及 Component 对象
\nfunction createApp(rootComponent: Component, rootProps?: object): App;\ninterface App {\n component(name: string): Component | undefined;\n component(name: string, component: Component): this;\n}\n一个 .vue 文件会被编译为 Component 类型的对象
import ComponentA from "./ComponentA.vue";\n\nconst component: Component = {\n components: {\n ComponentA,\n },\n setup() {\n // ...\n },\n};\n\n// 使用 defineComponent 辅助函数可以自动推导类型\nconst component = defineComponent({\n /* ... */\n});\n\nexport default component;\nComponent 对象的 components 属性则用于声明当前组件导入的组件
其类型可视为 Record<string, Component>
vue 建议使用 PascalCase 为组件命名，并支持通过 kebab-case 使用 PascalCase 命名的组件
组件 setup 函数的第一个参数是父组件传入的属性，第二个参数是一个 （非响应式的）context 对象
\nexport default {\n props: {\n title: String,\n },\n setup(props, context) {\n // 属性\n console.log(props.title);\n\n // 透传 Attributes（非响应式的对象，等价于 $attrs）\n console.log(context.attrs);\n\n // 插槽（非响应式的对象，等价于 $slots）\n console.log(context.slots);\n\n // 触发事件（函数，等价于 $emit）\n console.log(context.emit);\n\n // 暴露公共属性（函数）\n console.log(context.expose);\n },\n};\n我们知道，组件就是一个 Component 对象
当 vue 使用该实例时，会为该对象的 this 附加属性和方法
https://cn.vuejs.org/api/component-instance.html
\n\n\nVue 强制使用单向数据流。子组件不允许修改父组件传入的 Props
\n
选项式声明
\nexport default {\n props: ["title"],\n setup(props) {\n console.log(props.title);\n },\n};\nsetup 内部声明
\nconst props = defineProps(["title"]);\nconsole.log(props.title);\nconst props = defineProps({\n foo: { type: String, required: true },\n bar: Number,\n});\nTS 宏声明
\nconst props = defineProps<{\n foo: string;\n bar?: number;\n}>();\n默认值（参见：Prop 校验）
\nconst props = withDefaults(defineProps<Props>(), {\n foo: "hello",\n labels: () => Math.random(),\n});\n模板触发事件
\n<button @click="$emit('eventName', 'detail1', 'detail2')">click me</button>\n<!-- 父组件直接接收 detail，而不是原生 Event -->\n<MyButton @event-name="(detail1, detail2) => console.assert(detail1, 'detail1')" />\n选项式声明
\nexport default {\n emits: ["inFocus", "submit"],\n setup(props, ctx) {\n ctx.emit("submit");\n },\n};\nsetup 内部声明
\nconst emit = defineEmits(["inFocus", "submit"]);\nfunction buttonClick() {\n emit("submit");\n}\nTS 宏声明
\n// 基于类型\nconst emit = defineEmits<{\n (e: "change", id: number): void;\n (e: "update", value: string): void;\n}>();\n\n// v3.3+ 提供, 更简洁的语法\nconst emit = defineEmits<{\n change: [id: number];\n update: [value: string];\n}>();\n插槽允许父组件在子组件中渲染模板
在子组件模板中，Vue 使用与 WebComponents 相同的 <slot> 语法
父组件传入 slot 则使用 v-slot:slot-name 指令
此外，Vue 支持子组件插槽向父组件插槽模板提供数据
<script setup lang="ts">\n const slots = defineSlots<{\n default(props: { msg: string }): any;\n }>();\n</script>\nhttps://cn.vuejs.org/guide/essentials/template-refs.html
\n<script setup>\n import { ref, onMounted } from "vue";\n const input = ref(null);\n onMounted(() => {\n input.value.focus();\n });\n</script>\n\n<template>\n <input ref="input" />\n</template>\nref 属性传入函数时，会在每次组件更新后以及组件卸载时被调用
\n<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }" />\n对于 Vue 组件而不是 DOM 节点，ref 得到的则是组件实例\n此时 setup 组件必须手动使用 defineExpose 显示暴露属性
<script setup>\n import { ref } from "vue";\n\n const a = 1;\n const b = ref(2);\n\n // 像 defineExpose 这样的编译器宏不需要导入\n defineExpose({\n a,\n b,\n });\n</script>\n对于存在根节点的子组件，父组件提供子组件未声明的属性（包括事件）时，这些属性会自动透传到子组件的根节点上
这种行为是递归的，style 和 class 属性还会自动合并
对于不存在根节点（即多个根节点）的子组件，需要正确地设置 $attr 对象
比如在某个节点上设置 v-bind="$attrs"
在 Javascript 中得到的 attrs 不是响应式的
由于 attrs 变化会触发重渲染，可以使用 onUpdated() 监听
<script setup>\n import { useAttrs } from "vue";\n const attrs = useAttrs();\n</script>\nconst component: Component = {\n setup(props, { attrs }) {\n console.log(attrs);\n },\n};\n透传是默认行为。需要手动处理时，则可以提供以下方式禁用
\nconst component: Component = {\n inheritAttrs: false,\n // 或使用 defineOptions()\n setup() {\n defineOptions({\n inheritAttrs: false,\n });\n },\n};\nhttps://cn.vuejs.org/guide/components/attrs.html
https://cn.vuejs.org/api/options-misc.html#inheritattrs
https://cn.vuejs.org/guide/components/provide-inject
https://cn.vuejs.org/api/composition-api-dependency-injection.html
https://cn.vuejs.org/api/application.html#app-provide
function provide<T>(key: InjectionKey<T> | string, value: T): void;\n\n// 没有默认值\nfunction inject<T>(key: InjectionKey<T> | string): T | undefined;\n\n// 带有默认值\nfunction inject<T>(key: InjectionKey<T> | string, defaultValue: T): T;\n\n// 使用工厂函数\nfunction inject<T>(key: InjectionKey<T> | string, defaultValue: () => T, treatDefaultAsFactory: true): T;\n<Suspense>异步组件和普通组件一样，它只是 defineAsyncComponent() 函数包装一个异步函数实现的组件
import { defineAsyncComponent } from "vue";\n// defineAsyncComponent() 函数要求提供一个返回 Promise 的函数，而不是 Promise 本身\nconst AsyncComp: Component = defineAsyncComponent(() => import("./components/MyComponent.vue"));\ndefineAsyncComponent 支持多种选项
\nconst AsyncComp = defineAsyncComponent({\n // 加载函数\n loader: () => import("./Foo.vue"),\n\n // 加载异步组件时使用的组件\n loadingComponent: LoadingComponent,\n // 展示加载组件前的延迟时间，默认为 200ms\n delay: 200,\n\n // 加载失败后展示的组件\n errorComponent: ErrorComponent,\n // 如果提供了一个 timeout 时间限制，并超时了\n // 也会显示这里配置的报错组件，默认值是：Infinity\n timeout: 3000,\n});\n<Suspense> 内置组件可以看作是通过包装 defineAsyncComponent 实现的组件（）
如果一个组件的 setup 函数是 async 函数，则这个组件需要置于 <Suspense> 内部
这也相当于 defineAsyncComponent() 包装了一个 async 函数
export default {\n async setup() {\n const res = await fetch(/* ... */);\n const posts = await res.json();\n return {\n posts,\n };\n },\n};\n<script setup>\n const res = await fetch(/* ... */)\n const posts = await res.json()\n</script>\n在 <Suspense> 组件中的异步组件，其加载/错误处理将由外部的 <Suspense> 处理
其内部加载/错误处理被忽略，除非异步组件指定 suspensible: false 选项
<Suspense @pending @resolve @fallback>\n <!-- 具有深层异步依赖的组件 -->\n <AsyncComp />\n\n <template #fallback> Loading... </template>\n <template #fallback> Loading... </template>\n</Suspense>\nhttps://cn.vuejs.org/guide/reusability/custom-directives.html
https://cn.vuejs.org/api/options-misc.html#directives
自定义指令是一个对象，其中包含一系列钩子函数
\n在 setup 组件中注册
\n<script setup>\n // 在模板中启用 v-focus\n const vFocus = {\n mounted: (el) => el.focus(),\n };\n</script>\n\n<template>\n <input v-focus />\n</template>\n在 setup 函数中注册
\nexport default {\n setup() {},\n directives: {\n // 在模板中启用 v-focus\n focus: {\n mounted: (el) => el.focus(),\n },\n },\n};\n在全局实例上注册
\napp.directive("focus", {\n mounted: (el) => el.focus(),\n});\nhttps://cn.vuejs.org/guide/reusability/plugins.html
https://cn.vuejs.org/api/application.html#app-use
插件应用在全局实例上，用于添加全局功能
\napp.use(myPlugin, ...options);\n\nconst myPlugin = {\n install(app, ...options) {},\n};\nhttps://cn.vuejs.org/guide/built-ins/transition.html
\nhttps://cn.vuejs.org/guide/extras/render-function.html
\nimport { h, ref } from "vue";\n\nexport default {\n setup(props, { slots, expose }) {\n const count = ref(0);\n const increment = () => ++count.value;\n\n expose({\n increment,\n });\n\n return (\n <div>\n <span>{count}</span>\n <button>{slots.default()}</button>\n <div>{slots.footer({ text: props.message })}</div>\n </div>\n );\n },\n};\nLearn:https://learn.svelte.dev/
Docs:https://svelte.dev/docs
REPL:https://svelte.dev/repl
{#if expression}...{:else if expression}...{:else}...{/if}\n{#each expression as name, index (key)}...{:else}...{/each}\n{#await expression}...{:then name}...{:catch name}...{/await}\n{#await expression then name}...{/await}\n{#await expression catch name}...{/await}\n{#key expression}...{/key}\n以文本节点表示
\n{expression}\n以 html 表示
\n{@html expression}\n标记 debugger。仅允许使用变量标识符，不允许使用表达式。
\n{@debug var1, var2, ..., varN}\n仅能在逻辑块中使用。在当前逻辑块作用域中声明变量。
\n{@const assignment}\n绑定事件监听器
\non:eventname|modifiers={handler}\n不提供 handler 时，原样转发当前监听器
\non:eventname\n绑定属性
\nbind:property={variable}\n绑定属性简写 bind:value={value}
\nbind:value\n元素引用（ref）
\nbind:this={dom_node}\n绑定 class
\nclass={expression}\nclass:name={value}\nclass:name\n绑定 style
\nstyle:property={value}\nstyle:property="value"\nstyle:property\nstyle:property|important={value}\n绑定 CSS 变量
\n--style-props="anycssvalue"\n使用 action（相当于 vue 的自定义指令）
\nuse:action\nuse:action={parameters}\naction = (node: HTMLElement, parameters: any) => {\n update?: (parameters: any) => void, // parameters 更新时调用\n destroy?: () => void // 节点销毁时调用\n}\n以下内容省略：
\n\nsvelte 内置了多种 DOM 属性的绑定，此处省略
这些内容在文档的 Element directives 节有详细说明
svelte 的响应式仅在变量被赋值时触发
\n<script>\n let count = 0;\n $: doubled = count * 2;\n\n function increment() {\n count += 1;\n }\n</script>\n\n<button on:click="{increment}">click me</button>\n<p>count is {count}</p>\n<p>doubled is {doubled}</p>\n注意到 svelte 中的属性在子组件中是可变的，在父组件中也是可变的。
这意味着无论是子组件还是父组件都可以修改属性，并没有强制限制单向数据流。
<script>\n export let user = "Ray";\n // ∧ ∧\n // | |\n // 属性 默认值\n</script>\n\n<h1 {...$$props}>Hello, {user}!</h1>\n组件 export const（而不是 export let）用于提供 bind:this
<!-- Child.svelte -->\n<script>\n let data = ["Apple", "Banana"];\n export const empty = () => (data = []);\n</script>\n<!-- Parent.svelte -->\n<Child bind:this="{cart}"></Child>\n<button on:click="{()" ="">cart.empty()}> Empty shopping cart</button>\n<script context="module"> 允许 svelte 模块提供其它导出（默认导出是组件本身）
<script context="module">\n let totalComponents = 0;\n\n // the export keyword allows this function to imported with e.g.\n // `import Example, { alertTotal } from './Example.svelte'`\n export function alertTotal() {\n alert(totalComponents);\n }\n</script>\n\n<script>\n totalComponents += 1;\n console.log(`total number of times this component has been created: ${totalComponents}`);\n</script>\n子组件发出（dispatch）事件
\n<!-- Child.svelte -->\n<script>\n import { createEventDispatcher } from "svelte";\n const dispatch = createEventDispatcher();\n function dispatchMyEvent() {\n dispatch("myEvent", new Date().toString(), { cancelable: true });\n }\n</script>\n<button on:click="{dispatchMyEvent}">fire</button>\n\n<!-- Parent.svelte -->\n<script lang="ts">\n import Child from "./Child.svelte";\n import type { ComponentEvents } from "svelte";\n function handleMyEvent(event: ComponentEvents<Component>["myEvent"]) {\n console.log(event.detail);\n }\n</script>\n<Child on:myEvent="{handleMyEvent}"></Child>\nsvelte 包导出了生命周期注册函数以及 context 相关函数：import { xxx } from 'svelte';
https://svelte.dev/docs/svelte
\n\n\n参见此示例：https://svelte.dev/repl/cbea1bf8aa614fb2a22711a925394ee6
\n
function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;\n\nonMount(() => {\n const interval = setInterval(() => {\n console.log("beep");\n }, 1000);\n\n return () => clearInterval(interval);\n});\n\nfunction beforeUpdate(fn: () => any): void;\nfunction afterUpdate(fn: () => any): void;\nfunction onDestroy(fn: () => any): void;\nfunction tick(): Promise<void>;\n\nbeforeUpdate(async () => {\n console.log("the component is about to update");\n await tick();\n console.log("the component just updated");\n});\nfunction setContext<T>(key: any, context: T): T;\nfunction getContext<T>(key: any): T;\nfunction hasContext(key: any): boolean;\nfunction getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;\nsvelte/store 包导出了 stores API
\nhttps://svelte.dev/docs/svelte-store
\nsvelte 提供了美元符号 $ 语法糖，提供对 store 的自动 subscribe 和 unsubscribe
\n<script>\n import { count } from "./stores.js";\n\n // let count_value;\n // const unsubscribe = count.subscribe(value => {\n // \tcount_value = value;\n // });\n // onDestroy(unsubscribe);\n</script>\n\n<h1>The count is {$count}</h1>\nsvelte 自带的动画方法，由于篇幅有限省略
参见文档：https://svelte.dev/docs/svelte-motion
python 镜像下载：https://repo.huaweicloud.com/python/
教程：https://docs.python.org/zh-cn/3/tutorial/
参考：https://docs.python.org/zh-cn/3/reference/
文档：https://docs.python.org/zh-cn/3/contents.html
标准库：https://docs.python.org/zh-cn/3/library/
内置函数：https://docs.python.org/zh-cn/3/library/functions.html
类型注解在 python 3.5 后引入，仅作注解，不影响解释器。
https://zhuanlan.zhihu.com/p/419955374
分号不是必须的，用于在一行中编写多个语句。
表示字符串字面量和文档注释时，单引号与双引号作用相同。
单行注释使用 # 标记，多行字符串使用连续三个（单/双）引号，不支持嵌套。
布尔值是 True 和 False （首字母大写），空值是 None。
pip 是 python 的包管理器，PyPI 指的是包索引
\nlinux: ~/.pip/pip.conf
windows: %USERPROFILE%\\pip\\pip.ini
[global]\nindex-url = https://pypi.tuna.tsinghua.edu.cn/simple\n[install]\ntrusted-host = https://pypi.tuna.tsinghua.edu.cn\n#!/usr/bin/env python3\n# -*- coding: UTF-8 -*-\nint: int = 1\nfloat: float = 1.2\ncomplex1: complex = 1.2 + 3.4j\ncomplex2: complex = complex(1.2, 3.4)\ndiv1: float = 3/2\ndiv2: int = 3//2\nstr1 = "x\\r\\ny"\nstr2 = 'x\\r\\ny'\nstr3 = r"x\\r\\ny" # 原始字符串\nstr4 = """\\\nx\ny\n""" # 多行字符串，首行的反斜线表示丢弃首行的换行\nstr5 = 3 * "ha" # hahaha\nstr6 = "ha" + 'ha' # haha （连接字符串变量）\nstr7 = "ha" 'ha' # haha （连接字符串字面量）\nstr8 = f"PI = {math.pi:.7f}" # 格式化字符串，控制位语法类 c\nint(x [,base ]) # 将 x 转换为一个整数\nlong(x [,base ]) # 将 x 转换为一个长整数\nfloat(x) # 将 x 转换为一个浮点数\ncomplex(real [,imag ]) # 创建一个复数\nstr(x) # 将对象 x 转换为字符串\nrepr(x) # 将对象 x 转换为表达式字符串\neval(str) # 用来计算在字符串中的有效 Python 表达式，并返回一个对象\ntuple(s) # 将序列 s 转换为一个元组\nlist(s) # 将序列 s 转换为一个列表\nchr(x) # 将一个整数转换为一个字符\nunichr(x) # 将一个整数转换为 Unicode 字符\nord(x) # 将一个字符转换为它的整数值\nhex(x) # 将一个整数转换为一个十六进制字符串\noct(x) # 将一个整数转换为一个八进制字符串\ndef fib(n: int) -> None: # 注意，类型定义仅作语法演示\n """文档注释内容"""\n a, b = 0, 1\n while a < n:\n print(a, end=' ')\n a, b = b, a+b\n pass\n支持默认值和关键字参数
\ndef f(pos1, pos2, /, pos_or_kwd, *, kwd1, kwd2):\n# ----------- ---------- ----------\n# | | |\n# | 位置或关键字参数 |\n# | - 仅允许关键词参数\n# -- 仅允许位置参数\n支持 lambda
\nf = lambda a, b: a+b\nf(1, 2) # 3\n\ndef f(a, b):\n return a + b\n\nff = f\n支持解包
\ndef concat(*args, sep="/"):\n return sep.join(args)\n\nconcat("aaa", "bbb", sep=".") # aaabbb\n\ndef params(pos1, pos2):\n print(pos1 + pos2)\n\nparams(**{"pos1": "aaa", "pos2": "bbb"}) # aaabbb\nparams(*("aaa","bbb")) # aaabbb\nparams(*["aaa","bbb"]) # aaabbb\nparams(*{"aaa","bbb"}) # aaabbb\n\n\ndef f(param, *args, **map):\n print(param)\n print(args)\n print(map)\n\nf(123, "aaa", "bbb", k1="v1", k2="v2")\n# --- -------- --------------\n# | | |\n# param=123 | |\n# args=('aaa','bbb') |\n# map={'k1':'v1','k2':'v2'}\n###################\nimport sys\nprint(sys.argv)\n###################\na = input("请输入")\nprint(a)\n###################\n这里提到字符串是因为字符串也是序列的一种
和列表一样可以使用切片
list = [1, "2", 3.0]\n\nlist.append(x)\nlist.extend(iterable)\nlist.insert(i, x)\nlist.remove(x)\nlist.pop([i])\nlist.clear()\nlist.index(x[, start[, end]])\nlist.count(x)\nlist.sort(*, key=None, reverse=False)\nlist.reverse()\nlist.copy()\ndel list[0]\ndel list[2:4]\ndel list[:]\ntuple = ("hello", 123)\n# or\ntuple = "hello", 123\n\nx, y = tuple\nset = {'a', 'b', 'c'}\n# or\nset = set("abc")\nset = set(list)\ndict = {'k': 'v', 1: 2}\n# or\ndict = dict(k='v', x='y')\n# or\ndict = dict([('k','v'), (1, 2)])\n\ndict['key'] = 'value'\ndel dict['key']\n'k' in dict # True\n'k' not in dict # False\n迭代器可用于 for in 循环
\nrange(n) # [0, n)\nrange(a, b) # [a, b)\nreversed(range(...))\nfor k, v in dict.items()\nfor i, v in enumerate(list)\nfor v1, v2 in zip(list1, list2)\niter1 = map(lambda x: x**2, range(10))\nlist1 = list(iter1)\n迭代器原理
\nfrom typing import Iterable, Iterator\n\n\nclass IterClass(Iterator): # 迭代器对象\n def __iter__(self):\n return self\n\n def __next__(self):\n return 123\n raise StopIteration # 抛出此异常表示终止迭代器\n\n\nclass CanIterClass(Iterable): # 可迭代对象\n def __iter__(self):\n return IterClass()\n\n\nobj = CanIterClass()\nit = iter(obj)\nni = next(it)\ndef gen():\n yield 123\n\n\nit = gen()\nni = next(it)\n\n# 支持推导\nit = (123 for i in range(10))\n快速生成字面量
\nlist = [x**2 for x in range(10)]\nset = {x for x in 'abracadabra' if x not in 'abc'}\ndict = {x: x**2 for x in (2, 4, 6)}\nhttps://docs.python.org/zh-cn/3/tutorial/modules.html
\nimport math\nfrom math import sin, cos\nfrom math import *\nimport math as mathematics\nfrom math import sin as my_sin, cos as my_cos\n__init__.py 表示目录为包
该脚本可指定导出的模块列表，不指定则导出全部
__all__ = ["funcXXX", "classXXX", "varXXX"]\n目录结构
\npackage/\n __init__.py\n model/\n __init__.py\n m1.py\n m2.py\n view/\n __init__.py\n v1.py\n v2.py\n controller/\n __init__.py\n c1.py\n c2.py\n项目管理可用 virtualenv
https://docs.python.org/zh-cn/3/tutorial/errors.html
\ndef func():\n raise ConnectionError\n\ntry:\n func()\nexcept ConnectionError as exc:\n raise RuntimeError('Failed to open database') from exc\n\n\n\ndef divide(x, y):\n try:\n result = x / y\n except (ZeroDivisionError, Exception):\n print("division by zero!")\n else:\n print("result is", result)\n finally:\n print("executing finally clause")\n\n\nwith open("myfile.txt") as f:\n for line in f:\n print(line, end="")\nclass MyClass:\n """文档注释"""\n i = 123\n\n def __init__(self, param):\n self.param = param\n\n def f(self): # 第一个参数必须为 self\n print('hello world')\n\n\nc = MyClass("some_str")\nprint(MyClass.i) # 123\nprint(c.i) # 123\nprint(c.param) # some_str\nc.f() # 调用 MyClass.f(c)\nclass DerivedClassName(BaseClassName):\n pass\n\n\nclass DerivedClassName(Base1, Base2, Base3):\n pass\nimport asyncio\n\n\nasync def test():\n return 'test'\n\n\nasync def async_function(*params):\n s = await test()\n return "{} {}".format(s, ','.join(list(map(str, params))))\n\n\ntry:\n async_function(123, 456).send(None)\nexcept StopIteration as e:\n print(e.value) # async_function 的返回值\n\n\nasyncio.run(async_function(123, 456)) # 得不到返回值\n简单的语法入门，代码摘自文档。
kotlin 语法较多，无法全部顾及，详细参见文档。
kotlin 能编译到 jvm 和 js，不一致的方面将不涉及。
基本数据类型：Byte Short Int Long Float Double
在允许范围内，变量自动推断为 Int 和 Double。否则，添加 l/L/f/F 后缀
因为对象引用的原因，没有隐式转换，需使用 toByte() toShort() toInt() toChar() 等
较之 java，kotlin 支持无符号整数：UByte UShort UInt ULong。作为字面量时，加上后缀 u/U 即可
val constant: Int = 123\nvar variable = "number$constant"\nvar nullable: Int? = constant // 不加问号不装箱，加问号则装箱为（可null）对象。\n数组通过模板类表达，对于基础类型数组则可以选用不装箱的优化版本 ByteArray, ShortArray, IntArray
\nclass Array<T> private constructor() {\n val size: Int\n operator fun get(index: Int): T\n operator fun set(index: Int, value: T): Unit\n\n operator fun iterator(): Iterator<T>\n // ...\n}\n对于不会出现的值，返回 Nothing 类型（类似于 typescript 的 never 类型）
\n参见：http://kotlin.liying-cn.net/docs/reference_zh/typecasts.html
\nfor (item in collection)）而不是冒号for (i in 1..3)（闭区间，与 rust 不同）for (i in 1 until 10)（左闭右开），具体参考此处when (x) {\n 1 -> print("x == 1")\n 2 -> print("x == 2")\n else -> {\n print("x is neither 1 nor 2")\n }\n}\n实例化对象无需 new 操作符，kotlin 也没有 new 操作符
\nclass InitOrderDemo(name: String) {\n val firstProperty = "First property: $name".also(::println)\n\n init {\n println("First initializer block that prints $name")\n }\n\n val secondProperty = "Second property: ${name.length}".also(::println)\n\n init {\n println("Second initializer block that prints ${name.length}")\n }\n}\n次构造器，此处主构造器中的 val/var 一并声明对象的属性，支持默认值
\nclass Person(val name: String) {\n val children: MutableList<Person> = mutableListOf()\n constructor(name: String, parent: Person) : this(name) {\n parent.children.add(this)\n }\n}\n在继承中，对象、方法和属性默认不可覆盖，否则需要显示声明 open
接口中允许定义属性
// abstract\nabstract class Polygon {\n abstract fun draw()\n}\n\nclass Rectangle : Polygon() {\n override fun draw() {\n // 描绘长方形\n }\n}\n// super\nopen class Rectangle {\n open fun draw() { /* ... */ }\n}\n\ninterface Polygon {\n fun draw() { /* ... */ } // 接口的成员默认是 'open' 的\n}\n\nclass Square() : Rectangle(), Polygon {\n // 编译器要求 draw() 方法必须覆盖:\n override fun draw() {\n super<Rectangle>.draw() // 调用 Rectangle.draw()\n super<Polygon>.draw() // 调用 Polygon.draw()\n }\n}\n可见度修饰符与 java 一致，但一些方面与之有差异。（具体见文档）
支持 getter/setter
var stringRepresentation: String\n get() = this.toString()\n set(value) {\n setDataFromString(value) // 解析字符串内容, 并将解析得到的值赋给对应的其他属性\n }\n支持扩展函数，该函数不是对象的成员，而是静态的
\nfun MutableList<Int>.swap(index1: Int, index2: Int) {\n val tmp = this[index1] // 'this' 指代 list 实例\n this[index1] = this[index2]\n this[index2] = tmp\n}\n\nval list = mutableListOf(1, 2, 3)\nlist.swap(0, 2) // 'swap()' 函数内的 'this' 将指向 'list' 的值\n泛型与 java 一样通过类型擦除实现
较之 java，没有使用 extends super 修饰符，而是借鉴 C#，使用 in out 修饰
fun copy(from: Array<out Any>, to: Array<Any>) { ... }\nfun fill(dest: Array<in String>, value: String) { ... }\nfun <T> singletonList(item: T): List<T> { ... }\nfun <T> T.basicToString(): String { ... }\nfun <T : Comparable<T>> sort(list: List<T>) { ... }\nkotlin 函数的类型声明同 typescript，支持默认值。
支持局部函数（即函数嵌套函数），因此支持闭包。
fun double(x: Int) = x * 2\n// 支持不定参数\nfun <T> asList(vararg ts: T): List<T> {\n val result = ArrayList<T>()\n for (t in ts) // ts 变量的类型为 Array<out T>\n result.add(t)\n return result\n}\n在 kotlin 中，函数是一等公民
\n// 注意回调函数（是一个 lambda 函数）的类型声明，与 typescript 是相似的\nfun <T, R> Collection<T>.fold(\n initial: R,\n combine: (acc: R, nextElement: T) -> R\n): R {\n var accumulator: R = initial\n for (element: T in this) {\n accumulator = combine(accumulator, element)\n }\n return accumulator\n}\n\n// 使用\nval items = listOf(1, 2, 3, 4, 5)\n// Lambda 表达式是大括号括起的那部分代码.\nitems.fold(0, {\n // 如果 Lambda 表达式有参数, 首先声明这些参数, 后面是 '->' 符\n acc: Int, i: Int ->\n print("acc = $acc, i = $i, ")\n val result = acc + i\n println("result = $result")\n // Lambda 表达式内的最后一个表达式会被看作返回值:\n result\n})\n\n// Lambda 表达式的参数类型如果可以推断得到, 那么参数类型的声明可以省略:\nval joinedToString = items.fold("Elements:", { acc, i -> acc + " " + i })\n\n// 在高阶函数调用中也可以使用函数引用:\nval product = items.fold(1, Int::times)\n支持类型别名
\ntypealias ClickHandler = (Button, ClickEvent) -> Unit\n支持匿名函数，作为函数字面值
\nfun(s: String): Int { return s.toIntOrNull() ?: 0 }\n函数引用与 java 一致，但 f.invoke(x)与f(x)是相同的
val stringPlus: (String, String) -> String = String::plus\nval intPlus: Int.(Int) -> Int = Int::plus\n\nprintln(stringPlus.invoke("<-", "->"))\nprintln(stringPlus("Hello, ", "world!"))\n\nprintln(intPlus.invoke(1, 1))\nprintln(intPlus(1, 2))\nprintln(2.intPlus(3)) // 与扩展函数类似的调用方式\n还可以使用接口实现函数，与 c++类似
\nclass IntTransformer: (Int) -> Int {\n override operator fun invoke(x: Int): Int = TODO()\n}\nval intFunction: (Int) -> Int = IntTransformer()\n此外，函数式接口与 java 的写法不同
\nfun interface IntPredicate {\n fun accept(i: Int): Boolean\n}\n\nval isEven = IntPredicate { it % 2 == 0 }\n\nfun main() {\n println("Is 7 even? - ${isEven.accept(7)}")\n}\n由于 lambda 函数细节较多，更多参见：http://kotlin.liying-cn.net/docs/reference_zh/lambdas.html
\nkotlin 支持运算符重载，参见：http://kotlin.liying-cn.net/docs/reference_zh/operator-overloading.html
\n参见：https://kotlin.liying-cn.net/docs/reference_zh/scope-functions.html
\n作用域函数是标准库提供的函数，类型声明如下：
\ninline fun <T, R> T.let(block: (T) -> R): R\ninline fun <T, R> T.run(block: T.() -> R): R\ninline fun <R> run(block: () -> R): R\ninline fun <T, R> with(receiver: T, block: T.() -> R): R\ninline fun <T> T.apply(block: T.() -> Unit): T\ninline fun <T> T.also(block: (T) -> Unit): T\n?.val a = "Kotlin"\nval b: String? = null\nprintln(a?.length) // 安全调用操作符在这里是不必要的\nprintln(b?.length) // -> null\n?:若左侧为 null 则返回右侧的值
\nval l = b?.length ?: -1\n// 相当于\nval l: Int = if (b != null) b.length else -1\n!!如果需要可能抛出的 NullPointerException 可以使用
\nval l = b!!.length\nas?转换失败时返回 null
\nval aInt: Int? = a as? Int\nval (name, age) = person\n// 相当于\nval name = person.component1()\nval age = person.component2()\n// 其中，componentN() 函数需要标记为 operator（即 operator fun componentN）\n\n// 用下划线代替未使用的变量\nval (_, status) = getResult()\nkotlin 的协程采用的不是 async/await 模型
\n参见：http://kotlin.liying-cn.net/docs/reference_zh/coroutines/coroutines-guide.html
\n","tags":["kotlin"]},{"id":"java-collections","url":"https://yieldray.fun/posts/java-collections","title":"java集合相关实用方法Collections","date_published":"2022-08-28T16:00:00.000Z","date_modified":"2022-08-28T16:00:00.000Z","content_text":"集合实用方法不仅可以操作 Collection，还能操作 Map
再次注意：Collection 和 Map 是两个完全不同的接口
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/Collections.html
\njava.util.Collections 实用类的所有属性皆为静态。
\nboolean addAll(Collection<? super T> c, T... elements)添加所有给定元素到指定集合。若集合被修改，返回 true，否则 false
\nList<Integer> list = new ArrayList<Integer>();\nCollections.addAll(list, 1, 2, 3);\nSystem.out.println(list); // [1, 2, 3]\nboolean disjoint(Collection<?> c1, Collection<?> c2)检查两个集合是否没有相同元素
\nboolean f = Collections.disjoint(List.of(1, 2), List.of(2, 3));\nboolean t = Collections.disjoint(List.of(1, 2), List.of("2", "3"));\nSystem.out.println(f); // false\nSystem.out.println(t); // true\nint frequency(Collection<?> c, Object o)返回指定元素在集合中出现的次数
\nT max(Collection<? extends T> coll, Comparator<? super T> comp)返回给定集合中的最大/小值，方法的第二个参数可选，可以传入比较器 Comparator
Comparator<T> reverseOrder()Enumeration<T> enumeration(Collection<T> c)ArrayList<T> list(Enumeration<T> e)二分查找
\nint binarySearch(List<? extends Comparable<? super T>> list, T key);\nint binarySearch(List<? extends T> list, T key, Comparator<? super T> c);\nvoid copy(List<? super T> dest, List<? extends T> src)将源列表中的所有元素复制到目标列表中。操作后，目标列表中每个复制元素的索引将与其在源列表中的索引相同。
目标列表的大小必须大于或等于源列表的大小。如果它更大，则目标列表中的其余元素不受影响。
void fill(List<? super T> list, T obj)将指定列表的所有位置上填充给定元素
\nint indexOfSubList/lastIndexOfSubList(List<?> source, List<?> target)以正序（逆序）查找，返回目标列表在源列表中首次出现的位置
\nList<T> nCopies(int n, T o)List<Integer> list = List.of(1, 2, 3);\nList<List<Integer>> repeatList = Collections.nCopies(3, list);\nSystem.out.println(repeatList);\n// [[1, 2, 3], [1, 2, 3], [1, 2, 3]]\nboolean replaceAll(List<T> list, T oldVal, T newVal)将列表中的所有指定元素替换为给定元素。如果造成了替换则返回 true，否则 false
\nvoid reverse(List<?> list)将指定列表倒转顺序
\nvoid rotate(List<?> list, int distance)var list = new ArrayList<Integer>();\nlist.addAll(List.of(1, 2, 3, 4, 5));\nCollections.rotate(list, 3);\nSystem.out.println(list); // [3, 4, 5, 1, 2]\nvoid shuffle(List<?> list, Random rnd)洗牌。Random 可选，否则使用默认值。
\nvar list = new ArrayList<Integer>();\nlist.addAll(List.of(1, 2, 3, 4, 5));\nCollections.shuffle(list);// 使用默认值，每次输出都不同\nSystem.out.println(list);\nvoid sort(List<T> list, Comparator<? super T> c)排序。Comparator 不指定时使用元素的自然比较(natural ordering)
\nvoid swap(List<?> list, int i, int j)将列表中指定下标的两个元素交换
\nSet<E> newSetFromMap(Map<E,Boolean> map)Set<Object> weakHashSet = Collections.newSetFromMap(new WeakHashMap<Object, Boolean>());\nQueue<T> asLifoQueue(Deque<T> deque)Returns a view of a Deque as a Last-in-first-out (Lifo) Queue.
\n实际上，使用集合对应的静态方法 of() 更为方便。
\n注意，此方法是创建单元素 Set，而不可能是 Collection
没有所谓 singletonSet 方法
Set<String> set1 = Collections.singleton("single");\nSet<String> set2 = Set.of("single");\nList<String> list1 = List.of("single");\nList<String> list2 = Collections.singletonList("single");\nMap<String, String> map1 = Collections.singletonMap("k", "v");\nMap<String, String> map2 = Map.of("k", "v");\nemptyEnumeration
emptyIterator
emptyList
emptyListIterator
emptyMap
emptyNavigableMap
emptyNavigableSet
emptySet
emptySortedMap
emptySortedSet
List<String> list = Collections.emptyList();\nsynchronizedCollection
synchronizedList
synchronizedMap
synchronizedNavigableMap
synchronizedNavigableSet
synchronizedSet
synchronizedSortedMap
synchronizedSortedSet
List<Integer> syncList = Collections.synchronizedList(List.of(1, 2, 3));\ncheckedCollection
checkedList
checkedMap
checkedNavigableMap
checkedNavigableSet
checkedQueue
checkedSet
checkedSortedMap
checkedSortedSet
List<Integer> list = new ArrayList<>();\nlist.addAll(List.of(1, 2));\nCollections.addAll(list, 3, 4);\nList<Integer> checkedList = Collections.checkedList(list, Integer.class);\ncheckedList.add(5);\nSystem.out.println(list); // [1, 2, 3, 4, 5]\nSystem.out.println(checkedList); // [1, 2, 3, 4, 5]\n原理是创建代理对象，拦截所有修改方法。因此，原集合仍可修改。
一些情况下看使用集合对应的静态方法 of() 替代。
unmodifiableCollection
unmodifiableList
unmodifiableMap
unmodifiableNavigableMap
unmodifiableNavigableSet
unmodifiableSet
unmodifiableSortedMap
unmodifiableSortedSet
List<Integer> list = new ArrayList<>();\nlist.add(1);\nlist.add(2);\nList<Integer> unmod = Collections.unmodifiableList(list);\nunmod.add(3); // UnsupportedOperationException\n此篇为 Collection，关于 Map，见此
\n![\"The](\"https://docs.oracle.com/javase/tutorial/figures/collections/colls-coreInterfaces.gif\")
![\"collection.png\"](\"https://s2.loli.net/2022/06/27/LWkYGcNerBtuogQ.png\")
摘自https://www.jishuchi.com/read/onjava8/12011
黄色为接口，绿色为抽象类，蓝色为具体类。虚线箭头表示实现关系，实线箭头表示继承关系。
java.util.*
| Interface | \nHash Table | \nResizable Array | \nBalanced Tree | \nLinked List | \nHash Table + Linked List | \n
|---|---|---|---|---|---|
| Set | \nHashSet | \n\n | TreeSet | \n\n | LinkedHashSet | \n
| List | \n\n | ArrayList | \n\n | LinkedList | \n\n |
| Deque | \n\n | ArrayDeque | \n\n | LinkedList | \n\n |
| Map | \nHashMap | \n\n | TreeMap | \n\n | LinkedHashMap | \n
https://docs.oracle.com/javase/tutorial/collections/index.html
\nhttps://docs.oracle.com/javase/8/docs/api/java/util/Iterator.html
\npublic interface Iterator<E> {\n boolean hasNext();\n E next();\n default void remove() {\n throw new UnsupportedOperationException("remove");\n }\n default void forEachRemaining(Consumer<? super E> action) {\n Objects.requireNonNull(action);\n while (hasNext())\n action.accept(next());\n }\n}\n若实现 Iterable 接口并实现 Iterator 方法，则还可以使用 for in 遍历
（注意，of 方法返回的集合是不可修改的）
List<Integer> list = List.of(21, 13, 32);\n\nfor (int i = 0; i < list.size(); i++)\n System.out.print(list.get(i) + ",");\n\n\nIterator it = list.iterator();\nwhile (it.hasNext())\n System.out.print(it.next() + ",");\n\nfor (Integer i : list)\n System.out.print(i + ",");\nhttps://docs.oracle.com/javase/8/docs/api/java/util/Collection.html
\npublic interface Collection<E> extends Iterable<E> {\n int size();\n boolean isEmpty();\n boolean contains(Object o);\n Iterator<E> iterator();\n Object[] toArray();\n <T> T[] toArray(T[] a);\n default <T> T[] toArray(IntFunction<T[]> generator);\n boolean add(E e);\n boolean remove(Object o);\n boolean containsAll(Collection<?> c);\n boolean addAll(Collection<? extends E> c);\n boolean removeAll(Collection<?> c);\n default boolean removeIf(Predicate<? super E> filter);\n boolean retainAll(Collection<?> c);\n void clear();\n default Spliterator<E> spliterator();\n default Stream<E> stream();\n default Stream<E> parallelStream();\n // 省略继承 Object 方法\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/util/Set.html
\npublic interface Set<E> extends Collection<E> {\n // 省略继承 Collection<E> 方法\n // ! 以下 API 自 java 9\n static <E> Set<E> of();\n static <E> Set<E> of(E e1, E e2, ...省略, E e10);\n static <E> Set<E> of(E... elements);\n // ! 以下 API 自 java 10\n static <E> Set<E> copyOf(Collection<? extends E> coll);\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/util/List.html
\npublic interface List<E> extends Collection<E> {\n // 省略继承 Collection<E> 方法\n boolean addAll(int index, Collection<? extends E> c);\n default void replaceAll(UnaryOperator<E> operator);\n default void sort(Comparator<? super E> c);\n E get(int index);\n E set(int index, E element);\n void add(int index, E element);\n E remove(int index);\n int indexOf(Object o);\n int lastIndexOf(Object o);\n ListIterator<E> listIterator();\n ListIterator<E> listIterator(int index);\n List<E> subList(int fromIndex, int toIndex);\n // ! 以下 API 自 java 9\n static <E> List<E> of();\n static <E> List<E> of(E e1, E e2,...省略, E e10);\n static <E> List<E> of(E... elements);\n // ! 以下 API 自 java 10\n static <E> List<E> copyOf(Collection<? extends E> coll);\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/util/Queue.html
\n队列方法总结
\n| \n | 抛出异常 | \n仅返回特定值 | \n
|---|---|---|
| Insert | \nadd(e) | \noffer(e) | \n
| Remove | \nremove() | \npoll() | \n
| Examine | \nelement() | \npeek() | \n
public interface Queue<E> extends Collection<E> {\n boolean add(E e);\n boolean offer(E e);V\n E remove();\n E poll();\n E element()\n E peek();\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/util/Deque.html
\n队列方法总结
\n 首元素 尾元素\n| \n | 抛出异常 | \n返回特定值 | \n抛出异常 | \n返回特定值 | \n
|---|---|---|---|---|
| Insert | \naddFirst(e) | \nofferFirst(e) | \naddLast(e) | \nofferLast(e) | \n
| Remove | \nremoveFirst() | \npollFirst() | \nremoveLast() | \npollLast() | \n
| Examine | \ngetFirst() | \npeekFirst() | \ngetLast() | \npeekLast() | \n
队列方法与双端队列方法的比较
\n| 队列方法 | \n等效双端队列方法 | \n
|---|---|
| add(e) | \naddLast(e) | \n
| offer(e) | \nofferLast(e) | \n
| remove() | \nremoveFirst() | \n
| poll() | \npollFirst() | \n
| element() | \ngetFirst() | \n
| peek() | \npeekFirst() | \n
栈方法与双端队列的比较
\n| \n | 栈方法 | \n等效双端队列方法 | \n
|---|---|---|
| 入栈 | \npush(e) | \naddFirst(e) | \n
| 出栈并返回 | \npop() | \nremoveFirst() | \n
| 查看栈顶 | \npeek() | \npeekFirst() | \n
public interface Deque<E> extends Queue<E> {\n void addFirst(E e);\n void addLast(E e);\n boolean offerFirst(E e);\n boolean offerLast(E e);\n E removeFirst();\n E removeLast();\n E pollFirst();\n E pollLast();\n E getFirst();\n E getLast();\n E peekFirst();\n E peekLast();\n boolean removeFirstOccurrence(Object o);\n boolean removeLastOccurrence(Object o);\n boolean add(E e);\n boolean offer(E e);\n E remove();\n E poll();\n E element();\n E peek();\n boolean addAll(Collection<? extends E> c);\n void push(E e);\n E pop();\n boolean remove(Object o);\n boolean contains(Object o);\n int size();\n Iterator<E> iterator();\n Iterator<E> descendingIterator();\n}\npublic class PriorityQueue<E> extends AbstractQueue<E> implements java.io.Serializable {\n int size;\n public PriorityQueue();\n public PriorityQueue(int initialCapacity);\n public PriorityQueue(Comparator<? super E> comparator);\n public PriorityQueue(int initialCapacity, Comparator<? super E> comparator);\n public PriorityQueue(Collection<? extends E> c);\n public PriorityQueue(PriorityQueue<? extends E> c);\n public PriorityQueue(SortedSet<? extends E> c);\n public boolean add(E e)\n public boolean offer(E e)\n public E peek()\n public boolean remove(Object o)\n public boolean contains(Object o);\n public Object[] toArray()\n public <T> T[] toArray(T[] a)\n public Iterator<E> iterator();\n public boolean removeIf(Predicate<? super E> filter);\n public boolean removeAll(Collection<?> c);\n public boolean retainAll(Collection<?> c);\n public void forEach(Consumer<? super E> action);\n}\njava 数组是特殊的类。数组本身继承自 Object，因此具有 clone(), equals(), hashCode(), toString(), getClass() 方法。
操作数组需要使用实用类 java.util.Arrays
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/Arrays.html
\njava.util.Arrays 实用类的所有方法都是静态方法。
\n此方法既可以传入一个数组，也可以传入多个同类型参数以转换为列表
\nList<Integer> even = Arrays.asList(new Integer[]{0, 2, 4, 6});\nSystem.out.println(even); // [0, 2, 4, 6]\nList<Integer> odd = Arrays.asList(1, 3, 5, 7);\nSystem.out.println(odd); // [1, 3, 5, 7]\n这两个方法是实例方法，用于将集合转换为数组。
\nInteger[] errs = (Integer[]) even.toArray(); // 报错（ClassCastException），无法转型 class [Ljava.lang.Object; cannot be cast to class [Ljava.lang.Integer;\nObject[] objs = even.toArray(); // 不传参，转换为 Object[]\nInteger[] ints_plus1 = even.toArray(new Integer[even.size() + 1]); // 传入参数以指定类型，声明的数组长度若大于集合长度，则多余元素为null\nInteger[] ints_minus1 = even.toArray(new Integer[even.size() - 1]); // 传入参数以指定类型，声明的数组长度若小于或等于集合长度，数组长度仍为集合长度\nSystem.out.println(Arrays.toString(ints_plus1)); // [0, 2, 4, 6, null]\nSystem.out.println(Arrays.toString(ints_minus1)); // [0, 2, 4, 6]\n注意，二分查找需要数组已经有序!
\nint[] arr = {1, 3, 5, 7, 9};\n// 指定 key\nSystem.out.println(Arrays.binarySearch(arr, 1)); // 0\nSystem.out.println(Arrays.binarySearch(arr, 2)); // -2\nSystem.out.println(Arrays.binarySearch(arr, 3)); // 1\nSystem.out.println(Arrays.binarySearch(arr, 4)); // -3\n// 指定 from, to, key\nSystem.out.println(Arrays.binarySearch(arr, 1, 3, 1)); // -2\nint[] arr1 = {3, 9, 6, 1};\nint[] arr2 = arr1.clone();\nArrays.sort(arr1); // Timsort\nArrays.parallelSort(arr2); // 简而言之，多线程排序（归并）\nSystem.out.println(Arrays.toString(arr1)); // [1, 3, 6, 9]\nSystem.out.println(Arrays.toString(arr2)); // [1, 3, 6, 9]\nString[] arr = {"Hello", "World"};\nString[] copied = Arrays.copyOf(arr, arr.length);\nSystem.out.println(Arrays.equals(arr, copied)); // => true\nString[] hello = Arrays.copyOfRange(arr, 0, 1);\nSystem.out.println(Arrays.toString(hello)); // => [Hello]\nSystem.out.println(Arrays.hashCode(arr)); // => -2053301055\nSystem.out.println(Arrays.hashCode(copied)); // => -2053301055\nString[][] arr = {{"Hello"}, {"World"}};\n\nSystem.out.println(Arrays.toString(arr)); // => [[Ljava.lang.String;@16b98e56, [Ljava.lang.String;@7ef20235]\nSystem.out.println(Arrays.deepToString(arr)); // => [[Hello], [World]]\n\nSystem.out.println(Arrays.hashCode(arr)); // => 1063928416\nSystem.out.println(Arrays.deepHashCode(arr)); // => -2053300063\n\nString[] s1 = {"Hello"};\nString[] s2 = {"World"};\nString[][] composed = {s1, s2};\nSystem.out.println(Arrays.equals(arr, composed)); // => false\nSystem.out.println(Arrays.deepEquals(arr, composed)); // => true\nimport java.util.Arrays;\nimport java.util.Comparator;\n\npublic class Main {\n public static void main(String[] args) {\n String[] arr1 = {"Hello"};\n String[] arr2 = {"World"};\n System.out.println(Arrays.mismatch(arr1, arr2)); // 返回两个数组中第一个不一致元素的索引\n System.out.println(Arrays.mismatch(arr1, arr2, new StringComparator())); // 数组元素一致时，返回-1\n System.out.println(Arrays.compare(arr1, arr2)); // 比较字典序，返回 -1 | 0 | 1\n System.out.println(Arrays.compare(arr1, arr2, new StringComparator())); // 给定比较器\n System.out.println(Arrays.compareUnsigned(new int[]{1}, new int[]{2})); // 仅支持数字类型数组\n }\n}\n\nclass StringComparator implements Comparator<String> {\n @Override\n public int compare(String s1, String s2) {\n return 0; // 仅供测试\n }\n}\n另见：java 流
\nint[] fib = {0, 1, 1, 2, 3, 5, 8, 13, 21, 34};\nIntStream s = Arrays.stream(fib);\ns.forEach(System.out::println);\nint[] arr = new int[3];\nSystem.out.println(Arrays.toString(arr)); // => [0, 0, 0]\nArrays.fill(arr, 6);\nSystem.out.println(Arrays.toString(arr)); // => [6, 6, 6]\nArrays.fill(arr, 0, 2, 8); // fromIndex, toIndex, val\nSystem.out.println(Arrays.toString(arr)); // => [8, 8, 6]\nArrays.setAll(arr, new IntUnaryOperator() { // 通过索引设置数组元素\n @Override\n public int applyAsInt(int operand) {\n return operand * 2; // 0, 1, 2 => 0, 2, 4\n }\n});\nSystem.out.println(Arrays.toString(arr)); // [0, 2, 4]\n分割数组，支持并行处理
\nint[] arr = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};\nSpliterator s = Arrays.spliterator(arr);\nSpliterator s1 = s.trySplit();\nSpliterator s2 = s.trySplit();\nvar printEach = new Consumer<Integer>() {\n @Override\n public void accept(Integer i) {\n System.out.print(i);\n }\n};\nSystem.out.print("s1: ");\ns1.forEachRemaining(printEach); // s1: 12345\nSystem.out.print("\\ns2: ");\ns2.forEachRemaining(printEach); // s2: 67\nparallel 系列函数用于多线程时，并行运算
\n","tags":["java"]},{"id":"java-map","url":"https://yieldray.fun/posts/java-map","title":"java之Map","date_published":"2022-08-25T16:00:00.000Z","date_modified":"2022-08-25T16:00:00.000Z","content_text":"此篇为 Map，关于 Collection 及集合类概述，见此
https://docs.oracle.com/javase/8/docs/api/java/util/Map.html
\npublic interface Map<K, V> {\n int size();\n boolean isEmpty();\n boolean containsKey(Object key);\n boolean containsValue(Object value);\n V get(Object key);\n V put(K key, V value);\n V remove(Object key);\n void putAll(Map<? extends K, ? extends V> m);\n void clear();\n Set<K> keySet();\n Collection<V> values();\n Set<Map.Entry<K, V>> entrySet();\n interface Entry<K, V> {\n K getKey();\n V getValue();\n V setValue(V value);\n boolean equals(Object o);\n int hashCode();\n public static <K extends Comparable<? super K>, V> Comparator<Map.Entry<K, V>> comparingByKey();\n public static <K, V extends Comparable<? super V>> Comparator<Map.Entry<K, V>> comparingByValue();\n public static <K, V> Comparator<Map.Entry<K, V>> comparingByKey(Comparator<? super K> cmp);\n public static <K, V> Comparator<Map.Entry<K, V>> comparingByValue(Comparator<? super V> cmp);\n // ! 以下 API 自 java 17\n public static <K, V> Map.Entry<K, V> copyOf(Map.Entry<? extends K, ? extends V> e);\n }\n boolean equals(Object o);\n int hashCode();\n default V getOrDefault(Object key, V defaultValue);\n default void forEach(BiConsumer<? super K, ? super V> action);\n default void replaceAll(BiFunction<? super K, ? super V, ? extends V> function);\n default V putIfAbsent(K key, V value);\n default boolean remove(Object key, Object value);\n default boolean replace(K key, V oldValue, V newValue);\n default V replace(K key, V value);\n default V computeIfAbsent(K key, Function<? super K, ? extends V> mappingFunction);\n default V computeIfPresent(K key, BiFunction<? super K, ? super V, ? extends V> remappingFunction);\n default V compute(K key, BiFunction<? super K, ? super V, ? extends V> remappingFunction);\n default V merge(K key, V value, BiFunction<? super V, ? super V, ? extends V> remappingFunction);\n // ! 以下 API 自 java 9\n static <K, V> Map<K, V> of();\n static <K, V> Map<K, V> of(K k1, V v1, K k2, V v2,...省略, K k10, V v10);\n static <K, V> Map<K, V> ofEntries(Entry<? extends K, ? extends V>... entries);\n static <K, V> Entry<K, V> entry(K k, V v);\n // ! 以下 API 自 java 10\n static <K, V> Map<K, V> copyOf(Map<? extends K, ? extends V> map);\n}\n\n\n原文：https://betterdev.blog/minimal-safe-bash-script-template
\n
仅意译，文章推荐使用此仓库：https://github.com/ralish/bash-script-template
Bash 脚本参考：https://wangdoc.com/bash/
Bash 脚本几乎是每个人都迟早该会一点的。大抵没人会说自己喜欢写 Bash 脚本，可能正因此大部分人都没怎么关注它。
\n本文不是为了精通 Bash 脚本，而是展示一个最小化的模板，可以让脚本更安全。
\n\n\n与 “就像骑自行车一样” 相反的是： “通过 Bash 编程”。 (比喻：像骑自行车一样，学过就忘不了)
\n
这句话的意思是，无论你做了多少次，你每次还是要重新学习。— Jake Wharton (@JakeWharton) December 2, 2020
\n
不过 Bash 脚本就像其它广受喜爱的编程语言一样，比如说 JavaScript，不会轻易消失。
尽管我们希望 Bash 脚本不会变成所有事物的主要语言，但它总是无处不在。
Bash 脚本继承了 shell 的宝座，在 Linux 系统和 Docker 镜像中随处可见，这也是大多数后端运行的环境。\n所以如果你需要为服务器程序的启动、CI/CD 步骤或集成测试的运行编写脚本，Bash 总在这里。
\n要把几个命令连在一起，把输出从一个传到另一个，或者是运行一些可执行程序，Bash 是最简单和最本源的解决方案。
虽然用其他语言编写更强大、更复杂的脚本是很好的，但你不能指望到处都有 Python、Ruby、fish 或其它你觉得好的解释器。
而且在你将其它的解释器添加到某些生产服务器、Docker 镜像或 CI 环境之前，你可能要三思而后行。
Bash 尚不完美，语法繁杂，很难做错误处理。编写的过程中容易踩坑，但我们必须解决它。
\n直接上代码
\n#!/usr/bin/env bash\n\nset -Eeuo pipefail\ntrap cleanup SIGINT SIGTERM ERR EXIT\n\nscript_dir=$(cd "$(dirname "${BASH_SOURCE[0]}")" &>/dev/null && pwd -P)\n\nusage() {\n cat << EOF # remove the space between << and EOF, this is due to web plugin issue\nUsage: $(basename "${BASH_SOURCE[0]}") [-h] [-v] [-f] -p param_value arg1 [arg2...]\n\nScript description here.\n\nAvailable options:\n\n-h, --help Print this help and exit\n-v, --verbose Print script debug info\n-f, --flag Some flag description\n-p, --param Some param description\nEOF\n exit\n}\n\ncleanup() {\n trap - SIGINT SIGTERM ERR EXIT\n # script cleanup here\n}\n\nsetup_colors() {\n if [[ -t 2 ]] && [[ -z "${NO_COLOR-}" ]] && [[ "${TERM-}" != "dumb" ]]; then\n NOFORMAT='\\033[0m' RED='\\033[0;31m' GREEN='\\033[0;32m' ORANGE='\\033[0;33m' BLUE='\\033[0;34m' PURPLE='\\033[0;35m' CYAN='\\033[0;36m' YELLOW='\\033[1;33m'\n else\n NOFORMAT='' RED='' GREEN='' ORANGE='' BLUE='' PURPLE='' CYAN='' YELLOW=''\n fi\n}\n\nmsg() {\n echo >&2 -e "${1-}"\n}\n\ndie() {\n local msg=$1\n local code=${2-1} # default exit status 1\n msg "$msg"\n exit "$code"\n}\n\nparse_params() {\n # default values of variables set from params\n flag=0\n param=''\n\n while :; do\n case "${1-}" in\n -h | --help) usage ;;\n -v | --verbose) set -x ;;\n --no-color) NO_COLOR=1 ;;\n -f | --flag) flag=1 ;; # example flag\n -p | --param) # example named parameter\n param="${2-}"\n shift\n ;;\n -?*) die "Unknown option: $1" ;;\n *) break ;;\n esac\n shift\n done\n\n args=("$@")\n\n # check required params and arguments\n [[ -z "${param-}" ]] && die "Missing required parameter: param"\n [[ ${#args[@]} -eq 0 ]] && die "Missing script arguments"\n\n return 0\n}\n\nparse_params "$@"\nsetup_colors\n\n# script logic here\n\nmsg "${RED}Read parameters:${NOFORMAT}"\nmsg "- flag: ${flag}"\nmsg "- param: ${param}"\nmsg "- arguments: ${args[*]-}"\n我的想法是不要让代码太长了，但又能为具体的脚本提供基础。
实现起来不容易，因为 Bash 是没有依赖管理的。
一个想法是用一个基础的脚本去启动一个实现实际逻辑的脚本，不过这样就要两个脚本，不算是最小化。
所以我们尽量减小模板代码，保持精简。
下面具体分析代码。
\n#!/usr/bin/env bash\n选 /usr/bin/env 而不是直接 /bin/bash
set -Eeuo pipefail\nset 命令改变了脚本的运行模式。
比如说，通常 Bash 就算命令运行失败了（非零返回），都会直接继续执行下一行。
考虑如下脚本：
#!/usr/bin/env bash\ncp important_file ./backups/\nrm important_file\n上面的脚本中，如果 backups 文件夹不存在，控制台会输出报错信息，但是下一行移除文件夹的代码还是会运行。
关于set -Eeuo pipefail选项的具体内容，参见这篇文章
尽管你应该知道，有一些论点反对设置这些选项。
\nscript_dir=$(cd "$(dirname "${BASH_SOURCE[0]}")" &>/dev/null && pwd -P)\n这行代码尽可能地获取当前运行目录，然后cd进这个目录，为何？
一般来说我们的脚本在相对与脚本文件所在目录下工作（复制文件、执行命令），也就是说脚本所在目录即为当前工作目录。
这也是我们在脚本所在目录执行脚本将得到的结果。
但是如果我们在命令行通过以下方式执行脚本：
\n/opt/ci/project/script.sh\n则脚本的工作目录不是脚本所在目录，而是完全未知的一个任意工作目录。
虽然说可以通过预先进入脚本所在目录，然后再运行脚本来解决此问题：
cd /opt/ci/project && ./script.sh\n但是如果我们能在脚本内部解决此问题就更好了。
所以如果我们的脚本需要在相对于脚本所在路径读取文件或者执行命令，可以通过以下方式：
cat "$script_dir/my_file"\n同时，该脚本不会更改工作目录。如果脚本是在其他目录执行的，并且用户提供了某个文件的相对路径，我们仍然能够读取它。
\n（译注：关于 trap 命令，参见：https://tldr.ostera.io/trap，下面 trap 将使程序接收指定信号时执行 cleanup 函数）
trap cleanup SIGINT SIGTERM ERR EXIT\n\ncleanup() {\n trap - SIGINT SIGTERM ERR EXIT\n # script cleanup here\n}\n可以把 trap 视作脚本的 finally 块。在脚本结束时——正常情况下，由错误或外部信号引起——将执行 cleanup() 函数。例如，可以在这里删除脚本创建的所有临时文件。
只需注意 cleanup() 函数不仅可以在最后调用，还可以让脚本完成任何部分的工作。不一定所有你试图清理的资源都会存在。
usage() {\n cat << EOF # remove the space between << and EOF, this is due to web plugin issue\nUsage: $(basename "${BASH_SOURCE[0]}") [-h] [-v] [-f] -p param_value arg1 [arg2...]\n\nScript description here.\n\n...\nEOF\n exit\n}\n让 usage() 相对靠近脚本的顶部，有两个作用:
我不主张在这里给每一个函数都写文档。但是一个简短的、好的脚本使用方法（usage message）的文档是最起码的要求。
\nsetup_colors() {\n if [[ -t 2 ]] && [[ -z "${NO_COLOR-}" ]] && [[ "${TERM-}" != "dumb" ]]; then\n NOFORMAT='\\033[0m' RED='\\033[0;31m' GREEN='\\033[0;32m' ORANGE='\\033[0;33m' BLUE='\\033[0;34m' PURPLE='\\033[0;35m' CYAN='\\033[0;36m' YELLOW='\\033[1;33m'\n else\n NOFORMAT='' RED='' GREEN='' ORANGE='' BLUE='' PURPLE='' CYAN='' YELLOW=''\n fi\n}\n\nmsg() {\n echo >&2 -e "${1-}"\n}\n首先，如果你不需要输出彩色文本，删除 setup_colors() 函数即可。
我保留它是因为我知道如果我不需要每次都去查颜色的代码，我将更频繁地使用彩色文本。
其次，指定的颜色仅在 msg() 函数内有效，其它的 echo 命令是无效的。
msg() 意在用于打印所有非脚本输出。这包括所有日志（logs）和消息（messages），而不仅仅是错误（errors）。
引用自 12 Factor CLI Apps article：
\n\n\n简而言之：stdout 用来输出（output），stderr 用来打印消息（messaging）
\nJeff Dickey, who knows a little about building CLI apps
\n
所以说在大多数情况下你不应该在 stdout 中使用彩色文本。
通过 msg() 函数打印的消息将发送至 stderr，并支持特殊序列，如颜色。如果 stderr 输出不是一个交互式终端或者传递了一个标准参数，则颜色将被禁用。
用法：
\nmsg "This is a ${RED}very important${NOFORMAT} message, but not a script output value!"\n要检查它在当 stderr 不是交互式终端时的行为，可以像上面这样在脚本中添加一行（使用 msg 函数的语句），
然后执行它，将 stderr 重定向到 stdout，并通过管道将其发送到 cat。
管道操作使得输出不再直接发送到终端，而是发送到下一个命令，因此现在颜色应该会被禁用。
$ ./test.sh 2>&1 | cat\nThis is a very important message, but not a script output value!\nparse_params() {\n # default values of variables set from params\n flag=0\n param=''\n\n while :; do\n case "${1-}" in\n -h | --help) usage ;;\n -v | --verbose) set -x ;;\n --no-color) NO_COLOR=1 ;;\n -f | --flag) flag=1 ;; # example flag\n -p | --param) # example named parameter\n param="${2-}"\n shift\n ;;\n -?*) die "Unknown option: $1" ;;\n *) break ;;\n esac\n shift\n done\n\n args=("$@")\n\n # check required params and arguments\n [[ -z "${param-}" ]] && die "Missing required parameter: param"\n [[ ${#args[@]} -eq 0 ]] && die "Missing script arguments"\n\n return 0\n}\n如果脚本需要传入参数的话，我会一般这样做，就算脚本仅在这一处使用。复制和重用它很容易，这也是迟早要做的。
此外，即使有些东西需要硬编码，通常在比 Bash 脚本更高的层次上也有更好的地方。
命令行参数主要有三种类型：标志（flags）、命名参数（named parameters）和位置参数（positional arguments）。parse_params() 函数支持提到的所有参数。
这里唯一没有处理的一种常见参数模式是串联多个单字母标志。为了能够传递两个标志作为-ab，而不是-a -b，需要一些额外的代码。
\nwhile 循环是一种手动解析参数的方式。在其他语言中，您应该使用内置的解析器或其它可用库，但是，这是 Bash。
\n模板中有一个示例标志 (-f) 和命名参数 (-p)。只需更改或复制它们来添加其他参数。之后不要忘记更新 usage() 函数。
这里重要的一点是，当你用谷歌搜索出来的第一个结果来解析 Bash 参数，通常会忽略的一点是，在未知选项上抛出一个错误。
脚本接收了一个未知选项就意味着用户想做一些脚本无法实现的事情。所以用户期望和脚本行为可能会大不相同。
最好在坏事发生之前就完全阻止程序的执行。
在 Bash 中，解析参数有两种方法，即 getopt 和 getopts。赞成和反对使用它们的意见都有。
我认为这些工具并不是最好的，因为默认情况下，macOS 上的 getopt 行为完全不同，而且 getopts 不支持长参数(例如 --help)。
复制粘贴即可，就像抄网上其它代码一样。
\n嗯，实际上，这是个诚恳的建议。毕竟 Bash 没有像 npm 一样的包管理器可以执行 install。
\n复制之后只需改变四处：
\nusage() 处文本改为脚本说明cleanup() 中的内容parse_params() 中的参数。保留 --help 和 --no-color，替换掉实例参数：-f 和 -p我在 MacOS（默认 archaic Bash 3.2）和几个 docker 镜像：Debian, Ubuntu, CentOS, Amazon Linux, Fedora 下测试此模板。能够正常工作。
\n当然，它不能在缺少 Bash 的环境中工作，比如 Alpine Linux。Alpine 作为一个极简主义系统，使用了轻量级的 shell ash (Almquist shell)。
你可能会问，使用几乎在任何地方都适用的 Bourne Shell 兼容脚本不是更好吗？至少对我来说，答案是否定的。Bash 更安全、更强大(但仍然不容易使用)，所以我可以接受对一些我很少处理的 Linux 发行版缺乏支持。
\n在 Bash 或其它更好的编程语言中创建 CLI 脚本时，有一些通用规则。这些资源将指导你如何让你的小型脚本和大型 CLI 应用程序变得可靠:
\n我不是第一个也不是最后一个创建 Bash 脚本模板的人。一个很好的选择是这个项目，虽然对我的日常需求来说有点太大了。毕竟，我试图让 Bash 脚本尽可能的小(和少)。
\n编写 Bash 脚本时，使用支持 ShellCheck linter 的 IDE，比如 JetBrains IDEs。它会阻止你做一堆事与愿违的事情。
\n我的 Bash 脚本模板也可以通过 GitHub Gist 获得(在 MIT 许可下):
\n\n如果你发现模板有任何问题，或者你认为缺少了什么重要的东西，请在评论中告诉我。
\n\n\n","tags":["linux"]},{"id":"js-import-map","url":"https://yieldray.fun/posts/js-import-map","title":"浏览器 Import Maps","date_published":"2022-08-21T10:00:00.000Z","date_modified":"2022-08-21T10:00:00.000Z","content_text":"评论见原文评论区：https://betterdev.blog/minimal-safe-bash-script-template
\n
Import Maps 可以控制 import 语句 和 import() 表达式的行为。
参见：https://caniuse.com/import-maps
提案：https://github.com/WICG/import-maps
规范：https://html.spec.whatwg.org/multipage/webappapis.html#import-maps
非浏览器环境也有相关实现：
对于 Node.js：https://nodejs.org/dist/latest-v16.x/docs/api/policy.html
对于 Deno：https://deno.land/manual/linking_to_external_code/import_maps
<script type="importmap">\n {\n "imports": {\n "moment": "/node_modules/moment/src/moment.js",\n "lodash": "/node_modules/lodash-es/lodash.js"\n }\n }\n</script>\n根据 Import Maps 导入：
\nimport moment from "moment";\nimport { partition } from "lodash";\n注意，相对路径会受到 <base> 标签的影响
<base href="https://www.unpkg.com/vue@2/dist/" />\n<script type="importmap">\n {\n "imports": {\n "vue": "./vue.runtime.esm.js"\n }\n }\n</script>\n\n<script type="module">\n import("vue"); // resolves to https://www.unpkg.com/vue@2/dist/vue.runtime.esm.js\n</script>\n{\n "imports": {\n "moment": "/node_modules/moment/src/moment.js",\n "moment/": "/node_modules/moment/src/",\n "lodash": "/node_modules/lodash-es/lodash.js",\n "lodash/": "/node_modules/lodash-es/"\n }\n}\n// 导入主模块\nimport moment from "moment";\nimport _ from "lodash";\n// 导入子模块\nimport localeData from "moment/locale/zh-cn.js";\nimport fp from "lodash/fp.js";\n{\n "imports": {\n "https://www.unpkg.com/vue@2/dist/vue.runtime.esm.js": "/node_modules/vue/dist/vue.runtime.esm.js"\n }\n}\n这就会把
\nimport Vue from "https://www.unpkg.com/vue@2/dist/vue.runtime.esm.js";\n改为本地获取
\nimport Vue from "/node_modules/vue/dist/vue.runtime.esm.js";\n可以将任意导入进行重映射
\n{\n "imports": {\n "/app/helpers.mjs": "/app/helpers/index.mjs"\n }\n}\n使用尾斜杠时，进行前缀匹配
\n{\n "imports": {\n "https://www.unpkg.com/vue/": "/node_modules/vue/"\n }\n}\n用 scopes 可以控制指定路径下模块中的 import 导入的行为
使之从 Import Maps 的 scopes 指定的特定源进行导入，主要使用场景是版本控制。
{\n "imports": {\n "a": "/a-1.mjs",\n "b": "/b-1.mjs",\n "c": "/c-1.mjs"\n },\n "scopes": {\n "/scope2/": {\n "a": "/a-2.mjs"\n },\n "/scope2/scope3/": {\n "b": "/b-3.mjs"\n }\n }\n}\n指定上面的 scope，则：
\n在模块 /scope1/foo.mjs 中（未在 scope 中指定），import("a") => import("/a-1.mjs")
在模块 /scope2/foo.mjs 中（通过 scope 中指定），import("a") => import("/a-2.mjs")
这个例子摘自提案，解析如下：
\n| Specifier | \nReferrer | \nResulting URL | \n
|---|---|---|
| a | \n/scope1/foo.mjs | \n/a-1.mjs | \n
| b | \n/scope1/foo.mjs | \n/b-1.mjs | \n
| c | \n/scope1/foo.mjs | \n/c-1.mjs | \n
| \n | \n | \n |
| a | \n/scope2/foo.mjs | \n/a-2.mjs | \n
| b | \n/scope2/foo.mjs | \n/b-1.mjs | \n
| c | \n/scope2/foo.mjs | \n/c-1.mjs | \n
| \n | \n | \n |
| a | \n/scope2/scope3/foo.mjs | \n/a-2.mjs | \n
| b | \n/scope2/scope3/foo.mjs | \n/b-3.mjs | \n
| c | \n/scope2/scope3/foo.mjs | \n/c-1.mjs | \n
<script type="importmap" src="import-map.importmap"></script>\nheader 头应指定 MIME 类型为application/importmap+json application/json
可以动态生成 script 标签来控制 Import Maps，但必须保证该标签在模块解析前加载。
\n","tags":["web-api","js"]},{"id":"cpp-rvalue-reference","url":"https://yieldray.fun/posts/cpp-rvalue-reference","title":"c++右值引用","date_published":"2022-08-20T13:00:00.000Z","date_modified":"2022-08-20T13:00:00.000Z","content_text":"https://zh.cppreference.com/w/cpp/language/value_category
\n简单来说，变量名就是左值，变量的具体值就是右值。
\nint a = 1;\n// 左值 右值\n那么很明显，在 c++ 中可以获取一个左值的地址，而无法获取一个右值的地址。
\n纯右值：除字符串字面量以外的字面量（或由表达式产生）、临时（匿名）对象等。
亡值：即将被销毁但能够被移动的值（通过移动语义）。
传统 c++ 引用就称左值引用，右值引用添加自 c++11
\n在左值引用中，一个引用变量名引用另一个变量名。
\nint a = 1;\nint& ref = a;\nref = 2;\ncout << a; // => 2\n非常量的引用类型的变量无法引用一个右值，
不过常量引用类型则可以。
int &ref = 2; // ❎\n// error: cannot bind non-const lvalue reference of type 'int&' to an rvalue of type 'int'\n\nconst int &ref = 2; // ✅\n一个引用的引用相当于对原来那个变量的引用，类型仍然是原来那个变量的类型的引用。
（而不是引用的引用类型，这就引出了右值引用）
int a = 1;\nint &ref = a;\nint &&ref_ref = ref; // ❎，相当于 int &&ref_ref = a\n// error: cannot bind rvalue reference of type 'int&&' to lvalue of type 'int'\nint &ref_ref = ref; // ✅\n\nref_ref = 2;\ncout << a; // => 2\n右值引用可引用一个右值，而不能引用左值。
\nint a = 1;\nint && rref = a; // ❎\n// error: cannot bind rvalue reference of type 'int&&' to lvalue of type 'int'\nint && rref = 1; // ✅\n可以令右值引用重新引用另一个右值
\nint && rref = 1;\nrref = 2;\ncout << rref; // => 2\nstd::move() 将左值强制转换为右值std::move 相当于 static_cast<T&&>(lvalue)，返回一个右值
int a = 1;\nint && rref = a; // ❎\nint && rref = std::move(a); // ✅\n\n// move函数不发生所有权变化\ncout << a; // => 1\na = 2;\ncout << rref; // => 2\n从形式上看，std::move(xxx) 作为一个表达式，是一个右值
int && rref = 1;\n// 相当于\nint temp = 1;\nint && rref = std::move(temp);\ncout << rref; // => 1\n// 注意此函数参数仅对左值有效\nint && rref = std::move(1);\ncout << rref; // => 0\n右值引用的这个变量名本身也是个左值。
如果有一个形参为右值引用的函数，该函数仅接受右值，那么就需要使用std::move函数
void use_rvalue(int && rvalue) {}\n\nint a = 1;\nint & lref = a;\nint && rref = 1;\nuse_rvalue(1); // ✅\nuse_rvalue(a); // ❎\nuse_rvalue(lref); // ❎\nuse_rvalue(rref); // ❎\nuse_rvalue(std::move(a)); // ✅\n不过，const 形参既能接受左值也能接收右值，但无法修改
\nvoid use_const(const int& n) {}\n// 以下调用皆可通过编译\nuse_const(1);\nint a = 1;\nint & lref = a;\nint && rref = 1;\nuse_const(a);\nuse_const(lref);\nuse_const(rref);\nuse_const(std::move(a));\n对于临时值来说，使用移动语义替代拷贝可提高性能。
\n给出一段修改自 cppreference 的演示代码如下：
\n#include <iostream>\n#include <utility>\n#include <vector>\n#include <string>\nusing namespace std;\n\nstring wrap_string(string str){ return "\\"" + str + "\\""; }\n\nint main()\n{\n string str = "Hello";\n vector<string> v;\n\n // 使用 push_back(const T&) 重载，\n // 表示我们将带来复制 str 的成本\n v.push_back(str);\n cout << "After copy, str is " << wrap_string(str) << endl;\n\n // 使用右值引用 push_back(T&&) 重载，\n // 表示不复制字符串；而是\n // str 的内容被移动进 vector\n // 这个开销比较低，但也意味着 str 现在可能为空。\n v.push_back(std::move(str));\n std::cout << "After move, str is " << wrap_string(str) << endl;\n\n std::cout << "The contents of the vector are "\n << wrap_string(v[0]) << ", " << wrap_string(v[1]) << endl;\n}\n输出：
\nAfter copy, str is "Hello"\nAfter move, str is ""\nThe contents of the vector are "Hello", "Hello"\n移动语义的移动，指将某对象持有的资源或内容转移给另一个对象。
在转移资源后，被移动的对象处于有效但未定义的状态
移动一个 vector，不同于拷贝的是，这是通过移动构造函数而不是拷贝构造函数实现的。
\nvector<int> fibonacci = { 0, 1, 1, 2, 3, 5, 8};\ncout << fibonacci.size() << endl; // => 7\nvector<int> fib = move(fibonacci);\ncout << fibonacci.size() << endl; // => 0\n代码摘自https://zhuanlan.zhihu.com/p/347977300
\nclass my_vector\n{\n int* data_;\n size_t size_;\n size_t capacity_;\n\npublic:\n // 复制构造函数\n my_vector(const my_vector& oth) :\n size_(oth.size_),\n capacity_(oth.capacity_)\n {\n data_ = static_cast<int*>(malloc(sizeof(int) * size_));\n for (size_t i = 0; i < size_; ++i) {\n data_[i] = oth.data_[i];\n }\n }\n\n // 移动构造函数\n // std::exchange(obj, new_val)的作用是把返回obj的旧值，并把new_val赋值给obj\n my_vector(my_vector&& oth) :\n data_(std::exchange(oth.data_, nullptr)),\n size_(std::exchange(oth.size_, 0)),\n capacity_(std::exchange(oth.capacity_, 0))\n {}\n};\nstd::forward<>() 完美转发完美转发，指不仅转发参数的值，还保证被转发参数的左、右值属性不变。
\n#include <utility>\nvoid use_rvalue(int&& rv) {}\nvoid use_lvalue(int& lv) {}\n\n\nvoid fn(int&& rvalue) {\n use_rvalue(rvalue); // 错误，rvalue 本身是个左值\n use_rvalue(std::move(rvalue)); // 将左值转换为右值\n use_rvalue(std::forward<int &&>(rvalue)); // 相当于上面\n\n use_lvalue(rvalue); // 正确，需要传入左值\n use_lvalue(std::forward<int &>(rvalue)); // 相当于上面\n\n}\n\nint main() {\n int a = 1;\n fn(std::move(a));\n}\nhttps://docs.microsoft.com/zh-cn/cpp/cpp/rvalue-reference-declarator-amp-amp
http://zh.cppreference.com/w/cpp/language/reference
https://zh.cppreference.com/w/cpp/utility/move
https://zh.cppreference.com/w/cpp/utility/exchange
函数对象：函数指针、函数符、lambda 表达式
后两者实际上通过重载 () 运算符的对象实现函数功能。
函数指针参见另一篇
\n#include <iostream>\n#include <vector>\n#include <algorithm>\n#include <cstdlib>\nusing namespace std;\n\ntemplate <typename T>\nvoid print_vec(vector<T> &vec)\n{\n for (auto i : vec)\n cout << i << ", ";\n cout << endl;\n}\n\nint always_one()\n{\n return 1;\n}\n\nclass Always_two\n{\npublic:\n int operator()()\n {\n return 2;\n }\n};\n\nAlways_two always_two;\n\nint main()\n{\n vector<int> numbers(5);\n generate(numbers.begin(), numbers.end(), rand);\n // rand 的签名是 int rand()\n // generate 的签名在此处可以看作\n // template< class ForwardIt, class Generator >\n // void generate( ForwardIt first, ForwardIt last, Generator g );\n\n print_vec(numbers); // 41, 18467, 6334, 26500, 19169,\n\n generate(numbers.begin(), numbers.end(), always_one);\n print_vec(numbers); // 1, 1, 1, 1, 1,\n\n generate(numbers.begin(), numbers.end(), always_two);\n print_vec(numbers); // 2, 2, 2, 2, 2,\n}\n模仿上例，给出如下代码
\n#include <iostream>\n#include <vector>\n#include <algorithm>\n#include <cstdlib>\nusing namespace std;\n\nint always_one()\n{\n return 1;\n}\n\nclass Always_two\n{\npublic:\n int operator()()\n {\n return 2;\n }\n};\n\nAlways_two always_two;\n\ntemplate <typename T>\nclass Store\n{\nprivate:\n T value;\n\npublic:\n template <typename Fn>\n void set_fn(Fn func) noexcept\n {\n value = func();\n }\n void set(T val) noexcept\n {\n value = val;\n }\n T get() const noexcept\n {\n return value;\n }\n void print() const noexcept\n {\n cout << value << endl;\n }\n};\n\nint main()\n{\n Store<int> store;\n\n store.set_fn(rand);\n store.print(); // 41\n\n store.set_fn(always_one);\n store.print(); // 1\n\n store.set_fn(always_two);\n store.print(); // 2\n\n store.set_fn([](){ return 3; });\n store.print(); // 3\n}\nMicrosoft C++ 文档中的描述非常直观
https://docs.microsoft.com/zh-cn/cpp/cpp/lambda-expressions-in-cpp![\"lambda](\"https://docs.microsoft.com/zh-cn/cpp/cpp/media/lambdaexpsyntax.png\")
[] 表示不捕获 [=] 表示默认按值捕获(不能修改) [&] 表示默认按引用捕获[x] 表示按值捕获变量 x (不能修改)[&x] 表示按引用捕获变量 x[x, &y] 表示变量 x 按值捕获，变量 y 按引用捕获[=, &x] 表示除变量 x 按引用捕获外，其余变量按值捕获[&, x] 表示除变量 x 按值捕获外，其余变量按引用捕获
此外，不允许这样：[&, &x] [=, x]
捕获 this 同理 [this] [&, this] [=, *this]
捕获一个可变模板 [args...]
声明临时变量（v1, v2 仅在函数体有效） [v1 = 1, v2 = std::move(important)]
lambda 函数的参数列表与普通函数基本相同，不过不支持默认参数和可变参数
使用 auto 关键字替代模板语法，来实现泛型
auto plus = [] (auto first, auto second) { return first + second; };\nmutable 表示允许修改按值捕获的变量
\nint a = 123;\nauto f = [a](int x) mutable { a=x;cout<<a<<endl; };\n// 不加 mutable 则报编译错误\nf(456); // 456\ncout << a; // 123\n异常规范同普通函数
\nauto err = []() noexcept { throw "ERROR"; };\n// 编译器警告\n返回类型可以自动推导时无需声明返回类型。
\n#include <iostream>\n#include <functional>\nusing namespace std;\nint main()\n{\n auto add_two_integers = [](int x) -> function<int(int)>\n {// 这里也是可以自动推导返回类型的\n return [=](int y) { return x + y; };\n };\n cout << add_two_integers(1)(2); // 3\n}\nlambda 函数根据 capture 子句获取封闭范围捕获的变量
\nstd::function<>类模板 std::function 是通用多态函数封装器。
std::function 的实例能存储、复制及调用任何可调用函数对象（函数指针、函数符、lambda 表达式）的类型。
尖括号中传入函数对象表达的函数的类型：
function<int(int,int)> add = [](auto a, auto b){return a+b;};\nstd::invoke()std::ref()std::bind() std::placeholders （弃用）智能指针利用对象来管理指针，该对象是存储于栈中的普通对象，因此在离开作用域时会自动调用折构函数而释放指针。
要管理指针，引来了所有权问题（指针所有者唯一）。
所有智能指针类使用 explicit 构造函数。
\nauto_ptr 在 C++98 引入，于 C++11 废弃。定义于头文件 memory
\n#include <memory>\nusing std::string;\nusing std::auto_ptr;\nvoid remodel(string & str){\n auto_ptr<string> ps (new string(str));\n // or: auto_ptr<string> ps = new string(str);\n // ... do something\n if(weird_thing()){\n throw exception();\n }\n str = *ps;\n return; // 自动销毁智能指针 ps\n}\n赋值操作转让所有权
\nauto_ptr<string> p1 = new string("hello");\nauto_ptr<string> p2;\np2 = p1; // p1具有的指针所有权已移动至p2\n\ncout << *p1; // 错误，p1 是空指针（悬垂指针）\ncout << (void*)&*p1 << endl; // => 0\ncout << *p2; // => hello\n自 C++11 起，使用 unique_ptr 替代 auto_ptr。
unique_ptr 关闭了 auto_ptr 的赋值语义，避免留下悬垂指针。
unique_ptr<string> p1 (new string("hello"));\nunique_ptr<string> p2;\np2 = p1; // 编译器直接在这一行报错\n\np2 = move(p1); // 允许显式使用move函数\n程序试图将一个 unique_ptr 赋给另一个时，如果源 unique_ptr 是个临时右值，编译器允许这样做；
如果源 unique_ptr 将存在一段时间，编译器将禁止这样做。
此外， unique_ptr 还可以用于数组，折构函数将使用 delete[] 释放内存（auto_ptr 和 shared_ptr 则不行）
关于 make_unique() ，参考文档
shared_ptr 就是引用计数指针，只有当引用计数为零时才释放指针。
\nshared_ptr<int> p1(new int(2));\nshared_ptr<int> p2(p1);\nshared_ptr<int> p3;\np3 = p2;\n\ncout << *p1 << endl; // => 2\ncout << *p1.get() << endl; // => 2\n\np1.reset(new int(3)); // p1不再指向new int(2)\np2 = shared_ptr<int>(new int(4)); // p2不再指向new int(2)\ncout << p3.use_count(); // => 1 返回所有者的数量，p3仍指向new int(2)\nweak_ptr 用于处理循环引用。
\n\n\n","tags":["cpp"]},{"id":"cpp-rtti","url":"https://yieldray.fun/posts/cpp-rtti","title":"c++RTTI","date_published":"2022-08-15T18:30:00.000Z","date_modified":"2022-08-15T18:30:00.000Z","content_text":"待补
\n
RTTI 允许程序在运行时确定对象的类型。
\nC++ 类型转换运算符将传统 C 语言的类型转换进行了细分。
类型转换运算符的形式类似于泛型函数，尖括号指定目标类型，括号传入目标变量。
https://docs.microsoft.com/zh-cn/cpp/cpp/casting-operators
\ntype_info typeid()https://docs.microsoft.com/zh-cn/cpp/cpp/run-time-type-information
运行时类型信息
typeid() 运算符可以临时获取 type_info 类，括号内部既可以是变量，也可以是类型。
关于 type_info 类的定义，参见：https://docs.microsoft.com/zh-cn/cpp/cpp/type-info-class
const type_info &inf = typeid(123 * 0.1);\ncout << inf.name() << endl\n << inf.raw_name() << endl\n << inf.hash_code() << endl;\n\ntemplate <typename T>\nT max(T lhs, T rhs) {\n cout << "Compared type is: " << typeid(T).name() << endl;\n return (lhs > rhs ? lhs : rhs);\n}\ndynamic_cast<T>()https://docs.microsoft.com/zh-cn/cpp/cpp/dynamic-cast-operator
\n在运行时进行类型转换，允许在类层次结构中进行向上转换（向下转型）
\n转换失败时，对于指针，返回 0；对于引用，抛出 bad_cast 异常（定义于头文件 typeinfo）
const_cast<T>()https://docs.microsoft.com/zh-cn/cpp/cpp/const-cast-operator
\nconst_cast 运算符用于改变 const 或 volatile
const_cast 允许临时将 const 类型转换为非 const 类型，但除 const 部分的类型不能修改
static_cast<T>()https://docs.microsoft.com/zh-cn/cpp/cpp/static-cast-operator
\nstatic_cast 对应于 dynamic_cast， 不会进行运行时类型检查（进行编译时检查，失败时抛出编译错误）
static_cast 运算符用于告诉编译器进行显示类型转换，例如将精度大的类型转换为精度小的类型
reinterpret_cast<T>()https://docs.microsoft.com/zh-cn/cpp/cpp/reinterpret-cast-operator
\nreinterpret_cast 运算符允许除转换除 const 和 volatile 以外的任何类型（甚至将整形解释为指针）
\n","tags":["cpp"]},{"id":"java-jdbc","url":"https://yieldray.fun/posts/java-jdbc","title":"java使用jdbc","date_published":"2022-08-14T22:22:22.000Z","date_modified":"2022-08-14T22:22:22.000Z","content_text":"JDBC 定义了访问和处理（关系型）数据库的接口
\n主要有这两个包提供：java.sql 和 javax.sql
\njava.sql.Types 定义了数据库类型与 java 类型的映射
\n通过 jdbc 访问数据库需要项目安装对应数据库的驱动，依赖类型只需为<scope>runtime</scope>
例如，MySQL 的驱动：https://mvnrepository.com/artifact/mysql/mysql-connector-java
安装与 MySQL 服务器对应版本的驱动即可
<dependency>\n <groupId>mysql</groupId>\n <artifactId>mysql-connector-java</artifactId>\n <version>x.x.x</version>\n <scope>runtime</scope>\n</dependency>\n查询，executeQuery
\nimport java.sql.*;\n\npublic class Main {\n public static void main(String[] args) throws Exception {\n final String JDBC_URL = "jdbc:mysql://localhost:3306/dbname?useSSL=false&characterEncoding=utf8";\n final String JDBC_USER = "root";\n final String JDBC_PASSWORD = "pa$$word";\n\n // 连接数据库\n try (Connection conn = DriverManager.getConnection(JDBC_URL, JDBC_USER, JDBC_PASSWORD)) {\n // 直接构造 SQL\n try (Statement stmt = conn.createStatement()) {\n try (ResultSet rs = stmt.executeQuery("SELECT id, grade, name, gender FROM students WHERE gender=1")) {\n while (rs.next()) {\n // 必须根据 SELECT 语句查询的顺序来调用ResultSet上面的方法，否则将抛出异常\n long id = rs.getLong(1); // 注意：索引从1开始\n long grade = rs.getLong(2);\n String name = rs.getString(3);\n int gender = rs.getInt(4);\n }\n }\n }\n // 使用 PreparedStatement\n try (PreparedStatement ps = conn.prepareStatement("SELECT id, grade, name, gender FROM students WHERE gender=? AND grade=?")) {\n ps.setObject(1, "M"); // 注意：索引从1开始\n ps.setObject(2, 3);\n try (ResultSet rs = ps.executeQuery()) {\n while (rs.next()) {\n long id = rs.getLong("id");\n long grade = rs.getLong("grade");\n String name = rs.getString("name");\n String gender = rs.getString("gender");\n }\n }\n }\n // 释放 Connection\n }\n }\n}\n插入，executeUpdate
插入时应始终使用 PreparedStatement
try (PreparedStatement ps = conn.prepareStatement(\n "INSERT INTO students (grade, name, gender) VALUES (?,?,?)",\n Statement.RETURN_GENERATED_KEYS))\n// 如果需要获取自增主键，需要指定 prepareStatement 函数的第二个参数\n{\n ps.setObject(1, 1); // grade\n ps.setObject(2, "Bob"); // name\n ps.setObject(3, "M"); // gender\n int n = ps.executeUpdate(); // 返回表中受影响的行数，这里将返回 1\n try (ResultSet rs = ps.getGeneratedKeys()) {\n if (rs.next()) {\n long id = rs.getLong(1); // 注意：索引从1开始\n }\n }\n}\n更新和删除语句和插入语句调用方法一致。
\n使用 addBatch/executeBatch 而不是直接循环来执行批量操作
\ntry (PreparedStatement ps = conn.prepareStatement("INSERT INTO students (name, gender, grade, score) VALUES (?, ?, ?, ?)")) {\n for (Student s : students) {\n ps.setString(1, s.name);\n ps.setBoolean(2, s.gender);\n ps.setInt(3, s.grade);\n ps.setInt(4, s.score);\n ps.addBatch(); // 每次循环结束，执行addBatch方法\n }\n // 运行所有添加的batch\n int[] ns = ps.executeBatch();\n // 一般来说，此方法返回值类似于executeUpdate方法，只不过返回的是数组\n}\ntry (Connection conn = DriverManager.getConnection(JDBC_URL, JDBC_USER, JDBC_PASSWORD)) {\n // 手动修改隔离级别，否则使用默认值\n try {\n conn.setTransactionIsolation(Connection.TRANSACTION_READ_COMMITTED);\n } catch (SQLException e) {\n // ... ...\n }\n // 执行事务\n try {\n // 必须关闭自动提交，才可以执行事务\n conn.setAutoCommit(false);\n // 执行多条SQL语句:\n insert();\n update();\n delete();\n // 提交事务:\n conn.commit();\n } catch (SQLException e) {\n // 回滚事务:\n conn.rollback();\n } finally {\n // 必须开启自动提交，因为单条SQL语句是隐式事务\n conn.setAutoCommit(true);\n }\n // 自动释放 Connection（conn.close()）\n}\n标准库仅提供了接口javax.sql.DataSource，标准库没有提供接口实现。
第三方实现：HikariCP 是 spring boot 的默认数据库连接池
观察器都是异步的，因此会性能更好
\nhttps://developer.mozilla.org/docs/Web/API/Intersection_Observer_API
https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry
交叉区域：被观察元素在根元素中的可见区域
\nconst io = new IntersectionObserver(\n /* IntersectionObserverCallback */\n (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {\n // entries : https://developer.mozilla.org/docs/Web/API/IntersectionObserverEntry\n // observer: 当前 IntersectionObserver 实例\n entries.forEach((entry) => {\n // 每一个 entry 都描述了一个被观察元素的 intersection 变化\n // 相当于 被观察元素.getBoundingClientRect()\n // entry.boundingClientRect\n // 等于 intersectionRect 与 boundingClientRect 的比例，[0, 1]\n // entry.intersectionRatio\n // 相当于 交叉区域的 DOMRectReadOnly\n // entry.intersectionRect\n // 是否交叉\n // entry.isIntersecting\n // 相当于 根元素的.getBoundingClientRect()\n // entry.rootBounds\n // 等于被观察元素\n // entry.target\n // intersection 变化发生的时间戳\n // entry.time\n });\n },\n /* IntersectionObserverInit */\n {\n root: document.querySelector("#scrollArea"),\n // 指定根 (root) 元素，用于检查目标的可见性。必须是目标元素的父级元素。\n // 如果未指定或者为 null，则默认为浏览器视窗。\n rootMargin: "0px",\n // 根 (root) 元素的外边距。类似于 CSS 中的 margin 属性，\n // 比如 "10px 20px 30px 40px" (top, right, bottom, left)。\n // 如果有指定 root 参数，则 rootMargin 也可以使用百分比来取值。\n // 该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围，\n // 使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为 0。\n threshold: 1.0,\n // 可以是单一的 number 也可以是 number 数组，\n // target 元素和 root 元素相交程度达到该值的时候\n // IntersectionObserver 注册的回调函数将会被执行。\n // 如果你只是想要探测当 target 元素的在 root 元素中的可见性超过 50% 的时候，\n // 你可以指定该属性值为 0.5。\n // 如果你想要 target 元素在 root 元素的可见程度每多 25% 就执行一次回调，\n // 那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。\n // 默认值是 0 (意味着只要有一个 target 像素出现在 root 元素中，回调函数将会被执行)。\n // 该值为 1.0 的含义是当 target 完全出现在 root 元素中时候 回调才会被执行。\n },\n);\n\n// 开始监听指定元素\nio.observe(document.querySelector("#target"));\n\n// 停止监听指定元素\nio.unobserve(document.querySelector("#target"));\n\n// 停止监听所有元素\nio.disconnect();\n\n// 即时获取 IntersectionObserverEntry 对象数组，同 IntersectionObserver 回调函数的第一个参数\nconst entries = intersectionObserver.takeRecords();\n简单示例：
\n_______________\n|-------------|\n| #nav |\n|-------------|\n| |\n| |\n| |\n| |\n| |\n\nconst nav = document.getElementById("nav");\nconst io = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => console.log(entry));\n },\n {\n threshold: [1],\n },\n);\nio.observe(nav);\n// 在页面加载完成后立即触发一次\n// 由于浏览器默认的body具有margin，此时nav的顶部与视窗顶部具有一小段距离\n// 向下滚动页面，nav的顶部到达视窗顶时，触发一次\n// 继续向下滚动\n// 向上滚动页面，nav的顶部到达视窗顶时，触发一次\n// ... ...\nconst io = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => console.log(entry));\n },\n {\n threshold: [0],\n },\n);\nio.observe(nav);\n// 在页面加载完成后立即触发一次\n// 向下滚动直至nav的底部到达视窗顶时，触发一次\n// ... ...\n// 回调总是立即调用一次，无论 threshold 指定为任何值\ndocument.addEventListener("DOMContentLoaded", () => {\n io.observe(nav);\n});\nhttps://developer.mozilla.org/docs/Web/API/MutationObserver
\nconst mo = new MutationObserver((mutations: MutationRecord[], observer: MutationObserver) => {\n // entries : https://developer.mozilla.org/docs/Web/API/MutationRecord\n // observer: 当前 MutationObserver 实例\n});\n\ninterface MutationRecord {\n readonly addedNodes: NodeList;\n readonly attributeName: string | null;\n readonly attributeNamespace: string | null;\n readonly nextSibling: Node | null;\n readonly oldValue: string | null;\n readonly previousSibling: Node | null;\n readonly removedNodes: NodeList;\n readonly target: Node;\n readonly type: "attributes" | "characterData" | "childList";\n}\n\nmo.observe(targetNode, config as MutationObserverInit);\n\ninterface MutationObserverInit {\n /** 当为 true 时，将会监听以 target 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 target。默认值为 false。 */\n subtree?: boolean;\n /** 当为 true 时，监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）。默认值为 false。 */\n childList?: boolean;\n\n /** 当为 true 时观察所有监听的节点属性值的变化。默认值为 true，当声明了 attributeFilter 或 attributeOldValue，默认值则为 false。 */\n attributes?: boolean;\n /** 一个用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。 */\n attributeFilter?: string[];\n /** 当为 true 时，记录上一次被监听的节点的属性变化；可查阅监听属性值了解关于观察属性变化和属性值记录的详情。默认值为 false。 */\n attributeOldValue?: boolean;\n\n /** 当为 true 时，监听声明的 target 节点上所有字符的变化。默认值为 true，如果声明了 characterDataOldValue，默认值则为 false */\n characterData?: boolean;\n /** 当为 true 时，记录前一个被监听的节点中发生的文本变化。默认值为 false */\n characterDataOldValue?: boolean;\n}\n\n// 停止监听\n// 注意没有 unobserve 方法\nmo.disconnect();\n\n// 立即获取 MutationRecord 数组\nconst entries = mo.takeRecords();\nhttps://developer.mozilla.org/docs/Web/API/ResizeObserver
\n监听元素的内容区域（不包括 padding）或 SVG 元素的边界框改变。
\nconst ro = new ResizeObserver((entries: ResizeObserverEntry[], observer: ResizeObserver) => {\n // entries: https://developer.mozilla.org/docs/Web/API/ResizeObserverEntry\n for (let entry of entries) {\n // entry.target\n // entry.borderBoxSize\n // entry.contentBoxSize\n // entry.devicePixelContentBoxSize\n // entry.contentRect\n console.log(entry);\n }\n});\n\nro.observe(document.querySelector("#example"), options as ResizeObserverOptions);\n\ninterface ResizeObserverOptions {\n box?: ResizeObserverBoxOptions;\n}\n\nro.unobserve(document.querySelector("#example"));\n\nro.disconnect();\nhttps://developer.mozilla.org/docs/Web/API/PerformanceObserver
\nhttps://developer.mozilla.org/docs/Web/API/ReportingObserver
\n","tags":["web-api","js"]},{"id":"js-pinia-intro","url":"https://yieldray.fun/posts/js-pinia-intro","title":"pinia入门","date_published":"2022-08-12T13:13:13.000Z","date_modified":"2022-08-12T13:13:13.000Z","content_text":"pinia 是 vue 的状态管理库
\n创建 store
\nimport { defineStore } from "pinia";\n\n// useStore 可以是 useUser、useCart 之类的任何东西\n// 第一个参数是应用程序中 store 的唯一 id\nexport const useStore = defineStore("storeId", {\n state: () => {\n return {\n counter: 0,\n name: "Eduardo",\n isAdmin: true,\n };\n },\n getters: {\n doubleCount: (state) => state.counter * 2,\n },\n // other options...\n});\n在 vue 应用中使用 store
\n<script>\n import { useStore } from "@/stores/counter";\n\n export default {\n setup() {\n const store = useStore();\n // store 是一个用 reactive 包裹的对象\n return {\n // 返回整个 store 实例以在模板中使用它\n store,\n };\n },\n };\n</script>\n提取 store 属性同时保持其响应式
\n<script>\n import { storeToRefs } from "pinia";\n\n export default defineComponent({\n setup() {\n const store = useStore();\n // `name` 和 `doubleCount` 是响应式引用\n // 这也会为插件添加的属性创建引用\n // 但跳过任何 action 或 非响应式（不是 ref/reactive）的属性\n const { name, doubleCount } = storeToRefs(store);\n\n return {\n name,\n doubleCount,\n };\n },\n });\n</script>\n重置状态为初始值
\nimport { defineStore } from "pinia";\n\nconst useStore = defineStore("storeId", {\n state: () => {\n return {\n counter: 0,\n };\n },\n});\n\nconst store = useStore();\nstore.$reset();\n改变状态
\nconst store = useStore();\n// 直接改变状态\nstore.counter++;\n// 替换状态\nstore.$state = { counter: 666, name: "Paimon" };\n// 批量改变状态\nstore.$patch({\n counter: store.counter + 1,\n name: "Abalam",\n});\n// 函数式批量改变状态，对于数组的修改尤为方便\ncartStore.$patch((state) => {\n state.items.push({ name: "shoes", quantity: 1 });\n state.hasChanged = true;\n});\n// 订阅状态\ncartStore.$subscribe((mutation, state) => {\n // import { MutationType } from 'pinia'\n mutation.type; // 'direct' | 'patch object' | 'patch function'\n // 与 cartStore.$id 相同\n mutation.storeId; // 'cart'\n // 仅适用于 mutation.type === 'patch object'\n mutation.payload; // 补丁对象传递给 to cartStore.$patch()\n\n // 每当它发生变化时，将整个状态持久化到本地存储\n localStorage.setItem("cart", JSON.stringify(state));\n});\n不使用组合式 API （setup() hook）时
<script>\n import { mapState } from "pinia";\n import { useCounterStore } from "../stores/counterStore";\n\n export default {\n computed: {\n // 允许访问组件内部的 this.counter\n // 与从 store.counter 读取相同\n ...mapState(useCounterStore, {\n // myOwnName 映射到 store 的 counter 属性\n myOwnName: "counter",\n // 您还可以编写一个访问 store 的函数\n double: (store) => store.counter * 2,\n // 它可以正常读取“this”，但无法正常写入...\n magicValue(store) {\n return store.someGetter + this.counter + this.double;\n },\n }),\n // 如果需要这些状态（原始值）可写，使用 mapWritableState() 函数替代\n // 注意，如果是对象或数组直接使用 mapState 即可，无需使用此函数\n ...mapWritableState(useCounterStore, ["counter"]),\n // 当然也可以进行重导出，就像上方 mapState 一样\n ...mapWritableState(useCounterStore, {\n myOwnName: "counter",\n }),\n },\n };\n</script>\ngetters 相当于 computed
\nexport const useStore = defineStore("main", {\n state: () => ({\n counter: 0,\n }),\n getters: {\n // 使用 state 参数时，自动将返回类型推断为数字\n doubleCount(state) {\n return state.counter * 2;\n // or: doubleCount: (state) => state.counter * 2,\n },\n // 使用 this 时，返回类型必须明确设置\n doublePlusOne(): number {\n return this.counter * 2 + 1;\n },\n },\n});\nactions 相当于 methods
\nexport const useStore = defineStore("main", {\n state: () => ({\n counter: 0,\n }),\n actions: {\n increment() {\n this.counter++;\n },\n randomizeCounter() {\n this.counter = Math.round(100 * Math.random());\n },\n async login(username, password) {\n // actions 可以是异步的\n },\n },\n});\n订阅 actions
\nconst unsubscribe = someStore.$onAction(\n ({\n name, // action 的名字\n store, // store 实例\n args, // 调用这个 action 的参数\n after, // 在这个 action 执行完毕之后，执行这个函数\n onError, // 在这个 action 抛出异常的时候，执行这个函数\n }) => {\n // 记录开始的时间变量\n const startTime = Date.now();\n // 这将在 `store` 上的操作执行之前触发\n console.log(`Start "${name}" with params [${args.join(", ")}].`);\n\n // 如果 action 成功并且完全运行后，after 将触发。\n // 它将等待任何返回的 promise\n after((result) => {\n console.log(`Finished "${name}" after ${Date.now() - startTime}ms.\\nResult: ${result}.`);\n });\n\n // 如果 action 抛出或返回 Promise.reject ，onError 将触发\n onError((error) => {\n console.warn(`Failed "${name}" after ${Date.now() - startTime}ms.\\nError: ${error}.`);\n });\n },\n);\n\n// 手动移除订阅\nunsubscribe();\n注意，无论是 state 订阅还是 actions 订阅，如果 store 位于组件的 setup() 内
那么组件卸载时自动取消订阅
需要在卸载组件后保留，则：
\nsomeStore.$onAction(callback, true);\nsomeStore.$subscribe(callback, { detached: true });\nhttps://pinia.web3doc.top/core-concepts/plugins.html
\n","tags":["js","lib"]},{"id":"docker-intro","url":"https://yieldray.fun/posts/docker-intro","title":"docker入门","date_published":"2022-08-11T10:00:00.000Z","date_modified":"2022-08-11T10:00:00.000Z","content_text":"https://docs.docker.com/engine/install/
https://docs.docker.com/get-started/
https://labs.play-with-docker.com/
https://github.com/jaywcjlove/docker-tutorial
https://www.ruanyifeng.com/blog/2018/02/docker-tutorial.html
容器是在宿主机运行的，与其它所有进程隔离的沙盒化的进程，是运行中的镜像的实例。
\n（Docker 是 C/S 架构，我们可以使用命令行控制该容器）
\n容器需要在隔离的文件系统中运行（试想 chroot），这个文件系统就是由镜像提供的。
\n使用 docker，我们将应用程序与该程序的依赖，打包在一个镜像文件中。
\n镜像文件也可包括容器所需的其它配置项，例如环境变量、默认的启动命令以及其它元数据。
\ndocker 根据该文件生成虚拟容器。程序在这个虚拟容器里运行，运行时生成自己的容器文件。
\n简单来说，镜像文件就是生成 docker 应用的模板。
\n镜像完整名为：[registry[:port]/][group/]image[:tag]
registry 用于存放镜像文件，默认源为 https://registry.hub.docker.com，国内可参考修改之
默认组为 library（Docker 官方提供），因此 hello-world 相当于 library/hello-world
# 拉取\ndocker image pull hello-world\n# 查看\ndocker image ls\n# 查看（更短）\ndocker ps\n# 运行\ndocker container run hello-world\n注意 docker container run 命令在本地没有指定镜像时会自动从远程拉取。
运行上面的 hello-world 镜像，该容器内部会执行一个二进制文件并打印一段消息到标准输出，然后自动停止。
再次注意 Docker 是 C/S 架构，二进制文件在容器中运行，容器的标准输出当然并不是宿主机的标准输出。
因此实际上是 Docker daemon 将容器内部的标准输出转发到宿主机上了。
下面镜像生成的容器不会自动停止，而是生成伪终端，使我们进入容器的 Shell
\n# -i, --interactive Keep STDIN open even if not attached\n# -t, --tty Allocate a pseudo-TTY\ndocker run -it ubuntu bash\n# 运行上面的命令后我们已经进入容器的 Shell，可以输入 exit 退出（或 Ctrl+D）\n# 要仅脱离 Shell，键入 Ctrl+P+Q\n\n# 如果我们没有使用 -it 参数，自然就不会直接进入容器的 Shell\n# 此时可以尝试下面的命令\n\n# 查看容器的标准输出（containerID 只需要输入前几位）\ndocker container logs [containerID]\n# 生成伪终端，并执行容器内的 bash 命令\ndocker container exec -it [containerID] /bin/bash\n# 将容器内的文件复制到宿主机\ndocker container cp [containID]:[/path/to/file] .\n\n# 终止容器（向容器内的主进程发出 SIGKILL 信号）\ndocker container kill [containID]\n# 发送 SIGTERM 信号，过一段时间再发出 SIGKILL 信号\ndocker container stop [containID]\n# 终止运行的容器文件，依然会占据硬盘空间\ndocker container ls --all\ndocker container rm [containerID]\n\n\n\n
Dockerfile只是用于生成镜像文件的脚本，可以只使用 docker 命令行达成相同的效果
不过Dockerfile更有利于版本控制
下面给出一个 nodejs 的示例，首先创建工作目录
\nmkdir workspace\ncd workspace\necho -e "node_modules" > .dockerignore\nnpm i express\necho -e "require('express')().listen(3000).on('listening',()=>console.log(process))" > index.js\ntouch Dockerfile\n编辑 Dockerfile 文件
# syntax=docker/dockerfile:1\n\n# 继承指定镜像，可以在 https://index.docker.io/ 查看镜像\nFROM node:18-alpine\n# 设置镜像工作目录\nWORKDIR /app\n# 将当前目录的所有文件复制到镜像文件的 /app 目录\nCOPY . /app\n# 运行 shell 命令\nRUN npm install\n# 暴露镜像的 3000 端口\nEXPOSE 3000\n# 设置启动时默认执行的命令\nCMD ["node", "index.js"]\n# 构建镜像（build 子命令自动寻找 Dockerfile 文件）\ndocker image build -t docker-test[:版本] .\n# 将宿主机的 8000 端口绑定至容器的 3000 端口\n# --rm 参数使容器在运行结束后自动删除容器文件\ndocker container run [--rm] -p 8000:3000 -it docker-test [/bin/bash]\n# 列出容器\ndocker container ls [-all]\n# 恢复运行容器文件（不要指定 --rm）\ndocker container start [containID]\n发布镜像，参见：https://docs.docker.com/get-started/04_sharing_app/
\nDocker 的每个容器应当仅运行单个应用，但一个完整的服务往往由多个应用组成。
Docker Compose 可用于容器编排。如果没有它，则需要手动运行多个冗长的 docker 命令。
# -d Run container in background and print container ID\n# --network <network> Connect a container to a network\n# --network-alias <alias> Add network-scoped alias for the container\n# -v <local_dir>:<remote_dir> Bind mount a volume\n# -e <env> Set environment variables\ndocker run -d \\\n --network todo-app --network-alias mysql \\\n -v todo-mysql-data:/var/lib/mysql \\\n -e MYSQL_ROOT_PASSWORD=secret \\\n -e MYSQL_DATABASE=todos \\\n mysql:8.0\n\n# docker exec -it <mysql-container-id> mysql -u root -p\n# 指定 --network-alias mysql 后\n# 可以在其它容器（也指定了 --network todo-app）内直接连接 mysql:3306\n\n\n# -w <workdir> Working directory inside the container\n# -p <local>:<remote> Publish a container's port(s) to the host\ndocker run -dp 127.0.0.1:3000:3000 \\\n -w /app -v "$(pwd):/app" \\\n --network todo-app \\\n -e MYSQL_HOST=mysql:3306 \\\n -e MYSQL_USER=root \\\n -e MYSQL_PASSWORD=secret \\\n -e MYSQL_DB=todos \\\n node:18-alpine \\\n sh -c "yarn install && yarn run dev"\n使用 Docker Compose，可以改写为如下 compose.yaml 文件
services:\n app:\n image: node:18-alpine\n command: sh -c "yarn install && yarn run dev"\n ports:\n - 127.0.0.1:3000:3000\n working_dir: /app\n volumes:\n - ./:/app\n environment:\n MYSQL_HOST: mysql\n MYSQL_USER: root\n MYSQL_PASSWORD: secret\n MYSQL_DB: todos\n\n mysql:\n image: mysql:8.0\n volumes:\n - todo-mysql-data:/var/lib/mysql\n environment:\n MYSQL_ROOT_PASSWORD: secret\n MYSQL_DATABASE: todos\n\nvolumes:\n todo-mysql-data:\n使用如下命令运行
\ndocker compose up -d\nimport { createStore } from "redux";\n\n// store 是 redux 存储数据的地方\n// reducer 函数用于描述数据如何改变（给定任意 action）\nconst store = createStore(reducer[, init]);\n// state 对象表现了 store 的瞬时状态（快照）\nconst state = store.getState();\n// action 对象会派发给 reducer 进行操作，携带了供 reducer 函数操作的信息\nstore.dispatch(action);\n// 可以使用 listener 函数订阅 store 的变化\nconst unsubscribe = store.subscribe(listener);\n// redux 中的 action 一般有如下结构\nconst ADD_TODO = "ADD_TODO";\nconst action_1 = {\n type: ADD_TODO,\n text: "Build my first Redux app",\n};\n// 为了简洁，以下直接使用字符串而不是常量作为type\nconst action_1 = {\n type: "ADD_TODO",\n text: "Build my first Redux app",\n};\n// 在redux中，为了方便生成一类 type 的 action，一般使用函数生成 action 如下\nfunction addTodo(text) {\n return {\n type: "ADD_TODO",\n text,\n };\n}\nconst action_1 = addTodo("Build my first Redux app");\nreducer 是纯函数，描述 action 如何改变 state
\nconst defaultState = {}; // 默认值是可选的，也可以在 createStore 函数中指定\n// reducer 函数通过当前 state 和当前 action 计算出下一次的 state （并返回）\n// 当前指的是 store.dispatch(action) 调用执行的前一刻\n// 很明显，store.dispatch(action) 调用的内部提供了 reducer 函数需要的 state 和 action 参数\n// 并且，在该调用完成之后，store.getState() 就反应计算后的 state 了\nconst reducer = (state = defaultState, action) => {\n switch (action.type) {\n case "ADD_TODO":\n return Object.assign({}, state, { currentTodo: action.text });\n // 不应修改 state 对象，应当认为 state 是只读的\n default:\n return state;\n }\n};\n结合之前的代码
\nconst store = createStore(reducer, { currentTodo: "None" }); // 初始值可选\nstore.dispatch(addTodo("Build my first Redux app"));\nconst { currentTodo } = store.getState(); // => Build my first Redux app\n如何保持 reducer 的纯洁性?
\n// 对于对象，除了使用 Object.assign 之外，还可以\nreturn { ...state, replaceOrSetNewKey: value, ...orDestructAnotherObject };\n// 对于数组，也可以使解构\nreturn [...state, ...newState];\n// 使用数组concat\nreturn state.concat(newState);\n// 总之，只要保证是纯函数即可\nstate 反映的 store 的当前状态，应当认为是只读的
\nconst state = store.getState();\nlistener 只是一个 store 变化就会触发的函数而已
\nconst unsubscribe = store.subscribe(() => console.log("Current state is: ", store.getState()));\nstore.dispatch(addTodo("Store is changed"));\nunsubscribe();\n一个应用只能有一个 store，但在数据较多时将导致 reducer 函数臃肿
可以将 reducer 拆分为多个子 reducer（每个子 reducer 负责对应的属性），然后通过 combineReducers 函数合并
function todos(state = [], action) {\n switch (action.type) {\n case "ADD_TODO":\n return state.concat({\n text: action.text,\n completed: false,\n });\n\n case "TOGGLE_TODO":\n return state.map((todo, index) =>\n index === action.index ? { ...todo, completed: !todo.completed } : todo,\n );\n\n default:\n return state;\n }\n}\n\nfunction visibilityFilter(state = "SHOW_ALL", action) {\n switch (action.type) {\n case "SET_VISIBILITY_FILTER":\n return action.filter;\n default:\n return state;\n }\n}\n\n// 在不使用 combineReducers 工具函数时，可以这样写\nfunction todoApp(state = {}, action) {\n return {\n visibilityFilter: visibilityFilter(state.visibilityFilter, action),\n todos: todos(state.todos, action),\n };\n}\n\n// 使用 combineReducers\nimport { combineReducers } from "redux";\nconst todoApp = combineReducers({\n visibilityFilter,\n todos,\n});\n\n// 注意，在合并子 reducer 时，完全可以将 子reducer 重命名为 reducer 的其它属性\nfunction tag(...args) {\n console.log(JSON.stringify(args, null, 4));\n}\ntag`Hello`; // => [["Hello"]]\ntag`Hello, world!`; // [["Hello, world!"]]\ntag`Hello, ${"world"}!`; // [["Hello, ", "!"], "world"]\ntag`left ${123} right`; // [["left ", " right"], 123]\ntag`one${1}two${2}tree${3}`; // [["one", "two", "tree", ""], 1, 2, 3]\ntag`obj${{}}arr${[]}`; // [["obj", "arr", ""], {}, []]\n通用形式
\ninterface TemplateStringsArray extends ReadonlyArray<string> {\n readonly raw: readonly string[];\n}\n\nfunction tag(strings: TemplateStringsArray, ...data: string[]) {\n console.log(strings);\n console.log(data);\n}\n通过观察可以发现，strings.length === data.length + 1 必然成立![\"tagged-templates.png\"](\"https://s2.loli.net/2022/08/12/MYpFqc891uRmSUd.png\")
参见
https://github.com/jaywcjlove/mysql-tutorial
https://dev.mysql.com/doc/refman/8.0/en/
https://learn.microsoft.com/zh-cn/sql/sql-server/
https://mariadb.com/kb/en/sql-statements/
-- 创建数据库\nCREATE DATABASE <数据库名>;\n-- 创建并设定字符集\nCREATE DATABASE <数据库名> CHARACTER SET utf8;\n-- 删除数据库\nDROP DATABASE <数据库名>;\n-- 修改数据库字符集\nALTER DATABASE <数据库名> CHARACTER SET utf8;\n\n\n-- 列出所有数据库\nSHOW DATABASES;\n-- 切换当前数据库\nUSE <数据库名>;\n\n\n-- 显示连接的用户进程\nSHOW PROCESSLIST;\n-- 删除连接\nKILL <进程号>;\nhttps://dev.mysql.com/doc/refman/8.0/en/data-types.html
https://learn.microsoft.com/zh-cn/sql/t-sql/data-types/data-types-transact-sql
常用列类型：
\n常用列常量：
\n-- 列出当前数据库的所有表\nSHOW TABLES;\n-- 查看创建表的SQL语句\nSHOW CREATE TABLE <表名>;\n-- 查看一个表的结构\nDESC <表名>;\nDESCRIBE <表名>;\nSHOW FIELDS FROM <表名>;\n\n\n-- 创建表\nCREATE TABLE <表名> (\n <列名1> <列类型1>,\n <列名2> <列类型2>,\n <列名3> <列类型3>,\n PRIMARY KEY (<列名1>),\n FOREIGN KEY (<列名2>) REFERENCES <表名2>(<列名2>)\n);\n\n-- 使用 IF (NOT) EXISTS 时，不会报错\nCREATE TABLE IF NOT EXISTS <表名> (\n <列名> <列类型> <列常量> DEFAULT <默认值>,\n …\n);\n\n-- 增加列\nALTER TABLE <表名>\nADD <新增的列名> <列类型> <可选列常量> DEFAULT <默认值>;\n\n-- 删除列\nALTER TABLE <表名>\nDROP <待删除的列名>;\n\n-- 修改表\nALTER TABLE <表名>\nRENAME TO <新的表名>;\n\n-- 删除表\nDROP TABLE IF EXISTS <表名>;\n-- 删除表但保留定义\nTRUNCATE <表名>;\n-- 保留定义，且可回滚\nDELETE FROM <表名>;\n| 常用条件 | \nSQL | \n示例 | \n
|---|---|---|
| 空值判断 | \nIS/IS NOT NULL | \n<列名> IS NULL | \n
| 比较操作符（注意，是一个等于号） | \n=, !=, < <=, >, >= | \n<列名> <操作符> <值> | \n
| 闭区间 | \nBETWEEN … AND … | \n<列名> BETWEEN <起始值> AND <终止值> | \n
| 反选闭区间 | \nNOT BETWEEN … AND … | \n\n |
| 在集合内 | \nIN (…) | \n<列名> IN (<值1>, <值2>, …) | \n
| 不在集合内 | \nNOT IN (…) | \n\n |
| 不分大小写比较相同字符串 | \nLIKE | \n<列名，字符串类型> LIKE "字符串" | \n
| 不分大小写比较不相同字符串 | \nNOT LIKE | \n\n |
| LIKE 匹配下，表示零个或多个任意字符的占位符 | \n% | \n<列名，字符串类型> LIKE "字符串%" | \n
| LIKE 匹配下，表示一个任意字符的占位符 | \n_ | \n<列名，字符串类型> LIKE "字符串_" | \n
-- 选择所有表\nSELECT * FROM <表名>;\n\n-- 条件选择表\nSELECT <列名1>, <列名2>, … FROM <表名>\nWHERE <条件1>\n AND/OR <条件2>\n AND/OR …\nORDER BY <列名> ASC/DESC\nLIMIT <限制数量> OFFSET <跳过数量>;\n\n-- 过滤重复值\nSELECT DISTINCT <列名1>, <列名2>, … FROM <表名>;\n\n-- 别名\nSELECT <列名> AS <列名的别名>, … FROM <表名>;\nSELECT <函数返回值> AS <命名为某列>, … FROM <表名>;\n\n-- 连接表\nSELECT <列名1>, <列名2>, … FROM <表名>\nINNER/LEFT/RIGHT/FULL JOIN <另一个表名> ON <表名>.<某列名> = <另一个表名>.<某列名>\nWHERE <条件>\nORDER BY <列名1>, … ASC/DESC\nLIMIT <限制数量> OFFSET <跳过数量>;\n\n-- 分组\nSELECT <列名>, <函数返回值> AS <命名为某列>, … FROM <表名>\nWHERE <条件>\nGROUP BY <列名>\nHAVING <条件>;\n\n-- 笛卡尔查询（慎用，多个表相乘）\nSELECT <表或别名>.<列名> <可选别名>,\n <表或别名>.<列名> <可选别名>,\n …\nFROM <表1> <别名1>, <表2> <别名>, …;\n-- 插入一行（值可以由表达式或函数产生）\nINSERT INTO <表名> (<列名1>, <列名2>, <列名3>, …)\nVALUES (<值11>, <值12>, <值13>, …),\nVALUES (<值21>, <值22>, <值23>, …);\n\n-- 插入一行，省略列名\nINSERT INTO <表名>\nVALUES (<值1>, <值2>, <值3>, …);\n\n-- 更新行\nUPDATE <表名>\nSET <列名11> = <值11>, <列名12> = <值12>, ...\n <列名21> = <值21>, <列名22> = <值22>, ...\nWHERE <条件>;\n\n-- 删除行\nDELETE FROM <表名>\nWHERE <条件>;\n视图是虚拟的表，反映了数据的最新状态
\n-- 创建视图\nCREATE VIEW <视图名> AS\n SELECT <列名1>, <列名2>, …\n FROM <表名>\n WHERE <条件>;\n\n-- 删除视图\nDROP VIEW <视图名>;\n\n-- 选择视图\nSELECT * FROM <视图名>;\n-- 返回总行数\nCOUNT(*)\n-- 返回指定列的非空行数\nCOUNT(<列名>)\n-- 返回指定列中所有行中的最小值\nMIN(<列名>)\nMAX(<列名>)\nAVG(<列名>)\nSUM(<列名>)\n-- 取绝对值\nABS(<数字>)\n注意：设计模式适用于面向对象设计
下面演示的代码仅作为一种思路，实际代码不应是死板的，而应根据需要进行编写
\n\n\n参考：
\n
https://refactoringguru.cn/
https://design-patterns.readthedocs.io/zh_CN/latest/
在创建型模式中，我们向调用者隐藏了构建产品的实现过程。
\n工厂方法模式建议使用特殊的工厂方法代替对构造函数的直接调用 （即使用 new 运算符）。\n工厂方法返回的对象通常被称作 “产品”。
\n对于产品，我们（在产品有多种实现时）（在函数签名上）提供的是抽象类，而非具体实现类。
也就是说，产品对应唯一的抽象类（有时也可以是接口）。调用者获取的也是这个抽象类。（调用者面向抽象而非面向实现）
往往使用静态工厂方法：
\nInteger n = Integer.valueOf(100);\nList<String> list = List.of("A", "B", "C");\nMessageDigest md5 = MessageDigest.getInstance("MD5");\n上面，抽象类本身提供了静态方法，用于获取一个抽象类实例。
\n此外，工厂方法还隐藏了对象的构造过程。（其中可能包括缓存等操作，提高性能）
\n在抽象工厂中，我们有多个工厂，这些工厂都可以生产我们需要的产品。
因此，我们将这些工厂抽象化，只需了解抽象工厂就可以生产产品。（因此，调用者无需了解工厂的具体实现）
生成器允许我们分步骤地创建产品。
\nimport java.net.http.*;\nimport java.net.*;\nimport java.time.Duration;\n\npublic class Main {\n public static void main(String[] args) {\n HttpRequest request = HttpRequest.newBuilder() // 获取一个生成器，类型为 HttpRequest.Builder\n .GET()\n .uri(URI.create("https://example.net/"))\n .timeout(Duration.ofSeconds(10))\n .build(); // 获取产品，类型为 HttpRequest\n\n // 下方代码可以忽略\n HttpClient client = HttpClient.newHttpClient();\n client.sendAsync(request, HttpResponse.BodyHandlers.ofString())\n .thenApply(HttpResponse::body)\n .thenAccept(System.out::println)\n .join();\n }\n}\n注意，在 builder() 之后、build() 之前的链式调用中，返回的都是生成器。因此，一般来说构建方法不分顺序。
\n在 java 中，StringBuilder 也是一个常见的 Builder API
\n原型允许我们复制（克隆）一个原有的对象，并且新旧对象相互独立，互不影响。
\nString[] proto = {"One", "Two", "Tree"};\nString[] cloned = Arrays.copyOf(proto, proto.length);\nSystem.out.println(Arrays.equals(proto, cloned)); // => true\n在 java 中，Cloneable 是一个空接口（标记接口），表示实现者可以使用 Object.clone() 方法。
\nclass Example implements Cloneable {\n private int data;\n\n public Object clone() {\n var cloned = new Example();\n cloned.data = this.data; // 复制原型的数据\n return cloned;\n }\n}\n原型模式只适用于原型实例的数据可以被无副作用地复制的情况，否则不符合原型的定义。
\n单例保证这个类只有一个实例， 并提供一个访问该实例的全局节点。
\nclass Singleton {\n // 私有构造函数\n private Singleton() {\n }\n\n private static final Singleton INSTANCE = new Singleton();\n\n // 对外公开getInstance方法获取单例\n public static Singleton getInstance() {\n return INSTANCE;\n }\n}\n结构型模式涉及不同对象之间形成的一种结构
\n![\"adapter.png\"](\"https://s2.loli.net/2022/08/07/NVJAxqg1fQzdjbH.png\")
适配器将我们已有的对象（包装起来），转换为我们希望的对象类型。
因为现有的对象不对接口兼容，因此适配器实际上作为兼容层，提供了我们需要的接口。
例如：
\nInputStream input = otherSource(); // 已有一个InputStream类型\n// 但我们更希望以 Reader 的方式使用\nReader reader = new InputStreamReader(input, StandardCharsets.UTF_8);\n// 这里 InputStreamReader 就作为一个适配器，提供 InputStream 到 Reader 的转换\n// 旧的接口\ninterface OldInterface {\n public void oldFunc();\n}\n\n// 新的接口\ninterface NewInterface {\n public void newFunc();\n}\n\n// 旧的实现类\nclass OldClass implements OldInterface {\n public void oldFunc() {\n }\n}\n\n// 适配器（相当于新的实现类）\nclass Adapter implements NewInterface {\n private OldInterface old;\n\n // 需要持有（包装）需要适配的对象\n public Adapter(OldInterface old) {\n this.old = old;\n }\n\n public void newFunc() {\n old.oldFunc(); // 包装旧接口，转换为新接口\n }\n}\n最终，适配器就符合我们需要的形状（提供需要的接口）
\n![\"bridge.png\"](\"https://s2.loli.net/2022/08/07/D9BFjbLAehOS2nz.png\")
桥接模式可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构，从而能在开发时分别使用。
\n举个例子，我们想编写一个应用程序，这个程序需要在 Windows、Linux、MacOS 平台上都能运行。
我们可以针对每一个平台都编写相应代码，从而支持多种平台。
桥接模式类似于我们选用一种跨平台框架，这个框架已经适配了多个平台。
因此，我们只需针对这个框架编写代码就能实现跨平台。
// 当然，除了interface也可以是class\ninterface Color {}\nclass Red implements Color {}\nclass Blue implements Color {}\n\nabstract class Shape {\n public Color color;\n public abstract void paint();\n}\nclass Square extends Shape {\n public Square(Color color) {this.color = color;}\n public void paint() {}\n}\nclass Circle extends Shape {\n public Circle(Color color) {this.color = color;}\n public void paint() {}\n}\n\n// 使用桥接模式避免了编写如下代码：\nabstract class Shape {\n public abstract void paint();\n}\nclass RedSquare extends Shape{}\n你可以使用组合模式，将对象组合成树状结构，并能像使用独立对象一样使用它们。
\n例如，一颗 DOM 树是由多个子结点“组合”而成的，而子结点又是由它的子节点“组合”而成的。
\n装饰器允许你通过 将对象放入 包含行为的 特殊封装对象中 来为 原对象 绑定 新的行为。
\nInputStream input =\n new GZIPInputStream(\n new BufferedInputStream(\n new FileInputStream("test.gz")\n )\n );\n外观类为包含许多活动部件的复杂子系统提供一个简单的接口。与直接调用子系统相比，外观提供的功能可能比较有限，但它却包含了客户端真正关心的功能。
\n享元模式让我们无需在每个对象中都保存所有数据。而是共享多个对象所共有的相同状态（复用公共状态），让你能在有限的内存容量中载入更多对象。
\n代理模式允许我们代理原对象的行为，（允许我们在原本的行为前后增加新行为）从而增加（或者控制）已有的功能
\n注意，适配器是 X -> Y，代理则是 X -> X
\n行为型模式描述了一组对象应当表现的行为，从而协同完成整体任务。
\n![\"CoR.png\"](\"https://s2.loli.net/2022/08/07/SpEoDULzBsNl9eb.png\")
责任链模式允许我们将请求沿着处理者链进行传递。收到请求后，每个处理者均可对请求进行处理，或将其传递给链上的下个处理者。
\n命令模式在发送者和请求者之间建立单向连接。允许我们将请求转换为一个包含与请求相关的所有信息的独立对象。
该转换根据不同的请求将方法参数化、延迟请求执行或将其放入队列中，且能实现可撤销操作。
例如，我们有多种请求。在命令模式中，我们将不同的请求都封装成同一类型的对象，然后将这个对象发送给实现者。
\n发送者完成了告知命令的要求，而实现者则可以构造一个任务队列进行处理。
\n解释器模式允许我们通过规定一种文法（定义一个解释器）来解释符合规定的输入。
\n数据交换格式（JSON XML）、正则表达式、解释型语言（Python）以及某些 DSL （SQL）都通过解释器模式工作。
\n迭代器模式让我们能在不暴露集合底层表现形式 （列表、 栈和树等） 的情况下遍历集合中所有的元素。
\n在 java 中，能够迭代的对象实现 Iterable<T> 接口，接口方法 iterator() 返回 Iterator<E> 迭代器
迭代器方法主要通过 hasNext() next() 实现迭代
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Iterable.html
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/Iterator.html
中介者模式能让我们减少对象之间混乱无序的依赖关系（阻止对象的直接依赖）。
该模式会限制对象之间的直接交互，迫使它们通过一个中介者对象进行合作（统一依赖一个中介对象实现间接操作）。
备忘录模式允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。
\n典型的例子就是文本编辑器，实现了保存、重做、撤销功能。
\n观察者模式允许我们定义一种订阅机制，可在对象事件发生时通知多个 “观察” 该对象的观察者对象。
\n需要（被）观察的对象应维护一个观察者列表，触发事件时，通知列表中的所有观察者。
\n状态模式是让我们能在一个对象的内部状态变化时改变其行为，使其看上去就像改变了自身所属的类一样。
\n状态模式建议为对象的所有可能状态新建一个类（而不是将行为写死在 if else switch 里），然后将所有状态的对应行为抽取到这些类中。
\n原始对象被称为上下文（context），它并不会自行实现所有行为，
而是保存一个指向表示当前状态的状态对象的引用，且将所有与状态相关的工作委派给该对象。
（所有状态都实现同一接口）
为了实现同一个目标，我们可以有多种策略。策略模式让我们在实现同一个目标时使用唯一接口，但允许我们用额外的选项来切换真正实施的策略。
\n在模板方法模式中，超类中定义了一个算法的框架，允许子类在不修改结构的情况下重写算法的特定步骤。
\n假设我们有一组对象，它们的具有相同的方法，大部分方法的行为相同，但又有一小部分不同。
我们将这些不同的对象都抽象为一个超类，超类的所有方法（可以有默认实现）就是模板（或者说超类本身是模板）。
每个需要与之有不同行为的子类都按需要覆写特定的方法。
访问者模式将算法与其所作用的对象隔离开来。
\n需要执行操作的原始对象将作为参数被传递给访问者中。
\n泛型机制可以看作是一种访问者模式。
某些语言的“鸭子类型”也与之类似，因为我们不关心具体的类型，而是这些类型公共的方法。
interface Element {\n void accept(Visitor v);\n}\n\nclass One implements Element {\n public void accept(Visitor v) {}\n}\n\nclass Two implements Element {\n public void accept(Visitor v) {}\n}\n\ninterface Visitor {\n void visitOne(One one);\n void visitTwo(Two two);\n}\n\nclass SpecialVisitor implements Visitor {\n public void visitOne(One one) {}\n public void visitTwo(Two two) {}\n}\n\n\npublic class Main {\n public static void main(String[] args) {\n // 元素接收（任意）访问者\n new One().accept(new SpecialVisitor());\n // 访问者访问（特定）元素\n new SpecialVisitor().visitTwo(new Two());\n }\n}\n在 这里 阅读 JUnit 的指引文档
文章仅介绍了部分 API，具体参见文档
import static org.junit.jupiter.api.Assertions.*; // 导入Assertions类下的的所有静态方法\n\nimport java.util.*;\n\nimport org.junit.jupiter.api.Test; // Test 注解\nimport org.junit.jupiter.api.condition.*; // 条件相关注解\nimport org.junit.jupiter.params.ParameterizedTest; // 参数化测试相关\nimport org.junit.jupiter.params.provider.*; // 参数化测试，数据源提供相关\n\n\npublic class 测试文件名 {\n // 测试函数需要标注此注解\n @Test\n // 若使用 EnabledOnOs 注解，测试将只在指定平台下运行\n // 不匹配的平台，测试函数将跳过而不执行\n @EnabledOnOs(OS.WINDOWS)\n void test1() { // 函数名是任意的，应当与具体测试内容相关\n assertEquals(2, 1 + 1);\n assertTrue(1 + 1 == 2);\n assertFalse(1 + 1 != 2);\n }\n\n\n @Test\n @DisabledOnOs({OS.LINUX, OS.MAC})\n @DisabledOnJre(JRE.JAVA_8)\n // 匹配 os.arch 类型为 .*64.* （64位）\n @EnabledIfSystemProperty(named = "os.arch", matches = ".*64.*")\n // 需指定环境变量 DEBUG 为 true\n @EnabledIfEnvironmentVariable(named = "DEBUG", matches = "true")\n void test2() { // 测试类下的所有@Test标注的函数都会被调用\n assertNotNull(new Object());\n assertArrayEquals(new int[]{1, 2, 3}, new int[]{1, 2, 3});\n assertEquals(0.1, Math.abs(1 - 9 / 10.0), 0.0000001); // 比较浮点数时需指定误差值\n assertThrows(Exception.class, () -> {\n throw new Exception();\n }); // 测试异常，通过的测试在需在lambda函数抛出指定异常\n }\n\n\n // 参数化测试，测试的函数需要参数\n @ParameterizedTest\n // 指定待测参数\n @ValueSource(ints = {0, 1, 5, 100})\n void testAbs(int x) {\n assertEquals(x, Math.abs(x));\n }\n\n\n @ParameterizedTest\n @MethodSource\n void testUpperCase(String input, String result) {\n assertEquals(result, input.toUpperCase(Locale.ROOT));\n }\n\n // 同名静态方法将成为数据源，注意 Arguments 类，指定了输入和预期输出\n static List<Arguments> testUpperCase() {\n return List.of(Arguments.of("abc", "ABC"), Arguments.of("apple", "APPLE"), Arguments.of("good", "GOOD"));\n }\n\n\n @ParameterizedTest\n @MethodSource("testLowerCase_Source")\n void testLowerCase(String input, String result) {\n assertEquals(result, input.toLowerCase(Locale.ROOT));\n }\n\n // MethodSource 注解也可以指定一个函数作为数据源\n static List<Arguments> testLowerCase_Source() {\n return List.of(Arguments.of("ABC", "abc"));\n }\n\n // 指定CSV格式作为数据源，输入和预期输出之间用逗号分隔，逗号旁边空格为可选\n @ParameterizedTest\n @CsvSource({"ha, haha", "bye,byebye"})\n void testRepeatTwice(String input, String result) {\n assertEquals(result, input.repeat(2));\n }\n\n\n // 将CSV文件作为数据源，文件将从classpath中查找，建议置于测试源码同级目录\n @ParameterizedTest\n @CsvFileSource(resources = {"/testRepeatTwiceCSVFile.csv"})\n void testRepeatTwiceCSVFile(String input, String result) {\n assertEquals(result, input.repeat(2));\n }\n // testRepeatTwiceCSVFile.csv 内容如下（一行一组参数）：\n // ha, haha\n // bye, byebye\n}\nmaven 项目可以通过 mvn clean test 运行测试（注意预装的 JUnit 版本）
idea 中，可以在 File -> Project Structure 中指定一个测试文件夹，运行时将通过 JUnit 环境执行
不建议直接在命令行运行，依赖项比较多，且编译和执行都比较复杂
\n测试 Fixture 可用（统一地）初始化测试环境，也可以进行清理
\n标注任意方法：
@BeforeEach
@AfterEach
标注静态方法：
@BeforeAll
@AfterAll
// 标注的函数名是任意的\n\n@BeforeEach\nvoid beforeEach() {\n}\n\n@BeforeAll\nstatic void beforeAll() {\n // 必须声明为静态方法\n}\n集成测试用于测试系统的各个部件是否能协同工作
\n","tags":["java"]},{"id":"java-encrypt","url":"https://yieldray.fun/posts/java-encrypt","title":"java加密","date_published":"2022-08-05T12:00:00.000Z","date_modified":"2022-08-05T12:00:00.000Z","content_text":"主要接口：
java.security
javax.crypto
不同的对象（通过 equals 方法比较）应当返回不同的 hashCode。
\n主要提供给哈希表
\nimport java.math.BigInteger;\nimport java.nio.charset.StandardCharsets;\nimport java.security.MessageDigest;\nimport java.security.NoSuchAlgorithmException;\n\npublic class Main {\n public static void main(String[] args) throws NoSuchAlgorithmException {\n // 指定加密算法，若无法获取指定算法则抛出 NoSuchAlgorithmException 异常\n MessageDigest md = MessageDigest.getInstance("MD5");\n // update 方法传入字节数组，多次调用可依次传入\n md.update("Hello".getBytes(StandardCharsets.UTF_8));\n md.update("World".getBytes(StandardCharsets.UTF_8));\n // digest 方法消费所有输入，得到加密后的值\n byte[] result = md.digest();\n System.out.println(new BigInteger(1, result).toString(16));\n // => 68e109f0f40ca72a15e05cc22786f8e6\n }\n}\n通过外部依赖获取其它算法：
\nSecurity.addProvider(new BouncyCastleProvider());\nMessageDigest md = MessageDigest.getInstance("RipeMD160");\nHMAC 在散列函数的基础上添加了消息认证码，加密时需要额外的认证码
\n出于安全考虑，认证码一般通过 KeyGenerator 对象来生成
\nimport java.math.BigInteger;\nimport java.nio.charset.StandardCharsets;\nimport javax.crypto.*;\nimport java.security.*;\n\n\npublic class Main {\n public static void main(String[] args) throws NoSuchAlgorithmException, InvalidKeyException {\n // 生成随机 key\n KeyGenerator keyGen = KeyGenerator.getInstance("HmacMD5");\n SecretKey key = keyGen.generateKey();\n\n // HMAC\n Mac mac = Mac.getInstance("HmacMD5");\n mac.init(key); // 提供 key，key无效时抛出 InvalidKeyException 异常\n mac.update("HelloWorld".getBytes(StandardCharsets.UTF_8));\n byte[] result = mac.doFinal();\n System.out.println(new BigInteger(1, result).toString(16));\n // 这个输出根据key的不同而不同，由于这里使用的key是随机生成的，因此加密结果也是随机的\n }\n}\n\n\n哈希函数没有解密接口，通过再次加密然后比对进行检查
\n
import java.math.BigInteger;\nimport javax.crypto.spec.SecretKeySpec;\nimport javax.crypto.*;\nimport java.security.*;\n\npublic class Main {\n public static void main(String[] args) throws NoSuchAlgorithmException, InvalidKeyException {\n // 生成随机 key\n KeyGenerator keyGen = KeyGenerator.getInstance("HmacMD5");\n SecretKey key = keyGen.generateKey();\n byte[] keyBytes = key.getEncoded();\n String keyAsString = new BigInteger(1, keyBytes).toString(16);\n System.out.println(keyAsString);\n\n // 通过已有的 key 获取 SecretKey 对象 （下面是将16进制表示的key转换为字节数组）\n byte[] privateKey = new BigInteger("a21a50424f87a4e4e0c0967a47b615f495da2dfda1e30ff0b839924033dd5225be3dd7af2f5095340412e4fd6ea0b533f00a3b2e8bdea43200acd9192bbb6a69",16).toByteArray();\n SecretKey keyFromBytes = new SecretKeySpec(privateKey, "HmacMD5");\n\n // 提供我们已有的 key\n Mac mac = Mac.getInstance("HmacMD5");\n mac.init(keyFromBytes);\n // ... 其它逻辑\n }\n}\n对称加密算法能通过 key 将数据加密，并能通过 key 将加密的结果还原
\n口令加密算法能通过任意长度的密码和随机盐值得到 key （key 是固定长度的）
\n密钥交换算法用于协商一个 key，这个 key 可以提供给 对称加密算法 使用
\n参见：Diffie-Hellman 算法
\n在密钥交换算法中存在公钥和私钥。通过私钥可计算出公钥，但无法通过公钥得到私钥（这类似于散列算法）
\n公钥是对外公开的，对所有人都可见；私钥则必须保密
\n通信时，发送方将 接收方的公钥 作为 key 加密数据，而接收方可以通过 自己的私钥 解密 发送方加密的数据（公钥加密私钥解密）
\n（接上文）
也可以反过来通过私钥加密公钥解密：
在进行数字签名时，发布者通过私钥进行签名（加密），验证者用发布者的公钥来验证（解密）
java 提供了 keytool 命令行工具用于生成和管理证书，证书文件的后缀是 .keystore (nginx 证书则是 .crt)
https://www.liaoxuefeng.com/wiki/1252599548343744/1255943717668160
\n","tags":["java"]},{"id":"java-encode-decode","url":"https://yieldray.fun/posts/java-encode-decode","title":"java编/解码","date_published":"2022-08-04T12:00:00.000Z","date_modified":"2022-08-04T12:00:00.000Z","content_text":"application/x-www-form-urlencoded
import java.net.URLDecoder;\nimport java.net.URLEncoder;\nimport java.nio.charset.StandardCharsets;\n\npublic class Main {\n public static void main(String[] args) {\n // 此函数需要指定编码\n String encoded = URLEncoder.encode("中文", StandardCharsets.UTF_8);\n System.out.println(encoded); // => %E4%B8%AD%E6%96%87\n\n String decoded = URLDecoder.decode("%E4%B8%AD%E6%96%87", StandardCharsets.UTF_8);\n System.out.println(decoded); // => 中文\n }\n}\n注意这两个函数都有一个字符编码可指定为字符串的重载函数，但会抛出异常，故不推荐
应当始终使用 UTF-8 编码
try {\n String encoded = URLEncoder.encode("中文", "utf-8");\n String decoded = URLDecoder.decode("%E4%B8%AD%E6%96%87", "UTF-8");\n} catch (UnsupportedEncodingException e) {\n // ...\n}\nimport java.nio.charset.StandardCharsets;\nimport java.util.Arrays;\nimport java.util.Base64;\n\npublic class Main {\n public static void main(String[] args) {\n Base64.Encoder base64Encoder = Base64.getEncoder(); // 编码器\n Base64.Decoder base64Decoder = Base64.getDecoder(); // 解码器\n\n byte[] originalBytes = new byte[]{-28, -72, -83, -26, -106, -121};\n // 相当于： "中文".getBytes(StandardCharsets.UTF_8)\n\n // 编码为字节数组\n byte[] encodedBytes = base64Encoder.encode(originalBytes);\n // 编码为字符串\n String encodedString = base64Encoder.encodeToString(originalBytes);\n\n System.out.println(Arrays.toString(originalBytes)); // => [-28, -72, -83, -26, -106, -121]\n System.out.println(Arrays.toString(encodedBytes)); // => [53, 76, 105, 116, 53, 112, 97, 72]\n System.out.println(encodedString); // => 5Lit5paH\n // 下面的方法将字节数组转换为String\n System.out.println(new String(encodedBytes, StandardCharsets.UTF_8)); // => 5Lit5paH\n\n\n // 解码方法是一个重载方法\n byte[] decodedBytes1 = base64Decoder.decode("5Lit5paH");\n byte[] decodedBytes2 = base64Decoder.decode(encodedBytes);\n System.out.println(Arrays.toString(decodedBytes1)); // => [-28, -72, -83, -26, -106, -121]\n System.out.println(Arrays.toString(decodedBytes2)); // => [-28, -72, -83, -26, -106, -121]\n System.out.println(new String(decodedBytes1, StandardCharsets.UTF_8)); // => 中文\n\n\n // 还可以通过withoutPadding方法获取一个不添加末尾`=`的编码器（无需对应解码器）\n Base64.Encoder encoder2 = Base64.getEncoder().withoutPadding();\n\n // 获取适用于URL的Base64变种编/解码器\n Base64.Encoder encoder3 = Base64.getUrlEncoder();\n Base64.Decoder decoder3 = Base64.getUrlDecoder();\n\n // 获取适用于Mime的Base64变种编/解码器\n Base64.Encoder encoder4 = Base64.getMimeEncoder();\n Base64.Decoder decoder4 = Base64.getMimeDecoder();\n }\n}\n具体参见文档：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/Base64.html
\n","tags":["java"]},{"id":"rust-mod","url":"https://yieldray.fun/posts/rust-mod","title":"rust模块","date_published":"2022-08-02T08:45:23.000Z","date_modified":"2022-08-02T08:45:23.000Z","content_text":"一个包中至多包含一个 库 crate (library crate)
可以包含任意多个 二进制 crate (binary crate)
每个包中至少包含一个 crate
src/main.rs 就是一个与包同名的 二进制 crate 的 crate 根
src/lib.rs 则是一个与包同名的 库 crate 的 crate 根
库 crate 至多存在一个，而 二进制 crate 若存在多个，则每个 src/bin 下的文件都会被编译成一个独立的 二进制 crate
使用 mod 关键字声明模块，模块可以任意层级嵌套
\n// src/lib.rs\nmod module_name {\n mod sub_module {\n fn do_something() {}\n }\n}\n使用路径获取模块。
以 crate:: 开头的为绝对路径，从 crate 根开始查找；相对路径则从当前文件进行查找
例如：
// src/lib.rs\ncreate::module_name::sub_module::do_something();\nmodule_name::sub_module::do_something();\n以 super:: 开头的，super 指代当前模块的父模块名
例如：
// src/lib.rs\nmod outer {\n fn f1() {}\n mod inner {\n fn f2() {}\n fn f3() {\n super::f1(); // 获取父层级\n f2(); // 获取同层级\n }\n }\n}\n// src/lib.rs\nmod outer {\n pub mod inner {\n pub fn f() {}\n }\n pub struct Season { // pub 结构体只有 pub 字段才对外可见\n pub display: String, // 此字段可见\n value: i32, // 此字段不可见\n }\n pub enum Boolean { // pub 枚举的成员都自动为 pub\n False,\n True,\n }\n}\n\npub fn todo() {\n // Absolute path\n crate::outer::inner::f();\n\n // Relative path\n outer::inner::f();\n}\nuse 将暴露的项引入作用域
\nuse outer::inner::f;\nf();\n// or\nuse outer::inner;\ninner::f();\n// or ...\n在测试时，可以使用通配符，引入所有
\nuse outer::*;\ninner::f();\nlet bool = Boolean::True;\n// 这里注意，如果结构体含有非 pub 字段，则无法直接实例化\n// 例如，以下代码无法编译：\nlet s = Season {\n display: String::from("123"),\n value: 123, // 这个字段是私有的！！\n};\n使用花括号导入路径的多个部分
\nuse outer::inner::{Season, Boolean};\n\nuse outer::{inner::Season, f};\n\nuse outer::inner::{self, f}; // self 表示路径本身\n/* 相当于：\nuse outer::inner;\nuse outer::inner::f;\n*/\n使用 as 关键字提供新的名称
\nuse outer::inner::f as function;\nfunction();\n使用 pub use 重导出名称
\n// src/lib.rs\nmod outer {\n fn f1() {}\n mod inner {\n fn f2() {}\n }\n}\n\npub use crate::outer::inner;\npub fn f3() {\n inner::f2();\n}\n// Cargo.toml\nclap = "2.27.1" # 来自 crates.io\nrand = { git = "https://github.com/rust-lang-nursery/rand" } # 来自网上的仓库\nbar = { path = "../bar" } # 来自本地文件系统的路径\nuse rand::Rng;\nfn main() {\n let secret_number = rand::thread_rng().gen_range(1..101);\n}\n// src/utils.rs\npub mod toolbox {\n pub fn fix() {}\n}\n// src/lib.rs\nmod utils; // 在另一个文件的模块\npub use crate::utils::toolbox;\n\ntoolbox::fix();\n|-- my\n| |-- inaccessible.rs\n| |-- mod.rs\n| `-- nested.rs\n`-- split.rs\nmod my;\n// 这个声明会查找 `my.rs` 或 `my/mod.rs` 文件，然后将该文件的内容放到当前作用域中一个名为 `my` 的模块里面。\nmod inaccessible;\npub mod nested;\n// 此处同理\nhttps://www.rustwiki.org.cn/zh-CN/book/ch14-03-cargo-workspaces.html
\npub fn public_function() {\n println!("`public_function()` is called");\n}\n$ rustc --crate-type=lib mylib.rs\n同目录下得到 libmylib.rlib 文件（默认添加了 lib 前缀）
参见：https://www.rustwiki.org.cn/zh-CN/rust-by-example/attribute/crate.html
fn main(){\n mylib::public_function();\n}\n$ rustc run.rs --extern mylib=libmylib.rlib\n# extern 的参数是 导入的库名=库的路径\n$ ./run\n\n`public_function()` is called\n实现子 trait 时还需要已经实现父 trait
\ntrait Super {\n fn s(&self);\n}\n\ntrait Child: Super {\n fn c(&self);\n fn s(&self); // 不是覆盖\n}\n\nstruct Test();\n\nimpl Super for Test {\n fn s(&self) {\n println!("call Super::s()")\n }\n}\n\nimpl Child for Test {\n // 只能实现 Child 中的函数，而不能实现 Super 中的函数\n fn c(&self) {\n println!("call Child::c()")\n }\n fn s(&self) {\n println!("call Child::s()")\n }\n}\n\nfn main() {\n let test = Test();\n test.c();\n // 无法使用 test.s();\n Super::s(&test);\n Child::s(&test);\n}\n相关内容参见：完全限定语法与消歧义：调用相同名称的方法
\n结构体若含引用成员（则结构体本身必须标注生命周期），结构体在实现 trait 时也需要通过泛型指定生命周期
\n\n\n摘自 https://www.rustwiki.org.cn/zh-CN/rust-by-example/scope/lifetime/trait.html
\n
// 带有生命周期标注的结构体。\n#[derive(Debug)]\n struct Borrowed<'a> {\n x: &'a i32,\n }\n\n// 给 impl 标注生命周期。\nimpl<'a> Default for Borrowed<'a> {\n fn default() -> Self {\n Self {\n x: &10,\n }\n }\n}\n\nfn main() {\n let b: Borrowed = Default::default();\n println!("b is {:?}", b);\n}\n假设已有如下定义：
\ntrait Value {\n fn value(&self) -> isize;\n}\n\nstruct Int32(i32);\n\nstruct Int64(i64);\n\nimpl Value for Int32 {\n fn value(&self) -> isize {\n self.0 as isize\n }\n}\nimpl Value for Int64 {\n fn value(&self) -> isize {\n self.0 as isize\n }\n}\n使用 impl 约束，可指定参数类型实现了给定 trait
\n\nfn sum(lhs: impl Value, rhs: impl Value) -> isize {\n lhs.value() + rhs.value()\n}\n\nfn main() {\n println!("{}", sum(Int32(1), Int64(2)));\n}\n在上例中，只要实现了给定 trait 就可以作为参数
\n下面的例子实现了对参数类型的限制，要求两个参数不仅实现了给定 trait，二者类型还需相同
\nfn sum<T: Value>(lhs: T, rhs: T) -> isize {\n // 注意 T: Value 表示类型 T 实现了 Value，而不使用语法： T impl Value\n lhs.value() + rhs.value()\n}\n\nfn main() {\n println!("{}", sum(Int32(1), Int32(2)));\n println!("{}", sum(Int64(1), Int64(2)));\n}\n也可以使用 where 限定，效果一致
\nfn sum<T>(lhs: T, rhs: T) -> isize\nwhere\n T: Value,\n{\n lhs.value() + rhs.value()\n}\n需要多重约束时，将多个 trait 用 加号 + 连接即可
欲返回非具体的类型（动态大小类型，DST，unsized 在 rust 中表达为 ?Sized）
需要返回 Box 包装的值，并使用 dyn 语法，表示允许任意实现 trait 的类型
当然，返回值（和使用 impl 约束一样）将只能使用 trait 上存在的函数
enum IntStruct {\n Int32,\n Int64,\n}\n\nfn get_int_struct(r#type: IntStruct, value: isize) -> Box<dyn Value> {\n match r#type {\n IntStruct::Int32 => Box::new(Int32(value as i32)),\n IntStruct::Int64 => Box::new(Int64(value as i64)),\n }\n}\n\nfn main() {\n println!("{}", get_int_struct(IntStruct::Int32, 32).value()); // => 32\n println!("{}", get_int_struct(IntStruct::Int64, 64).value()); // => 64\n}\n显然该 trait 不能是 Sized
\ntrait Trait {}\nstruct Impl;\nimpl Trait for Impl {}\nlet x: &dyn Trait = &Impl; // OK\n\n\ntrait TraitSized: Sized {}\nstruct ImplSized;\nimpl TraitSized for ImplSized {}\nlet y: &dyn TraitSized = &ImplSized; // Error!\n参见：
动态大小类型和 Sized trait
为使用不同类型的值而设计的 trait 对象
use std::convert::TryInto;\nuse std::fmt::Debug;\nuse std::ops::Rem;\n\ntrait Even {\n fn is_even(self) -> bool;\n}\n\n// generic blanket impl\nimpl<T> Even for T\nwhere\n T: Rem<Output = T> + PartialEq<T> + Sized,\n u8: TryInto<T>,\n <u8 as TryInto<T>>::Error: Debug,\n{\n fn is_even(self) -> bool {\n // these unwraps will never panic\n self % 2.try_into().unwrap() == 0.try_into().unwrap()\n }\n}\n\n#[test] // ✅\nfn test_is_even() {\n assert!(2_i8.is_even());\n assert!(4_u8.is_even());\n assert!(6_i16.is_even());\n // etc\n}\n“虚”指的是该类型仅在编译时静态检查，运行时不存在（零成本抽象）
\nstd::marker 提供两个虚类型
struct PhantomData<T> where T: ?Sized;\n// size_of::<PhantomData<T>>() == 0\n// align_of::<PhantomData<T>>() == 1\n\npub struct PhantomPinned;\n参见：https://www.rustwiki.org.cn/zh-CN/rust-by-example/generics/phantom.html
\n#[derive] 属性 能够让编译器提供某些 trait 的实现（无需手动实现）
具体参见：https://www.rustwiki.org.cn/zh-CN/rust-by-example/trait/derive.html
https://doc.rust-lang.org/std/
\nhttps://www.rustwiki.org.cn/zh-CN/std/
\n\n\n定义于
\nstd::ops
Fn
\nFnMut
\nFnOnce
\n\n\n定义于
\nstd::str
FromStr
\n\n\n定义于
\nstd::convert
From & Into
\nTryFrom & TryInto
\nAsRef & AsMut
\n\n\n定义于
\nstd::borrow
Borrow & BorrowMut
\nToOwned
\n关于 AsRef/Borrow 和 AsMut/BorrowMut （下以 AsRef/Borrow 举例）
AsRef 和 Borrow 的签名实际上完全相同，因此它们之间主要是语义方面的区别
为类型 X 实现 Borrow<Borrowed>.borrow() 得到 &Borrowed，
要求 X 与 Borrowed 等价，即它们的 Eq Ord 和 Hash （在转换前后）必须相等
标准库的表述就是类型的不同表现形式，如 Box<T> 和 T，Rc<T> 和 T，String 和 str
这些类型提供了对底层数据的引用，即它们能够通过底层数据类型的形式而被借用（如果还允许可变，则还可以实现 BorrowMut<Borrowed>）
此 trait 带有默认实现
为类型 X 实现 AsRef<T>.as_ref() 得到 &T，\n要求 X 与 T 均自反（不要求 X 与 T 相等），即，为 T 实现 AsRef<T>.as_ref() 得到 &T
不过此 trait 并没有自反的默认实现，此外 AsMut 不依赖 AsRef（而 BorrowMut 依赖 Borrow）
常见的例如函数接受 AsRef<Path>，这样更方便调用方使用（相当于一种重载(Overload)机制）
其次，Borrow 在 std::borrow 模块下，而 AsRef 在 std::convert 模块下
我们可以看出 AsRef 具有转换语义，Borrow 则是借用语义
我们知道 rust 是没有重载 & 运算符的，重载 * 的是 Deref 和 DerefMut（下以 Deref 为例）
为 T 实现 Deref<Target = U>，要求 T 与 U 行为相同Deref 使用关联类型而不是泛型，这意味着 Deref 只能得到一种类型
使得 &T 可隐式转换为 &U, *t == *Deref::deref(&t)
与前面的 trait 不同的是，Deref 是为智能指针设计的
\n\n定义于
\nstd::cmp
PartialEq & Eq
\nPartialOrd & Ord
\n\n\n定义于
\nstd::hash
Hash
\n\n\n定义于
\nstd::fmt
Display & Debug
\n\n\n定义于
\nstd::string
ToString
实现了 Display 则编译器自动实现 ToString
偏好实现 Display 而不是实现 ToString
\n\n定义于
\nstd::io
Read & Write & Seek
\n\n\n定义于
\nstd::ops
参见：https://www.rustwiki.org.cn/zh-CN/std/ops/index.html
\n表示某个类型的默认值，rust 也提供 #[derive(Default)] 派生宏
表示在编译时大小已知的类型。
\nhttps://stackoverflow.com/questions/30938499/why-is-the-sized-bound-necessary-in-this-trait
\n未来会有 Unsize 来表示 ?Sized
一般实现为：通过一个引用，克隆出一个实值（有所有权）
\n\n\nMore formally: if
\nT: Copy,x: T, andy: &T, thenlet x = y.clone();is equivalent tolet x = *y；
pub trait Clone: Sized {\n // Required method\n fn clone(&self) -> Self;\n\n // Provided method\n fn clone_from(&mut self, source: &Self) { ... }\n}\n如果所有字段均为 Clone，则此 trait 可以与 #[derive] 一起使用。
如果类型实现 Copy，则它具有复制语义。也就是不发生所有权转移。
\n#[derive(Copy, Clone)]\n// Clone 是 Copy 的一个 super trait，所以实现了 Copy 的类型也必须实现 Clone\n表明实现该 trait 的值足够简单（就像基本类型），以至于可以直接在栈上复制，无需转移所有权（赋值时）\n（我们知道 Clone 则需要显式调用一些方法）
注意实现了 Drop 就不能实现 Copy 了，因为实现 Drop 就会有额外的释放行为
可变引用和一些智能指针是不能 Copy 的，因为这样复制的是指针本身，而不是指针指向的数据
（只复制指针肯定是不安全的，此时应当使用 Rc）
参见：https://www.rustwiki.org.cn/zh-CN/core/marker/trait.Copy.html
\n相当于析构函数，生命期结束时自动调用（先进后出），只能通过 std::mem::drop 间接调用
另见：rust 智能指针
\n（编译器自动实现）表明类型可以在线程之间安全地共享引用
\n&T 是 Send 当且仅当 T 是 Sync&mut T 是 Send 当且仅当 T 是 Send&T 和 &mut T 是 Sync 当且仅当 T 是 Sync（编译器自动实现）表明类型可以在线程边界间传递
\n例如，Rc 不是 Send，而 Arc 是 Send
#[repr(transparent)]\npub struct Pin<P> { /* private fields */ }\n表明数据在内存中的位置是固定的（不会移动）
即指针（是地址）指向的数据不会改变（但注意Rust编译器认为任何值都是可移动的）
几乎所有类型都会自动实现这个 trait
\n需要持有 PhantomPinned 表明不是 Unpin，即 impl !Unpin for PhantomPinned
trait Iterator {\n type Item;\n fn next(&mut self) -> Option<Self::Item>;\n}\n参见：https://www.rustwiki.org.cn/zh-CN/std/iter/
\n","tags":["rust"]},{"id":"rust-smart-pointers","url":"https://yieldray.fun/posts/rust-smart-pointers","title":"rust智能指针","date_published":"2022-07-30T13:29:37.000Z","date_modified":"2022-07-30T13:29:37.000Z","content_text":"Vec<T> 以及 String 也是智能指针
Box<T> 在堆上分配值Box<T> 的表现与引用（指针）相仿
指针本身占用的内存大小是确定的，其大小并不会根据其指向的数据量而改变
\nfn print_type_of<T>(_: T) {\n println!("{}", std::any::type_name::<T>())\n}\n\nfn main() {\n let a = &1;\n let b = Box::new(2);\n let c = Box::new(3);\n print_type_of(a); // &i32\n print_type_of(*a); // i32\n print_type_of(b); // alloc::boxed::Box<i32>\n print_type_of(*c); // i32\n}\n其实现原理主要是重载了解引用运算符 * （std::ops::Deref trait）
pub trait Deref {\n type Target: ?Sized;\n fn deref(&self) -> &Self::Target;\n}\n参见：https://www.rustwiki.org.cn/zh-CN/std/ops/trait.Deref.html
\nstd::ops::Drop trait实现了 Drop 的类型将在被销毁时（主要为变量离开作用域）调用 drop 方法
\npub trait Drop {\n fn drop(&mut self);\n}\n对于离开作用域的情况下，销毁遵循先进后出（栈），即先声明的变量后销毁
\n编译器将阻止显式调用此 drop 方法，而应通过 std::mem::drop 函数进行间接调用
pub fn drop<T>(_x: T)\nRc<T> 引用计数类型（reference counting），其数据可以有多个所有者fn print_type_of<T>(_: T) {\n println!("{}", std::any::type_name::<T>())\n}\nuse std::rc::Rc;\nfn main() {\n let x = ();\n let a = Rc::new(x);\n println!("count={}", Rc::strong_count(&a)); // count=1\n let b = Rc::clone(&a);\n println!("count={}", Rc::strong_count(&a)); // count=2\n let c = Rc::clone(&a);\n println!("count={}", Rc::strong_count(&a)); // count=3\n\n print_type_of(a); // alloc::rc::Rc<()>\n print_type_of(*b); // ()\n print_type_of(&c); // &alloc::rc::Rc<()>\n}\nstrong_count 方法返回指向此分配的强 (Rc) 指针的数量。
\nfn main() {\n let x = ();\n let a = Rc::new(x);\n println!("count={}", Rc::strong_count(&a)); // count=1\n {\n let b = Rc::clone(&a);\n println!("count={}", Rc::strong_count(&a)); // count=2\n }// 在这里，指针 b 失效\n let c = Rc::clone(&a);\n println!("count={}", Rc::strong_count(&a)); // count=2\n}\nRef<T> 和 RefMut<T>智能指针，通过 RefCell<T> 实现内部可变性RefCell 允许在在运行时借用，无论数据本身是否可以被借用（或者说，即使本身无法被借用）
运行时意味着如果出错将发生 panic（编译时的错误导致编译不通过）
Ref<T> 和 RefMut<T> 是智能指针，实现了 Deref trait
不过，RefCell 也同样遵循借用规则，即相同作用域中要么只能有一个可变引用，要么只能有多个不可变引用
\nuse std::cell::*;\n#[derive(Debug)]\nstruct Int(i32);\nfn main() {\n let x = Int(0);\n let a: RefCell<Int> = RefCell::new(x);\n println!("{:?}", a); // RefCell { value: Int(0) }\n {\n let b: Ref<Int> = a.borrow(); // 不可变地借用\n println!("{:?}", b); // Int(0)\n }\n {\n let mut c: RefMut<Int> = a.borrow_mut(); // 可变地借用，这里因为手动修改所以还添加了 mut\n println!("{:?}", c); // Int(0)\n c.0 = 1; // 本来是无法修改的，通过 RefCell 修改\n println!("{:?}", c); // Int(1)\n }\n}\nArc<T>Rc<T> 非线程安全，Arc<T> 是 Rc<T> 的线程安全版本，适合在多线程环境下使用，API 一致。
Mutex<T>在 rust 中，加锁之后无需手动释放，因为当锁离开作用域时就会自动释放。
\nuse std::sync::Mutex;\n\nfn main() {\n let m = Mutex::new(5); // 互斥锁是一个智能指针\n\n {\n let mut num = m.lock().unwrap(); // 获取锁\n *num = 6;\n }// 释放锁\n\n println!("m = {:?}", m);\n}\n在多个线程中使用同一个锁时，还需要使用 Arc<T> 以便在不同的线程中都能取得同一个锁
use std::sync::{Mutex, Arc};\nuse std::thread;\n\nfn main() {\n let counter = Arc::new(Mutex::new(0)); // 通过 Arc 共享该锁\n let mut handles = vec![];\n\n for _ in 0..10 {\n let counter = Arc::clone(&counter); // 每个线程获取 Arc 的克隆\n let handle = thread::spawn(move || {\n let mut num = counter.lock().unwrap();\n\n *num += 1; // Mutex 和 Arc 都是智能指针\n });\n handles.push(handle);\n }\n\n for handle in handles {\n handle.join().unwrap();\n }\n\n println!("Result: {}", *counter.lock().unwrap());\n}\nWeak<T> 避免引用循环引用循环，参见：https://www.rustwiki.org.cn/zh-CN/book/ch15-06-reference-cycles.html
\nCell<T> 实现内部可变性参见：https://www.rustwiki.org.cn/zh-CN/std/cell/struct.Cell.html
\nUnsafeCell<T>参见：https://www.rustwiki.org.cn/zh-CN/std/cell/struct.UnsafeCell.html
\nCow参见：https://www.rustwiki.org.cn/zh-CN/alloc/borrow/enum.Cow.html
\npub enum Cow<'a, B: ?Sized + 'a>\nwhere\n B: ToOwned,\n {\n Borrowed(&'a B),\n Owned(<B as ToOwned>::Owned),\n}\n此篇是关于泛型类型和关联类型实现 trait 上面的区别
\n关联类型允许在实现 trait 时再指定具体类型，而不是在 trait 定义时决定。
\n\n\n此处定义的 Add 非 std::ops::Add，后者是实现运算符重载的 trait
\n
trait Add {\n type OtherOne; // 这个类型需要实现者指定\n fn add(&self, other: Self::OtherOne) -> Self; // 使用 Self::OtherOne 而不是 OtherOne\n}\n\n#[derive(Debug)]\nstruct Int(i32);\n\nimpl Add for Int {\n type OtherOne = i32; // 实现者指定具体类型\n fn add(&self, other: Self::OtherOne) -> Self {\n Int(self.0 + other)\n }\n}\n\nfn main() {\n let i = Int(1);\n let sum = i.add(2);\n println!("{:?}", sum); // -> Int(3)\n}\n关联类型一旦实现，该 trait 中的函数签名就已经确定，无法再实现关于令一个类型的同 trait 函数
在需要实现同名 trait 函数并允许使用多个不同类型时，则采用泛型类型
\n\n关联类型只能实现一次，泛型类型可以实现多次
\n
可以在尖括号内部通过：type名 = 实际类型 直接进行类型关联
不过，虽然使用了尖括号语法，但这里并不是泛型，而是关联类型
例如：
fn example1(i: impl Add<OtherOne = i32> + std::fmt::Debug, j: i32) {\n let out = i.add(j);\n println!("{:?}", out);\n}\n\nfn example2<T>(i: T, j: i32)\nwhere\n T: Add<OtherOne = i32> + std::fmt::Debug,\n{\n let out = i.add(j);\n println!("{:?}", out);\n}\n\nfn main() {\n example1(Int(1), 2); // -> Int(3)\n example2(Int(1), 2); // -> Int(3)\n}\ntrait Add<T> {\n fn add(&self, other: T) -> Self;\n}\n\n#[derive(Debug)]\nstruct Int(i32);\n\nimpl Add<&i32> for Int {\n // 在这里，实现了泛型的某一具体类型，但也可以同时实现多个类型\n fn add(&self, other: &i32) -> Self {\n Int(self.0 + *other)\n }\n}\n\nfn main() {\n let i = Int(1);\n let j = 2;\n let sum = i.add(&j);\n println!("{:?}+{}={:?}", i, j, sum); // -> Int(1)+2=Int(3)\n}\n目前，rust 在除泛型函数之外，可以给泛型参数指定默认泛型类型
例如：
#[derive(Debug)]\nstruct Int(i32);\n\ntrait Same<T = Int> {\n fn same(x: T) -> T {\n x\n }\n}\n\nimpl Same for Int {}\n\nfn main() {\n let x = Int(8);\n println!("{:?}", Int::same(x)); // => Int(8)\n}\n实际上，二者是不冲突的。
例如，标准库提供的 std::ops::Add trait
// RHS = right hand side\ntrait Add<RHS=Self> {\n type Output;\n fn add(self, rhs: RHS) -> Self::Output;\n}\n支持版本大于 JDK 11，一律使用 JDK 17
// 注意，返回值类型可以不同，但不建议\nvar ret = switch ("test") {\n case "1" -> 1; // 无需 break\n case "2" -> 2;\n case "3" -> {\n System.out.println("is three!");\n yield 3;\n // 多个语句时需要花括号，使用 yield 返回值\n }\n default -> 0;\n};\n匹配多个值
注意，在需要返回值时，必须覆盖所有分支，因此 default 是必要的
不需要返回值时则不要求 default 分支
switch ("Result") {\n case "T", "OK" -> System.out.println("OK");\n case "E", "Err" -> System.out.println("Err");\n}\nstatic String patternSwitch(Object o) {\n return switch (o) {\n case Integer i -> String.format("int %d", i);\n // 相当于：\n // if(o instanceof Integer i) return String.format("int %d", i);\n case Long l -> String.format("long %d", l);\n case Double d -> String.format("double %f", d);\n case String s -> String.format("String %s", s);\n case null -> "null";\n // 支持 null\n default -> o.toString();\n };\n}\n匹配 enum 时，如已覆盖所有情况，则无需 default 分支
\nenum Option {\n Some, None\n}\n\nstatic String unwrap(Option opt) {\n return switch (opt) {\n case Some -> "something";\n case None -> "nothing";\n };\n}\nsealed Classes 同理
\nsealed interface Result<T, E> permits Ok, Err {}\n\nstatic final class Ok<T> implements Result {}\n\nstatic final class Err<E> implements Result {}\n\nstatic <T, E> String unwrap(Result rst) {\n return switch (rst) {\n case Ok ok -> "ok";\n case Err err -> "err";\n };\n}\n\n\n此处的生命期指 lifetimes 而非 lifecycle
\n
生命期是一类允许我们向编译器提供引用如何相互关联的泛型。
\nRust 的生命期功能允许在很多场景下借用值的同时仍然使编译器能够检查这些引用的有效性。
\n也就是说，生命期是编写者提供给编译器用于检查的，用于确保引用有效（不会构成悬垂引用）。
\nRust 中的每一个引用都有其生命期（lifetime），也就是引用保持有效的作用域。
\n大部分时候生命期是隐含并可以推断的，正如大部分时候类型也是可以推断的一样。
\n（函数和结构体往往需要额外的生命期标注，因为难以静态分析）
\n类似于当因为有多种可能类型的时候必须注明类型，也会出现引用的生命期以一些不同方式相关联的情况，
\n所以 Rust 需要我们使用泛型生命期参数来注明他们的关系，这样就能确保运行时实际使用的引用绝对是有效的。
\n&i32 // 引用\n&'a i32 // 带有显式生命期的引用\n&'a mut i32 // 带有显式生命期的可变引用\n\nfn choose_first<'a: 'b, 'b>(first: &'a i32, _: &'b i32) -> &'b i32 {\n first\n}\n// `<'a: 'b, 'b>` 读作生命期 `'a` 至少和 `'b` 一样长。\n在 rust 中，普通函数的函数体都是一块作用域。
\nrust 中的借用是指对一块内存空间（或者说，对另一个变量）的引用。
rust 有一条借用规则是借用方的生命期不能比出借方的生命期还要长。
对于一个参数和返回值都包含引用的函数而言，函数的参数是出借方，函数返回值所绑定到的那个变量就是借用方。
\n所以，这种函数也需要满足借用规则（借用方的生命期不能比出借方的生命期还要长）。
那么就需要对函数返回值的生命期进行标注，告知编译器函数返回值的生命期信息。
一个典型的错误示例如下：
\nfn max(a: &i32, b: &i32) -> &i32 {\n if a > b {\n a\n } else {\n b\n }\n}\n\nfn main() {\n let x = 1;\n let y = 0;\n let big = max(&x, &y);\n println!("{}", big);\n}\n编译器给出如下错误：
\n Compiling playground v0.0.1 (/playground)\nerror[E0106]: missing lifetime specifier\n --> src/main.rs:1:29\n |\n1 | fn max(a: &i32, b: &i32) -> &i32 {\n | ---- ---- ^ expected named lifetime parameter\n |\n = help: this function's return type contains a borrowed value, but the signature does not say whether it is borrowed from `a` or `b`\nhelp: consider introducing a named lifetime parameter\n |\n1 | fn max<'a>(a: &'a i32, b: &'a i32) -> &'a i32 {\n | ++++ ++ ++ ++\n\nFor more information about this error, try `rustc --explain E0106`.\nerror: could not compile `playground` due to previous error\n根据提示做如下修改：
\nfn max<'a>(a: &'a i32, b: &'a i32) -> &'a i32 {\n if a > b {\n a\n } else {\n b\n }\n}\n这个生命期表示获取了返回值（引用）的变量，其生命期应当与入参 a 和 b 相同
\n因此，如下代码不被允许编译：
\nfn main() {\n let big: &i32;\n let x = 1;\n {\n let y = 0;\n big = max(&x, &y);\n }// 在这里，入参 y 的生命期已结束\n println!("{}", big); // 然而，在这里，另一个入参 x 的生命期存在，并且返回值的生命期也存在\n // 但函数的生命期标注表示，两个入参的生命期一致，并且与返回值的生命期一致\n // 这里的代码很明显不符合函数生命期标注，而可能获取无效引用。\n // 因此，编译器拒绝编译（即使通过观察作用域，代码可以正常运行，但会造成潜在的错误）\n}\n编译器给出如下错误：
\n Compiling playground v0.0.1 (/playground)\nerror[E0597]: `y` does not live long enough\n --> src/main.rs:14:23\n |\n14 | big = max(&x, &y);\n | ^^ borrowed value does not live long enough\n15 | }\n | - `y` dropped here while still borrowed\n16 | println!("{}", big);\n | --- borrow later used here\n\nFor more information about this error, try `rustc --explain E0597`.\nerror: could not compile `playground` due to previous error\n以下代码有效：
\nfn first<'a, 'b>(a: &'a i32, _b: &'b i32) -> &'a i32 {\n a\n}\n\nfn main() {\n let big: &i32;\n let x = 1;\n {\n let y = 0;\n big = first(&x, &y);\n }\n println!("{}", big);\n}\n对于一个含有引用成员的结构体，需要满足结构体的生命期不能超过其包含的任意引用成员的生命期。（同理，否则将结构体本身将构成悬垂引用）
\n编译器不允许如下结构体声明，因为需要提供生命期标注：
\nstruct Foo {\n v: &i32\n}\n修改为：
\nstruct Foo<'a> {\n v: &'a i32\n}\n函数或方法的参数的生命期被称为输入生命期（input lifetimes），而返回值的生命期被称为输出生命期（output lifetimes）。
\n对于入参和返回值都是引用的函数，无需声明生命期，编译器将推断输入生命期与输出生命期相同
\n对于对象方法（函数的其中一个参数是 &self 或 &mut self），编译器将推断输出生命期参数等同于 self 的生命期
\n'static静态生命期表示引用在整个程序期间都有效。
\n所有的字符串字面量都拥有 'static 生命期，即：
let s: &'static str = "I have a static lifetime.";\n// 完全相等，无需标注\nlet s: &str = "I have a static lifetime.";\n可以通过 static 赋值来声明一个在整个程序期间都有效的变量
\n那么，这个变量的引用将有 'static 生命期
因此，以下代码有效：
\nfn main() {\n let big: &i32;\n let x = 1;\n {\n #[allow(non_upper_case_globals)] // static 变量名应当使用大写，这里出于演示而使用小写\n static y: i32 = 0; // 需要声明类型\n big = max(&x, &y);\n } // 在这里，入参 y 的生命期一直有效\n println!("{}", big); // 函数调用有效\n}\nhttps://mvnrepository.com/artifact/org.json/json
https://github.com/stleary/JSON-java
一个轻量级的 json 库
\n<dependency>\n <groupId>org.json</groupId>\n <artifactId>json</artifactId>\n <version>20220320</version>\n <type>bundle</type>\n</dependency>\nimport org.json.*;\npublic class Main {\n public static void main(String[] args) {\n JSONObject jsonObj = new JSONObject();\n jsonObj.put("name", "练习生");\n jsonObj.put("time", 0);\n jsonObj.put("time", 2.5); // 后面的覆盖前面\n jsonObj.put("hobbies", new String[]{"唱", "跳", "RAP", "篮球"});\n jsonObj.append("bool", true); // 添加为数组元素\n\n JSONArray jsonArr = jsonObj.getJSONArray("bool");\n jsonArr.put(false); // 数组追加元素\n\n System.out.println(jsonObj.toString()); // => {...json}\n System.out.println(jsonArr.getBoolean(0)); // => true\n System.out.println(jsonObj.get("bool")); // get 方法返回object\n if (!jsonObj.isNull("name")) System.out.println(jsonObj.getString("name"));\n if (!jsonObj.isNull("time")) System.out.println(jsonObj.getDouble("time"));\n }\n}\n{"bool":[true,false],"hobbies":["唱","跳","RAP","篮球"],"name":"练习生","time":2.5}\ntrue\n[true,false]\n练习生\n2.5\nimport org.json.*;\nimport java.util.*;\npublic class Main {\n public static void main(String[] args) {\n /* 建造者模式 */\n JSONStringer stringer = new JSONStringer();\n stringer.object().key("k").value("v").key("number").value(1).endObject();\n System.out.println(stringer); // => {"k":"v","number":1}\n\n /* 编码数组，集合 */\n var aa = new JSONArray(new int[]{1, 2, 3});\n var ll = new JSONArray(List.of(4, 5, 6));\n var ss = new JSONArray(Set.of(7, 8, 9)); // 输出顺序随机\n System.out.println(aa); // => [1,2,3]\n System.out.println(ll); // => [4,5,6]\n System.out.println(ss); // => [7,9,8]\n\n /* 编码哈希表 */\n var mm = new JSONObject(Map.of("k1", "v1", "k2", "v2"));\n System.out.println(mm); // => {"k1":"v1","k2":"v2"}\n\n /* 解码json */\n JSONTokener token = new JSONTokener("[{\\"key1\\":\\"value1\\"},{\\"key2\\":\\"value2\\"}]");\n JSONArray ja = new JSONArray(token);\n System.out.println(ja.get(0)); // => {"key1":"value1"}\n }\n}\n<dependency>\n <groupId>com.google.code.gson</groupId>\n <artifactId>gson</artifactId>\n <version>2.9.0</version>\n</dependency>\nimport com.google.gson.*;\nimport com.google.gson.reflect.*;\n\nimport java.util.*;\n\npublic class Main {\n public static void main(String[] args) throws Throwable {\n GsonBuilder builder = new GsonBuilder();\n builder.setPrettyPrinting();\n Gson gson = builder.create();\n // or simply:\n // Gson gson = new Gson();\n\n // 反序列化为JavaBean\n Student student = gson.fromJson("{\\"name\\":\\"Max\\", \\"age\\":24}", Student.class);\n System.out.println(student);\n\n // 反序列化数组\n String[] sa = gson.fromJson("[\\"a\\",\\"b\\",\\"c\\"]", String[].class);\n System.out.println(sa);\n\n // 反序列化其它\n List<String> sl = gson.fromJson("[\\"a\\",\\"b\\",\\"c\\"]", new TypeToken<List<String>>() {\n }.getType());\n System.out.println(sl);\n\n // 从Reader中获取\n // Reader r = new BufferedReader(new FileReader("student.json"));\n // Student stu = gson.fromJson(r, Student.class);\n\n\n // 序列化为JSON\n String json = gson.toJson(student);\n System.out.println(json);\n\n // 直接编码JSON\n System.out.println(gson.toJson(new int[]{1, 2, 3}));\n System.out.println(gson.toJson(List.of(4, 5, 6)));\n System.out.println(gson.toJson("json-string"));\n System.out.println(gson.toJson(2022));\n System.out.println(gson.toJson(Map.of("k1", "v1", "k2", "v2")));\n }\n}\n\nclass Student {\n private String name;\n private int age;\n\n public String getName() {\n return name;\n }\n\n public void setName(String name) {\n this.name = name;\n }\n\n public int getAge() {\n return age;\n }\n\n public void setAge(int age) {\n this.age = age;\n }\n\n @Override\n public String toString() {\n return "Student{" +\n "name='" + name + '\\'' +\n ", age=" + age +\n '}';\n }\n}\n输出
\nStudent{name='Max', age=24}\n[Ljava.lang.String;@4f47d241\n[a, b, c]\n{\n "name": "Max",\n "age": 24\n}\n[\n 1,\n 2,\n 3\n]\n[\n 4,\n 5,\n 6\n]\n"json-string"\n2022\n{\n "k1": "v1",\n "k2": "v2"\n}\nimport com.google.gson.*;\nimport com.google.gson.annotations.*;\n\npublic class Main {\n public static void main(String[] args) throws Throwable {\n GsonBuilder builder = new GsonBuilder();\n builder.excludeFieldsWithoutExposeAnnotation(); // 排除没有Expose注解的字段\n Gson gson = builder.create();\n\n Student student = new Student();\n student.setName("Jvav");\n student.setAge(20);\n student.setId(202212345678L);\n System.out.println(gson.toJson(student)); // => {"student_name":"Jvav"}\n }\n}\n\nclass Student {\n // 序列化时，更名为student_name\n // 反序列化时，从student_name获取，或从alternate指定的数组中给定的键名获取\n @SerializedName(value = "student_name", alternate = {"NAME", "name"})\n // 参与序列化，也参与反序列化\n @Expose(serialize = true, deserialize = true)\n private String name;\n\n // 设置了 excludeFieldsWithoutExposeAnnotation，但没有 Expose 注解，忽略此字段\n private int age;\n\n // 使用 transient 关键字，无需配置即可指定忽略此字段\n private transient long id;\n\n public String getName() {\n return name;\n }\n\n public void setName(String name) {\n this.name = name;\n }\n\n public int getAge() {\n return age;\n }\n\n public void setAge(int age) {\n this.age = age;\n }\n\n public long getId() {\n return id;\n }\n\n public void setId(long id) {\n this.id = id;\n }\n}\nServlet API 由 javaEE 提供
\nhttps://docs.oracle.com/javaee/7/api/javax/servlet/http/HttpServlet.html
\nservlet 应用运行在容器下，开发时，需要指定其作为 provided 依赖
\n <!-- version 的同级，指定打包类型为 war 而非 jar。例如： -->\n<groupId>com.mycompany.app</groupId>\n<artifactId>my-app</artifactId>\n<version>1.0-SNAPSHOT</version>\n<packaging>war</packaging>\n\n\n<dependencies>\n <dependency>\n <groupId>javax.servlet</groupId>\n <artifactId>javax.servlet-api</artifactId>\n <version>4.0.1</version>\n <scope>provided</scope>\n </dependency>\n</dependencies>\n仓库地址：https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api
\n此外，还需要安装 maven-war-plugin 插件，用于打包 war 文件
\n<build>\n <plugins>\n <plugin>\n <groupId>org.apache.maven.plugins</groupId>\n <artifactId>maven-war-plugin</artifactId>\n <version>3.2.2</version>\n </plugin>\n </plugins>\n</build>\n仓库地址：https://mvnrepository.com/artifact/org.apache.maven.plugins/maven-war-plugin
\n在项目的源文件目录下，编写如下代码
\n// HelloServlet.java\n\npackage com.mycompany.app;\n\nimport javax.servlet.http.*;\nimport javax.servlet.annotation.*;\nimport java.io.*;\n\n@WebServlet(urlPatterns = "/")\npublic class HelloServlet extends HttpServlet {\n protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {\n resp.setContentType("text/html");\n PrintWriter pw = resp.getWriter();\n pw.write("<h1>Hello, world!</h1>");\n pw.flush();\n }\n}\n目录结构如下
\nmy-app\n │ pom.xml\n └─src\n ├─main\n │ └─java\n │ └─com\n │ └─mycompany\n │ └─app\n │ HelloServlet.java\n │\n └─test\n └─java\n └─com\n └─mycompany\n └─app\n运行命令
\nmvn clean package\n在 target 目录下就得到 my-app-1.0-SNAPSHOT.war 文件
运行 servlet 的容器选择 tomcat，在这里下载 tomcat9（该版本支持 Servlet 4.0, JSP 2.3, EL 3.0, WebSocket 1.1, JASPIC 1.1, java 8 及以上）
tomcat10 开始，提供的 API 主要包已从 javax 改为 jakarta。\n关于不同版本的区别，查看：https://tomcat.apache.org/whichversion.html
tomcat 有如下文件结构
\napache-tomcat-9.0.64\n ├─bin\n ├─conf\n ├─lib\n ├─logs\n ├─temp\n ├─webapps\n └─work\n其中 webapps 目录已经有一些 servlet 应用了
\nwebapps\n ├─app\n ├─docs\n ├─examples\n ├─host-manager\n ├─manager\n └─ROOT\n └─WEB-INF\n运行 apache-tomcat-9.0.64/bin/startup.sh 脚本（windows 下一律为 .bat ，命令行或者双击即可运行），以启动 tomcat 服务器
\n之后，tomcat 便运行在 8080 端口上
\n访问 http://localhost:8080/ ，若出现 Tomcat 页面，则表示启动成功
\n并且，此时运行的 servlet 应用，正是 webapps/ROOT 对应的程序
\n访问 http://localhost:8080/examples/ ，则对应 webapps/example 程序
\n将 my-app-1.0-SNAPSHOT.war 文件置于 webapps 目录下，浏览器访问 http://localhost:8080/my-app-1.0-SNAPSHOT/，则显示刚才编写的程序
\n\nWindows 下 tomcat 控制台输出乱码，可修改
\nconf/logging.properties文件\n只需修改下面这行配置即可\njava.util.logging.ConsoleHandler.encoding = GBK
https://docs.oracle.com/javaee/7/api/javax/servlet/ServletRequest.html
https://docs.oracle.com/javaee/7/api/javax/servlet/ServletResponse.html
https://docs.oracle.com/javaee/7/api/javax/servlet/http/HttpServletRequest.html
https://docs.oracle.com/javaee/7/api/javax/servlet/http/HttpServletResponse.html
package com.mycompany.app;\n\nimport javax.servlet.ServletException;\nimport javax.servlet.http.*;\nimport javax.servlet.annotation.*;\nimport java.io.*;\nimport java.util.*;\nimport java.util.concurrent.*;\n\n@WebServlet(urlPatterns = "/test") // 其中，'/' 路径不仅匹配根路径，还匹配所有未匹配路径\npublic class HelloServlet extends HttpServlet {\n // Servlet中定义的字段，需要考虑多线程并发访问\n private Map<String, String> map = new ConcurrentHashMap<>();\n\n protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {\n resp.setContentType("text/html");\n\n Map<String, String[]> query = req.getParameterMap(); // query string\n String method = req.getMethod();\n String uri = req.getRequestURI();\n\n PrintWriter pw = resp.getWriter();\n pw.write(method);\n pw.write(uri);\n pw.write(query.toString());\n pw.flush();\n }\n\n @Override\n protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {\n // ...\n // 此时即面向 HttpServletRequest 和 HttpServletResponse 编程\n // 注意 HttpServletRequest 继承了 ServletRequest，HttpServletResponse 继承了 ServletResponse\n\n req.getRequestDispatcher("/").forward(req, resp); // 转发给其它servlet\n\n resp.sendRedirect("/hi"); // 302\n\n resp.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); // 301\n resp.setHeader("Location", "/hello");\n }\n}\n\n\njsp 了解即可。
\n
jsp 的访问规则类似于 php
\n在 my-app/src/main/webapp 目录新建 index.jsp，内容如下：
<html>\n <head>\n <title>Hello World - JSP</title>\n </head>\n <body>\n <%-- JSP Comment --%>\n <h1>Hello World!</h1>\n <p>\n <% out.println("Your IP address is "); %>\n <span style="color:red"> <%= request.getRemoteAddr() %> </span>\n </p>\n </body>\n</html>\n其中，JSP 内置了几个变量：
\nout：表示 HttpServletResponse 的 PrintWriter；
session：表示当前 HttpSession 对象；
request：表示 HttpServletRequest 对象。
Filter 可以在 HTTP 请求到达 Servlet 之前，对 ServletRequest 和 ServletResponse 进行一些预处理（一般是一些公共逻辑）
多个 Filter 可以链式处理
@WebFilter(urlPatterns = "/*")\npublic class EncodingFilter implements Filter {\n public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {\n request.setCharacterEncoding("UTF-8");\n response.setCharacterEncoding("UTF-8");\n chain.doFilter(request, response); // 允许链式Filter\n }\n}\n\n@WebFilter("/*")\npublic class LogFilter implements Filter {\n public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {\n System.out.println("LogFilter: process " + ((HttpServletRequest) request).getRequestURI());\n chain.doFilter(request, response);\n }\n}\n注意，一般情况下都调用 chain.doFilter(request, response)，否则将不会移交下一个 Filter 处理
Listener 在触发某些生命周期时，调用回调
\n@WebListener\npublic class AppListener implements ServletContextListener {\n public void contextInitialized(ServletContextEvent sce) {\n System.out.println("WebApp initialized: ServletContext = " + sce.getServletContext());\n }\n public void contextDestroyed(ServletContextEvent sce) {\n System.out.println("WebApp destroyed.");\n }\n public void HttpSessionListener(ServletContextEvent sce) {}\n public void ServletRequestListener(ServletContextEvent sce) {}\n public void ServletRequestAttributeListener(ServletContextEvent sce) {}\n public void ServletContextAttributeListener(ServletContextEvent sce) {}\n}\n\n\nApache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a project's build, reporting and documentation from a central piece of information.
\n
进入~/.m2目录（Windows 下为%USERPROFILE%/.m2），新建settings.xml文件，内容修改为
<settings>\n <mirrors>\n <mirror>\n <id>aliyun</id>\n <name>aliyun</name>\n <mirrorOf>central</mirrorOf>\n <url>https://maven.aliyun.com/repository/central</url>\n </mirror>\n </mirrors>\n</settings>\nhttps://maven.apache.org/guides/getting-started/maven-in-five-minutes.html
\nmvn archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4 -DinteractiveMode=false\n第一次运行这个命令会下载一些 artifacts(plugin jars and other files)
生成my-app文件夹，含以下目录结构
my-app\n │ pom.xml\n │\n └─src\n ├─main\n │ └─java\n │ └─com\n │ └─mycompany\n │ └─app\n │ App.java\n │\n └─test\n └─java\n └─com\n └─mycompany\n └─app\n AppTest.java\n在 pom.xml 中可以看到项目名、包名和版本
与指定 -DgroupId=com.mycompany.app -DartifactId=my-app 的一致
<groupId>com.mycompany.app</groupId>\n<artifactId>my-app</artifactId>\n<version>1.0-SNAPSHOT</version>\n项目属性，构建选项
\n<properties>\n <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>\n <maven.compiler.source>1.7</maven.compiler.source>\n <maven.compiler.target>1.7</maven.compiler.target>\n</properties>\n依赖
\n<dependencies>\n <dependency>\n <groupId>junit</groupId>\n <artifactId>junit</artifactId>\n <version>4.11</version>\n <scope>test</scope>\n </dependency>\n</dependencies>\n\n\nWhat did I just do?
\nYou executed the Maven goal archetype:generate, and passed in various parameters to that goal. The prefix archetype is the plugin that provides the goal. If you are familiar with Ant, you may conceive of this as similar to a task. This archetype:generate goal created a simple project based upon a maven-archetype-quickstart archetype. Suffice it to say for now that a plugin is a collection of goals with a general common purpose. For example the jboss-maven-plugin, whose purpose is "deal with various jboss items".
\n
执行以下命令构建这个项目
\nmvn package\n运行构建产物
\njava -cp target/my-app-1.0-SNAPSHOT.jar com.mycompany.app.App\n输出
\nHello World!\n注意，如果需要支持 java9 及以上，需要指定pom.xml ，例如：
<properties>\n <maven.compiler.release>11</maven.compiler.release>\n </properties>\n\n <build>\n <pluginManagement>\n <plugins>\n <plugin>\n <groupId>org.apache.maven.plugins</groupId>\n <artifactId>maven-compiler-plugin</artifactId>\n <version>3.8.1</version>\n </plugin>\n </plugins>\n </pluginManagement>\n </build>\nhttps://maven.apache.org/guides/getting-started/index.html
\nmvn compile\n编译后的 class 文件将置于 ${basedir}/target/classes 文件夹
mvn test\n如果只编译测试不运行，则执行以下命令
\nmvn test-compile\nmvn package\njar 文件将生成至 ${basedir}/target目录
mvn install\nmvn site\nmvn clean\n所有置于 ${basedir}/src/main/resources 目录的文件都会被打包至 jar 文件，并且资源文件相对于 jar 包根路径有相同的目录结构
依赖定义于 pom.xml 如下
<dependencies>\n <dependency>\n <groupId>junit</groupId>\n <artifactId>junit</artifactId>\n <version>4.11</version>\n <scope>test</scope>\n </dependency>\n</dependencies>\n依赖有四种类型：compile provided runtime test
\nMaven 读取依赖的顺序是，先在 ~/.m2/repository （本地仓库）查找，没有查找到则在远程仓库（中央仓库）查找
Maven 中存在三种生命周期：clean、default、site，分别用于清理项目、构建项目、生成项目站点，而在一个生命周期中通常又会包含若干个 phase（阶段）
\ndefault 生命周期是所有生命周期中最核心部分，包括以下 phase
\nvalidate\ninitialize\ngenerate-sources\nprocess-sources\ngenerate-resources\nprocess-resources\ncompile\nprocess-classes\ngenerate-test-sources\nprocess-test-sources\ngenerate-test-resources\nprocess-test-resources\ntest-compile\nprocess-test-classes\ntest\nprepare-package\npackage\npre-integration-test\nintegration-test\npost-integration-test\nverify\ninstall\ndeploy\n例如，运行 mvn package 后，Maven 执行 default 生命周期，将运行 validate 到 package 之间（闭区间）的所有 phase
clean 生命周期（lifecycle），包括以下 phase
\npre-clean\nclean\npost-clean\n上文介绍了一些 mvn 命令，实际上，命令还可以指定多个 phase，这些 phase 依次进行，例如
\nmvn clean compile # 清理后编译\nmvn clean package # 清理后打包\n执行 phase 时，触发多个 goal。goal 的命名总是 abc:xyz 这种形式。
\n例如，执行 test 时，触发 compiler:testCompile surefire:test
也可以直接指定执行 goal，例如 mvn tomcat:run
注：也可以这样执行 goal：
\nmvn [groupId]:[artifactId]:[version]:[goalName]\nmvn org.apache.maven.plugins:maven-dependency-plugin:2.1:list\n一个 Maven 插件中，可以具备一个或多个功能，插件功能实现了 goal。
\n因此，phase 实际上是绑定到一个或多个 goal 工作，goal 由 plugin 提供
\nMaven 自带 phase 绑定了如下 goal
\n\n| 生命周期（lifecycle） | \n阶段（phase） | \n目标（goal） | \n
|---|---|---|
| clean | \nclean | \nmaven-clean-plugin:clean | \n
| default | \nprocess-resources | \nmaven-resources-plugin:resources | \n
| compile | \nmaven-compiler-plugin:compile | \n|
| process-test-resources | \nmaven-resources-plugin:testResources | \n|
| test | \nmaven-surefire-plugin:test | \n|
| package | \nmaven-jar-plugin:jar | \n|
| install | \nmaven-install-plugin:install | \n|
| deploy | \nmaven-deploy-plugin:deploy | \n|
| site | \nsite | \nmaven-site-plugin:site | \n
| site-deploy | \nmaven-site-plugin:deploy | \n
其余绑定需要在 pom.xml 中配置，例如
<plugin>\n <groupId>org.apache.maven.plugins</groupId>\n <artifactId>maven-source-plugin</artifactId>\n <version>2.1.1</version>\n <executions>\n <execution>\n <id>attach-sources</id>\n <phase>package</phase>\n <goals>\n <goal>jar-no-fork</goal>\n </goals>\n </execution>\n </executions>\n</plugin>\n此时，如果运行 mvn package，则先触发 default 生命周期 package 阶段，再触发 attach-sources 的 package 阶段
《Maven 实战》
\n","tags":["java"]},{"id":"java-thread-utils","url":"https://yieldray.fun/posts/java-thread-utils","title":"java多线程实用库","date_published":"2022-07-18T12:30:00.000Z","date_modified":"2022-07-18T12:30:00.000Z","content_text":"多线程工具类由 java.util.concurrent 包提供
锁工具类由 java.util.concurrent.locks 包提供
java.util.concurrent.locks 包：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/locks/ReentrantLock.html
锁接口：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/locks/Lock.html
ReentrantLock 锁由 java.util.concurrent.locks 包提供，可作为 synchronized 语法的替代
\nimport java.util.concurrent.locks.Lock;\nimport java.util.concurrent.locks.ReentrantLock;\nclass X {\n private final Lock lock = new ReentrantLock();\n\n public void m() {\n lock.lock(); // 加锁\n try {\n // ... method body\n } finally {\n lock.unlock(); // 解锁\n }\n }\n}\nReentrantLock（而非 Lock 接口）还提供更多实例方法。
参见 API：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/locks/ReentrantLock.html
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/locks/Lock.html
\nLock 接口还允许尝试获取锁
\n// lock.lockInterruptibly(); // 尝试获取锁除非当前线程被 interrupted\n// lock.tryLock(1, TimeUnit.SECONDS); // 指定1s\nif (lock.tryLock()) { // 尝试获取锁\n try {\n // ...\n } finally {\n lock.unlock();\n }\n}\nimport java.util.*;\nimport java.util.concurrent.locks.*;\n\nclass TaskQueue {\n private final Lock lock = new ReentrantLock();\n private final Condition condition = lock.newCondition(); // 注意这个 Condition 对象是绑定到 Lock 对象上的\n private final LinkedList<String> queue = new LinkedList<>();\n\n public void addTask(String s) {\n lock.lock();\n try {\n queue.add(s);\n condition.signalAll(); // 相当于 notifyAll， signal 则相当于 notify\n } finally {\n lock.unlock();\n }\n }\n\n public String getTask() throws InterruptedException {\n lock.lock();\n try {\n while (queue.isEmpty()) {\n condition.await(); // 相当于 wait，此方法可能抛出 InterruptedException，因为在等待期间可能触发 interrupt()\n }\n return queue.remove();\n } finally {\n lock.unlock();\n }\n }\n}\nReadWriteLock 是一个接口，提供了 readLock 和 writeLock 两个实例方法（返回 Lock 接口）。
可实现一个资源可以被多个线程同时读，或者被一个线程写，但是不能同时存在读和写线程。
ReentrantReadWriteLock 可重入读写锁实现了 ReadWriteLock 接口
\nimport java.util.*;\nimport java.util.concurrent.locks.*;\n\nclass MyReadWriteMap {\n private volatile Map<String, String> map = new HashMap<>();\n private final ReadWriteLock lock = new ReentrantReadWriteLock();\n\n public void put(String key, String value) {\n lock.writeLock().lock(); // 加写锁\n try {\n map.put(key, value);\n } finally {\n lock.writeLock().unlock(); // 释放写锁\n }\n }\n\n public String get(String key) {\n lock.readLock().lock(); // 加读锁\n try {\n return map.get(key);\n } finally {\n lock.readLock().unlock(); // 释放读锁\n }\n }\n}\nStampedLock 在 ReentrantReadWriteLock 的基础上新增一种乐观读的模式，允许获取写锁后写入。
（StampedLock 是提供的是独立的接口，并非 ReadWriteLock 接口实现，即使其 API 有相似性）
乐观读模式（没有加锁）为了防止读写过程中资源不同步，还需要额外的判断。
此外，StampedLock 也同样提供独占写锁和悲观读锁 （就像 ReadWriteLock）
并且，StampedLock 提供转换为读锁、写锁、读写锁的方法
import java.util.concurrent.locks.*;\n\nclass Complex {\n private final StampedLock stampedLock = new StampedLock();\n private double x = 0;\n private double y = 0;\n\n public void set(double newX, double newY) {\n long stamp = stampedLock.writeLock(); // 获取写锁\n try {\n x = newX;\n y = newY;\n } finally {\n stampedLock.unlockWrite(stamp); // 释放写锁\n }\n }\n\n public double[] getAsArray() {\n long stamp = stampedLock.tryOptimisticRead(); // 获得一个乐观读锁\n double currentX = x;\n double currentY = y;\n\n if (!stampedLock.validate(stamp)) { // 检查乐观读锁后是否有其他写锁发生\n stamp = stampedLock.readLock(); // 获取一个悲观读锁\n try {\n currentX = x;\n currentY = y;\n } finally {\n stampedLock.unlockRead(stamp); // 释放悲观读锁\n }\n }\n return new double[]{currentX, currentY};\n }\n}\njava.util.concurrent 包提供了一些线程安全的集合类，实现了集合类接口，可在多线程时使用。
\n例如：ConcurrentMap<K,V> ConcurrentHashMap<K,V> ConcurrentLinkedQueue<E> ConcurrentLinkedDeque<E> CopyOnWriteArraySet<E> CopyOnWriteArrayList<E> 等等。
需要时参阅 API 文档即可。
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/package-summary.html
java.util.concurrent.atomic 包提供了基于原子操作的封装类，以一种自旋锁的方式进行读写
\nvar i = new AtomicInteger(1); // 可指定初始值，不指定则为默认值\nSystem.out.println(i.get()); // 1\nSystem.out.println(i.addAndGet(9)); // 10\nSystem.out.println(i.incrementAndGet()); // 11\nFuture 接口：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/Future.html\nFutureTask 类：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/FutureTask.html
\nFutureTask task = new FutureTask(new Callable<Integer>() {\n @Override\n public Integer call() throws Exception {\n return 123;\n }\n});\nThread t1 = new Thread(task);\nt1.start();\nSystem.out.println(task.get()); // 123\n注意到线程池 ExecutorService 接口的 submit 方法还有一个参数为 Callable 的重载方法，该方法返回 Future<?>
\nExecutorService executor = Executors.newFixedThreadPool(4);\nCallable<Integer> task = new Callable<Integer>() {\n @Override\n public Integer call() throws Exception {\n return 123;\n }\n};\nFuture<Integer> future = executor.submit(task);\nInteger result = future.get();\nSystem.out.println(result); // 1\nCompletableFuture<Integer> cf = CompletableFuture.supplyAsync(() -> 123);\ncf = cf.thenApplyAsync(n -> n - 23); // 类似于 Promise.then 回调参数是上一次执行的返回值\ncf.thenAccept(System.out::println); // 100，删掉上面一行则是 123\ncf.exceptionally((e) -> {\n e.printStackTrace();\n return null;\n});\n\nCompletableFuture<Object> cfs = CompletableFuture.anyOf(CompletableFuture.supplyAsync(() -> 123), CompletableFutursupplyAsync(() -> 456));\ncfs.thenAccept(System.out::println); // 返回的是两个CompletableFuture中先完成的那个\n\n\n// 主线程不要立刻结束，否则CompletableFuture默认使用的线程池会立刻关闭:\nThread.sleep(200);\nThreadLocal 为变量在每个线程中创建了一个副本，这样每个线程都可以访问自己内部的副本变量
\nThreadLocal<Integer> local = new ThreadLocal<>();\nIntStream.range(0, 5).forEach(i -> new Thread(() -> {\n try {\n local.set(i);\n System.out.println("[" + Thread.currentThread().getName() + "]: " + local.get());\n } finally {\n local.remove();\n // 如果不进行清除，当这个线程再次执行时，仍会获取到上次设置的变量\n // 本例中由于每个线程都对local进行设置，所以也可以不用清除。\n\n // 原理类似于：\n // var tlm = new Map<Thread, T>; // var local = new ThreadLocal<T>()\n // tlm.set(Thread.currentThread(), value); // local.set(value);\n // tlm.get(Thread.currentThread()); // local.get();\n }\n}).start());\n输出（顺序随机）
\n[Thread-0]: 0\n[Thread-4]: 4\n[Thread-1]: 1\n[Thread-3]: 3\n[Thread-2]: 2\n线程池工具类由 java.util.concurrent 包提供
\n线程池用于管理和分配线程
\njava.util.concurrent.Executors 类提供静态方法，返回不同类型的线程池，这些线程池用 ExecutorService 接口操作
\nhttps://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/ExecutorService.html
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/concurrent/Executors.html
import java.util.concurrent.*;\n\npublic class Main {\n public static void main(String[] args) throws InterruptedException {\n ExecutorService es = Executors.newFixedThreadPool(4); // 创建一个固定大小的线程池\n\n for (int i = 1; i <= 6; i++) {\n int id = i;\n es.submit(() -> System.out.println("Running Task: " + id));\n }\n es.shutdown(); // 立即关闭线程池\n// es.awaitTermination(5, TimeUnit.SECONDS); // 等待5s后再关闭线程池\n }\n}\n上面的线程池管理固定的 4 个线程，所以 1 2 3 4 号线程同时运行，5 6 号线程总是在前面的线程执行完毕后运行
因此，输出结果应该是 1 2 3 4 之间任意排序，然后是 5 6 之间任意排序
// 该线程池会动态调整线程数\nExecutorService es = Executors.newCachedThreadPool();\n// 指定动态调整的线程数范围\nint min = 4;\nint max = 10;\nExecutorService es = new ThreadPoolExecutor(min, max, 60L, TimeUnit.SECONDS, new SynchronousQueue<Runnable>());\nScheduledExecutorService ses = Executors.newScheduledThreadPool(4);\n// 1秒后执行一次性任务:\nses.schedule(new Task("one-time"), 1, TimeUnit.SECONDS);\n// 2秒后开始执行定时任务，每3秒执行:\nses.scheduleAtFixedRate(new Task("fixed-rate"), 2, 3, TimeUnit.SECONDS);\n// 2秒后开始执行定时任务，以3秒为间隔执行:\nses.scheduleWithFixedDelay(new Task("fixed-delay"), 2, 3, TimeUnit.SECONDS);\nForkJoin 线程池用于将大任务拆成多个小任务并行执行。
\nimport java.util.*;\nimport java.util.concurrent.*;\n\npublic class Main {\n public static void main(String[] args) throws Exception {\n long[] array = new Random(233).longs(1, 100)\n .limit(2000).toArray();\n long sum = Arrays.stream(array).sum(); // 求和\n\n // 执行 ForkJoin 任务\n ForkJoinTask<Long> task = new SumTask(array, 0, array.length);\n Long result = ForkJoinPool.commonPool().invoke(task);\n System.out.println("expect: " + sum + " got: " + result);\n // expect: 100732 got: 100732\n }\n}\n\n// 递归任务实现\nclass SumTask extends RecursiveTask<Long> {\n static final int THRESHOLD = 500;\n long[] array;\n int start;\n int end;\n\n SumTask(long[] array, int start, int end) {\n this.array = array;\n this.start = start;\n this.end = end;\n }\n\n @Override\n protected Long compute() {\n if (end - start <= THRESHOLD) {\n // 如果任务足够小，直接计算\n return Arrays.stream(array).skip(start).limit(end - start).sum(); // 数组指定范围求和\n } else {\n // 任务太大，一分为二\n int middle = (end + start) / 2;\n SumTask subtask1 = new SumTask(this.array, start, middle);\n SumTask subtask2 = new SumTask(this.array, middle, end);\n invokeAll(subtask1, subtask2);\n long subresult1 = subtask1.join();\n long subresult2 = subtask2.join();\n return subresult1 + subresult2;\n }\n }\n}\nThreadPoolExecutor 是通用的 ExecutorService 实现
能够实现相较之 Executors 静态方法提供的线程池 newFixedThreadPool()、newSingleThreadExecutor()、newCachedThreadPool() 更灵活的线程池
创建新的线程的方法主要有两个。
\nhttps://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Thread.html
\npublic class Main {\n public static void main(String[] args) {\n // https://docs.oracle.com/javase/8/docs/api/java/lang/Thread.html\n Thread t1 = new MyThread();\n Thread t2 = new Thread(new MyRunnable());\n Thread t3 = new Thread(() -> System.out.println("Lambda"));\n t1.start();\n t2.start();\n t3.start();\n // 注意是 start() 方法启动线程，调用run()方法仅在当前线程执行，不会创建线程\n\n // 下面演示一些实例对象方法\n t1.setPriority(3);// 优先级。范围从 MIN_PRIORITY 到 MAX_PRIORITY\n t1.join(); // 调用此方法的线程等待该线程执行完毕再继续执行，即 await\n t1.interrupt(); // 将该线程设置为interrupted，在该线程中通过Thread.interrupted()或isInterrupted()方法返回是否interrupted\n t1.isInterrupted(); // 返回该线程是否interrupted\n t1.setDaemon(true); // 设置该线程为守护线程，守护线程在其他线程执行完毕后自动退出\n t1.getState(); // 返回运行状态，字符串\n }\n\n Runnable example = () -> {\n // Thread类的静态方法，不建议在实例对象上调用\n // 这些静态方法用于控制调用该方法的线程\n Thread.sleep(1000); // ms\n Thread.interrupted(); // 返回是否当前线程被调用了interrupt()方法\n };\n}\n\nclass Counter {// 多个线程之间共享内存，所以此对象在所有线程中共享，皆可以访问\n public static final Object lock = new Object();\n public static int count = 0;\n}\n\nclass MyThread extends Thread {\n public volatile int syncValue = 123; // volatile 关键字确保变量在不同线程同步\n public int asyncValue = 456; // 非 volatile 变量需要加锁才能保证不出异常\n\n public synchronized void syncMethod() {\n // synchronized 修饰的方法，是 synchronized(this) {/* 函数体 */} 的语法糖\n // 加锁的对象是 this，即当前对象\n };\n public static synchronized void syncStaticMethod(){\n // synchronized 修饰的静态方法，是 synchronized(当前类.class) {/* 函数体 */} 的语法糖\n // 例如，这里相当于 synchronized(MyThread.class){}\n }\n\n @Override\n public void run() {\n synchronized (Counter.lock) { // 线程锁，通过给定锁保证（非原子）操作是同步的\n Counter.count += 1;\n }\n // 死锁产生的原因及四个必要条件\n // https://zhuanlan.zhihu.com/p/25677118\n\n System.out.println("MyThread");\n }\n}\n\nclass MyRunnable implements Runnable {\n @Override\n public void run() {\n System.out.println("MyRunnable");\n }\n}\n注意：当前线程若处于 wait() sleep() join() 方法的等待状态，而被触发了 interrupt() ，则抛出 InterruptedException 异常
\npublic class Main {\n public static void main(String[] args) throws InterruptedException {\n Thread t = new MyThread();\n t.start();\n Thread.sleep(10); // 当前线程暂停10毫秒\n t.interrupt(); // 中断t线程\n t.join(); // 等待t线程结束\n System.out.println("end");\n }\n}\n\nclass MyThread extends Thread {\n public void run() {\n int n = 0;\n while (!isInterrupted())\n System.out.println("loop " + (++n) + " times!");\n }\n}\n上面的代码相当于主线程允许 MyThread 线程执行 10ms，然后向 MyThread 线程发出中断信号。
MyThread 线程循环检测自身来决定是否继续运行。
此外，还可以通过设置标志位来实现线程中断。
注意 volatile 关键字，表示标识的变量在线程间实时共享（即：变量在不同的线程中是一致的，否则可能会获取到缓存的值，导致不一致）
细节上，注意由于 running 标志位附加在 MyThread 实例上，需要声明MyThread t = new MyThread()而非Thread t = new MyThread()
public class Main {\n public static void main(String[] args) throws InterruptedException {\n MyThread t = new MyThread();\n t.start();\n Thread.sleep(10);\n t.running = false; // 标志位置为false\n System.out.println("end!");\n }\n}\n\nclass MyThread extends Thread {\n public volatile boolean running = true;\n\n public void run() {\n int n = 0;\n while (running)\n System.out.println("loop " + (++n) + " times!");\n }\n}\njvm 将在所有非守护线程执行完后，自动退出。此时所有守护线程也立即停止。
同理，若存在守护线程，守护线程将只能在任意非守护线程运行时运行。
因此，守护线程一般用于服务非守护线程运行。
并且，守护线程不应持有需要关闭的资源，因为守护线程没有机会执行关闭操作。
对某一线程执行实例方法 setDaemon(true) 即可将该线程指定为守护线程
在执行非原子操作时，我们一般需要进行线程同步，以保证数据一致
\n\n\n原子操作可简单理解为单独的 CPU 指令 （在多核处理器中，情况更为复杂）
\n
线程锁的声明：
\nsynchronized(LOCK) {\n // 临界区（Critical Section）\n}\n临界区最多只有一个线程能执行，因此可保证其内部操作的原子性（前提是正确使用锁）。
\nsynchronized 标识则是 synchronized(){} 的语法糖，具体见第一节演示。
在 jvm 中，对于同一个锁，synchronized(){} 也允许嵌套使用（不同的锁当然允许嵌套）。
可重入锁在所有嵌套的锁都释放后释放。
例如：
\nsynchronized(LOCK){\n // 未释放\n synchronized(LOCK){\n // 未释放\n }\n // 未释放\n}\n// 释放\n\n\n死锁是线程都在等待对方先释放资源\n活锁则是线程彼此释放资源又同时占用对方释放的资源
\n
位于 Object 类上的实例方法 wait() notify() 将在调用这些方法的线程中生效，控制锁的行为（这个锁即是该 Object 实例对象）
\n在某一线程中，对一对象调用 wait() 实例方法，线程将会暂停（直至其它线程中调用这个对象的 notify() 实例方法唤醒该线程）
wait() 实例方法可指定等待时间作为参数，参见https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/lang/Object.html\nnotify() 实例方法随机唤醒一个处于 wait() 状态的线程
notifyAll() 实例方法唤醒所有处于 wait() 状态的线程，一般情况下都使用 notifyAll
示例：
\nimport java.util.*;\n\nclass TaskQueue {\n private final Queue<String> queue = new LinkedList<>();\n\n public synchronized void addTask(String s) {\n queue.add(s);\n notifyAll(); // 通知所有 wait() 状态的线程\n }\n\n public synchronized String getTask() {\n while (queue.isEmpty()) // 循环执行\n try {\n wait(); // 此方法可能抛出 InterruptedException，因为在等待期间可能触发 interrupt()\n } catch (InterruptedException e) {\n e.printStackTrace(); // 处于演示目的，可以忽略此处的错误处理\n }\n return queue.remove();\n }\n}\n在主线程中：
\npublic class Main {\n public static void main(String[] args) throws InterruptedException {\n TaskQueue task = new TaskQueue();\n Thread t1 = new Thread(() -> System.out.println("Got Task: " + task.getTask()));\n Thread t2 = new Thread(() -> task.addTask("new task"));\n t1.start(); // t1 先运行，等待有任务才输出\n t2.start(); // t2 后运行，添加任务\n }\n}\n日前在java 函数式编程中提到了 java 流
前面讲到通过 Stream.iterate() 和 Stream.of() 创建流。
一些数组 API 和 集合 API 也提供了转换为流的方法，例如：Arrays.stream() 和 Collection<E> 实例方法 stream()
其它 API 也可能以流的形式提供，例如 java.util.Random 类
此外，除了通用的流（java.util.stream.Stream）外，还提供了几个特化的流：IntStream LongStream DoubleStream 。有关 java8 之后提供的 API，查阅https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/stream/package-summary.html ，详细内容务必查阅 API 文档。
\nStream.of() Stream.generate() Stream.iterate() 用于生成流。
Stream.empty() 用于生成一个空流。
Stream.concat() 用于合并流。
Stream.builder() 返回流建造者接口，在下一节讨论。
public interface Stream<T> extends BaseStream<T, Stream<T>> {\n // map 系列函数\n <R> Stream<R> map(Function<? super T, ? extends R> mapper);\n IntStream mapToInt(ToIntFunction<? super T> mapper);\n LongStream mapToLong(ToLongFunction<? super T> mapper);\n DoubleStream mapToDouble(ToDoubleFunction<? super T> mapper);\n <R> Stream<R> flatMap(Function<? super T, ? extends Stream<? extends R>> mapper);\n IntStream flatMapToInt(Function<? super T, ? extends IntStream> mapper);\n LongStream flatMapToLong(Function<? super T, ? extends LongStream> mapper);\n DoubleStream flatMapToDouble(Function<? super T, ? extends DoubleStream> mapper);\n\n // 链式调用函数\n Stream<T> distinct();\n Stream<T> sorted();\n Stream<T> sorted(Comparator<? super T> comparator);\n Stream<T> peek(Consumer<? super T> action);\n Stream<T> limit(long maxSize);\n Stream<T> skip(long n);\n Stream<T> filter(Predicate<? super T> predicate);\n\n // 返回流中元素的数量\n long count();\n\n // 匹配函数\n boolean anyMatch(Predicate<? super T> predicate);\n boolean allMatch(Predicate<? super T> predicate);\n boolean noneMatch(Predicate<? super T> predicate);\n\n // 循环函数\n void forEach(Consumer<? super T> action);\n void forEachOrdered(Consumer<? super T> action);\n\n // 返回Optional的函数\n Optional<T> min(Comparator<? super T> comparator);\n Optional<T> max(Comparator<? super T> comparator);\n Optional<T> findFirst();\n Optional<T> findAny();\n\n // 转换为数组\n Object[] toArray();\n <A> A[] toArray(IntFunction<A[]> generator);\n\n // reduce系列函数\n T reduce(T identity, BinaryOperator<T> accumulator);\n Optional<T> reduce(BinaryOperator<T> accumulator);\n <U> U reduce(U identity, BiFunction<U, ? super T, U> accumulator, BinaryOperator<U> combiner);\n <R> R collect(Supplier<R> supplier, BiConsumer<R, ? super T> accumulator, BiConsumer<R, R> combiner);\n <R, A> R collect(Collector<? super T, A, R> collector);\n\n // java 9\n default Stream<T> takeWhile(Predicate<? super T> predicate);\n default Stream<T> dropWhile(Predicate<? super T> predicate);\n\n // java 16\n default <R> Stream<R> mapMulti(BiConsumer<? super T, ? super Consumer<R>> mapper);\n default IntStream mapMultiToInt(BiConsumer<? super T, ? super IntConsumer> mapper);\n default LongStream mapMultiToLong(BiConsumer<? super T, ? super LongConsumer> mapper);\n default DoubleStream mapMultiToDouble(BiConsumer<? super T, ? super DoubleConsumer> mapper);\n default List<T> toList();\n}\n此接口继承了 Consumer
accept(T t) 方法将 t 添加至流，不返回值
add(T t) 方法将 t 添加至流，返回 Stream.Builder
添加元素后，调用 build() 方法，返回 Stream
Optional 容器包装了需要存储的值或对象，因此可以在不使用异常的情况下处理 null
\njava8 https://docs.oracle.com/javase/8/docs/api/java/util/Optional.html
java17 https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/Optional.html
https://www.jishuchi.com/read/onjava8/12013
\n","tags":["java"]},{"id":"java-io","url":"https://yieldray.fun/posts/java-io","title":"java流式IO","date_published":"2022-07-11T14:22:22.000Z","date_modified":"2022-07-11T14:22:22.000Z","content_text":"注意！ 这里的 IO 流 不是 java.util.stream.* 包提供的流
面向字节(java.io):
\n面向字符和基于 Unicode (java.io):
\n同步非阻塞(java.nio):
\nPackage java.io
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/package-summary.html
Package java.nio
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/nio/package-summary.html
java.util.Scanner 实用类可通过正则表达式从流中解析原始类型和字符串。
这个流，是通过构造函数传入 Scanner 类中的。
// 构造函数，这里 ? 表示可选\nScanner(File source, ?String charsetName)\nScanner(InputStream source, ?String charsetName)\nScanner(Path source, ?String charsetName)\nScanner(ReadableByteChannel source, ?String charsetName)\nScanner(Readable source)\nScanner(String source)\n演示如下，具体 API，参阅https://docs.oracle.com/javase/8/docs/api/java/util/Scanner.html
\nScanner sc = new Scanner(System.in);\nif (sc.hasNext()) {\n String s = sc.next();\n}\nhttps://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/File.html
java.io.File 类，其构造函数传入文件路径，实例方法可获取文件信息
public class File implements Serializable, Comparable<File>\n{\n public File(String pathname);\n public File(String parent, String child);\n public File(File parent, String child);\n public File(URI uri);\n public String getName();\n public String getParent();\n public File getParentFile();\n public String getPath();\n public boolean isAbsolute();\n public String getAbsolutePath()\n public File getAbsoluteFile()\n public String getCanonicalPath() throws IOException;\n public File getCanonicalFile() throws IOException;\n public URI toURI();\n public boolean canRead();\n public boolean canWrite();\n public boolean exists();\n public boolean isDirectory();\n public boolean isFile();\n public boolean isHidden();\n public long lastModified();\n public long length();\n public boolean createNewFile() throws IOException;\n public boolean delete();\n public void deleteOnExit();\n public String[] list();\n public String[] list(FilenameFilter filter);\n public File[] listFiles();\n public File[] listFiles(FilenameFilter filter);\n public File[] listFiles(FileFilter filter);\n public boolean mkdir();\n public boolean mkdirs();\n public boolean renameTo(File dest);\n public boolean setLastModified(long time);\n public boolean setReadOnly();\n public boolean setWritable(boolean writable, boolean ownerOnly);\n public boolean setWritable(boolean writable);\n public boolean setReadable(boolean readable, boolean ownerOnly);\n public boolean setReadable(boolean readable);\n public boolean setExecutable(boolean executable, boolean ownerOnly);\n public boolean setExecutable(boolean executable);\n public boolean canExecute();\n public static File[] listRoots();\n public long getTotalSpace();\n public long getFreeSpace();\n public long getUsableSpace();\n public static File createTempFile(String prefix, String suffix, File directory) throws IOException;\n public static File createTempFile(String prefix, String suffix) throws IOException;\n public int compareTo(File pathname);\n public boolean equals(Object obj) {return (obj instanceof File file) ? compareTo(file) == 0 : false;};\n public int hashCode();\n public String toString() {return getPath();}\n public Path toPath();\n}\nhttps://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/InputStream.html
\npublic abstract class InputStream implements Closeable {\n public InputStream();\n public abstract int read() throws IOException;\n public int read(byte b[]) throws IOException;\n public int read(byte b[], int off, int len) throws IOException;\n public long skip(long n) throws IOException;\n public int available() throws IOException;\n public void close() throws IOException;\n public synchronized void mark(int readlimit);\n public synchronized void reset() throws IOException;\n public boolean markSupported();\n // ! 以下 API 自 java 9\n public byte[] readAllBytes() throws IOException;\n public byte[] readNBytes(int len) throws IOException;\n public long transferTo(OutputStream out) throws IOException;\n // ! 以下 API 自 java 11\n public int readNBytes(byte[] b, int off, int len) throws IOException;\n public static InputStream nullInputStream();\n // ! 以下 API 自 java 12\n public void skipNBytes(long n) throws IOException;\n}\nFileInputStream 是该类是一个实现
\nInputStream input = new FileInputStream("path/to/file");\ntry {\n int x = input.read();\n} finally {\n input.close();\n}\n使用 try(resource) 语法，自动 finally 并调用 close()
\ntry (InputStream input = new FileInputStream("path/to/file")) {\n int x = input.read();\n}// 自动 close (for java.lang.AutoCloseable)\nSystem.in 也是 InputStream 的一个实现
\n此外，还可以通过字节数组获取一个字节流
\nInputStream input = new ByteArrayInputStream(new byte[] { 72, 101, 108, 108, 111, 33 });\nhttps://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/OutputStream.html
\npublic abstract class OutputStream implements Closeable, Flushable {\n public OutputStream();\n public abstract void write(int b) throws IOException;\n public void write(byte b[]) throws IOException;\n public void write(byte b[], int off, int len) throws IOException;\n public void flush() throws IOException;\n public void close() throws IOException;\n // ! 以下 API 自 java 11\n public static OutputStream nullOutputStream()\n}\n与 InputStream 相同，OutputStream 也有类似的实现类：FileOutputStream，ByteArrayOutputStream
\ntry (OutputStream output = new FileOutputStream("path/to/file")) {\n output.write("Hello,world!".getBytes("UTF-8"));\n}\n/* -------------------------------------------------- */\nbyte[] data;\ntry (ByteArrayOutputStream output = new ByteArrayOutputStream()) {\n output.write("Hello,".getBytes("UTF-8"));\n output.write("world!".getBytes("UTF-8"));\n data = output.toByteArray();\n}\nSystem.out.println(new String(data, "UTF-8"));\n序列化指将 Java 对象转换为二进制数据，二进制数据可以视作 byte[]数组。
需要序列化的 Java 对象必须实现java.io.Serializable接口，即
class Clazz implements java.io.Serializable {\n // ... ...\n}\n注意，如果对象的属性是对象，属性对应类也必须实现 java.io.Serializable 接口。
java.io.Serializable 是一个空接口，仅用做标记，jvm 会为我们完成对象转换为二进制的操作
具体操作由 ObjectInputStream 和 ObjectOutputStream 类提供
\nReader 和 Writer 抽象类 （与 InputStream 和 OutputStream 面向字节不同的是）提供了面向字符的接口
Java 提供的字符流类型 char 是 16 bits （2 bytes）的 Unicode 字符
这两个抽象类可以方便地操作 字符串 String 和 字符数组 char[]
与 FileInputStream 和 FileOutputStream 对应的类有 FileReader 和 FileWriter
\n参见 https://www.jishuchi.com/read/onjava8/12029
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/Reader.html
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/Writer.html
// 假设其它API返回InputStream，但我们希望作为Reader处理（出于演示目的不使用FileReader）\nInputStream input = new FileInputStream("filename.txt");\nInputStreamReader reader = new InputStreamReader(input, StandardCharsets.UTF_8);\n\nOutputStream output = new FileOutputStream("filename.txt");\nOutputStreamWriter writer = new OutputStreamWriter(output);\njava.io.OutputStream <- java.io.FilterOutputStream <- java.io.PrintStream
\nPrintStream 类提供了两组重载方法，print 和 println，用于打印各种数据。System.out 和 System.err 都是该类的实现。
\njava.io.Writer <- java.io.PrintWriter
\nPrintWriter 与 PrintStream 基本一致，区别主要在于其面向字符而非字节
\n关于 FilterInputStream 和 FilterOutputStream 类，通过装饰器模式实现了对 InputStream 和 OutputStream 类的包装
\nBufferedInputStream 和 BufferedOutputStream 类 ：提供了缓冲功能
\nZipInputStream
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/zip/ZipInputStream.html
GZIPInputStream
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/zip/GZIPInputStream.html
JarInputStream
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/util/jar/JarInputStream.html
// 在java中，我们将一个更基础的Stream作为功能性Stream的构造函数的参数，来实现类似于管道的功能\nInputStream file = new FileInputStream("test.gz");\nInputStream buffered = new BufferedInputStream(file);\nInputStream gzip = new GZIPInputStream(buffered);\n// 在java中这种模式称作Filter模式\n\n// 如果我们自己要实现一个包装层，应当继承 FilterInputStream 抽象类，实现其方法\nclass MyInputStream extends FilterInputStream {}\n// 相较于直接继承其它已有的InputStream实现类，继承 FilterInputStream 类更有利于维护\n文档：https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/io/FilterInputStream.html
\nBufferedReader 和 BufferedWriter 类 ：提供了缓存功能
\n（类似于 FilterInputStream 和 FilterOutputStream）
\nPackage java.nio.file
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/nio/file/package-summary.html
Path 类表示文件系统中的某一路径，并提供了一些实用方法用于解析该路径
\nPaths 类提供了静态方法，用于将路径或 URI 类转换为 Path 类
\nPath Paths.get(String first, String... more)\nPath Paths.get(URI uri)\nPathMatcher 类表示一个 glob 或 regex ，用于进行文件查找，提供一个实例方法 matches(Path path) 返回是否匹配
PathMatcher matcher = FileSystems.getDefault().getPathMatcher("glob:**/*.{tmp,txt}");\nFiles.walk(test).filter(matcher::matches).forEach(System.out::println);\nPackage java.nio.file
https://docs.oracle.com/en/java/javase/17/docs/api/java.base/java/nio/file/package-summary.html
Files 类提供了丰富的静态方法用于文件操作
\nFileSystem 抽象类表示文件系统接口
\nFileSystems 类提供了静态方法用于获取文件系统（返回 FileSystem 类）
\n文件: https://www.jishuchi.com/read/onjava8/12016
流式 IO: https://www.jishuchi.com/read/onjava8/12029
标准 IO: https://www.jishuchi.com/read/onjava8/12036
新 IO: https://www.jishuchi.com/read/onjava8/12032
https://www.liaoxuefeng.com/wiki/1252599548343744/1255945227202752
https://docs.oracle.com/javase/8/docs/api/java/util/Date.html
该 API 已 Deprecated，不应在新项目中使用
此对象与 js 的 Date 对象实现基本一致
import java.text.SimpleDateFormat;\nimport java.util.*;\n\npublic class Main {\n public static void main(String[] args) {\n Date date = new Date();\n println("年", date.getYear() + 1900); // 必须加上1900\n println("月", date.getMonth() + 1);// 0~11，必须加上1\n println("日", date.getDate()); // 1~31，不能加1\n println("星期", date.getDay());\n println("小时", date.getHours());\n println("分钟", date.getMinutes());\n println("秒钟", date.getSeconds());\n println("格林威治时间", date.getTime());\n println("UTC相对于当前时区的时间差值", date.getTimezoneOffset());\n // 下面注释的方法java没有，是js实现\n // println(date.getMilliseconds());\n // println(date.getFullYear());\n // println(date.getUTCDate());\n // println(date.getUTCDay());\n // println(date.getUTCFullYear());\n // println(date.getUTCHours());\n // println(date.getUTCMilliseconds());\n // println(date.getUTCMinutes());\n // println(date.getUTCMonth());\n // println(date.getUTCSeconds());\n // println(date.toTimeString());\n // println(date.toUTCString());\n // println(date.toLocaleTimeString());\n println(date.toString());\n println(date.toGMTString());\n println(date.toLocaleString());\n println(Date.UTC(0, 0, 0, 0, 0, 0));\n // 一系列 date.setXXX 实例函数则不再赘述\n\n var sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");\n println(sdf.format(date));\n\n }\n\n static void println(Object... objs) {\n Arrays.stream(objs).forEach(System.out::print);\n System.out.println();\n }\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/util/Calendar.html
https://docs.oracle.com/javase/8/docs/api/java/util/TimeZone.html
import java.text.SimpleDateFormat;\nimport java.util.*;\n\npublic class Main {\n public static void main(String[] args) {\n Calendar c = Calendar.getInstance();// 获取基于当前时间的Calendar实例对象（注意无法new此对象，因为构造函数是protected）\n c.clear(); // 将此 Calendar 的给定日历字段值和时间值设置成未定义\n c.set(Calendar.YEAR, 2022);\n c.set(Calendar.MONTH, 7); // 设置为8月，0表示1月\n c.set(Calendar.DATE, 2);\n c.set(Calendar.HOUR_OF_DAY, 21);\n c.set(Calendar.MINUTE, 22);\n c.set(Calendar.SECOND, 23);\n c.setTimeZone(TimeZone.getTimeZone("Asia/Shanghai"));\n System.out.println(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(c.getTime()));\n // 2022-08-02 21:22:23\n }\n\n static void println(Object... objs) {\n Arrays.stream(objs).forEach(System.out::print);\n System.out.println();\n }\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/time/package-summary.html
\n注意，在新 API 中，Month 的范围用 1~12 表示 1 月到 12 月，Week 的范围用 1~7 表示周一到周日。\n也就是说，不再有从零开始数的了，减少了心智负担。
API 实施 ISO-8601 标准。
类
\n枚举
\n异常
\n此外，java.time.format 包提供一些类用于打印（格式化）和解析日期
https://docs.oracle.com/javase/8/docs/api/java/time/format/package-summary.html
类
\n枚举
\n异常
\nhttps://github.com/coreutils/coreutils
https://github.com/mirror/busybox
https://github.com/uutils/coreutils
https://github.com/rustcoreutils/posixutils-rs
https://github.com/vlang/coreutils
https://github.com/mystor/micro-coreutils
command [OPTION]...\ncommand [OPTION...]\ncommand [FLAGS] [OPTIONS]\n# 有子命令的\ncommand <command> [<args>]\ncommand <command> [options]\n貌似 glib 中，占位符用全大写字母代替
\n| 参数修饰符 | \n说明 | \n示例 | \n
|---|---|---|
| 无修饰符 | \n原生参数 | \ngit reset | \n
| <> | \n占位参数 | \ngit help <command> | \n
| [] | \n可选组合 | \ngit [--version] | \n
| () | \n必选组合 | \ncommand (--patch | -p) | \n
| | | \n互斥参数 | \nps --help <simple|list|output|threads|misc|all> | \n
| ... | \n可重复指定前一个参数 | \nmv [OPTION]... SOURCE... DIRECTORY | \n
| -- | \n标记后续参数类型 | \nrm -- -h 表示删除文件-h | \n
| 符号 | \n说明 | \n示例 | \n
|---|---|---|
| * | \n占位处匹配任意长度字符串 | \nfile_*.txt | \n
| ? | \n占位处匹配一个字符 | \nfile_?.txt | \n
| [...] | \n占位处匹配方括号内指定字符的一个 | \nfile_[abc].txt | \n
| [-] | \n占位处匹配方括号内指定字符范围内的一个 | \nfile_[a-z].txt | \n
| [^...] | \n占位处匹配非方括号内指定字符的其它一个字符 | \nfile_[^a-z].txt | \n
第一个命令的输出将作为第二个命令的输入
\nls | less\n将程序默认的标准输入/输出重新定向至新的目标
\n{{command}} < {{file}} # 命令输出重定向至文件\n{{command}} > {{file}} # 命令输出覆盖写入文件\n{{command}} >> {{file}} # 命令输出追加写入文件\n{{command}} 1> {{file}} # 1 代表stdout\n{{command}} 2> {{file}} # 2 代表stderr\n{{command}} &> {{file}} # 也是 stderr\n\n# 将字符串重定向到标准输入\n{{command}} <<< {{string}}\n\n{{command}} << {{Heredoc}}\n {{string}}\n{{Heredoc}}\n命令置换是把一个命令的输出结果赋值到一个变量中
\nls `pwd`\nls $(pwd)\n设置快捷键方式
\nset -o vi\nset -o emacs\n参见 https://wangdoc.com/bash/readline
\n配置项参数终止符--，它的作用是告诉 Bash，在它后面的参数开头的-和--不是配置项，只能当作实体参数解释。
echo "hello,world" > -f\ncat -- -f\n# 输出 hello,world\nJDK 目前的 LTS 有三个：8，11，17
https://www.injdk.cn/
http://www.codebaoku.com/jdk/jdk-index.html
https://www.oracle.com/java/technologies/downloads/
https://www.oracle.com/java/technologies/downloads/archive/
https://www.oracle.com/cn/java/technologies/javase/javase8-archive-downloads.html
https://mirrors.huaweicloud.com/java/jdk/
\nhttps://mirror.tuna.tsinghua.edu.cn/help/adoptium/
https://mirrors.tuna.tsinghua.edu.cn/Adoptium/
AdoptOpenJDK 已经更名为 Adoptium
\n\nhttps://developer.ibm.com/languages/java/semeru-runtimes/downloads/
\nhttps://www.azul.com/downloads/?package=jdk
\nhttps://bell-sw.com/pages/downloads/
\nhttps://docs.microsoft.com/zh-cn/java/openjdk/download
\nhttps://www.openlogic.com/openjdk-downloads
\nhttps://developers.redhat.com/products/openjdk/download
\nhttps://aws.amazon.com/cn/corretto/
\nhttps://sap.github.io/SapMachine/
\nhttps://www.openeuler.org/zh/other/projects/bishengjdk/
\nhttps://cloud.tencent.com/product/tkjdk
https://cloud.tencent.com/document/product/1149/38537
下面不会介绍正则表达式，只是介绍一下 java 关于正则表达式的 API
\n有关正则表达式的 API 可能部署在 String 类上，或由 java.util.regex 包提供
这个包主要提供三个类 Pattern Matcher PatternSyntaxException
import java.util.regex.*;\n\npublic class Main {\n public static void main(String[] args) {\n // Pattern.matches 静态方法\n // boolean java.util.regex.Pattern.matches(String regex, CharSequence input)\n println(Pattern.matches("abc", "aabcccd")); // false\n println(Pattern.matches("aabc", "aabcccd")); // false\n println(Pattern.matches("\\\\w+", "aabcccd")); // true\n\n // String.matches 实例方法\n // boolean java.lang.String.matches(String regex)\n println("aabcccd".matches("\\\\w+")); // true\n\n // Pattern.compile 工厂函数\n // Pattern java.util.regex.Pattern.compile(String regex)\n // ! 下面展示 Matcher 类上的实例方法\n Pattern p = Pattern.compile("\\\\w+");\n Matcher m = p.matcher("Evening is full of the linnet's wings");\n\n // use Matcher.find()\n while (m.find()) { // m.find(0)\n System.out.print(m.group() + " ");\n }\n println("\\n---");\n\n // use Matcher.find(int start)\n m.reset();\n int i = 0;\n while (m.find(i)) {\n System.out.print(m.group() + " ");\n i++;\n }\n println("\\n---");\n\n // use Matcher.reset(CharSequence input)\n m.reset("abc123");\n m.find();\n println(m.group());\n println("---");\n\n // use Matcher.group(int group)\n m = Pattern.compile("(aa)(b)(ccc)d").matcher("aabcccd");\n if (m.find()) {\n println(m.group(0)); // aabcccd\n println(m.group(1)); // aa\n println(m.group(2)); // b\n println(m.group(3)); // ccc\n\n println(m.start()); // 0 第n个组的起始位置\n println(m.start(0)); // 0\n println(m.start(1)); // 0\n println(m.start(2)); // 2\n\n println(m.end()); // 7 第n个组的末尾位置\n println(m.end(0)); // 7\n println(m.end(1)); // 2\n println(m.end(2)); // 3\n\n }\n\n // 其它\n println(String.join("-", "a,b.c,d.e".split(",|\\\\."))); // a-b-c-d-e\n // not replace, but replaceFirst\n println("a0c".replaceFirst("\\\\d", "b")); // abc\n println("a0c1".replaceAll("\\\\d", "b")); // abcb\n\n // Pattern 标记\n Pattern pt = Pattern.compile("^java",\n Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);\n }\n\n public static void println(Object o) {\n System.out.println(o);\n }\n}\n兼容性：https://caniuse.com/custom-elementsv1
网址：https://www.webcomponents.org/
网站上面有一些 webComponents 写的组件（npm），和 polyfill 等资源，还是比较实用的
MDN：https://developer.mozilla.org/docs/Web/Web_Components
Standard：https://html.spec.whatwg.org/multipage/custom-elements.html
我们自定义的元素是直接继承 HTMLElement 的，所以根据需要查阅https://developer.mozilla.org/docs/Web/API/HTMLElement
\n本篇仅介绍 Autonomous custom elements，即直接继承 HTMLElement 类
此类自定义元素可直接作为 html 标签使用，如：<my-element>
class MyElement extends HTMLElement {}\ncustomElements.define("my-element", MyElement);\n另一种则是 Customized built-in elements，继承其它特定的 HTML 元素
需要通过 is 属性指定，如：<button is="plastic-button">Click Me!</button>
class PlasticButton extends HTMLButtonElement {}\ncustomElements.define("plastic-button", PlasticButton, { extends: "button" });\n自定义的元素名称不分大小写，且必须包含连字符-，避免与原生元素冲突。如果我们指定的名称无效，会报 SyntaxError 错误。
标准描述的允许的自定义元素名称：https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
API 参见：https://developer.mozilla.org/docs/Web/API/Window/customElements
![\"1.png\"](\"https://s2.loli.net/2022/06/23/XDoCJQRhMGT1cIv.png\")
customElements.define("my-element", class extends HTMLElement {...}) 后还可以通过 customElements.get('my-element') 获取这个类
\n\n\n
CustomElementRegistry接口向开发者暴露了管理自定义元素的接口，该接口提供全局变量customElements暴露
WebComponents 提供了 template 标签 ，这个元素写在 html 中不会被渲染（相当于 display: none），可以提供给 WebComponents 作为模板。
![\"2.png\"](\"https://s2.loli.net/2022/06/23/siJn3HtOrNUVlTz.png\")
:defined 伪类CSS 提供伪类 :defined 来表示任何已定义的元素。包括所有浏览器内置标准元素以及已成功定义的自定义元素。
例如
\nmy-element:not(:defined) {\n}\n\nmy-element:defined {\n}\n\n\nupgrade：浏览器将自定义标签从未识别到解析为自定义元素的过程
\n
可以配合 customElements.whenDefined(name) 方法使用。
customElements.whenDefined("my-element").then(() => {\n // my-element is now defined\n});\nShadow DOM 是独立的 API（指不是和 Custom Element 绑定的 API），允许将隐藏的 DOM 树（Shadow DOM Tree）附加到常规的 DOM 树中。
自定义元素本身是一个常规 DOM 节点。Element.attachShadow() 方法可将一个 Shadow Root 附加至此节点上，此时当前节点就成为一个 Shadow Host。
\n\n注意：CustomElement 与 ShadowRoot 及其子节点都是独立的 DOM 节点。
\n
const shadowRoot = element.attachShadow({ mode: "open" });\nconst shadowRoot = element.attachShadow({ mode: "closed" });\n\n// 如果设置为 open，则元素的 shadowRoot 属性指向该 shadowRoot\nconsole.assert(shadowRoot, element.shadowRoot);\nShadow DOM 与文档的主 DOM 树分开渲染。因此 Shadow DOM 内部的样式表局限在其内部，不会影响外部元素。（除了 :focus-within）
\n\n注：样式表包括
\n<style>和<link rel="stylesheet" href="" />
在 Shadow DOM 内部的 <style> 标签内可以通过 :host 选择器表示自身。
:host 或 :host() 选择器。选中当前自定义元素，参数可用于更具体地选中自定义元素。:host-context() 选择器。选中当前自定义元素，当且仅当自定义元素是参数所选中的元素的子元素。
例如：
\n:host([data-dark-theme]) {\n display: inline-block;\n color: black;\n background: white;\n}\n\n:host-context(body[data-dark-theme]) {\n color: white;\n background: black;\n}\n\n\n注意：自定义元素继承自 HTMLElement，其默认 style 与 HTMLSpanElement 相同\n（简单来说就是要注意 :host 默认具有 display:inline）
\n
::slotted() 伪元素可用于选中通过插槽（slot）插入 shadow tree 的节点，并设置其样式。
CSS shadow parts 模块定义了 ::part()伪元素，可设置在 shadow host 上。通过这个伪元素可以将 shadow host 的选定元素暴露给外部页面来应用样式。
默认情况下，shadow tree 中的元素只能在自己的 shadow root 内进行样式设置。CSS shadow parts 模块允许在构成自定义元素的 <template> 子元素上包含一个 part 属性，通过 ::part() 伪元素将 shadow tree 节点暴露给外部样式设置。
\n\nShadowRoot 接口还有一些其它属性：如 adoptedStyleSheets 和 styleSheets。
\n
就像 Document 接口的同名属性一样，可以用于操纵样式表
此处不展开说明
插槽允许将自定义元素中的常规 DOM 节点（myElement.innerHTML）渲染至 ShadowDOM 中（myElement.shadowRoot.innerHTML）
\n在自定义标签内部的标签，指定 slot 属性为某一插槽名。
<my-element>\n <div slot="foo"></div>\n <div slot="foo"></div>\n</my-element>\n在模板（Shadow DOM）中，用 <slot> 占位标签，指定 name 属性为该插槽名，则渲染时占位标签（在渲染上）替换为所有对应传入的标签（但在实际 DOM 树中的位置不变）。
<template>\n <p>example</p>\n <slot name="foo"></slot>\n</template>\n渲染表现如下
\n<p>example</p>\n<slot name="foo">\n <div slot="foo"></div>\n <div slot="foo"></div>\n</slot>\n上面演示的是具名插槽，如果模板（Shadow DOM）中存在 <slot> 元素而未指定插槽名，则这个插槽被替换为自定义标签内部所有未指定 slot 属性的元素。
\n\n其实相当于插槽名为空字符串。未指定
\nslot="..."则相当于slot=""（空字符串）；
而模板中未指定<slot name="...">（即<slot>）则相当于<slot name="">（空字符串）。
被插入元素的 Element.assignedSlot 属性返回其插入到的 HTMLSlotElement 元素。
而插槽元素的 HTMLSlotElement.assignedElements({flatten:false/true}) 和 HTMLSlotElement.assignedNodes({flatten:false/true}) 则方法可以分别获取插槽中插入的节点和元素集合
\n\n\n
flatten: true选项可用于拍平一层 slot 嵌套flatten: true/false区别的演示，参见此处
插槽中的直接节点（即不包括子节点）改变时（包括第一次插入），插槽元素触发 slotchange
模板（Shadow DOM）中还允许使用 ::slotted() 伪元素选中因插槽插入而渲染的元素（而不是模板中兜底的元素）
生命周期函数的顺序如下：
\nconstructor -> attributeChangedCallback -> connectedCallback -> disconnectedCallback -> adoptedCallback -> connectedCallback
\nconstructor：当自定义标签 upgrade 为 custom element 时，被调用（无参数）connectedCallback：每当 custom element 被插入文档 DOM 时，被调用（无参数）disconnectedCallback：每当 custom element 从文档 DOM 中删除时，被调用（无参数）adoptedCallback：每当 custom element 被移动到新的文档时，被调用（例如从主 document 移动到某个 iframe.contentDocument）attributeChangedCallback: 每当 custom element：change, add, remove, replace 自身 attribute 时，被调用根据规范，不应该在 constructor 里获取自定义元素（即 this）的 attribute 和子元素（因为在 upgrade 之前，它们根本不存在）
\n规范建议：
\nconstructor 只用于设置值的初始状态或默认值、设置事件监听器、创建 shadow rootconnectedCallback 回调（特别是获取资源和渲染操纵）。但要注意该回调是可以多次触发的，所以对于一些一次性的工作，需要额外的代码来防止多次运行只有在静态属性 observedAttributes 数组中声明的 attribute 才能触发 attributeChangedCallback 回调
attributeChangedCallback 对每个变更的 attribute 依次触发，包括直接通过 html 提供的 attribute
/**\n * 注：typescript 没有提供这些生命周期函数的定义\n */\nabstract class CustomElement {\n static observedAttributes?: string[];\n constructor() {}\n connectedCallback?(): void;\n disconnectedCallback?(): void;\n attributeChangedCallback?(name: string, oldVal: string | null, newVal: string | null): void;\n adoptedCallback?(oldDocument: Document, newDocument: Document): void;\n}\n\nclass MyElement implements CustomElement {\n static get observedAttributes() {\n return ["foo", "bar"];\n }\n // 或者：\n // static observedAttributes = ["foo", "bar"];\n\n attributeChangedCallback(attr: string, oldVal: string | null, newVal: string | null) {\n switch (attr) {\n case "foo":\n // do something with 'foo' attribute\n\n case "bar":\n // do something with 'bar' attribute\n }\n }\n}\nEvent 接口新增 composed 属性和 composedPath 方法
当可冒泡的事件（bubbles 属性为 true）可从 Shadow DOM 传递到一般的 DOM 时Event.composed 为 true，``Event.composedPath() 则返回一个 EventTarget 对象数组，表示将在其上调用事件侦听器的对象
对于 { mode: "open" }) 的 ShadowRoot，数组可包含其内部子节点，例如： [ p, ShadowRoot, open-shadow, body, html, HTMLDocument
对于 { mode: "close" }) 的 ShadowRoot，数组不含其内部子节点及 ShadowRoot 自身，例如：[ closed-shadow, body, html, HTMLDocument
自定义元素还允许与表单元素集成，参见：https://web.dev/articles/more-capable-form-controls
\n","tags":["web-api"]},{"id":"css-selectors","url":"https://yieldray.fun/posts/css-selectors","title":"css选择器 :is(),not(),:where(),:has()","date_published":"2022-06-23T16:24:22.000Z","date_modified":"2022-06-23T16:24:22.000Z","content_text":":is()兼容性：https://caniuse.com/css-matches-pseudo
接受选择器参数列表，对其中每一个选择器，都等效于此伪类被替换为该选择器的效果
该选择器的优先级由列表中最高的优先级决定
:is(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n\n/* 以上内容相当于以下内容 */\nheader p:hover,\nmain p:hover,\nfooter p:hover {\n color: red;\n cursor: pointer;\n}\n也可以连续使用，比如
\n:is(a, b, c) :is(x, y, z) u {\n}\n:where()此选择器同 :is()
但选择器优先级始终为 0，即拥有最低优先级
:not():not() 原本只支持一个选择器作为参数，现在也支持选择器参数列表。选中规则同 :is()
:has():has() 选中当前元素，当且仅当参数声明的 相对选择器列表 能够选中 任意元素
相对选择器列表参数是可容错的。通常在 CSS 中，选择器列表中的某个选择器无效时，那么整个列表则被视为无效。
当 :has() 选择器列表中的一个选择器无法解析时，不正确或不受支持的选择器将被忽略，而其他的则将被正常使用。
<h1>aqua</h1>\n<h2>blue</h2>\n\n<style>\n h1 + h2 {\n /* 紧接在 h1 后面的 h2 */\n color: blue;\n }\n\n h1:has(+ h2) {\n /* h1，当且仅当存在 h2 紧接这个 h1 后面*/\n color: aqua;\n }\n</style>\nseletor:nth-child(an+b) 先获取 seletor 的所有兄弟元素 （当然也包括自身），再获取其中第 an+b 个元素（n=0,1,2...），最后选中其中是 selector 的元素
![\"1.png\"](\"https://s2.loli.net/2022/06/23/J3fzn2Tw8ZSgW6L.png\")
比方说下面的 p，是 li 的兄弟元素，也满足 li:nth-child(4)，但不会被选中
![\"2.png\"](\"https://s2.loli.net/2022/06/23/QFTButAxXLcd3gV.png\")
seletor:nth-of-type(an+b) 则是获取 seletor 的所有是 seletor 的兄弟元素
![\"3.png\"](\"https://s2.loli.net/2022/06/23/zqnOYMs78dQJWyl.png\")
参考https://www.jishuchi.com/read/onjava8/12012
\npublic class Main {\n public static void main(String[] args) {\n OneParam ref = Lambda::methodRef; // 静态方法的引用，类或者对象名::方法名\n ref.func(123);\n\n OneParam lambda = Lambda.one; // Lambda\n lambda.func(456);\n\n // 我们发现，方法引用和 Lambda 实际上都是函数式接口的实现，是实例对象而不是 Method（方法）\n // 也就是说，等效于：\n OneParam obj = new OneParam() {\n @Override\n public void func(int i) {\n System.out.println(i);\n }\n };\n obj.func(789);\n }\n}\n\n// @FunctionalInterface 注解让编译器检查接口是否为函数式接口，因为函数式接口只有一个抽象方法\n// 其他的方法都是 default 方法或 static 方法或重载 Object 方法（如 boolean equals(Object obj)）\n@FunctionalInterface\ninterface OneParam {\n // 这个接口内部只能有一个抽象方法，对应类型为 OneParam 的 lambda 表达式/方法引用\n void func(int a);\n}\n// 总而言之，只有一个方法的接口，可以视作函数式接口\n\nclass Lambda {\n static OneParam one = (int a) -> System.out.println(a);\n\n static void methodRef(int a) {\n System.out.println(a);\n }\n}\n通过 类名::new 获取构造函数引用。
public class Main {\n public static void main(String[] args) {\n OneParam s = Lambda::say; // 普通（非静态）方法引用\n s.func(new Lambda(), "Hello"); // 必须关联到一个对象，此时，函数式接口的第一个参数必须为绑定的对象\n\n Con con = Lambda::new; // 构造函数引用\n con.make().say("greet");\n }\n}\n\n@FunctionalInterface\ninterface Con {\n Lambda make();\n}\n\n@FunctionalInterface\ninterface OneParam {\n void func(Lambda aThis, String s);\n}\n\nclass Lambda {\n private String name = "Lambda";\n\n public void say(String greet) {\n System.out.println(greet + " " + name);\n }\n\n}\n标准库本身提供了一些实用函数式接口 API
详细内容参见文档https://docs.oracle.com/javase/8/docs/api/java/util/function/package-summary.html
例如，interface Function<T, R>表示只有一个参数 T，返回 R 的方法：
import java.util.function.*;\npublic class Main {\n public static void main(String[] args) {\n Function<String, Integer> length = (String s) -> s.length();\n System.out.println(length.apply("Hello World")); // 11\n }\n}\nhttps://docs.oracle.com/javase/8/docs/api/java/util/stream/Stream.html
\nimport java.util.*;\nimport java.util.stream.*;\nimport java.util.function.*;\n\npublic class Main {\n public static void main(String[] args) {\n // 给定初值和操作函数生成流\n Stream<Integer> s1 = Stream.iterate(0, i -> i + 1);\n // 生成含一个或多个元素的流\n Stream<Integer> s2 = Stream.of(1, 2, 3, 4, 5);\n\n // 通过Supplier生成流\n Stream<Integer> s3 = Stream.generate(() -> (int) (Math.random() * 100));\n Stream<Integer> s4 = Stream.generate(new Supplier<Integer>() {\n int n = 0;\n\n public Integer get() {\n n++;\n return n;\n }\n });\n\n // 通过集合生成流\n Stream<String> s5 = Arrays.stream(new String[] { "A", "B", "C" });\n Stream<String> s6 = List.of("X", "Y", "Z").stream();\n\n s1.limit(10).forEach(System.out::print);\n System.out.println();\n s2.limit(10).forEach(System.out::print);\n System.out.println();\n s3.limit(10).forEach(System.out::print);\n System.out.println();\n s4.limit(10).forEach(System.out::print);\n System.out.println();\n s5.limit(10).forEach(System.out::print);\n System.out.println();\n s6.limit(10).forEach(System.out::print);\n System.out.println();\n\n // 合并两个流\n Stream.concat(Stream.of(1, 2, 3), Stream.of(4, 5)).forEach(System.out::print);\n\n // 转换为数组\n Integer[] a1 = Stream.of(1, 2, 3, 4, 5).toArray(Integer[]::new);\n // 转换为集合\n List<Integer> a2 = Stream.of(1, 2, 3, 4, 5).collect(Collectors.toList());\n Set<Integer> a3 = Stream.of(1, 2, 3, 4, 5).collect(Collectors.toSet());\n Map<Integer, Integer> a4 = Stream.of(1, 2, 3, 4, 5).collect(Collectors.toMap(i -> i, i -> i));\n\n Map<String, List<String>> a5 = Stream\n .of("Apple", "Banana", "Blackberry", "Coconut", "Avocado", "Cherry", "Apricots")\n .collect(Collectors.groupingBy(s -> s.substring(0, 1), Collectors.toList()));\n\n }\n}\n有关更多消费流的接口，参见java 流
\n","tags":["java"]},{"id":"java-generics","url":"https://yieldray.fun/posts/java-generics","title":"java泛型","date_published":"2022-06-20T20:22:34.000Z","date_modified":"2022-06-20T20:22:34.000Z","content_text":"Java 泛型的实现是 type erasure（类型擦拭），也就是运行时做 cast （转型）
\nJava 常用泛型参数有
\npublic class Main {\n public static void main(String[] args) {\n System.out.println(Pair.makePair("Hello", "World"));\n }\n}\n\nclass Pair<T, U> {\n public T first;\n public U second;\n\n public Pair(T first, U second) {\n this.first = first;\n this.second = second;\n }\n\n public static <T, U> Pair<T, U> makePair(T first, U second) {\n return new Pair<T, U>(first, second);\n }\n\n @Override\n public String toString() {\n return "(" + first + ", " + second + ")";\n }\n}\n擦拭法意味着实际只存在 Pair 这一个类，而不存在 Pair<String, String>
注意这与 C++ 模板不同
var cls1 = Pair.class;\n// 错误： var cls2 = Pair<String, String>.class;\n可以看作是泛型参数都视作 Object，用实参替换时编译器自动做了安全的转型
\nvar pair = Pair.makePair("Hello", "World");\n\nvar what = pair.second;\n// 隐式转型\nvar what = (String) pair.second;\n我们发现，泛型参数只能是对象，不能为原始类型
此时 Java 也不会为原始类型做自动装箱操作，这可能是出于对兼容性的考虑
无法实例化泛型参数new T()，因为参数将变为 Object，结果变为实例化 Object 对象
Producer Extends, Consumer Super
extends 只读（以父类形式读取，仅能写入 null），super 只写（以子类形式写入，仅能以 Object 形式获取）
<T>\n// 表示指定类型 T\n\n<?>\n// 表示任意类型，是所有 <T> 类型的父类\n\n<? extends Number>\n// 表示 Number 及其子类\n\n<? super Integer>\n// 表示 Integer 及其父类\nJava 注解是特殊的 interface
注解作用于：类、方法、字段、参数以及注解本身等等
Java 作为编译型解释语言，有的注解可以在编译时生效，有的可以在运行时生效
注解可以有参数及默认参数，参数必须为常量，且只能为：基本类型、String、Class 以及枚举的数组
public enum ElementType {\n TYPE,\n FIELD,\n METHOD,\n PARAMETER,\n CONSTRUCTOR,\n LOCAL_VARIABLE,\n ANNOTATION_TYPE,\n PACKAGE,\n TYPE_PARAMETER,\n TYPE_USE,\n MODULE,\n RECORD_COMPONENT;\n}\npublic enum RetentionPolicy {\n /**\n * Annotations are to be discarded by the compiler.\n */\n SOURCE,\n\n /**\n * Annotations are to be recorded in the class file by the compiler\n * but need not be retained by the VM at run time. This is the default\n * behavior.\n */\n CLASS,\n\n /**\n * Annotations are to be recorded in the class file by the compiler and\n * retained by the VM at run time, so they may be read reflectively.\n *\n * @see java.lang.reflect.AnnotatedElement\n */\n RUNTIME\n}\nimport java.lang.annotation.*;\n\npublic class Main {\n @AnnotationName("Example annotation value")\n // 等效于 @AnnotationName(value = "Example annotation value")\n public String str = "Hello";\n}\n\n// @Target 用于指定注解作用的位置。参数是ElementType[]，元素只有一个时可以省略数组写法\n// @Target(ElementType.TYPE)\n@Target({ // ElementType.TYPE, ElementType.METHOD, ElementType.FIELD,\n // ElementType.PARAMETER, ElementType.CONSTRUCTOR, ElementType.LOCAL_VARIABLE,\n // ElementType.ANNOTATION_TYPE, ElementType.PACKAGE, ElementType.TYPE_PARAMETER,\n // ElementType.TYPE_USE\n ElementType.METHOD,\n ElementType.FIELD\n})\n// @Retention 用于指定注解的生命周期。参数默认为RetentionPolicy.CLASS，可选\n// RetentionPolicy.SOURCE, RetentionPolicy.CLASS, RetentionPolicy.RUNTIME\n@Retention(RetentionPolicy.RUNTIME)\n// @Repeatable(AnnotationNames.class)\n@Inherited // 允许子类继承父类的注解（子类继承父类时也同时使用了父类的注解）\n@Documented // 允许被javadoc工具获取\n// ... ...\n@interface AnnotationName {\n int type() default 0; // 声明默认值，则在使用注解时可以不指定该值\n\n String level() default "info"; // 若无默认值，则必须指定，例如 @AnnotationName(type = 1, level = "Example")\n\n String value() default ""; // 参数名称是value，且只有一个参数（其它参数可为默认值），可以省略参数名称，例如 @AnnotationName("Value")\n}\n\n// 若 AnnotationName 指定 @Repeatable 则还需要定义 AnnotationNames 注解\n// 其 @Retention 需指定为 RetentionPolicy.RUNTIME\n// 修饰 AnnotationName 的许多注解也必须用于修饰 AnnotationNames\n// 为了节省篇幅，下面没有重复指定与 AnnotationName 相同的注解\n@Retention(RetentionPolicy.RUNTIME)\n@interface AnnotationNames {\n AnnotationName[] value();\n}\n下面只考虑 RUNTIME 类型的注解，需要使用反射 API 获取
注解的完整类名为 java.lang.annotation.Annotation
// 形式化语法，不是Java代码\nclass Class,Method,Field,Constructor {\n // 顾名思义，这个 annotationClass 就是注解对应的 Class 对象\n public <A extends Annotation> A getAnnotation(Class<A> annotationClass);\n public <T extends Annotation> T getAnnotation(Class<T> annotationClass);\n}\nexample from https://www.liaoxuefeng.com/wiki/1252599548343744/1265102026065728
\n@Retention(RetentionPolicy.RUNTIME)\n@Target(ElementType.FIELD)\npublic @interface Range {\n int min() default 0;\n int max() default 255;\n}\n\n\npublic class Person {\n @Range(min=1, max=20)\n public String name;\n\n @Range(max=10)\n public String city;\n}\n\n\nvoid check(Person person) throws IllegalArgumentException, ReflectiveOperationException {\n // 遍历所有Field:\n for (Field field : person.getClass().getFields()) {\n // 获取Field定义的@Range:\n Range range = field.getAnnotation(Range.class);\n // 如果@Range存在:\n if (range != null) {\n // 获取Field的值:\n Object value = field.get(person);\n // 如果值是String:\n if (value instanceof String) {\n String s = (String) value;\n // 判断值是否满足@Range的min/max:\n if (s.length() < range.min() || s.length() > range.max()) {\n throw new IllegalArgumentException("Invalid field: " + field.getName());\n }\n }\n }\n }\n}\n扩展阅读 https://zhuanlan.zhihu.com/p/32286740
\nJava 原始类型： char、boolean、byte、short、int、long、float、double
Java 中除了原始类型之外的所有的一切类型都是对象（引用类型）。
反射就是在运行时获取对象类型（而不是对象实例，可以说是类）信息的 API 。\n注意：反射 API 也可以获取基本类型（原始类型）的信息（另外，Java 数组也是对象）。
\n使用时需导入 import java.lang.reflect.*;
对于每一个对象类型（类），jvm 都在加载时为其创建对应的 Class<T> 对象
只有 jvm 才可以构造这个 Class 对象，因为构造函数被修饰为 private ：private Class(...)
获取这个对象的方法有三种：
// 从类型上获取\nClass<String> cls = String.class;\n\n// 从实例对象上获取，注意 "Hello" 在这里是 String 类型\nClass<String> cls = "Hello".getClass();\n\n// 利用反射API，通过完整类名获取\nClass<String> cls = Class.forName("java.lang.String");\n很明显，上面前两种方法是继承了 Object 。
特殊的是，基本类型（原始类型）也有对应的 Class，
数组类型也有对应的 Class，例如 String[]，它的类名是[Ljava.lang.String。
然而由于 Java 泛型参数不能是原始类型，看起来 int.class 和 Integer.class 的类型都是相同的，实际上还是不同的
Class<Integer> cls1 = int.class;\nClass<Integer> cls2 = Integer.class;\nSystem.out.println(cls1 == cls2); // false\n\n// 也可以\nClass<?> cls = int.class;\n// 或者\nvar cls = int.class;\nClass<T> 类的具体方法，参阅 Java8 文档https://docs.oracle.com/javase/8/docs/api/java/lang/Class.html
下面参考https://www.liaoxuefeng.com/wiki/1252599548343744/1255945147512512
简略描述一下 Class<T> 类的一些公开方法，具体内容参见文档
获取 Field 对象
\n/*...*/ class Class<T> /*...*/ {\n // 获取公开字段，包括继承字段\n public Field getField(String name) throws NoSuchFieldException, SecurityException;\n // 获取所有非继承字段\n public Field getDeclaredField(String name) throws NoSuchFieldException, SecurityException;\n public Field[] getFields() throws SecurityException;\n public Field[] getDeclaredFields() throws SecurityException;\n}\nField 类
\nclass Field /*...*/ {\n public void setAccessible(boolean flag);\n public String getName(); // 返回字段名称\n public Class<?> getDeclaringClass(); // 返回字段对应Class\n\n public Class<?> getType(); // 返回字段类型对应Class\n public int getModifiers(); // 返回字段类型对应Java语言修饰符，配合Modifier类使用\n\n public Object get(Object obj); // 获取字段在指定实例对象上的值\n public /*boolean|byte|char|short|int|long|float|double*/ get/*Boolean|Byte|Char|Short|Int|Long|Float|Double*/(Object obj);\n // e.g. public boolean getBoolean(Object obj) throws IllegalArgumentException, IllegalAccessException;\n\n public void set(Object obj, Object value);// 设置字段在指定实例对象上的值为给定值\n public void set/*Boolean|Byte|Char|Short|Int|Long|Float|Double*/(Object obj, /*boolean|byte|char|short|int|long|float|double*/ x);\n // e.g. public void setBoolean(Object obj, boolean z);\n\n public <T extends Annotation> T getAnnotation(Class<T> annotationClass);\n public <T extends Annotation> T[] getAnnotationsByType(Class<T> annotationClass);\n public Annotation[] getDeclaredAnnotations();\n public AnnotatedType getAnnotatedType();\n}\n演示
\nField f = String.class.getDeclaredField("value");\nf.setAccessible(true); // 设置允许访问非public字段\nf.getName(); // "value"\nf.getType(); // class [B 表示byte[]类型\nint m = f.getModifiers();\nModifier.isFinal(m); // true\nModifier.isPublic(m); // false\nModifier.isProtected(m); // false\nModifier.isPrivate(m); // true\nModifier.isStatic(m); // false\nhttps://docs.oracle.com/javase/8/docs/api/java/lang/reflect/Field.html
\n获取 Method 对象
\n/*...*/ class Class<T> /*...*/ {\n // 通过方法名及参数类型获取方法\n public Method getMethod(String name, Class<?>... parameterTypes) throws NoSuchMethodException, SecurityException;\n public Method getDeclaredMethod(String name, Class<?>... parameterTypes) throws NoSuchMethodException, SecurityException;\n public Method[] getMethods() throws SecurityException;\n public Method[] getDeclaredMethods() throws SecurityException;\n}\nMethod 类
\npublic final class Method extends Executable {\n public void setAccessible(boolean flag);\n public String getName();\n public int getModifiers();\n public Class<?> getReturnType();\n public Class<?>[] getParameterTypes();\n public int getParameterCount();\n public Class<?>[] getExceptionTypes();\n // invoke的第一个参数是对象实例，即在哪个实例上调用该方法（相当于js的Function.prototype.call）\n public Object invoke(Object obj, Object... args) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException;\n}\n// deprecated\ntry {\n String str = String.class.newInstance();\n} catch (Exception e) {\n e.printStackTrace();\n}\n获取 Constructor 类
\n/*...*/ class Class<T> /*...*/ {\n public Constructor<T> getConstructor(Class<?>... parameterTypes) throws NoSuchMethodException, SecurityException;\n public Constructor<?>[] getConstructors() throws SecurityException;\n}\nConstructor 类
\npublic final class Constructor<T> extends Executable {\n public void setAccessible(boolean flag);\n public T newInstance(Object ... initargs);\n // 判断cls是否继承当前类（如果cls可以assign为当前类，则cls可以向上转型为当前类。也就是说，这个方法判断cls能否向上转型为当前类）\n public native boolean isAssignableFrom(Class<?> cls);\n}\n演示
\ntry {\n Constructor<Integer> cons = Integer.class.getConstructor(int.class);\n Integer n = (Integer) cons.newInstance(123);\n System.out.println(n); // 123\n} catch (Exception e) {\n e.printStackTrace();\n}\n/*...*/ class Class<T> /*...*/ {\n // 获取父类的Class\n public native Class<? super T> getSuperclass();\n // 获取所有implement的interface的Class（不包括父类interface）\n public Class<?>[] getInterfaces();\n}\nJava 中的 Proxy 用于在运行期动态创建某个 interface 的实例
example
import java.lang.reflect.*;\n\npublic class Main {\n public static void main(String[] args) {\n // 1.构造调用处理器对象\n InvocationHandler handler = new InvocationHandler() {\n @Override\n public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {\n if (method.getName() == "morning") {\n System.out.println("Good morning, " + args[0]);\n }\n return null;\n }\n };\n\n // 2.构造代理对象\n Hello hello = (Hello) Proxy.newProxyInstance(\n Hello.class.getClassLoader(), // 传入ClassLoader\n new Class[] { Hello.class }, // 传入要实现的接口\n handler); // 传入处理调用方法的InvocationHandler\n\n // 3.调用代理对象的方法\n hello.morning("Bob");\n }\n}\n\n// 接口定义\ninterface Hello {\n void morning(String name);\n}\n扩展阅读https://zhuanlan.zhihu.com/p/64584427
\npublic final class Class<T> implements java.io.Serializable,\n GenericDeclaration,\n Type,\n AnnotatedElement,\n TypeDescriptor.OfField<Class<?>>,\n Constable\n\npublic interface ParameterizedType extends Type\npublic interface GenericArrayType extends Type\npublic interface WildcardType extends Type\n\npublic class AccessibleObject implements AnnotatedElement\n\npublic final class Field extends AccessibleObject\n implements Member\n\npublic abstract sealed class Executable extends AccessibleObject\n implements Member, GenericDeclaration permits Constructor, Method\n\npublic final class Method extends Executable\npublic final class Constructor<T> extends Executable\n\n\n\n ┌────┐\n │Type│\n └────┘\n ▲\n │\n ┌────────────┬────────┴─────────┬───────────────┐\n │ │ │ │\n┌─────┐┌─────────────────┐┌────────────────┐┌────────────┐\n│Class││ParameterizedType││GenericArrayType││WildcardType│\n└─────┘└─────────────────┘└────────────────┘└────────────┘\n\n\n┌────────────────┐\n│AccessibleObject│\n└────────────────┘\n ▲\n │\n ┌─────────┐\n │ │\n┌─────┐┌──────────┐\n│Field││Executable│\n└─────┘└──────────┘\n ▲\n │\n ┌──────────┐\n │ │\n ┌──────┐┌───────────┐\n │Method││Constructor│\n └──────┘└───────────┘\njava 的包是一种命名空间，包名按照惯例是需要以反向域名开头
例如：net.example
然后具体名称跟在这个反向域名后面即可
例如：net.example.name
在 java 中，一个文件只允许有一个公开类，这个类名必须与文件名相同
而如果我们要将一个类置于一个包（package）下，则源代码必须按照对应的文件路径存放
实际的名称只是name而已，所以无论是net.example.name还是net.example.java.name，在.name之前的都只是前缀，没有层次关系
// src/net/example/name/Hello.java, 编译后生成 bin/net/example/name/Hello.class\npackage net.example.name; // package 语句必须是源代码中的第一句实际代码，当然注释不是代码\npublic class Hello {\n public Hello(){\n System.out.println("Hello");\n }\n}\n完成上述操作，我们就在 net.example.name 包下提供了 Hello 类
需要注意的是，如果没有 package 语句，实际上也还是在包作用域下，只不过是“默认包”或者“未命名包”
如果要使用上面创建的 Hello 类，可以直接使用其完整名称
类似于 c++ 的命名空间，也可以导入（import）该包，之后就可以直接指定类名
new net.example.name.Hello();\n\nimport net.example.name.Hello; // 导入包下的指定类\nnew Hello();\n\nimport net.example.name.*; // 导入包下的所有类\nCLASSPATH 是环境变量，是一组路径的集合，用于在 import 时，查找 class 文件（而不是源代码）所在路径\n例如在 package 节里我们指定 src/net/example/name/Hello.java, 编译后生成 bin/net/example/name/Hello.class
那就需要将 bin/加入 CLASSPATH。当然，也可以运行时指定（-classpath [env] / -cp [env]）或者在当前路径下运行程序（CLASSPATH 指定当前目录）
假定使用 Windows 系统，有如下环境变量: CLASSPATH=.;D:\\JAVA\\LIB;C:\\DOC\\Java (linux 环境变量分隔符是冒号)
这里指定了三个路径，.当前路径;D:\\JAVA\\LIBjava 标准库路径; C:\\DOC\\Java用户指定的路径
如果需要使用 jar 包，则 CLASSPATH 需指明 jar 包路径，例如：CLASSPATH=.;D\\JAVA\\LIB;C:\\flavors\\grape.jar
对于一个简单类名，查找这个类的方法很明显，就是先在当前包下查找，其次在 import 的包下查找，在次是在java.lang包下查找java.lang包是默认导入的
默认包就是在文件路径相同的情况下，即使没有 import，但同目录的 class 还是可以直接使用
这要求文件在同一个目录下，而且没有设置包名（即默认包），例如
// net/example/One.java\n// no `package net.example;`\npublic class One{}\n// net/example/Two.java\n// no `import net.example.one;`\npublic class Two{\n public Two(){\n new One();\n }\n}\njar 包是 java 中进行包管理的一种手段
原理是将 class 文件打包在一起，例如bin/net/example/name/是包net.example.name包存放的路径
实际打包的就是bin/目录内部（不是bin目录自身）内部的所有文件
当然，还可以有MANIFEST.MF文件，用于指定Main-Class和其它信息
例如
\njava -cp ./name.jar net.example.Hello\njava -jar ./name.jar\n快速排序是不稳定的排序
\nfunction qsortWrapper1<T = number>(arr: T[], start?: number, end?: number): T[] {\n function qsort<T>(arr: T[], start: number, end: number) {\n if (start >= end) return;\n const pivotIndex = partition(arr, start, end);\n qsort(arr, start, pivotIndex - 1);\n qsort(arr, pivotIndex + 1, end);\n }\n\n // 双边循环法\n function partition<T>(arr: T[], start: number, end: number): number {\n const pivot = arr[start];\n // 基准元素可以设置为任意元素，直接设为首元素即可\n let left = start;\n let right = end;\n // left 和 right 指针首先指向数组两端\n\n // 我们的最终目的是左边的元素比基准元素都小，右边的元素比基准元素都大\n // 所以双边循环法对两端进行遍历，一旦找到右指针指向的元素比基准元素小，并且有左指针指向的元素比基准元素大\n // 就将这两个指针指向的元素交换，终止条件很明显就是指针相等\n while (left !== right) {\n // 强调一下 left < right 条件，保证左右指针的顺序\n while (left < right && arr[right] > pivot) right--;\n while (left < right && arr[left] <= pivot) left++;\n // 这里的判断是保证指针相等时，不交换元素，不做无意义的交换\n if (left < right) [arr[left], arr[right]] = [arr[right], arr[left]];\n }\n // 最终，左右指针相等，指向一个比基准元素小的元素\n arr[start] = arr[left];\n arr[left] = pivot;\n // 将指针指向的元素与基准元素交换 (这里用 left 指针和 right 指针皆可)\n return left;\n }\n\n if (typeof start !== "number") start = 0;\n if (typeof end !== "number") end = arr.length - 1;\n qsort(arr, start, end);\n return arr;\n}\n\nconsole.log(qsortWrapper1([1, 5, 8, 2, 4, 6, 3, 7, 0, 9]));\nfunction qsortWrapper2<T = number>(arr: T[], start?: number, end?: number): T[] {\n function qsort<T>(arr: T[], start: number, end: number) {\n if (start >= end) return;\n const pivotIndex = partition(arr, start, end);\n qsort(arr, start, pivotIndex - 1);\n qsort(arr, pivotIndex + 1, end);\n }\n\n // 单边循环法\n function partition<T>(arr: T[], start: number, end: number): number {\n const pivot = arr[start];\n // 基准元素可以设置为任意元素，直接设为首元素即可\n\n let mark = start; // mark 指针首先指向数组起始位置，我们的目标是 mark 指针指向小于基准元素的区域边界 (其指向的元素也小于基准元素)\n\n for (let i = start + 1; i <= end; i++)\n if (arr[i] < pivot) {\n // 遍历的元素小于基准元素，则边界扩大了\n // 令 mark 自增。当前 mark 指向的元素必然大于或等于遍历的元素，交换后保证小于基准元素的当前遍历元素在边界内部 (闭区间)\n mark++;\n [arr[mark], arr[i]] = [arr[i], arr[mark]];\n // 快速排序是不稳定的排序，无需保证稳定性\n }\n\n arr[start] = arr[mark];\n arr[mark] = pivot;\n return mark;\n }\n\n if (typeof start !== "number") start = 0;\n if (typeof end !== "number") end = arr.length - 1;\n qsort(arr, start, end);\n return arr;\n}\n\nconsole.log(qsortWrapper2([1, 5, 8, 2, 4, 6, 3, 7, 0, 9]));\npartition 函数任选单/双边循环法
\ninterface Param {\n start: number;\n end: number;\n}\n\nfunction qsort<T>(arr: T[], start: number, end: number) {\n const stack: Array<Param> = [{ start, end }]; // 栈初始化\n\n while (stack.length > 0) {\n const param: Param = stack.pop()!; // stack 非空，断言必然成立\n const pivotIndex = partition(arr, param.start, param.end);\n if (param.start < pivotIndex - 1) stack.push({ start, end: pivotIndex - 1 });\n if (pivotIndex + 1 < param.end) stack.push({ start: pivotIndex + 1, end });\n }\n}\n在 typescript 的 playground 测试，观察其编译结果
https://www.typescriptlang.org/play
namespace test {\n let inside: 111;\n let outside: 222;\n export const _const = 333;\n export let _let = 444;\n export var _var = 555;\n // export outside; // 不行！！！\n // Variable 'outside' is used before being assigned\n}\n// 编译成如下代码\n// "use strict";\n// var test;\n// (function (test) {\n// let inside;\n// let outside;\n// test._const = 333;\n// test._let = 444;\n// test._var = 555;\n// })(test || (test = {}));\n// 可以看出，export 的 const,let,var 是由 typescript 进行检查的\n\ndeclare namespace jQuery {\n // declare 仅仅是环境声明，不会编译成任何代码\n export const jquery1: string;\n let jquery2: string;\n}\nhttps://jkchao.github.io/typescript-book-chinese/typings/ambient.html
https://jkchao.github.io/typescript-book-chinese/project/namespaces.html
extends 操作符用于条件表达式中（的条件部分），仅用于 ts 判断，不返回类型
extends 也可以用于限制泛型参数
infer 通过占位匹配一个类型
SomeType extends OtherType ? TrueType : FalseType;\ntype test1 = "a" | "b" extends "a" | "b" | "c" ? true : false; // => true\ntype test2 = "a" | "b" | "c" extends "a" | "b" ? true : false; // => false\ntype test3 = Function extends Object ? true : false; // => true\n\ntype ElementOf<T> = T extends Array<infer E> ? E : never;\n// ElementOf<ArrType>\n// 相当于\n// ArrType[number]\n阅读https://www.typescriptlang.org/docs/的 Handbook 部分
\n快速回顾
\ninterface P {\n name: string;\n age: number;\n alive?: boolean;\n}\n\ntype a = P["name"]; // string\ntype b = P["age"]; // number\ntype c = P["alive"]; // boolean\ntype d = keyof P; // "name" | "age" | "alive"\ntype e = P[keyof P]; // string | number | boolean\ntype f = { [K in keyof P]: P[K] }; // { name: string; age: number; alive?: boolean; }\ntype g = { [K in keyof P]?: P[K] }; // { name?: string; age?: number; alive?: boolean; }\ntype h = { [K in keyof P]+?: P[K] }; // { name?: string; age?: number; alive?: boolean; }\ntype i = { [K in keyof P]-?: P[K] }; // { name: string; age: number; alive: boolean; }\n\ntype anyKey = keyof any; // string | number | symbol\ntype anyFunction = (...args: any[]) => any;\ntype anyConstructor = new (...args: any[]) => any;\ntype test1 = anyConstructor extends anyFunction ? true : false; // false\ntype test2 = anyFunction extends anyConstructor ? true : false; // false\nUtility Types
\n// 这里加上 $ 前缀防止与自带的类型冲突\ntype $Awaited<T> = 略;\ntype $Partial<T> = { [P in keyof T]?: T[P] };\ntype $Required<T> = { [P in keyof T]-?: T[P] }; // 这里的 - 表示移除 ? 标识，也就是全部设置为必选项。\ntype $Readonly<T> = { readonly [P in keyof T]: T[P] };\ntype $Record<K extends keyof any, T> = { [P in K]: T };\ntype $Pick<T, K extends keyof T> = { [P in K]: T[P] };\ntype $Exclude<T, U> = T extends U ? never : T;\ntype $Omit<T, K extends keyof any> = $Pick<T, $Exclude<keyof T, K>>;\ntype $Extract<T, U> = T extends U ? T : never;\ntype $NonNullable<T> = T extends null | undefined ? never : T;\ntype $NonNullable<T> = T & {};\ntype $Parameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never; // infer P 表示推断出参数的类型为 P (这里当然是所有参数构成的具名元组)\ntype $ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any\n ? P\n : never;\ntype $ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any; // infer R 表示推断出函数的返回类型为 R\ntype $InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;\ntype $ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;\ntype $OmitThisParameter<T> =\n unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;\ninterface $ThisType<T> {}\n\n// 配合模版字面量类型使用，intrinsic 表示是内部实现（通过 toLowerCase 和 toUpperCase 实现）\ntype Uppercase<S extends string> = intrinsic; // 字符串转为全大写\ntype Lowercase<S extends string> = intrinsic; // 字符串转为全小写\ntype Capitalize<S extends string> = intrinsic; // 字符串第一个字符转为大写\ntype Uncapitalize<S extends string> = intrinsic; // 字符串第一个字符转为小写\nhttps://www.typescriptlang.org/docs/handbook/utility-types.html
https://github.com/zhongsp/TypeScript/blob/dev/zh/reference/utility-types.md
https://jkchao.github.io/typescript-book-chinese/typings/neverType.html
https://jkchao.github.io/typescript-book-chinese/tips/infer.html
https://github.com/sindresorhus/type-fest
https://learntypescript.dev/
链接与快捷方式不同，快捷方式实际是 .lnk 文件。
\n符号链接是最新且最灵活的链接类型 (首次在 Vista 中引入)，它们对于用户是透明的；这些链接显示为普通的 NTFS 文件或目录，并且用户或应用程序可以完全以相同的方式对其进行操作。
符号链接可以跨卷，并且可以使用 UNC 路径。 符号链接也是唯一一种可以设置为相对路径（在同一卷上）的链接类型。
一个符号链接可以是一个绝对路径 C:\\Programs 或者一个相对于链接位置的路径 \\Programs。
\n创建符号链接。\n\nMKLINK [[/D] | [/H] | [/J]] Link Target\n\n /D 创建目录(Directory)符号链接。不带flag时为文件符号链接。\n /H 创建硬链接(HardLink)而非符号链接。\n /J 创建目录联接(Junction)。\n Link 指定新的符号链接名称。\n Target 指定新链接引用的路径(相对或绝对)。\n/D 和 /J 选项区别：/J 在创建时指向原目录的绝对路径， /D 则自动指向源目录的路径，即使源目录移动
\nmklink link File # 创建 link.symlink\nmklink link Folder # 文件管理器不显示为文件夹，而是文件，无法双击进入\nmklink /d linkFolder Folder # 文件管理器显示为文件夹，可以双击进入\nmklink /h hardLinkFile File # 文件夹无法创建硬链接\n\n\n\n\n
\n\n \n\n\n 可以链接到文件吗？ \n可以链接到文件夹吗？ \n可以跨硬盘驱动器链接吗？ \n可以指向不存在的目标吗？ \n如何删除： \n\n \n快捷方式 \n是 \n是 \n是 \n是 \nDel \n\n \n硬链接 \n是 \n否 \n否 \n否 \nDel \n\n \n连接 (软链接) \n否 \n是 \n是 (在同一计算机上) \n是 \nRD \n\n \n符号链接 \n是 \n是 \n是 \n是 \nRD 文件夹 或者 Del 文件 \n符号链接和目录连接是使用重新分析点实现的。
\n快捷方式文件除了链接到另一个文件之外，还有一些额外的功能：设置以管理员身份运行标志，制作图标，使用参数调用可执行文件。
\n硬链接是使用多个文件表条目实现的，这些条目指向同一个 inode – 与 Unix 硬链接相同。 如果原始文件名被删除，硬链接仍然可以工作 - 它直接指向磁盘上的数据。
\n创建相互指向的循环链接或指向自身的链接是可能的（但不建议这样做）。 符号链接可能会暴露未设计为处理它们的应用程序中的安全漏洞。
\n遗憾的是，在 Microsoft Windows 下，.zip 文件不支持硬链接或符号链接。
\n
\n\n标准的 DIR 命令将显示符号链接，用
\n指示。
DIR /A:S 命令将显示连接，用指示。 DIR /A:S %userprofile%
\n
\n\n默认情况下，只有管理员才能创建符号链接。 可以在以下位置授予安全设置“创建符号链接”：配置\\Windows 设置\\安全设置\\本地策略\\用户权限分配\\
\n创建符号链接需要权限提升，但是从 Windows 10 版本 14972 开始，可以创建符号链接而无需提升控制台为管理员 - 但是，这需要您启用开发者模式。
\n
\n\n备注：Win + R 输入 cmd 然后 CTRL + SHIFT + ENTER 就可以以管理员身份启动了
\n
\n\n\n
\n- 在 Windows 资源管理器中选择一个符号链接将选择原始目录。
\n- 在 Windows 资源管理器中选择一个连接将选择该连接。
\n- 将符号链接拖到 Windows 资源管理器中的新目录会将符号链接移动到新目录。
\n- 将连接拖到 Windows 资源管理器中的新目录会将原始目录移动到新目录。
\n
\n\n如果链接成功创建 %ERRORLEVEL% = 0
\n
链接无法创建或给出了错误的参数 %ERRORLEVEL% = 1
为文件创建链接：
\n\n\nC:\\> MKlink ss64.exe C:\\Windows\\system32\\notepad.exe
\n
C:\\> Dir
C:\\> Del ss64.exe
为文件夹创建链接：
\n\n\nC:\\> MKlink /D Apr C:\\work\\April
\n
C:\\> Dir
C:\\> RD Apr
为当前用户重新创建“Application Data”目录连接。
如果此目录连接被删除，某些旧软件可能无法正常工作：
\n\nCD "C:\\Users\\%username%"
\n
MKlink /j "Application Data" "C:\\Users\\%username%\\AppData\\Roaming"
MKLINK 是一个内部命令。
\n装入点（mount points）是NTFS文件系统将磁盘挂载到指定目录的机制。这样就可以实现同一个盘符中访问不同的物理磁盘。
\n","tags":["windows"]},{"id":"linux-intro","url":"https://yieldray.fun/posts/linux-intro","title":"linux入门命令","date_published":"2022-05-03T18:00:00.000Z","date_modified":"2022-05-03T18:00:00.000Z","content_text":"bash 编程请参见此处
\ni interactive 交互式
v verbose 冗长
r recursive 递归
f forcibly 强行
f format 格式化
https://cheat.sh/
https://www.shell.how/
https://tldr.inbrowser.app/
https://jaywcjlove.gitee.io/linux-command/
https://github.com/shifudao/linux_basis
https://github.com/trinib/Linux-Bash-Commands
https://github.com/me115/linuxtools_rst
https://github.com/dunwu/linux-tutorial
https://wangdoc.com/bash/
https://dashdash.io/
https://devhints.io/bash
https://learnxinyminutes.com/docs/bash/
https://github.com/jlevy/the-art-of-command-line/blob/master/README-zh.md
command --help
man command
命令提示符根据发行版的不同有所不同，这里波浪线可以是当前目录
\n$ 代表普通用户，# 代表 root 用户
\nuser@server:~$\n[user@serve ~]$\n\nroot@server:~#\n[root@server ~]#\n? 匹配任意单个字符\n* 匹配任意长度的任意字符\n** 匹配任意级别目录\n[] 匹配一个单字符范围\n文件描述符 0 代表标准输入（STDIN），1 标准输出（STDOUT），2 标准错误输出（STDERR）。
\n& 表示重定向的目标不是一个文件，而是一个文件描述符
\n{{command}} < {{file}} # 命令输出重定向至文件\n{{command}} > {{file}} # 命令输出覆盖写入文件\n{{command}} >> {{file}} # 命令输出追加写入文件\n{{command}} 1> {{file}} # 1 代表 stdout\n{{command}} 2> {{file}} # 2 代表 stderr\n{{command}} &> {{file}} # 也是 stderr\n\nn >& m\t# 将输出文件 m 和 n 合并\nn >& m\t# 将输出文件 m 和 n 合并\n<< tag #\t将开始标记 tag 和结束标记 tag 之间的内容作为输入\n\n{{command}} > {{file}} 2>&1 # stdout和stderr都重定向至文件\n{{command}} > /dev/null # 丢弃输出\n{{command}} > /dev/null 2>&1 # 丢弃所有输出\nlist files
\nUsage: ls [OPTION]... [FILE]...\n\nls -a # 显示所有\nls -A # 显示所有，但不包括 . 和 ..\nls -F # 显示的文件带有标识\nls -R # 递归显示\nls -l # 显示详细信息\n$ ls -lF\n-rwxrwxrwx 1 ubuntu ubuntu 2211 May 4 16:59 file.txt\ndrwxrwxrwx 1 ubuntu ubuntu 4096 May 4 17:42 folder/\n\n（第一个字符表示）文件类型，比如目录（d）、文件（-）、字符型文件（c）或块设备（b）\n文件的权限\n文件的硬链接总数\n文件属主的用户名\n文件属组的组名\n文件的大小（以字节为单位）\n文件的上次修改时间\n文件名或目录名，如果使用了-F参数（有时会自动使用），则文件名则会带有额外的修饰符号\ndir/ 表示目录， exec* 表示可执行文件， link@ 表示符号链接（软链接）在长列表中则有箭头指向源文件 link -> file.txt\n\n\n文件权限\n(r)ead (w)rite e(x)cute\n(u)ser (g)roup (o)ther\n\n八进制权限表示\n--- 000 0\n--x 001 1\n-w- 010 2\n-wx 011 3\nr-- 100 4\nr-x 101 5\nrw- 110 6\nrwx 111 7\n\n type u g o\n - | rwx | r-x | r-x\n 文件 7 5 5\n权限掩码（默认遮掩权限）\n$ umask\n0022\n\n若目录完全权限是 777 ，文件完全权限是 666\n则创建的目录默认权限为 777-022=755 ，创建的文件默认权限为 666-022=644\numask: umask [-p] [-S] [mode]\n Display or set file mode mask.\n\numask -S\nchange mode
\nUsage: chmod [OPTION]... MODE[,MODE]... FILE...\n or: chmod [OPTION]... OCTAL-MODE FILE...\n or: chmod [OPTION]... --reference=RFILE FILE...\n# ACL\ngetacl [选项] 文件名\nsetacl [选项] 设定值 文件名\n# SUID (Set UID) 权限\n为了让一般使用者在执行某些程序的时候，能够暂时具有该程序的所有者的权限（如/usr/bin/passwd程序可以修改/etc/shadow文件）\ns权限在user的x执行位（只能用于文件），例如：-rwsr-xr-x\nchmod u+s <path-to-file-or-dir>\n\n# SGID (Set GID) 权限\ns权限在group，SGID可以用在文件和目录上\n（1）文件：不论使用者是谁，在执行程序时其有效群组将会变成该文件的群组所有人\n（2）目录：在该目录内建立的文件的或目录的所属组将会自动成为该应用程序的所有组\nchmod g+s <path-to-file-or-dir>\n\n# SBit (Sticky Bit, 粘滞位) 权限\n只针对目录，使用t标识\n在具有SBit目录的目录下，使用者若在该目录下具有w及x的权限\n则当使用者在该目录下建立文件或目录时，只有所有者（与root）才有权限删除\nchmod o+t <path-to-file-or-dir>\nchange owner
\nUsage: chown [OPTION]... [OWNER][:[GROUP]] FILE...\n or: chown [OPTION]... --reference=RFILE FILE...\nchange group
\nchange root
\n树状显示当前目录内容，类似于 DOS 的 tree 命令
\nchange directory
\nUsage: cd [-L|[-P [-e]] [-@]] [dir]\n\ncd - # 返回前一次目录\n目录堆栈，栈索引从 0 开始
\npushd {{dirname}} # 进入指定目录，并将该目录放入堆栈顶部\npushd +{{n}} # 将从栈顶算起的n号目录移动到栈顶，同时切换到该目录\npushd -{{n}} # 将从栈底算起的n号目录移动到栈顶，同时切换到该目录\n\npopd # 移除堆栈的顶部记录，并进入新的栈顶目录\npopd -n # 仅移除堆栈顶部，不改变当前目录\npopd +{{n}} # 删除从栈顶算起的n号目录，不改变当前目录\npopd -{{n}} # 删除从栈底算起的n号目录，不改变当前目录\n\ndirs # 查看当前目录堆栈，栈顶在左，栈底在右\ndirs -c # 清空目录栈\ndirs -l # 用户主目录不显示波浪号前缀，而打印完整的目录\ndirs -p # 每行一个条目打印目录栈，默认是打印在一行\ndirs -v # 每行一个条目，每个条目之前显示位置编号\ndirs +{{n}} # 显示堆顶算起的第n个目录\ndirs -{{n}} # 显示堆底算起的第n个目录\nprint work directory
\npwd: pwd [-LP]\nUsage: touch [OPTION]... FILE...\ncopy file
\nUsage: cp [OPTION]... [-T] SOURCE DEST\n or: cp [OPTION]... SOURCE... DIRECTORY\n or: cp [OPTION]... -t DIRECTORY SOURCE...\n\ncp -R {{path/to/source_directory}} {{path/to/target_directory}}\ncp -R source/ target # 递归复制文件夹\ncp -i # 交互式\ncp -v # 显示过程\nmove file
\nUsage: mv [OPTION]... [-T] SOURCE DEST\n or: mv [OPTION]... SOURCE... DIRECTORY\n or: mv [OPTION]... -t DIRECTORY SOURCE...\n\nmv -i # 交互式\nmv -v # 显示过程\nlink files
\nUsage: ln [OPTION]... [-T] TARGET LINK_NAME (1st form)\n or: ln [OPTION]... TARGET (2nd form)\n or: ln [OPTION]... TARGET... DIRECTORY (3rd form)\n or: ln [OPTION]... -t DIRECTORY TARGET... (4th form)\n\nln {{/path/to/file}} {{path/to/hardlink}} # 硬链接\nln -s {{/path/to/file_or_directory}} {{path/to/symlink}} # 软链接（符号链接）\nln -sf {{/path/to/new_file}} {{path/to/symlink}} # 覆盖软链接\nUsage: realpath [OPTION]... FILE...\n\nrealpath {{path/to/file_or_directory}} # 显示一个文件的最终绝对路径，可以用于判断符号链接\nremove
\nUsage: rm [OPTION]... [FILE]...\n\nrm -r directory # 删除目录\nrm -R directory # 删除目录\nrm -f # 强行删除\nrm -v # 显示过程\nrm -i # 交互式\nmake directory
\nUsage: mkdir [OPTION]... DIRECTORY...\n\nmkdir dirname # 创建一级目录\nmkdir -p dir/name # 创建多级目录\nremove directory
\nUsage: rmdir [OPTION]... DIRECTORY...\n\nrmdir dirname # 删除空目录\nrmdir -v # 显示过程\nUsage: stat [OPTION]... FILE...\nDisplay file or file system status.\nUsage: file [OPTION...] [FILE...]\nDetermine type of FILEs.\nconcatenate
\nUsage: cat [OPTION]... [FILE]...\nConcatenate FILE(s) to standard output.\n\nWith no FILE, or when FILE is -, read standard input.\n\ncat -n {{file}} # 显示行号\ncat {{file1}} {{file2}} > {{target_file}} # 将指定文件合并输出到另一个文件\ncat {{file1}} {{file2}} >> {{target_file}}\nUsage: wc [OPTION]... [FILE]...\n or: wc [OPTION]... --files0-from=F\n针对每个指定的文件，输出该文件中的换行符数、单词数和字节数。并在指定了多个文件时，输出合并后的总行数。\n\n当不指定文件名或者文件名为 "-" 时，从标准输入读取数据。\n\n下面的选项可用于选择要打印哪些计数，总是按照以下顺序:\n换行符数、单词数、字符数、字节数、最大行长度。\n\n -c, --bytes 打印字节数\n -m, --chars 打印字符数\n -l, --lines 打印行数\n --files0-from=F 从文件 F 中以 NUL 为分隔符读取文件名列表，并依次读取每个文件的内容作为输入。\n 如果 F 的值为 "-"，则从标准输入中读取文件名列表。\n -L, --max-line-length 打印最长行的长度\n -w, --words 打印单词数。单词是由空白字符分隔开的、非空的字符序列。\n分页工具
\n more [options] <file>...\n\nA file perusal filter for CRT viewing.\n\nmore +{{line_number}} {{path/to/file}} # 从指定行打开文本\n\n<Space> # 下一面\nh # 帮助\nq # 退出\n易用的分页工具
less is more
less {{source_file}}\n\nb # 上一面\n<Space> # 下一面\nG # 转到末尾\ng # 转到开头\nh # 帮助\nv # 打开编辑器\nq # 退出\nUsage: tail [OPTION]... [FILE]...\n\ntail # 默认显示最后10行\n# 与head相比，tail还支持以下参数，使其擅长用于监听日志文件\ntail -f {{path/to/file}} # 追踪文件最后几行的变更，每次变更都会输出一次\ntail --follow {{path/to/file}}\ntail --follow={{path/to/file}}\ntail --pid={{PID}} -f {{path/to/file}} # 指定PID程序结束时自动终止\ntail --pid={{PID}} -s {{second}} -f {{path/to/file}} # 调整检查PID程序的时间间隔秒数，默认为1.0\nUsage: head [OPTION]... [FILE]...\n\nhead # 默认显示最前10行\nhead -q # 不显示文件名\nhead --quiet\nhead --silent\nhead -v # 显示文件名 ==> filename <==\nhead --verbose\nhead -n{{count}} # 显示最前count行，具体数字可以紧跟在-n后面\nhead -n {{count}} # 显示最前count行，具体数字与-n之间有空格\nhead --lines {{count}} {{path/to/file}} # GNU风格，以上命令count为负数时显示除了最后count行之外的内容\nhead --lines={{count}} {{path/to/file}} # GNU风格，也可以加上等号\nhead -c {{count}} {{path/to/file}} # 显示最前count字节，支持负数\nhead --bytes {{count}} {{path/to/file}}\nhead --bytes={{count}} {{path/to/file}}\nhead -z # 只将NUL解释为换行分隔符，在结合其他命令时实用\nFind files or directories under the given directory tree, recursively
\nUsage: find [-H] [-L] [-P] [-Olevel] [-D debugopts] [path...] [expression]\nUsage: locate [OPTION]... [PATTERN]...\nSearch for entries in a mlocate database.\nSort lines of text files
\nUsage: sort [OPTION]... [FILE]...\n or: sort [OPTION]... --files0-from=F\nWrite sorted concatenation of all FILE(s) to standard output.\nOutput the unique lines from the given input or file
\nUsage: uniq [OPTION]... [INPUT [OUTPUT]]\nFilter adjacent matching lines from INPUT (or standard input),\nwriting to OUTPUT (or standard output).\nUsage: seq [OPTION]... LAST\n or: seq [OPTION]... FIRST LAST\n or: seq [OPTION]... FIRST INCREMENT LAST\nPrint numbers from FIRST to LAST, in steps of INCREMENT.\nStream Editor
\nUsage: sed [OPTION]... {script-only-if-no-other-script} [input-file]...\nGlobal Regular Expression Print
\nUsage: grep [OPTION]... PATTERN [FILE]...\nSearch for PATTERN in each FILE.\nExample: grep -i 'hello world' menu.h main.c\n指向系统默认编辑器
\n转换文件的编码方式
\nUsage: iconv [OPTION...] [FILE...]\nConvert encoding of given files from one encoding to another.\n\n Input/Output format specification:\n -f, --from-code=NAME encoding of original text\n -t, --to-code=NAME encoding for output\n\n Information:\n -l, --list list all known coded character sets\n\n Output control:\n -c omit invalid characters from output\n -o, --output=FILE output file\n -s, --silent suppress warnings\n --verbose print progress information\n压缩文件
\n解压文件
\nTape archive
https://cn.tldr.inbrowser.app/pages/common/tar
tar czf path/to/target.tar.gz path/to/file1 path/to/file2 ...\ntar xvf path/to/source.tar[.gz|.bz2|.xz]\ncommand & 后台运行命令
Ctrl + Z 将当前命令放在后台且暂停
https://cn.tldr.inbrowser.app/pages/common/nice
\nnice -n {{niceness_value}} {{command}}\nhttps://cn.tldr.inbrowser.app/pages/common/renice
\nrenice -n {{niceness_value}} -p {{pid}}\n#!/bin/bash\n\nb=''\nfor ((i = 0; $i <= 100; i++)); do\n printf "Progress:[%-100s]%d%%\\r" $b $i\n sleep 0.01\n b=#$b\ndone\necho\necho "Done!"\n加上 & ，使之在后台运行
$ sleep 60 &\n[1] 36\n$ jobs\n[1]+ Running sleep 60 &\n\n\njobs # 显示后台运行的命令的状态\njobs %{{job_id}} # 显示指定job_id状态\njobs -l # 显示详细信息\njobs -p # 显示pid\n$ sleep 60 &\n[1] 38\n$ fg\nsleep 60\n^Z # 按 Ctrl-Z 暂停\n[1]+ Stopped sleep 60\n$ jobs\n[1]+ Stopped sleep 60\n# 再次使用 fg 命令，恢复运行\n\n\nfg %{{job_id}} # 将后台中的命令调至前台继续运行\n$ jobs # 一个被 Ctrl-Z 停止的命令\n[1]+ Stopped sleep 60\n$ bg # 使之在后台继续执行\n[1]+ sleep 60 &\n$ jobs # 正在后台继续执行\n[1]+ Running sleep 60 &\n\nbg # 显示后台任务，类似于jobs\nbg %{{job_id}} # 将一个在后台暂停的命令（如：Ctrl+Z），变成在后台继续执行\nno hang up
\nnohup {{command}} {{command_arguments}} # 默认输出至 'nohup.out'\nnohup {{command}} {{command_arguments}} &\ndisown 只是移除作业，进程并没有停止
\ndisown %{{job_id}}\ndisown {{pid}}\nUsage:\n ps [options]\n\n Try 'ps --help <simple|list|output|threads|misc|all>'\n or 'ps --help <s|l|o|t|m|a>'\n for additional help text.\n\nps # 支持Unix,BSD,GNU风格\nps -l # 显示长列表\nps -f\nps --forest # 用层级结构显示出进程和父进程的关系\nF 内核分配给进程的系统标记\nS 进程的状态（O正在运行；S在休眠；R可运行；Z僵化，进程已结束但父进程已不存在；T停止）\nUID 启动这些进程的用户\nPID 进程的进程ID\nPPID 父进程的进程号（如果是由另一个进程启动的）\nC 进程生命周期中的CPU利用率\nPRI 进程的优先级（数字越大，优先级越低）\nNI 谦让度值用来参与决定优先级\nADDR 进程的内存地址\nSZ 假如进程被换出，所需交换空间的大致大小\nWCHAN 进程休眠的内核函数的地址\nSTIME 进程启动时的系统时间\nTTY 进程启动时的终端设备\nTIME 运行进程需要的累计CPU时间\nCMD 启动的程序名称\n\n\n$ ps -l # Unix风格\nF S UID PID PPID C PRI NI ADDR SZ WCHAN TTY TIME CMD\n4 S 0 96 0 0 80 0 - 2890 do_wai pts/1 00:00:00 bash\n0 R 0 167 96 0 80 0 - 3283 - pts/1 00:00:00 ps\n\nVSZ 进程在内存中的大小，单位为KB\nRSS 进程在未换出时占用的物理内存\nSTAT 代表当前进程状态的双字符状态码（第一个字符和Unix风格的S列相同，第二个表示该进程：<运行在高优先级上；\n N运行在低优先级上；L有页面锁定在内存中；s是控制进程；l是多线程；+运行在前台）\n\n$ ps l # BSD风格\nF UID PID PPID PRI NI VSZ RSS WCHAN STAT TTY TIME COMMAND\n4 0 96 0 20 0 11560 3996 do_wai Ss pts/1 0:00 bash\n0 0 165 96 20 0 13132 3112 - R+ pts/1 0:00 ps l\npstree\npstree -p # 显示 PID\nUsage:\n top -hv | -bcHiOSs -d secs -n max -u|U user -p pid(s) -o field -w [cols]\n\nq # 退出\nh # 帮助\nPID 进程的ID。\nUSER 进程属主的名字。\nPR 进程的优先级。\nNI 进程的谦让度值。\nVIRT 进程占用的虚拟内存总量。\nRES 进程占用的物理内存总量。\nSHR 进程和其他进程共享的内存总量。\nS 进程的状态（D代表可中断的休眠状态，R 代表在运行状态，S代表休眠状态，T代表跟踪状 态或停止状态，Z代表僵化状态）。\n%CPU 进程使用的CPU时间比例。\n%MEM 进程使用的内存占可用内存的比例。\nTIME+ 自进程启动到目前为止的CPU时间总 量。\nCOMMAND 进程所对应的命令行名称，也就 是启动的程序名。\nkill process_id\nkill -s signal/id process_id\nkill %job_id\nUsage:\n pgrep [options] <pattern>\nUsage:\n pkill [options] <pattern>\nUsage:\n skill [signal] [options] <expression>\nUsage: killall [ -Z CONTEXT ] [ -u USER ] [ -y TIME ] [ -o TIME ] [ -eIgiqrvw ]\n [ -s SIGNAL | -SIGNAL ] NAME...\n\n\nkillall process_name\nkillall -i # 交互式\nhttps://cn.tldr.inbrowser.app/pages/common/at
\n# /etc/init.d/atd\nservice start atd\nsystemctl start atd\nhttps://cn.tldr.inbrowser.app/pages/common/crontab
https://jaywcjlove.gitee.io/linux-command/c/crontab.html
https://devhints.io/bash
Min Hour Day Mon Weekday\n* * * * * command to be executed\n┬ ┬ ┬ ┬ ┬\n│ │ │ │ └─ Weekday (0=Sun .. 6=Sat)\n│ │ │ └────── Month (1..12)\n│ │ └─────────── Day (1..31)\n│ └──────────────── Hour (0..23)\n└───────────────────── Minute (0..59)\n# /etc/crontab\nlvm 此处略
\nhttps://cn.tldr.inbrowser.app/pages/common/mount
\nhttps://cn.tldr.inbrowser.app/pages/common/umount
\nhttps://jaywcjlove.gitee.io/linux-command/c/free.html
\ndisk free
\ndf\ndf -h\ndisk usage
\ndu\ndu -h\ndisk dump
\nhttps://jaywcjlove.gitee.io/linux-command/c/fdisk.html
\nhttps://jaywcjlove.gitee.io/linux-command/c/mkfs.html
\n/etc/passwd\nusername:password:uid:gid:description:home_directory:shell\n\ne.g.\nroot:x:0:0:root:/root:/bin/bash\nbin:x:1:1:bin:/bin:/sbin/nologin\n\n\n/etc/shadow\nusername:password:last_password_change:min_days:max_days:warn_days:inactive_days:expire_date:reserved\n\ne.g.\nroot:$5$vT6FSN/TDyk.DeVO$oPamf8sjZqWaWF0DuM.BtvuuxCDUMx15/RiwTVeKwD9::0:99999:7:::\nbin:*:18353:0:99999:7:::\nUsage: whoami [OPTION]...\nPrint the user name associated with the current effective user ID.\nSame as id -un.\nswitch user
\nsu # 切换至 root\nsu {{username}} # 切换至 username，继承当前环境变量\nsu - {{username}} # 切换至 username，模拟一次完全登录\nsu - {{username}} -c {{command}} # 以 username 身份执行命令\nuseradd <USER NAME> -g <GROUP NAME> -u <UID>\ngroupadd -g <GID> <GROUP NAME>\nuserdel <USER NAME>\nuserdel -r <USER NAME> # 同时删除用户的所有文件和目录\ngroupdel <GROUP NAME>\n和 useradd 的选项基本一致
\n和 groupadd 的选项基本一致
\n更改密码
\npasswd # 更改自己的密码\npasswd <USER NAME> # root用户更改指定用户的密码\npasswd -l <USER NAME> # 锁定指定用户不能修改密码\n管理 /etc/group 和 /etc/gshadow 文件
change password\n批量更新用户口令
\nchange age
修改帐号和密码的有效期限
change shell
更换登录系统时使用的 shell
Usage: wget [OPTION]... [URL]...\n\nwget {{url}} # 下载该url，文件名自动从url中获取，默认会输出下载信息\nwget {{url}} -o {{path}} # 下载url至指定路径，不会输出信息\nwget {{url}} -a {{path}} # 下载url至指定路径，如果文件存在，则附加\nwget -q # 安静模式\n\n\n$ wget ip.sb\n--2022-02-02 22:22:21-- http://ip.sb/\nResolving ip.sb (ip.sb)... 172.67.75.172, 104.26.12.31, 104.26.13.31\nConnecting to ip.sb (ip.sb)|172.67.75.172|:80... connected.\nHTTP request sent, awaiting response... 200 OK\nLength: 15 [text/plain]\nSaving to: ‘index.html’\n\nindex.html 100%[==================================>] 15 --.-KB/s in 0s\n\n2022-02-02 22:22:22 (783 KB/s) - ‘index.html’ saved [15/15]\nUsage: curl [options...] <url>\n\ncurl {{url}}\ncurl {{url}} -o {{path}}\ncurl -s # 安静模式\nping {{host}}\nping -c {{count}} {{host}}\nping -i {{seconds}} {{host}}\nnslookup [-option] [name | -] [server]\n\nnslookup {{example.com}}\nnslookup -type=NS {{example.com}} {{8.8.8.8}} # 指定dns\nnslookup -ty=NS {{example.com}} # 可简写为ty，注意都是单横线\nnslookup -ty=CNAME {{example.com}} # type不区分大小写，未知type则fallback到type=a\n\nnslookup # 进入交互模式\nset ty=A # 交互模式中设置type\n{{example.com}} # 回车查询\nexit #退出\ndig {{host}}\ndig +short {{example.com}}\ndig +short {{example.com}} {{A|MX|TXT|CNAME|NS}}\nDebian 系包管理器 （Ubuntu、Linux Mint）
\nRed Hat 系包管理器 （Fedora、openSUSE）
\n兼具图形化与命令行
\napt-get install # 安装新包\napt-get remove # 卸载已安装的包（保留配置文件）\napt-get purge # 卸载已安装的包（删除配置文件）\napt-get update # 更新软件包列表\napt-get upgrade # 更新所有已安装的包\napt-get autoremove # 卸载已不需要的包依赖\napt-get dist-upgrade # 自动处理依赖包升级\napt-get autoclean # 将已经删除了的软件包的.deb安装文件从硬盘中删除掉\napt-get clean # 删除软件包的安装包\n\n# -c：指定配置文件\nhttps://cn.tldr.inbrowser.app/pages/common/xargs
https://jaywcjlove.gitee.io/linux-command/c/xargs.html
xargs 的默认命令是 echo，空格是默认定界符
\nUsage: xargs [OPTION]... COMMAND [INITIAL-ARGS]...\nRun COMMAND with arguments INITIAL-ARGS and more arguments read from input.\n# 从标准输入读取一行并赋值给变量 REPLY\nread\n\n# 打印提示 text，等待输入，并将输入存储在 REPLY 中\nread -p "text"\n\n# 从标准输入读取输入并将值赋给指定变量\nread varname\n\n# 从标准输入读取输入到第一个空格或者回车，将输入的\n# 第一个单词放到变量 first 中，并将该行其他的输入放在变量 last 中\nread first last\n\n# 把单词清单读入 arrayname 数组里\nread -a arrayname\n\n# 指定读取等待时间为 3 秒\nread -t 3\n\n# 从输入中读取两个字符并存入变量 var，不需要按回车读取\nread -n 2 var\n\n# 用定界符 ":" 结束输入行\nread -d ":" var\n\n# 不显示输入值\nread -p "Enter Password: " -s pwd\neval: eval [arg ...]\n Execute arguments as a shell command.\n\n Combine ARGs into a single string, use the result as input to the shell,\n and execute the resulting commands.\n\n Exit Status:\n Returns exit status of command or success if command is null.\n# 中间不能有空格\nlet a=3*4\n\n# 可以空格\n(( a = 3 * 4 ))\n\necho $a # => 12\nsource: source filename [arguments]\n Execute commands from a file in the current shell.\n\n Read and execute commands from FILENAME in the current shell. The\n entries in $PATH are used to find the directory containing FILENAME.\n If any ARGUMENTS are supplied, they become the positional parameters\n when FILENAME is executed.\n\n Exit Status:\n Returns the status of the last command executed in FILENAME; fails if\n FILENAME cannot be read.\n\n# 定义只读数组，设置属性的同时定义赋值\ndeclare -ar season=('Spring' 'Summer' 'Autumn' 'Winter')\n\n# 或者这样\nseason=('Spring' 'Summer' 'Autumn' 'Winter')\ndeclare -ar season\n\n# 显示所有数组\ndeclare -a\n\n# 定义关联数组\ndeclare -A fruits=(['apple']='red' ['banana']='yellow')\n\n# 显示所有关联数组\ndeclare -A\n# 声明时导出\nexport a=1\n\n# 声明后导出\nb=2\nexport b\nhttps://jaywcjlove.gitee.io/linux-command/c/printf.html
\nprintf: printf [-v var] format [arguments]\nexit: exit [n]\n Exit the shell.\n\n Exits the shell with a status of N. If N is omitted, the exit status\n is that of the last command executed.\ntput 命令 将通过 terminfo 数据库对您的终端会话进行初始化和操作。通过使用 tput，您可以更改几项终端功能，如移动或更改光标、更改文本属性，以及清除终端屏幕的特定区域。
\nCtrl + l
类似于 DOS 的 where
\n判断 shell 执行的命令的类型
\ntype {{command}}\ntype -a {{command}} # 显示所有\ntype -p {{command}} # 显示执行命令的实际文件路径，相当于which命令（有所不同的是其只输出第一个）\n\n$ which ls\n/bin/ls\n$ type ls\nls is aliased to `ls --color=auto'\n$ type -a ls\nls is aliased to `ls --color=auto'\nls is /bin/ls\n$ type -p ls # 没有输出\n$ type -ap ls\n/bin/lsd\nhttps://cn.tldr.inbrowser.app/pages/common/tee
\nUsage: tee [OPTION]... [FILE]...\nCopy standard input to each FILE, and also to standard output.\n$ echo "hello,world!" > test.txt\n$ hd test.txt\n00000000 68 65 6c 6c 6f 2c 77 6f 72 6c 64 21 0a |hello,world!.|\n0000000d\n$ xxd test.txt\n00000000: 6865 6c6c 6f2c 776f 726c 6421 0a hello,world!.\n$ hexdump test.txt\n0000000 6568 6c6c 2c6f 6f77 6c72 2164 000a\n000000d\n$ base64 < test.txt\naGVsbG8sd29ybGQhCg==\n\n$ base64 -d <(base64 < test.txt)\nhello,world!\n$ cp test.txt test2.txt\n$ echo -e "\\nby.Ray" >> test2.txt\n$ diff test.txt test2.txt\n1a2,3\n>\n> by.Ray\nhttps://jaywcjlove.gitee.io/linux-command/c/date.html
\ndate +"%Y-%m-%d"\n计算器
\nalias: usage: alias [-p] [name[=value] ... ]\n\n# 可将别名命令添加到 ~/.bashrc 中\necho "alias 'll=ls -alF'" >> ~/.bashrc\n测量程序耗时
\n/proc 目录一个文档的 readyState 可以是以下之一：
\nloading（正在加载）
document 仍在加载。
interactive（可交互）
文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete（完成）
文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
\n当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发 load 事件。
\n它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。
\n在 html 中任意位置添加 <script></script>，内容如下
console.log("document.readyState=" + document.readyState); // loading\n\ndocument.addEventListener("readystatechange", () => {\n // readystatechange 事件触发时，document.readyState 往往已经结束 loading 状态了\n console.log("document.readyState=" + document.readyState); // interactive / complete\n});\nwindow.addEventListener("DOMContentLoaded", () => {\n // window 和 document 都具有 DOMContentLoaded 事件，这两个事件是不同的\n console.log("window.onDOMContentLoaded");\n});\ndocument.addEventListener("DOMContentLoaded", () => {\n // document 的 DOMContentLoaded 事件先于 window 的 DOMContentLoaded 事件触发\n console.log("document.onDOMContentLoaded");\n});\nwindow.addEventListener("load", () => {\n // document 对象上没有 load 事件\n console.log("window.onload");\n});\ndocument.readyState=loading\ndocument.readyState=interactive\ndocument.onDOMContentLoaded\nwindow.onDOMContentLoaded\ndocument.readyState=complete\nwindow.onload\n第一次宏任务在 DOMContentLoaded 事件触发之后运行
\n第一次微任务在 readystate 变为 loading 之后运行
\n例如，在上文的 <script> 最前面添加这几行（添加在最后效果相同）
setTimeout(() => console.log("timer")); // 宏任务\nqueueMicrotask(() => console.log("microtask")); // 微任务\n输出
\ndocument.readyState=loading\nmicrotask\ndocument.readyState=interactive\ndocument.onDOMContentLoaded\nwindow.onDOMContentLoaded\ntimer\ndocument.readyState=complete\nwindow.onload\n先前已经描述了 C 语言的内存分配，现在侧重于 C++
\n在 C++ 中使用 malloc 系列函数，可直接引入 iostream 头文件。
当然，也可以引入 cstdlib 头文件
#include <iostream>\n#include <cstdlib>\n#include <cstdio>\nusing namespace std;\nint main()\n{\n int *a = (int *)malloc(sizeof(int) * 2);\n a[0] = 1;\n a[1] = 2;\n // a[2] = 3; // 越界，极度危险！\n a = (int *)realloc(a, sizeof(int) * 3);\n a[2] = 3;\n cout << a[0] << endl;\n cout << a[1] << endl;\n cout << a[2] << endl;\n free(a);\n\n int *__restrict b = (int *)calloc(3, sizeof(int));\n // C99标准使用restrict，C++中使用__restrict\n b[0] = 1;\n b[1] = 2;\n b[2] = 3;\n cout << b[0] << endl;\n cout << b[1] << endl;\n cout << b[2] << endl;\n free(b);\n}\nnew 和 delete，new[] 和 delete[] 必须配套使用
\n#include <iostream>\nusing namespace std;\nint main()\n{\n int *p = new int;\n *p = 10;\n cout << *p << endl;\n delete p;\n\n int *q = new int[10];\n for (int i = 0; i < 10; i++)\n q[i] = i;\n for (int i = 0; i < 10; i++)\n cout << q[i] << endl;\n delete[] q;\n\n // 使用 nothrow 异常处理\n int *r = new (nothrow) int[99999999999];\n if (r == NULL)\n cout << "Out of memory" << endl;\n else\n delete[] r;\n\n // 使用 try/catch 异常处理\n try\n {\n int *s = new int[99999999999];\n }\n catch (bad_alloc &e)\n {\n cout << "Out of memory" << endl;\n }\n return 0;\n}\n在函数参数外，引用是给已知变量起一别名。因此，声明引用时必须指定
\n#include <iostream>\nusing namespace std;\nstring print_bool(bool b)\n{\n return b ? "true" : "false";\n}\nint main()\n{\n int a = 1;\n int &b = a;\n int &c = b; // 这里 & 是引用运算符\n cout << print_bool(&a == &b) << endl;\n cout << print_bool(&b == &c) << endl; // 这里 & 是取地址运算符\n}\n在函数参数内，引用表示获取参数的引用而非其拷贝
\n#include <iostream>\nusing namespace std;\ntemplate <typename T>\nvoid change(T &a, T b)\n{\n a = b;\n}\nint main()\n{\n int a = 1;\n change(a, 2);\n cout << a << endl; // 2\n}\n引用可以认为没有创建类型，也可以认为是 Type& 类型
\n在 change 函数中， 参数 a 是 int& 类型，则 a 只接受 int 类型的变量，所以
\nint a = 1;\nchange(2, a); // 不合法，2 不是变量\n\nconst int b = 2;\nchange(b, a); // 不合法，b 的类型为 const int\n因此，change 的第一个参数 a 必须传入 T& 类型的变量
而无法接受 常量 和 字面量常量
MongoDB 非常适合与 JavaScript 一起使用
\ncollection （可以看作 sql 的 table）
\ndocument （可以看作 sql 的 row）
\n每个 document 都是一个 BSON 对象 （形式上类似于 JSON，或者说是 JavaScript\n对象）
\n// 一个 document\n{\n "_id": ObjectId("58904e3796f927a806a182d"),\n "name": "John",\n "age": 25,\n "email": "john@email.email",\n "language": ["C++", "Python"]\n}\ncollection 即 document 的集合
\nMongoDB 支持的类型比较多，参考https://www.mongodb.com/docs/manual/reference/bson-types/
\n可以在 https://www.mongodb.com/docs/manual/tutorial/getting-started/ 体验 mongoDB 的 shell，它是一个 JavaScript 的 shell
\n显示当前数据库名称
\n切换数据库，如果不存在则创建
\n在指定 collection 插入多个 document
\ndb.movies.insertMany([\n {\n title: "Titanic",\n year: 1997,\n genres: ["Drama", "Romance"],\n rated: "PG-13",\n languages: ["English", "French", "German", "Swedish", "Italian", "Russian"],\n released: ISODate("1997-12-19T00:00:00.000Z"),\n awards: {\n wins: 127,\n nominations: 63,\n text: "Won 11 Oscars. Another 116 wins & 63 nominations.",\n },\n cast: ["Leonardo DiCaprio", "Kate Winslet", "Billy Zane", "Kathy Bates"],\n directors: ["James Cameron"],\n },\n {\n title: "The Dark Knight",\n year: 2008,\n genres: ["Action", "Crime", "Drama"],\n rated: "PG-13",\n languages: ["English", "Mandarin"],\n released: ISODate("2008-07-18T00:00:00.000Z"),\n awards: {\n wins: 144,\n nominations: 106,\n text: "Won 2 Oscars. Another 142 wins & 106 nominations.",\n },\n cast: ["Christian Bale", "Heath Ledger", "Aaron Eckhart", "Michael Caine"],\n directors: ["Christopher Nolan"],\n },\n {\n title: "Spirited Away",\n year: 2001,\n genres: ["Animation", "Adventure", "Family"],\n rated: "PG",\n languages: ["Japanese"],\n released: ISODate("2003-03-28T00:00:00.000Z"),\n awards: {\n wins: 52,\n nominations: 22,\n text: "Won 1 Oscar. Another 51 wins & 22 nominations.",\n },\n cast: ["Rumi Hiiragi", "Miyu Irino", "Mari Natsuki", "Takashi Naitè"],\n directors: ["Hayao Miyazaki"],\n },\n {\n title: "Casablanca",\n genres: ["Drama", "Romance", "War"],\n rated: "PG",\n cast: ["Humphrey Bogart", "Ingrid Bergman", "Paul Henreid", "Claude Rains"],\n languages: ["English", "French", "German", "Italian"],\n released: ISODate("1943-01-23T00:00:00.000Z"),\n directors: ["Michael Curtiz"],\n awards: {\n wins: 9,\n nominations: 6,\n text: "Won 3 Oscars. Another 6 wins & 6 nominations.",\n },\n lastupdated: "2015-09-04 00:22:54.600000000",\n year: 1942,\n },\n]);\n// 查询所有文档\ndb.movies.find({});\n// 查询 directors 值为 "Christopher Nolan" 的文档\ndb.movies.find({ directors: "Christopher Nolan" });\n// 查询 released 值小于（前于）ISODate("2000-01-01") 的文档，lt = less than\ndb.movies.find({ released: { $lt: ISODate("2000-01-01") } });\n// 查询 awards.wins 值大于 100 的文档，gt = greater than，注意此处的 awards.wins\ndb.movies.find({ "awards.wins": { $gt: 100 } });\n// 查询 languages 包括 ["Japanese", "Mandarin"] 的文档\ndb.movies.find({ languages: { $in: ["Japanese", "Mandarin"] } });\n指定返回字段
\ndb.movies.find({}, { title: 1, directors: 1, year: 1 });\n// 无需指定_id，因为默认就会返回，如果不需要_id，可以设置为0\ndb.movies.find({}, { _id: 0 });\n聚合查询
\ndb.movies.aggregate([\n { $unwind: "$genres" },\n {\n $group: {\n _id: "$genres",\n genreCount: { $count: {} },\n },\n },\n { $sort: { genreCount: -1 } },\n]);\nhttps://www.mongodb.com/docs/manual/crud/
\n","tags":["database"]},{"id":"cpp-function-pointer","url":"https://yieldray.fun/posts/cpp-function-pointer","title":"C/C++函数指针","date_published":"2022-04-10T14:04:08.000Z","date_modified":"2022-04-10T14:04:08.000Z","content_text":"函数的类型由其参数及返回类型共同决定，与函数名无关。
\n// 对于函数定义\nint add(int nLeft,int nRight);\n// 其类型为\nint(int,int);\n函数与其他数据类型不同的是，函数名位于形参列表之前，返回类型之后。
对于其他变量，类型在变量名之前，函数名却与函数类型是复合在一起的。
自然地，函数指针的声明如下。按照 C 风格，将 *pf 看作整体
用括号确保优先级，否则 * 将与 int 结合
int (*pf)(int,int);\n// typedef的名称也是在相同的位置\ntypedef int (*PF)(int,int);\n// 所以函数指针的类型为\nint (*)(int,int);\n// 不能这样\ntypedef int (*)(int, int) pFunc;\n注意到 函数名 和 *函数名 和 &函数名 的地址都相同
#include <cstdio>\nint add(int nLeft, int nRight)\n{\n return nLeft + nRight;\n}\nint main()\n{\n printf("%p\\n", add);\n printf("%p\\n", &add);\n printf("%p\\n", *add);\n}\n输出（具体值取决于编译器）
\n00007ff623381591\n00007ff623381591\n00007ff623381591\n#include <iostream>\nusing namespace std;\nint add(int nLeft, int nRight)\n{\n return nLeft + nRight;\n}\ntemplate <typename T, typename U>\nstring judge(T t, U u)\n{\n return t == u ? "true" : "false";\n}\nint main()\n{\n cout << judge(add, &add) << endl; // true\n cout << judge(add, *add) << endl; // true\n}\n发现对于函数，* 表现得不正常
认为函数类似数组，函数名等同于函数的地址，即有 函数 == &函数
因此认为 * 对函数操作有特殊的语义，对函数地址解除引用得到的还是函数地址
函数指针则没有这种特殊待遇
\n#include <cstdio>\nusing namespace std;\nint add(int nLeft, int nRight)\n{\n return nLeft + nRight;\n}\ntypedef int (*pFunc)(int, int);\nint main()\n{\n pFunc pf = add;\n printf("%p\\n", add);\n printf("%p\\n", pf);\n printf("%p\\n", *pf);\n printf("%p\\n", &pf);\n}\n输出
\n00007ff6c1f91540\n00007ff6c1f91540\n00007ff6c1f91540\n00000096e93ff878\n函数指针作为一个地址变量，当然有自己的地址。\n观察输出，发现函数指针等同于对函数指针解除引用 ，这也与普通指针不同
认为函数指针名有特殊的语义，等同于其引用的函数
上面的例子中，函数名与函数指针的地址相同，可以认为它们的类型也是相同的
\n#include <cstdio>\nint add(int nLeft, int nRight)\n{\n return nLeft + nRight;\n}\nint doSomething(int a, int b, int(f)(int, int))\n{\n return f(a, b);\n}\nint main()\n{\n int (*fp)(int, int) = add;\n printf("%d\\n", doSomething(1, 2, fp)); // 3\n printf("%d\\n", doSomething(1, 2, add)); // 3\n}\n更具体的例子
\nint main()\n{\n int (*fp)(int, int) = add;\n int (*doSth1)(int, int, int(int, int)) = doSomething;\n int (*doSth2)(int, int, int (*)(int, int)) = doSomething;\n printf("%d\\n", doSth1(1, 2, add)); // 3\n printf("%d\\n", doSth1(1, 2, add)); // 3\n printf("%d\\n", doSth1(1, 2, fp)); // 3\n printf("%d\\n", doSth2(1, 2, fp)); // 3\n}\n对于返回函数指针的函数，其类型比较复杂
\n#include <cstdio>\nint add(int a, int b)\n{\n return a + b;\n}\ntypedef int (*pFunc)(int, int);\npFunc fname(int useless)\n{\n return add;\n}\nint (*fnamep(int useless))(int x, int y) // 这里注意，x和y可有可无，并且在函数体内无效\n{// 完整定义，由内往外阅读。注意！fnamep是函数，返回函数指针（类型即上面的pFunc）。函数不能返回函数\n return add;\n}\nint main()\n{\n printf("%d\\n", fname(123)(1, 2)); // 3\n printf("%d\\n", fnamep(123)(1, 2)); // 3\n}\nc++ 中可以使用 delctype 和 auto 自动推导类型
\n#include <iostream>\nusing namespace std;\nint add(int a, int b)\n{\n return a + b;\n}\ntypedef decltype(add) add_t;\nint main()\n{\n add_t *add_func = add;\n auto add_func2 = add;\n cout << add_func(1, 2) << endl; // 3\n cout << add_func2(1, 2) << endl; // 3\n}\n函数返回函数指针，更加直观
\n#include <iostream>\nusing namespace std;\nint add(int a, int b)\n{\n return a + b;\n}\ntypedef decltype(add) add_t;\nauto fnamep1(int useless) -> add_t *\n{\n return add;\n}\nauto fnamep2(int useless) -> int (*)(int, int)\n{\n return add;\n}\ndecltype(add) *fnamep3(int useless)\n{\n return add;\n}\nint main()\n{\n cout << fnamep1(123)(1, 2) << endl; // 3\n cout << fnamep2(123)(1, 2) << endl; // 3\n cout << fnamep3(123)(1, 2) << endl; // 3\n}\n成员函数
\n#include <iostream>\nusing namespace std;\nclass Test\n{\npublic:\n void hello()\n {\n cout << "hello" << endl;\n }\n};\ntypedef void (Test::*CFP)();\nCFP func = &Test::hello;\n\nint main()\n{\n Test test;\n (test.*func)();\n}\nhttps://docs.npmjs.com/cli/v8/commands
\n$ npm install --production\n# or\n$ NODE_ENV=production npm install\n{\n "name": "PackageA",\n "peerDependencies": {\n "PackageB": "^1.0.0"\n }\n}\n\n// $ npm install PackageA\n// MyProject\n// |- node_modules\n// |- PackageA\n\n// |- PackageB\n{\n "name": "PackageA",\n "optionalDependencies": {\n "PackageB": "^1.0.0"\n }\n}\n$ npm ci\n先删除 node_modules ，然后再按照 package-lock.json 或 npm-shrinkwrap.json 安装依赖
\n$ alias cnpm="npm --registry=https://registry.npmmirror.com"\n$ npm install -g cnpm --registry=https://registry.npmmirror.com\n$ npm config set registry "https://registry.npmmirror.com"\n\n# use .npmrc in ~/\nregistry="https://registry.npmmirror.com"\n$ npm shrinkwrap\n生成 npm-shrinkwrap.json 文件，此后 npm install 将会优先使用 npm-shrinkwrap.json
\n$ npm outdated\nPackage Current Wanted Latest Location Depended by\nglob 5.0.15 5.0.15 6.0.1 node_modules/glob dependent-package-name\nnothingness 0.0.3 git git node_modules/nothingness dependent-package-name\nnpm 3.5.1 3.5.2 3.5.1 node_modules/npm dependent-package-name\nlocal-dev 0.0.3 linked linked local-dev dependent-package-name\nonce 1.3.2 1.3.3 1.3.3 node_modules/once dependent-package-name\nnode 安装时自动安装 npm（到 node 同级目录下），
如果通过 npm i -g npm 更新过 npm 则还存在更新后的 npm（在 npm 安装全局包的目录下）
项目配置文件: 项目根目录/.npmrc
用户配置文件：~/.npmrc
全局配置文件：$PREFIX/etc/npmrc
npm 内置配置文件： npm安装目录/npmrc
通过 npm config 修改的是用户配置文件（~/.npmrc）
加上 -g （npm config -g）则对应全局配置文件
# 全局安装目录\nprefix=/usr/local/npm\n# 缓存目录\ncache=~/.cache/npm_cache\n命令行操作如下
\n$ npm config --help\nManage the npm configuration files\n\nUsage:\nnpm config set <key>=<value> [<key>=<value> ...]\nnpm config get [<key> [<key> ...]]\nnpm config delete <key> [<key> ...]\nnpm config list [--json]\nnpm config edit\n\n# 设置镜像源\nnpm config set registry https://repo.huaweicloud.com/repository/npm/\n# 获取用户配置文件路径\nnpm config get userconfig\n配置文件格式同 ini，例如
\n; registry=https://registry.npmjs.org/\nregistry=https://registry.npmmirror.com/\n对于许多内置的 JavaScript 对象类型，toString() 方法自动识别并返回特定的类型标签
\nObject.prototype.toString.call("foo"); // "[object String]"\nObject.prototype.toString.call({}); // "[object Object]"\nObject.prototype.toString.call([1, 2]); // "[object Array]"\nObject.prototype.toString.call(Symbol()); // "[object Symbol]"\nObject.prototype.toString.call(3); // "[object Number]"\nObject.prototype.toString.call(5n); // "[object BigInt]"\nObject.prototype.toString.call(true); // "[object Boolean]"\nObject.prototype.toString.call(undefined); // "[object Undefined]"\nObject.prototype.toString.call(null); // "[object Null]"\n// ... and more\n另外一些对象类型则不然，toString() 方法能识别它们是因为引擎为它们设置好了 toStringTag 标签：
\nObject.prototype.toString.call(new Map()); // "[object Map]"\nObject.prototype.toString.call(function* () {}); // "[object GeneratorFunction]"\nObject.prototype.toString.call(Promise.resolve()); // "[object Promise]"\n// ... and more\n对于自定义对象，没有被重载的情况下返回"[object Object]"
也就是说，Object.prototype.toString()方法总返回"[object toStringTag]" 的形式
实际上对于自定义对象，toStringTag会取得Symbol.toStringTag属性值
const myObj = {\n [Symbol.toStringTag]: "MyTag",\n};\nconsole.log(myObj.toString()); // [object MyTag]\n\nclass ValidatorClass {\n get [Symbol.toStringTag]() {\n return "Validator";\n }\n}\nObject.prototype.toString.call(new ValidatorClass()); // "[object Validator]"\n综上，Object.prototype.toString()方法适用于判断原生对象的类型，
这必须建立在自定义对象的Symbol.toStringTag属性没有被修改成和原生toStringTag相同的情况下
// 利用toString进行类型检测\n\nconst check = (any, cons) => Object.prototype.toString.call(any).slice(8, -1) === cons.name;\n\ncheck({}, Object); // => true\ncheck([], Array); // => true\ncheck(123, Number); // => true\ncheck(true, Boolean); // => true\ncheck("str", String); // => true\n参见：https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
\n面向对象编程有三大途径：类(classes)、原型(prototypes) 和 多方法(multimethods)。
\n在基于类的系统中，存在类和对象。我们往往将类看作模板，将对象看作实例。只有类可以继承类。
在基于原型的系统中，不存在这种意义的类。相反，只存在对象，而对象可以相互委托，被委托的那个对象称为原型，从而实现继承。
JavaScript 是最流行的基于原型的面向对象编程语言之一。
\n\n\nJavaScript 原型的实质就是将一个对象的
\n[[prototype]]（语言内部槽）指向为另一个已知对象
获取一个对象的属性时，先在对象自身上查找，再逐级向其[[prototype]]（原型链）上查找，
直至找到或者未找到（抵达原型链的根：null）而返回 undefined
每个 JavaScript 对象都有一个特殊的内部槽 [[Prototype]]（参见：ECMA262），它指向该对象的原型对象
通过 Object.getPrototypeOf(obj) 方法，可以获取指定对象的原型对象。
\n\n也可以通过这个对象（原型上的）的
\n__proto__属性获取（非标准）获得该原型对象
注意：__proto__是从Object.prototype上继承的属性（实际上是一个getter和setter）。所以该属性可以被覆写（override）
而Object.getPrototypeOf()必然能获取到一个对象的[[Prototype]]\n// 例如：\nObject.getPrototypeOf(Object.create(null)); // => null （[[Prototype]] 为 null）\nObject.create(null).__proto__; // => undefined （不存在 __proto__ 这个属性）\n\nconst obj = {};\nconsole.assert(Object.getPrototypeOf(obj) === obj.__proto__);\n
创建对象后再设置原型
\nconst obj = {}; // 这里假设obj是任意对象\nconst proto = { fallback: "fallback" }; // 这里假设proto是要设置的原型对象\n\n// 1.非标准\nobj.__proto__ = proto;\n// 2.标准\nObject.setPrototypeOf(obj, proto);\n\n// 测试\nconsole.log(obj.fallback); // => "fallback"\n在创建对象的同时设置原型
\n// 1.不应该这样（**注意**：这种方法也是可以正确建立原型链的，原理是 __proto__ 是原型上的 setter）\nconst obj = { __proto__: proto };\n// 2.应该\nconst obj = Object.create(proto);\n虽然 js 引擎往往实现了从对象的 __proto__ 属性访问其原型，但该 __proto__ 属性默认情况下是在 Object.prototype 对象上，
不应在对象自身上设置 __proto__ 属性，这往往是造成安全问题的来源。
下面通过两种方式声明一个构造函数
注意：这两种方式几乎是等效的（只不过类是 ES6 引入的，因此会更加严格），下面不加以区分
\n\n换句话说：构造函数就相当于类
\n
// 1.ES5\nfunction Cls(a) {\n this.a = a;\n}\nCls.prototype.fallback = "fallback";\n\n// 2.ES6\nclass Cls {\n constructor(a) {\n this.a = a;\n }\n fallback = "fallback";\n}\n\n// 测试\nconst instance = new Cls("a");\nconsole.log(instance.a); // => "a"\nconsole.log(instance.fallback); // => "fallback"\n// 函数的 prototype 属性指向一个特殊的对象\nconsole.assert(Cls.prototype.constructor === Cls);\n通过构造函数创建的对象，其原型对象就是构造函数的 prototype 属性所指向的那个对象
\nconsole.assert(instance.__proto__ === Cls.prototype);\n通过构造函数创建的对象，它的原型对象上存在 constructor 属性，指向其构造函数
这就与手动创建对象再设置其原型不同，因为其原型对象上存在指向构造函数的 constructor 属性
console.assert(instance.constructor === Cls);\nconsole.assert(instance.__proto__.constructor === instance.constructor);\nJavascript 函数继承自 Function，函数是对象，自身具有 prototype 属性（自动生成），指向一个特殊的对象（自动生成）
（上面提到，如果函数被用作构造函数，那么该构造函数的 prototype 属性就是其 实例 的 原型）
const func = function () {}; // func 是 Function 的实例对象\nconsole.assert(func.constructor === Function);\nconsole.assert(func.__proto__ === Function.prototype);\nObject.getOwnPropertyNames(func); // => ['length', 'name', 'arguments', 'caller', 'prototype']\nfunc.prototype; // => {constructor: ƒ} 函数的 prototype 属性是 Object 实例，由 JavaScript 引擎自动生成\nconsole.assert(func.prototype.constructor === func); // 函数的 prototype 属性指向的对象，具有 constructor 属性，指向函数自身\n注意：箭头函数也继承自 Function，但其自身只存在 length 和 name 属性
（没有 prototype 属性，因此不能作构造函数使用）
const af = () => {};\nconsole.assert(af.constructor === Function);\nconsole.assert(af.__proto__ === Function.prototype);\nObject.getOwnPropertyNames(af); // => [ 'length', 'name' ]\nnew 操作符要求其后面是一个构造函数，否则抛出 TypeError 异常（任何一个函数都可以是构造函数，只不过一般命名时首字母大写）
参见：https://tc39.es/ecma262/#sec-evaluatenew
function Cls(a) {\n this.a = a;\n}\nCls.prototype.fallback = "fallback";\n\nconst instance = {};\nCls.call(instance, a); // a 是构造函数的参数\nObject.setPrototypeOf(instance, Cls.prototype); // 设置原型对象\n构造函数（任意函数）具有 [[Construct]] 内部槽，构造函数实例化对象就是调用了此方法
参见： https://tc39.es/ecma262/#sec-ecmascript-function-objects-construct-argumentslist-newtarget
继承的实质就是将 子构造函数的 prototype 属性 的 原型 设置为 父构造函数的 prototype 属性
\nObject.setPrototypeOf(SubClass.prototype, ParentClass.prototype);\n\n\n继承是发生在构造函数之间，而不是实例对象之间。因此我们只会说子类继承父类，而不是实例对象去继承别的实例对象。
\n
注意这之间的区别：因为构造函数也是对象，但在这里不将其称为实例对象，而称为类。
![\"extends\"](\"https://zh.javascript.info/article/class-inheritance/animal-rabbit-extends.svg\")
(本图来自https://zh.javascript.info/class-inheritance)
这里不讨论 Symbol
返回指定对象的原型（内部 [[Prototype]] 槽的值）。如果没有继承属性，则返回 null
返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。
const func = function () {};\nconsole.log(Object.getOwnPropertyNames(func)); // => ['length', 'name', 'arguments', 'caller', 'prototype']\n这是一个原型方法，在对象自身上调用时，指示对象自身属性中是否具有指定的属性
\nconst obj = {};\nobj.hasOwnProperty("toString"); // => false\n顺便提一句，in 操作符会在原型链上检查
这是一个较新的函数，目前 chrome>=93 才支持hasOwnProperty 方法是一个原型方法，只有继承了 Object 的对象才有此原型方法，而且这个方法可以被覆盖
但 Object.hasOwn() 是一个静态方法，适用于任何对象
const obj = {};\nObject.hasOwn(obj, "toString"); // => false\n\nconst alone = Object.create(null);\nalone.hasOwnProperty("toString"); // => Uncaught TypeError: alone.hasOwnProperty is not a function\nObject.hasOwn(alone, "toString"); // => false\n\n// polyfill\nconst hasOwn = (instance, prop) => Object.prototype.hasOwnProperty.call(instance, prop);\nlhs instanceof rhs
检查 lhs 是否继承 rhs
即：lhs 的原型链上是否有等于 rhs.prototype 的对象
换言之，lhs 的原型链上是否有构造函数是 rhs 的对象
模拟一个 instanceof
// 递归\nconst instanceOf1 = (obj, func) => {\n if (!(obj && ["object", "function"].includes(typeof obj))) return false;\n let proto = Object.getPrototypeOf(obj);\n if (proto === func.prototype) return true;\n if (proto === null) return false;\n return instanceOf1(proto, func);\n};\n// 迭代\nconst instanceOf2 = (obj, func) => {\n if (!(obj && ["object", "function"].includes(typeof obj))) return false;\n let proto = obj;\n while ((proto = Object.getPrototypeOf(proto))) {\n // if (proto === null) return false;\n if (proto === func.prototype) return true;\n }\n return false;\n};\n// Object 是一个构造函数，所以继承 Function\nconsole.assert(Object instanceof Function);\n// Function 是一个对象，继承 Object\nconsole.assert(Function instanceof Object);\n实际上 Function.__proto__ 指向 Function.prototype，而不是 Object.prototype
并且有 Function.__proto__ === Function.prototype === Object.__proto__
console.assert(Function.prototype === Function.__proto__);\nconsole.assert(Function.prototype === Object.__proto__);\nObject.prototype.__proto__ 为 null
下面制作的图片为了准确，使用 [[prototype]] 而不是 __proto__\n![\"prototype.png\"](\"https://s2.loli.net/2022/04/01/qmHksRaGNQDXOvV.png\")
Object.create() 方法创建的对象，将给定对象作为新创建对象的 [[Prototype]]
const provider = { a: 123 };\nconst created = Object.create(provider);\nconsole.log(created.a); // => 123\nconsole.assert(created.__proto__ === provider);\nconsole.assert(created.constructor === Object);\n\nconst provider2 = Object.create(null);\nprovider2.a = 456;\nconst created2 = Object.create(provider2);\nconsole.log(created.a); // => 456\nconsole.log(created2.__proto__); // => undefined\nconsole.assert(Object.getPrototypeOf(created2) === provider2);\nconsole.log(created2.constructor); // => undefined\n结合上面的图片发现，对象字面量 {} 等效于 new Object() 构造，因此其 __proto__ 属性指向 Object.prototypeget __proto__: ƒ __proto__()和 set __proto__: ƒ __proto__() 正是通过继承 Object.prototype 得到的Object.create(null) 当然没有继承 Object.prototype，所以也就没有 __proto__ 属性
额外提一句，Object.create(o: any, properties?: PropertyDescriptorMap) 的第二个参数相当于 Object.defineProperties<T>(o: T, properties: PropertyDescriptorMap): T
一般来说，一个对象
\n__proto__ 属性，指向其构造函数的 prototype 属性constructor 属性，指向其构造函数obj.__proto__ === obj.constructor.prototype函数作为特殊的对象
\nprototype 属性，new 操作符会将被创建的对象的 [[Prototype]] 指向函数的 prototype 属性func.prototype.constructor === func\n\n下文基本翻译自：https://jwt.io/introduction
\n
另见：\nThe JWT Handbook: https://jwt.surge.sh
JSON Web Token 入门教程：https://ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
JSON Web Token (JWT) 是一种开放标准 (RFC 7519)，它定义了一种紧凑且自包含的方式，可以以 JSON 对象的形式在各方之间安全地传输信息。这些信息可以得到验证和信任，因为它们是经过数字签名的。可以通过使用密钥（使用 HMAC 算法）或使用 RSA 或 ECDSA 的公钥/私钥对来对 JWT 进行签名。
\n尽管可以对 JWT 进行加密，以便在各方之间提供机密性，但我们重点关注签名令牌。签名令牌可以验证其中包含的声明的完整性，而加密令牌会向其他方隐藏这些声明。当使用公钥/私钥对对令牌签名时，签名还证明持有私钥的一方就是对其进行签名的一方。
\n以下是一些使用 JSON Web Token 有用的场景：
\n**授权：**这是使用 JWT 最常见的场景。用户登录后，每个后续请求都将包含 JWT，允许用户访问该令牌允许的路由、服务和资源。单点登录是一种广泛使用 JWT 的功能，因为其开销小，而且可以轻松地用于不同的域中。
\n**信息交换：**JSON Web Token 是安全地在各方之间传输信息的好方法。由于可以对 JWT 进行签名（例如，使用公钥/私钥对），因此你可以确信发送者就是他们所说的那样。此外，由于签名是使用 Header 和有效负载计算的，因此你还可以验证内容是否未被篡改。
\n在紧凑形式中，JSON Web Token 由三个用点（.）分隔的部分组成，它们是：
因此，一个 JWT 通常如下所示。
\nxxxxx.yyyyy.zzzzz
我们分解一下不同的部分。
\nHeader通常由两部分组成：令牌的类型（即 JWT）和正在使用的签名算法，例如 HMAC SHA256 或 RSA。
\n例如：
\n{\n "alg": "HS256",\n "typ": "JWT"\n}\n然后，将此 JSON Base64Url 编码为 JWT 的第一部分。
\n令牌的第二部分是有效负载，其中包含声明。声明是对实体（通常是用户）和附加数据的陈述。有三种类型的声明：已注册、公共和私有声明。
\n已注册声明（Registered claims）：这些是一组预定义的声明，它们不是强制性的，但建议使用，以提供一组有用的、可互操作的声明。其中一些声明为：iss（颁发者）、exp（到期时间）、sub（主题）、aud（受众），以及 其它。
\n\n\n请注意，由于 JWT 的目的是紧凑，因此声明名称只有三个字符长。
\n
公共声明（Public claims）：这些声明可以由使用 JWT 的人随意定义。但是，为了避免冲突，它们应在 IANA JSON Web Token Registry 中进行定义，或定义为包含防冲突命名空间的 URI。
\n私有声明（Private claims）：这些是创建的自定义声明，用于在同意使用它们且不是已注册或公共声明的各方之间共享信息。
\n一个示例有效负载可以是：
\n{\n "sub": "1234567890",\n "name": "John Doe",\n "admin": true\n}\n然后将有效负载 Base64Url 编码为 JSON Web Token 的第二部分。
\n\n\n请注意，对于已签名令牌，此信息虽然受保护，以免篡改，但任何人都可以读到。除非已加密，否则不要将机密信息放入 JWT 的有效负载或 Header 中。
\n
要创建签名部分，你必须获取编码 Header、编码有效负载、一个密钥、Header 中指定的算法，并对其进行签名。
\n例如，如果你想使用 HMAC SHA256 算法，则将按如下方式创建签名：
\nHMACSHA256(\n base64UrlEncode(header) + "." +\n base64UrlEncode(payload),\n secret)\n签名用于验证消息不会在传输过程中被更改，并且，对于用私钥签名的令牌，它还可以验证 JWT 的发送方是否为其声称的身份。
\n\n\n可使用 HMAC 或 公钥/密钥对 算法进行签名。显然，HMAC 的 secret 就相当于 公钥/密钥对 的 公钥+私钥
\n
有关具体密钥算法，另见：密钥类型、算法和操作
输出是三个 Base64-URL 字符串，它们由点号分隔，可轻松地通过 HTML 和 HTTP 环境传递，而与基于 XML 的标准（例如 SAML）相比，其更紧凑。
\n下面显示了一个具有先前编码的 Header 和有效负载、并使用密钥进行签名的 JWT。![\"编码的](\"https://cdn.auth0.com/content/jwt/encoded-jwt3.png\")
如果你想使用 JWT 并将这些概念付诸实践，则可以使用 jwt.io 调试器 来解码、验证和生成 JWT。
\n![\"JWT.io](\"https://cdn.auth0.com/website/jwt/introduction/debugger.png\")
在身份验证中，当用户使用其凭据成功登录时，将返回一个 JSON Web Token。由于令牌是凭据，因此必须非常小心，以防止出现安全问题。通常，你不应将令牌保留的时间超过需要。
\n你也不应 由于缺乏安全性而将敏感会话数据存储在浏览器存储中。
\n每当用户想要访问受保护的路由或资源时，用户代理都应发送 JWT，通常是在 Authorization Header 中使用 Bearer 架构。Header 的内容应如下所示：
\nAuthorization: Bearer <token>\n在某些情况下，这可以是一种无状态授权机制。服务器的受保护路由将在 Authorization Header 中检查有效的 JWT，如果存在，则用户将被允许访问受保护的资源。如果 JWT 包含必要的数据，则可能减少特定操作的数据库访问需求，尽管情况并非总是如此。
请注意，如果你通过 HTTP Header 发送 JWT 令牌，你应尝试防止令牌变得太大。某些服务器不接受 Header 中超过 8 KB 的内容。如果你试图在 JWT 令牌中嵌入过多信息，例如此处包括了所有用户权限，则可能需要一种替代方案，例如 Auth0 细粒度授权。
\n如果令牌在 Authorization Header 中发送，那么跨源资源共享 (CORS) 不会成为问题，因为它不使用 cookie。
下图显示了如何获取 JWT 以及如何使用 JWT 来访问 API 或资源：
\n![\"JSON](\"https://cdn.auth0.com/website/jwt/introduction/client-credentials-grant.png\")
/oauth/authorize 端点。请注意，对于已签名令牌，令牌中包含的所有信息都对用户或其他方公开，即使他们无法更改令牌也是如此。这意味着你不应在令牌中放入机密信息。
\n让我们讨论 JSON Web Token (JWT) 与 简单 Web 令牌 (SWT) 和 安全断言标记语言令牌 (SAML) 相比的优势。
\n由于 JSON 比 XML 的冗余性较低，因此编码后的大小也较小，这使得 JWT 比 SAML 更紧凑。这使得 JWT 成为在 HTML 和 HTTP 环境中传递的明智选择。
\n从安全角度看，SWT 只能使用 HMAC 算法通过共享密钥进行对称签名。然而，JWT 和 SAML 令牌可以使用 X.509 证书中的公钥/私钥对进行签名。与使用 JSON 签名的简单性相比，使用 XML 数字签名对 XML 签名而不会引入晦涩的安全漏洞非常困难。
\n大多数编程语言中都有 JSON 解析器，因为它们直接映射到对象。相反，XML 却没有自然的文档到对象的映射。这使得使用 JWT 变得比使用 SAML 断言更容易。
\n关于使用情况，JWT 是在互联网规模上使用的。这突出了 JSON Web Token 在多个平台（尤其是移动平台）上进行客户端处理的容易程度。
\n![\"比较编码的](\"https://cdn.auth0.com/content/jwt/comparing-jwt-vs-saml2.png\")
比较编码的 JWT 和编码的 SAML 的长度
如果你想详细了解 JSON Web Token，甚至开始使用它们在自己的应用程序中执行身份验证，请浏览 Okta 旗下的 Auth0 的 JSON Web Token 登陆页面。
\n","tags":["rfc","lib"]},{"id":"cpp-intro","url":"https://yieldray.fun/posts/cpp-intro","title":"c++入门","date_published":"2022-03-17T17:33:33.000Z","date_modified":"2022-03-17T17:33:33.000Z","content_text":"C++ Primer Plus（第 6 版）中文版 by Stephen Prata (z-lib.org).pdf
C++ Primer Plus（第 6 版）中文版 by Stephen Prata (z-lib.org).epub
#include <iostream>\n\nusing namespace std;\nclass Box\n{\npublic:\n double data;\n\nprivate:\n int *ptr;\n\npublic:\n friend void console_log(Box box); // 友元函数，可以访问私有成员，不是类的成员。友元函数实现无需friend关键字\n friend Box operator*(int num, const Box &box);\n void setData(double d);\n // 成员函数可以定义在类定义内部，或者单独使用范围解析运算符 :: 来定义。\n // 在类定义中定义的成员函数把函数声明为内联的，即便没有使用 inline 标识符。\n // 成员函数定义了就必须要实现，只能实现一次，如果类内部实现了就不能在外部实现了\n inline double getData() const\n { // 后面的 const 关键字表示这个函数不能修改类的数据成员\n return data;\n }\n virtual string whatABoxItIs(); // 虚函数： virtual 修饰符修饰的方法可以由子类实现，否则子类实现的方法不会被绑定，仍绑定到基类方法\n // virtual bool isBoxFull() = 0; // 纯虚函数：声明了此方法（不能定义）的类为抽象类，无法实例化\n static void sayHello() // 静态函数\n {\n cout << "hello, I am a box" << endl;\n }\n Box operator+(const Box &another)\n { // 重载 + 运算符，用于把两个 Box 对象相加\n Box box(0);\n // this是一个指向当前对象的指针\n box.data = this->data + another.data;\n return box;\n }\n Box(double d); // 构造函数\n Box(const Box &obj); // 拷贝构造函数\n ~Box() // 析构函数\n {\n delete ptr; // 删除指针，释放内存\n cout << "a box was destroyed" << endl;\n }\n};\n\nBox::Box(double d = 1.0) : data(d)\n{\n // 此语法等同于 data = d;\n // 多个参数用逗号分隔\n ptr = new int(233);\n cout << "a box was created" << endl;\n}\n\nBox::Box(const Box &obj) // 拷贝构造函数\n{\n // 隐含this\n ptr = new int;\n ptr = obj.ptr; // 拷贝值\n cout << "a box was created by copy" << endl;\n}\n\nvoid Box::setData(double d)\n{\n // 在外部定义函数\n cout << "previous data is " << this->getData() << endl; // this 是地址 Box*\n data = d;\n cout << "data was set to " << data << endl;\n}\n\nstring Box::whatABoxItIs()\n{\n // 返回string而不是char*\n return "Prototype Box";\n}\n\n// 友元函数\nvoid console_log(Box box)\n{\n printf("friend: data in the box %.2lf\\n", box.data);\n printf("friend: ptr in the box %.2lf\\n", box.ptr);\n}\n\nBox operator*(int num, const Box &box)\n{ // Box的友元\n Box newBox(num * box.data);\n return newBox;\n}\nostream &operator<<(ostream &os, const Box &box)\n{ // 重载<<运算符，这里没有声明为友元\n os << "overload << " << box.getData() << endl;\n return os;\n}\n\n// class SmallBox : public/private/protected[, access-specifier base-class [, ...]] Box {};\n/*\n公有继承（public）：当一个类派生自公有基类时，基类的公有成员也是派生类的公有成员，基类的保护成员也是派生类的保护成员，基类的私有成员不能直接被派生类访问，但是可以通过调用基类的公有和保护成员来访问。\n保护继承（protected）： 当一个类派生自保护基类时，基类的公有和保护成员将成为派生类的保护成员。\n私有继承（private）：当一个类派生自私有基类时，基类的公有和保护成员将成为派生类的私有成员。\n*/\n\nnamespace namespace_name\n{\n int number = 123;\n void hello_world()\n {\n cout << "Hello, world!" << endl;\n }\n namespace namespace_innner\n {\n float secret_number = 22.0 / 7;\n }\n}\n\nvoid showNumber()\n{\n namespace_name::hello_world();\n cout << namespace_name::number << endl;\n cout << namespace_name::namespace_innner::secret_number << endl;\n}\n\n// 泛型\ntemplate <typename T, typename U>\nT addAndBecomeTheFirstType(T const a, U const b)\n{\n return (T)(a + b);\n}\n\nint number = 222;\n\nint _main()\n{\n // Box box; // 拷贝初始化，调用拷贝构造函数\n Box box(23.4); // 直接初始化，调用构造函数\n Box::sayHello();\n box.setData(10.0);\n cout << box << endl; // 10\n // console_log(box);\n cout << "data in the box " << box.getData() << endl; // 10\n cout << "data in the newBox " << (3 * box).getData() << endl; // 30\n showNumber();\n cout << "1 + 1.1 = " << addAndBecomeTheFirstType(1, 1.1) << endl;\n cout << "1.1 + 1 = " << addAndBecomeTheFirstType(1.1, 1) << endl;\n cout << ::number << endl; // 访问全局变量\n return 0;\n}\nutils: Ramda, Lodash/fp
简单实现
curried(x, y, z) = curried(x, y)(z) = curried(x)(y, z) = curried(x)(y)(z)
\nfunction curry(func) {\n return function curried(...args) {\n if (args.length >= func.length) {\n return func.apply(this, args);\n } else {\n return function (...args2) {\n return curried.apply(this, args.concat(args2));\n };\n }\n };\n}\n\n// Functor f => (a → b) → f a → f b\nconst map = curry((f, ary) => ary.map(f));\ncompose(f, compose(g, h)) = compose(compose(f, g), h) = compose(f, g, h)const compose = (...args) => params => args.reduceRight((pre, next) => next(pre), params);
R.compose(Math.abs, R.add(1), R.multiply(2))(-4); // |(-4) * 2 + 1| = 7\nconst pipe = (...args) => params => args.reduce((pre, next) => next(pre), params);
R.pipe(Math.pow, R.negate, R.inc)(3, 4); // -(3^4) + 1 = -80\nconst id = (x) => x;\nfunctor 是实现了 map 函数并遵守一些特定规则的容器类型。
\nclass Functor {\n constructor(val) {\n this.val = val;\n }\n // pointed functor 是实现了 of 方法的 functor\n of(val) {\n return new this.constructor(val);\n }\n map(f) {\n return this.of(f(this.val));\n }\n}\nMaybe 函子的 map 方法会自行做空值检查，空值则不调用 f 函数
\nclass Maybe extends Functor {\n isNothing() {\n return this.val === null || this.val === undefined;\n }\n map(f) {\n return this.isNothing() ? this.of(null) : this.of(f(this.val));\n }\n}\n\n// maybe :: b -> (a -> b) -> Maybe a -> b\nconst maybe = curry((x, f, m) => (m.isNothing() ? x : f(m.val)));\nEither 函子的 map 方法先右值再左值
\nclass Either extends Functor {\n constructor(left, right) {\n this.left = left;\n this.right = right;\n }\n\n map(f) {\n return this.right ? Either.of(this.left, f(this.right)) : Either.of(f(this.left), this.right);\n }\n}\n\nEither.of = function (left, right) {\n return new Either(left, right);\n};\n\nclass Left {\n constructor(val) {\n this.val = val;\n }\n map(f) {\n return this;\n }\n}\nclass Right {\n constructor(val) {\n this.val = val;\n }\n map(f) {\n return new Right(f(this.val));\n }\n}\n// either :: (a -> c) -> (b -> c) -> Either a b -> c\nconst either = curry((f, g, e) => {\n switch (e.constructor) {\n case Left:\n return f(e.__value);\n case Right:\n return g(e.__value);\n }\n});\n一个 functor，只要它定义个了一个 join 方法和一个 of 方法，并遵守一些定律，那么它就是一个 monad
\nclass Monad extends Maybe {\n join() {\n return this.isNothing() ? this.of(null) : this.val;\n }\n map(f) {\n return this.of(f(this.val)).join();\n }\n // of\n}\nclass IO extends Monad {}\nclass Ap extends Functor {\n ap(F) {\n return this.of(this.val(F.val));\n }\n}\ninterface Array<T> {\n // ... ...\n\n /**\n * 为数组中的所有元素（升序）调用给定回调函数。回调函数的返回值是累计的（accumulated）结果，这个累计值（callbackfn 回调函数的返回值）也会被入下一次回调作为该函数的第一个参数（previousValue）\n * @param callbackfn 一个接受最多四个参数的函数。reduce 方法对数组中的每一个元素都调用一次 callbackfn 函数\n * @param initialValue 如果指定了初始值（initialValue），那么这个初始值就会被用作累计值（accumulation）的初始值。对 callbackfn 函数的首次调用会提供这个值作为其第一个参数（previousValue）而不是数组第一个元素的值（如果没有提供初始值，则使用数组中的第一个元素作为初始值，并且 callbackfn 会跳过对数组的第一个元素的调用）\n */\n reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue?: T): T;\n /**\n * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.\n * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.\n * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.\n */\n reduce<U>(\n callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U,\n initialValue: U,\n ): U;\n\n /**\n * 为数组中的所有元素（降序）调用给定回调函数。回调函数的返回值是累计的（accumulated）结果，这个累计值（callbackfn 回调函数的返回值）也会被入下一次回调作为该函数的第一个参数（previousValue）\n * @param callbackfn 一个接受最多四个参数的函数。reduce 方法对数组中的每一个元素都调用一次 callbackfn 函数\n * @param initialValue 如果指定了初始值（initialValue），那么这个初始值就会被用作累计值（accumulation）的初始值。对 callbackfn 函数的首次调用会提供这个值作为其第一个参数（previousValue）而不是数组第一个元素的值（如果没有提供初始值，则使用数组中的第一个元素作为初始值，并且 callbackfn 会跳过对数组的第一个元素的调用）\n */\n reduceRight(\n callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T,\n initialValue?: T,\n ): T;\n /**\n * Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.\n * @param callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array.\n * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.\n */\n reduceRight<U>(\n callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U,\n initialValue: U,\n ): U;\n\n [n: number]: T;\n}\n提供初始值（initialValue）通常更安全，因为如果没有给定初始值，初始值就默认为数组的第一个元素。我们在回调函数中对这个首元素提供的 previousValue 进行不恰当操作可能导致报错
提供初始值回调函数就会对数组中的每一个元素进行调用，而且通常我们也想这么做
[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {\n console.log([currentIndex, currentValue, accumulator]); // 这里没有指定初始值，从下标为1的元素开始调用 => [1, 1, 0] [2, 2, 1] [3, 3, 3] [4, 4, 6]\n return accumulator + currentValue;\n}); // => 10\n\n[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {\n console.log([currentIndex, currentValue, accumulator]); // 指定初始值，对每个元素都进行调用 => [0, 0, 10] [1, 1, 10] [2, 2, 11] [3, 3, 13] [4, 4, 16]\n return accumulator + currentValue;\n}, 10); // => 20\nconst sum = (...arr) => arr.reduce((acc, cur) => acc + cur, 0);\nsum(1, 2, 3, 4); // => 10\nconst flatArray = (arr) => arr.reduce((a, b) => a.concat(b), []);\nflatArray([\n [0, 1],\n [2, 3],\n [4, 5],\n]); // => [0, 1, 2, 3, 4, 5]\nconst countNames = (names) =>\n names.reduce((allNames, name) => {\n name in allNames ? allNames[name]++ : (allNames[name] = 1);\n return allNames;\n }, {});\ncountNames(["Alice", "Bob", "Tiff", "Bruce", "Alice"]); // => {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}\nconst groupBy = (objectArray, property) =>\n objectArray.reduce((acc, obj) => {\n let key = obj[property];\n if (!acc[key]) acc[key] = [];\n acc[key].push(obj);\n return acc;\n }, {});\n\nlet people = [\n { name: "Alice", age: 21 },\n { name: "Max", age: 20 },\n { name: "Jane", age: 20 },\n];\ngroupBy(people, "age");\n// {\n// 20: [\n// { name: 'Max', age: 20 },\n// { name: 'Jane', age: 20 }\n// ],\n// 21: [{ name: 'Alice', age: 21 }]\n// }\nconst deduplication1 = (arr) =>\n arr.reduce((acc, cur) => {\n acc.indexOf(cur) === -1 && acc.push(cur);\n return acc;\n }, []);\ndeduplication1(["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]); // => ['a', 'b', 'c', 'e', 'd']\n\nconst deduplication2 = (arr) =>\n arr.sort().reduce((init, current) => {\n (init.length === 0 || init[init.length - 1] !== current) && init.push(current);\n return init;\n }, []);\ndeduplication2([1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]); // => [1, 2, 3, 4, 5]\nhttps://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
\n","tags":["js"]},{"id":"js-debounce-throttle","url":"https://yieldray.fun/posts/js-debounce-throttle","title":"js节流与防抖","date_published":"2022-03-03T22:41:29.000Z","date_modified":"2022-03-03T22:41:29.000Z","content_text":"节流和防抖都是用于限制函数在一小段时间内执行次数的机制。
\n以浏览器环境为例：DOM 事件的生成当然是无法控制的，而且可能频繁触发。如果一个事件处理函数高频触发，即使这个函数并不做太多工作，
并且如果是在主线程（UI 线程，而非 Workers 线程）执行任务，还是会有性能问题。
为防止 UI 卡顿，很容易想到通过 requestAnimationFrame 函数调度。
对于需要变更 DOM 的任务，这能够避免任务的不必要执行。缺点就是无法预测调度时间，比如如果是在后台标签页中就不会被调度。
后端（Node.js）往往是服务于多个用户的，而我们这里提到的节流和防抖是针对单个用户的（即浏览器）。
因此，节流和防抖只需要利用定时器并且在常量空间内存中记录状态即可。
下以 lodash 的接口为例，说明 debounce 和 throttle 函数。
\n从逻辑的角度来看，debounce 将多个连续的（两两之间不超过指定时间间隔）任务分组。
对于每个任务组，仅实际执行其中的一个任务，并可指定执行的是第一个还是最后一个。
我们暂且忽略 lodash 的使用细节。从实现者的角度来看，我们实际上只需检测连续的两个任务之间的时间间隔，就可完成分组。
即，我们等待指定的时间间隔，若在时间间隔之内被调用，则属于已有的任务组；否则，属于新增的任务组，并重新循环此步骤。
// 避免在窗口大小变化时进行高耗时的计算\n$(window).on("resize", _.debounce(calculateLayout, 150));\n\n// 在点击时调用 `sendMail`，防抖后续的调用\n$(element).on(\n "click",\n _.debounce(sendMail, 300, {\n leading: true,\n trailing: false,\n }),\n);\n\n// 确保 `batchLog` 在防抖调用1秒后被调用一次\nconst debounced = _.debounce(batchLog, 250, { maxWait: 1000 });\nconst source = new EventSource("/stream");\n$(source).on("message", debounced);\n\n// 取消尾部的防抖调用\n$(window).on("popstate", debounced.cancel);\nlodash 的 debounce 函数功能丰富，因此实现需要更多代码
\n/**\n * 防抖函数，用于限制某个函数的执行频率。\n * @param {Function} func 需要防抖处理的函数。\n * @param {number} [wait=0] 延迟的毫秒数；如果未指定，则使用 `requestAnimationFrame`（如果可用）。\n * @param {Object} [options={}] 配置选项对象。\n * @param {boolean} [options.leading=false] 指定是否在延迟开始前调用函数。\n * @param {number} [options.maxWait] 函数允许延迟的最大时间。\n * @param {boolean} [options.trailing=true] 指定是否在延迟结束后调用函数。\n * @returns {Function} 返回新的防抖函数。\n */\nfunction debounce(func, wait, options) {\n let lastArgs; // 上一次调用的参数\n let lastThis; // 上一次调用的this\n let maxWait; // 最大等待时间\n let result; // 函数执行结果\n let timerId; // 定时器ID\n let lastCallTime; // 上一次调用时间\n let lastInvokeTime = 0; // 上一次执行函数时间\n let leading = false; // 是否在延迟开始前调用\n let maxing = false; // 是否启用最大等待时间\n let trailing = true; // 是否在延迟结束后调用\n\n // 如果 `wait` 为0且 `requestAnimationFrame` 可用，则使用 `requestAnimationFrame` 。\n const useRAF = !wait && wait !== 0 && typeof requestAnimationFrame === "function";\n\n if (typeof func !== "function") throw new TypeError("Expected a function");\n\n wait = +wait || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = "maxWait" in options;\n maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait;\n trailing = "trailing" in options ? !!options.trailing : trailing;\n }\n\n // 执行函数并记录执行时间\n function invokeFunc(time) {\n const args = lastArgs;\n const thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n // 启动定时器\n function startTimer(pendingFunc, milliseconds) {\n if (useRAF) {\n cancelAnimationFrame(timerId);\n return requestAnimationFrame(pendingFunc);\n }\n\n return setTimeout(pendingFunc, milliseconds);\n }\n\n // 取消定时器\n function cancelTimer(id) {\n if (useRAF) {\n cancelAnimationFrame(id);\n return;\n }\n clearTimeout(id);\n }\n\n // 处理前沿调用\n function leadingEdge(time) {\n lastInvokeTime = time;\n timerId = startTimer(timerExpired, wait);\n return leading ? invokeFunc(time) : result;\n }\n\n // 计算剩余等待时间\n function remainingWait(time) {\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTime;\n const timeWaiting = wait - timeSinceLastCall;\n\n return maxing ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;\n }\n\n // 判断是否应该调用函数\n function shouldInvoke(time) {\n const timeSinceLastCall = time - lastCallTime;\n const timeSinceLastInvoke = time - lastInvokeTime;\n\n return (\n lastCallTime === undefined ||\n timeSinceLastCall >= wait ||\n timeSinceLastCall < 0 ||\n (maxing && timeSinceLastInvoke >= maxWait)\n );\n }\n\n // 定时器到期后调用的函数\n function timerExpired() {\n const time = Date.now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n timerId = startTimer(timerExpired, remainingWait(time));\n return undefined;\n }\n\n // 处理后沿调用\n function trailingEdge(time) {\n timerId = undefined;\n\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n // 取消防抖\n function cancel() {\n if (timerId !== undefined) {\n cancelTimer(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n // 立即执行防抖函数\n function flush() {\n return timerId === undefined ? result : trailingEdge(Date.now());\n }\n\n // 检查防抖函数是否在等待调用\n function pending() {\n return timerId !== undefined;\n }\n\n // 防抖函数的主体\n function debounced(...args) {\n const time = Date.now();\n const isInvoking = shouldInvoke(time);\n\n lastArgs = args;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n timerId = startTimer(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = startTimer(timerExpired, wait);\n }\n return result;\n }\n\n // 添加取消、防抖、和挂起的方法\n debounced.cancel = cancel;\n debounced.flush = flush;\n debounced.pending = pending;\n\n return debounced;\n}\n从逻辑的角度来看，一旦发生连续的任务，throttle 就将这段时间按时间间隔划分，每个时间间隔仅真正执行一个任务。
\n// 避免在滚动时过于频繁地更新位置\n$(window).on("scroll", _.throttle(updatePosition, 100));\n\n$(document).on("scroll", _.throttle(infiniteScrolling, 300));\n\nfunction infiniteScrolling() {\n const pixelsFromWindowBottomToPageBottom = $(document).height() - $(window).scrollTop() - $(window).height();\n if (pixelsFromWindowBottomToPageBottom < 200) {\n $("body").append("<p>maybe new ajax content</p>");\n }\n}\n\n// 在点击事件触发时调用 renewToken，但每五分钟最多调用一次\nconst throttled = _.throttle(renewToken, 300000, { trailing: false });\n$(element).on("click", throttled);\n\n// 取消尾部的节流调用\n$(window).on("popstate", throttled.cancel);\nlodash 的 debounce 函数允许提供 maxWait 参数，这样 throttle 的实现就很简单了。
throttle 只不过是 wait 与 maxWait 相同的特化版 debounce
/**\n * 节流函数，用于限制某个函数的执行频率。\n * @param {Function} func 需要节流处理的函数。\n * @param {number} [wait=0] 每次调用之间的最小间隔时间（毫秒）；如果未指定，则使用 `requestAnimationFrame`（如果可用）。\n * @param {Object} [options={}] 配置选项对象。\n * @param {boolean} [options.leading=true] 指定是否在延迟开始前调用函数。\n * @param {boolean} [options.trailing=true] 指定是否在延迟结束后调用函数。\n * @returns {Function} 返回新的节流函数。\n */\nfunction throttle(func, wait, options) {\n let leading = true;\n let trailing = true;\n\n if (typeof func !== "function") throw new TypeError("Expected a function");\n\n if (isObject(options)) {\n leading = "leading" in options ? !!options.leading : leading;\n trailing = "trailing" in options ? !!options.trailing : trailing;\n }\n\n // 使用 debounce 实现节流功能\n return debounce(func, wait, {\n leading,\n trailing,\n maxWait: wait, // 将 maxWait 设置为 wait，实现节流效果\n });\n}\n参考实现：
\nhttps://github.com/denoland/std/blob/main/async/debounce.ts
\n推荐阅读：
\nDebounce vs Throttle: Definitive Visual Guide
Debouncing and Throttling Explained Through Examples
events 文档：http://nodejs.cn/api/events.html
stream 文档：http://nodejs.cn/api/stream.html
注册的监听器会按照注册顺序同步调用，监听器返回的任何值都将被忽略和丢弃。
\nconst EventEmitter = require("events");\n\nclass MyEmitter extends EventEmitter {}\n\nconst myEmitter = new MyEmitter();\nmyEmitter.on("eventName", (a, b) => {\n console.log("an event occurred!");\n});\nmyEmitter.once("disposable", () => console.log("只会触发一次"));\nmyEmitter.on("eventName", function (a, b) {\n // this 被绑定到当前 EventEmitter 实例\n console.assert(this === myEmitter);\n});\nmyEmitter.addListener(eventName, listener); // 浏览器类似的API也是提供的，作为on的别名\nmyEmitter.emit("eventName", "arg1", ["arg2"]); // 多参可选\n当触发 error 事件时，若没有为 error 事件注册监听器，则该错误将同步抛出，因此将导致当前 Node.js 进程退出。
\nmyEmitter.emit("error", new Error("whoops!"));\n\n// 这样不会退出进程了\nmyEmitter.on("error", (err) => {\n console.error("whoops! there was an error");\n});\n\n// errorMonitor 为 Symbol 键事件，该事件也会在错误时出发，但错误本身不会被消费\nconst { errorMonitor } = require("node:events");\nmyEmitter.on(errorMonitor, (err) => {\n captureButNotConsume(err);\n});\n默认情况下，异步函数错误不会被捕获，毕竟监听器是同步调用的。因此异步函数错误将触发未处理的拒绝，若全局未监听此拒绝，同样导致进程退出。
\nconst { EventEmitter } = require("events");\n\nconst emitter = new EventEmitter();\n\nemitter.on("event", async () => {\n return Promise.reject("REJECTED");\n});\n\nemitter.on("error", console.error);\nemitter.emit("event");\n\n// 这样不会退出进程了\nprocess.on("unhandledRejection", (reason, promise) => {\n console.error("Unhandled Rejection at:", promise, "reason:", reason);\n});\n将 captureRejections 配置为 true，则将自动为返回的 Promise 注册 catch 来捕获拒绝。既然拒绝已被处理，自然就不会抛出未处理的拒绝事件。
此时，拒绝被将路由到 Symbol.for("nodejs.rejection") 方法（如有）或 error 事件。
const { EventEmitter, captureRejectionSymbol } = require("events");\nconst emitter = new EventEmitter({ captureRejections: true });\n\nemitter[captureRejectionSymbol] = (err) => console.log(captureRejectionSymbol, err);\nemitter.on("error", (err) => console.log("error", err));\n\nemitter.on("event", async () => Promise.reject("REJECTED"));\nemitter.emit("event");\nerror 事件监听器若为异步函数，则可能导致错误无限递归。因此建议 error 事件监听器同步。
以下方法在设置所有新 EventEmitter 实例默认捕获拒绝：
const events = require("node:events");\nevents.captureRejections = true;\n注意：process.nextTick 微任务运行在 v8 微任务之前。
const { EventEmitter, once } = require("node:events");\n\nconst myEE = new EventEmitter();\n\nasync function foo() {\n await once(myEE, "bar");\n console.log("bar");\n // 控制流到达此处，foo 事件已经同步触发了\n\n // 因此下面的 Promise 永远不会 resolve\n await once(myEE, "foo");\n console.log("foo");\n}\n\nprocess.nextTick(() => {\n myEE.emit("bar");\n myEE.emit("foo");\n});\n\nfoo().then(() => console.log("done"));\n兼容 WHATWG 规范，错误处理 与 EventEmitter 机制不同。
\nEventTarget 不会特殊处理 error 事件。
\nprocess.nextTick(() => console.log("nextTick1"));\n\nconst target = new EventTarget();\ntarget.addEventListener("error", () => {\n throw new Error("ERROR");\n return Promise.reject("REJECT");\n});\ntarget.dispatchEvent(new Event("error"));\n\nprocess.nextTick(() => console.log("nextTick2")); // 不会触发\n无论是抛出错误还是返回拒绝的 Promise，该错误都将被 process.nextTick 抛出。
\n$ node main.ts\n\nnextTick1\nnode:internal/event_target:1101\n process.nextTick(() => { throw err; });\n由于在 abort 事件上可调用 e.stopImmediatePropagation() 阻止冒泡，因此原本注册的 abort 事件可能不被触发，导致可能的资源泄漏。
node.js 提供 addAbortListener 函数来注册 abort 监听器，该监听器不会受阻止传播。
const { addAbortListener } = require("node:events");\n\nfunction example(signal) {\n let disposable;\n try {\n signal.addEventListener("abort", (e) => e.stopImmediatePropagation());\n disposable = addAbortListener(signal, (e) => {\n // Do something when signal is aborted.\n });\n } finally {\n disposable?.[Symbol.dispose]();\n }\n}\n所有 nodejs stream 都继承自 EventEmitter，流又分为：Readable Writeable Duplex Transform
\n自动化处理流：readableSrc.pipe(writeableDest)
其中，Readable/Duplex 属于 readableSrc，Writeable/Duplex/Transform 属于 writeableDest
const { Readable, Writable, Transform } = require("stream");\n\nclass MyReadable extends Readable {\n private current = 0;\n\n _read() {\n if (this.current < 3) {\n this.push(`data-${this.current++}`);\n } else {\n this.push(null); // 结束流\n }\n }\n}\n\nclass MyWritable extends Writable {\n _write(chunk: any, encoding: string, callback: (error?: Error | null) => void) {\n console.log(chunk.toString());\n callback();\n }\n}\n\nclass MyTransform extends Transform {\n _transform(chunk: any, encoding: string, callback: (error?: Error | null, data?: any) => void) {\n this.push(chunk.toString().toUpperCase());\n callback();\n }\n}\n// 直接传入方法选项\nconst readable = new Readable({\n read() {\n this.push("some data");\n this.push(null);\n },\n});\n\nconst writable = new Writable({\n write(chunk: any, encoding: string, callback: (error?: Error | null) => void) {\n console.log(chunk.toString());\n callback();\n },\n});\n\nconst transform = new Transform({\n transform(chunk: any, encoding: string, callback: (error?: Error | null, data?: any) => void) {\n callback(null, chunk.toString().toUpperCase());\n },\n});\nNode.js 提供多种消费流数据的方式，选择一种并坚持使用，混用会导致意外行为。
\n// 添加 'data' 监听器自动切换到流动模式\nreadable.on("data", (chunk) => {\n console.log("收到数据:", chunk);\n});\n\nreadable.on("end", () => {\n console.log("流结束");\n});\n// 'readable' 事件驱动，手动读取\nreadable.on("readable", () => {\n let chunk;\n while (null !== (chunk = readable.read())) {\n console.log("读取数据:", chunk);\n }\n});\n\nreadable.on("end", () => {\n console.log("流结束");\n});\n// 最简单的数据传输方式\nreadable.pipe(writable);\n\n// 链式管道\nreadable.pipe(transform).pipe(writable);\n\n// 使用 pipeline 处理错误\nimport { pipeline } from "stream/promises";\n\nasync function pipelineExample() {\n try {\n await pipeline(readable, transform, writable);\n console.log("管道完成");\n } catch (error) {\n console.error("管道错误:", error);\n }\n}\nasync function consume(readable: NodeJS.ReadableStream) {\n try {\n for await (const chunk of readable) {\n console.log("处理数据:", chunk);\n }\n } catch (error) {\n console.error("流错误:", error);\n }\n}\n// ❌ 错误：混用不同 API 风格\nreadable.on("data", handleData);\nreadable.on("readable", handleReadable); // 会相互干扰\n\n// ✅ 正确：选择一种风格\nreadable.on("data", handleData);\nreadable.on("end", handleEnd);\nconst { PassThrough } = require("stream");\n\n// readable.readableFlowing 的三种状态：\n// null: 没有提供消费机制，流不会产生数据\n// false: 暂时停止流动，但仍在生成数据（缓冲）\n// true: 主动发出事件，数据流动\n\nconst readable = new PassThrough();\nconsole.log(readable.readableFlowing); // null\n\nreadable.on("data", console.log);\nconsole.log(readable.readableFlowing); // true\n\nreadable.pause();\nconsole.log(readable.readableFlowing); // false\nconst writable = new Writable({\n highWaterMark: 16, // 控制缓冲区大小\n write(chunk: any, encoding: string, callback: (error?: Error | null) => void) {\n callback();\n },\n});\n\n// 检查写入状态\nconst success = writable.write(data);\nif (!success) {\n // 缓冲区满，等待 drain 事件\n writable.once("drain", () => {\n // 可以继续写入\n });\n}\ninterface CustomObject {\n id: number;\n value: string;\n}\n\nconst transform = new Transform({\n objectMode: true,\n transform(obj: CustomObject | null, encoding: string, callback: (error?: Error | null, data?: any) => void) {\n // ⚠️ null 有特殊含义（结束流）\n if (obj === null) {\n return callback();\n }\n callback(null, obj);\n },\n});\n和 EventEmitter 一样，未处理的流错误会导致程序崩溃：
\n// ❌ 危险：未处理错误\nconst stream = fs.createReadStream("non-existent-file.txt");\nstream.on("data", console.log); // 文件不存在时崩溃\n\n// ✅ 正确：始终处理 error 事件\nstream.on("error", (err) => {\n console.error("流错误:", err.message);\n});\n// ⚠️ 危险：重复添加监听器\nsetInterval(() => {\n stream.on("data", handler); // 不断累积监听器\n}, 100);\n\n// ✅ 正确：使用 once 或及时清理\nstream.once("data", handler);\n// 或\nstream.removeListener("data", handler);\n忽略 write() 返回值会导致内存耗尽：
// ❌ 错误：忽略返回值\nfor (let i = 0; i < 1000000; i++) {\n writable.write(`Line ${i}\\n`); // 可能内存耗尽\n}\n\n// ✅ 正确：检查返回值\nfor (let i = 0; i < 1000000; i++) {\n const success = writable.write(`Line ${i}\\n`);\n if (!success) {\n await new Promise((resolve) => writable.once("drain", resolve));\n }\n}\npipe 不会自动传播错误：
// ❌ 错误：pipe 不传播错误\nsrc.pipe(dest);\nsrc.on("error", console.error); // dest 不会自动关闭\n\n// ✅ 正确：使用 pipeline\npipeline(src, dest, (err) => {\n if (err) console.error(err);\n // 自动清理所有流\n});\nclass ResourceStream extends Readable {\n _destroy(err, callback) {\n // ✅ 重要：清理资源\n if (this.resource) {\n this.resource.close();\n }\n callback(err);\n }\n}\n\n// 使用 AbortController\nconst controller = new AbortController();\nconst stream = new Readable({ signal: controller.signal });\ncontroller.abort(); // 自动销毁\nreadableSrc.on("data", (chunk) => {\n writeableDest.write(chunk);\n});\n\nreadableSrc.on("end", (chunk) => {\n writeableDest.end();\n});\nstream/consumers 模块
\nfunction arrayBuffer(stream: WebReadableStream | ReadableStream | AsyncIterable<any>): Promise<ArrayBuffer>;\nfunction blob(stream: WebReadableStream | ReadableStream | AsyncIterable<any>): Promise<NodeBlob>;\nfunction buffer(stream: WebReadableStream | ReadableStream | AsyncIterable<any>): Promise<Buffer>;\nfunction json(stream: WebReadableStream | ReadableStream | AsyncIterable<any>): Promise<unknown>;\nfunction text(stream: WebReadableStream | ReadableStream | AsyncIterable<any>): Promise<string>;\nstream/promises 模块
\nfunction finished(stream: ReadableStream | WritableStream | ReadWriteStream, options?: FinishedOptions): Promise<void>;\n\nfunction pipeline<A extends PipelineSource<any>, B extends PipelineDestination<A, any>>(\n source: A,\n destination: B,\n options?: PipelineOptions,\n): PipelinePromise<B>;\nstream/web 模块
\nhttps://blog.platformatic.dev/a-guide-to-reading-and-writing-nodejs-streams
https://pavel-romanov.com/writable-streams-in-nodejs-a-practical-guide
https://www.sitepoint.com/node-js-streams-with-typescript/
参见
https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://developer.mozilla.org/docs/Web/Progressive_web_apps
https://mp.weixin.qq.com/s/3Ep5pJULvP7WHJvVJNDV-g
注意：下面的代码是没有做错误处理的
\nhttps://developer.mozilla.org/docs/Web/API/WorkerGlobalScope
\nweb worker 是由 JavaScript 创建的新线程
每一个 web worker 都是一个独立 JavaScript 脚本，具有独立的运行环境（不同于 DOM 环境）
// 创建新的web worker\nconst myWorker = new Worker("worker.js", { name: "myWorker" }); // 第二个参数可选\n\n// 向worker发送数据\nworker.postMessage("Hello World");\nworker.postMessage({ method: "echo", args: ["Work"] });\n// 参见 https://developer.mozilla.org/docs/Glossary/Transferable_objects\nworker.postMessage(arrayBuffer, [arrayBuffer]);\n\n// 监听数据，亦可使用 addEventListener 方法\nworker.onmessage = function (event) {\n console.log("Received message " + event.data);\n doSomething();\n};\nfunction doSomething() {\n // 执行任务\n worker.postMessage("Work done!");\n}\n\n// 处理错误\nworker.addEventListener("error", function (event) {\n // ...\n});\n\n// 关闭 worker\nworker.terminate();\nconsole.log(self.name); // => myWorker\n\n// 引入其他脚本，多参可选\nimportScripts("script1.js", "script2.js");\n\nself.addEventListener(\n // self === this\n "message",\n function (e) {\n self.postMessage("You said: " + e.data);\n },\n false,\n);\n\n// 关闭 worker\nself.close();\nService Worker 是 pwa 的重要实现方法，Service Worker 运行在 worker 线程中，必须运行在 https 协议下（或 localhost）\nService Worker 能够代理网页与服务器之间的请求\nService Worker 的 API 都是异步的，通过 Promise 实现，所以为了减少嵌套，请使用 async/await 实现
相关接口 https://developer.mozilla.org/docs/Web/API/Service_Worker_API
<link rel="manifest" href="manifest.webmanifest" />\n<script src="app.js" defer></script>\n<h1>Hello, PWA!</h1>\nif ("serviceWorker" in navigator) {\n navigator.serviceWorker.register("./sw.js"); // => Promise<ServiceWorkerRegistration>\n // 此处省略了 options 参数，详见 https://developer.mozilla.org/docs/Web/API/ServiceWorkerContainer/register\n // 与 Push API 有关的内容则参见 https://developer.mozilla.org/docs/Web/API/Push_API\n}\n\nconst button = document.getElementById("notifications");\nbutton.addEventListener("click", function (e) {\n Notification.requestPermission().then(function (result) {\n if (result === "granted") {\n // testNotification();\n }\n });\n});\n\nfunction testNotification() {\n // Notifications API 参见 https://developer.mozilla.org/docs/Web/API/notification\n // 使用参见 https://developer.mozilla.org/docs/Web/API/Notifications_API/Using_the_Notifications_API\n const options = {\n body: "notifBody",\n icon: "./pwa.png",\n };\n const notif = new Notification("notifTitle", options); // options 可选\n notif.onerror = () => {\n // doSomething();\n };\n}\nconst cacheName = "PWA-v1"; // sw 版本\nconst contentToCache = ["/index.html", "/css/styles.css?v1"]; // 缓存清单\n\n// 安装 Service Worker，添加缓存清单\nself.addEventListener("install", (e) => {\n // caches 在 sw 作用域下，是一个特殊的 CacheStorage\n // CacheStorage API 参见 https://developer.mozilla.org/docs/Web/API/CacheStorage\n const preCache = async () => {\n const cache = await caches.open(cacheName); // => Cache\n // Cache API 参见 https://developer.mozilla.org/docs/Web/API/Cache\n return cache.addAll(contentToCache);\n };\n e.waitUntil(preCache());\n // 参见 https://developer.mozilla.org/docs/Web/API/ExtendableEvent/waitUntil\n});\n\n// 接管请求\nself.addEventListener("fetch", async (e) => {\n const cacheOrRequestThenCache = async () => {\n const req = await caches.match(e.request);\n if (req) {\n return req;\n } else {\n const resp = await fetch(e.request); // => Response\n // Response API 参见 https://developer.mozilla.org/docs/Web/API/Response\n // 通过 Steam API 操纵 Response 可以方便地处理数据，参见 https://developer.mozilla.org/docs/Web/API/Streams_API\n const cache = await caches.open(cacheName);\n cache.put(e.request, resp.clone());\n // 以 Request 为键名，参见 https://developer.mozilla.org/docs/Web/API/Request\n return resp;\n }\n };\n e.respondWith(cacheOrRequestThenCache());\n});\n\n// 清理旧版本缓存\nself.addEventListener("activate", function (e) {\n const deleteCache = async () => {\n const keyList = await caches.keys();\n return Promise.all(\n keyList.map((key) => {\n if (cacheName.indexOf(key) === -1) {\n return caches.delete(key);\n }\n }),\n );\n };\n e.waitUntil(deleteCache());\n});\n\n// 向主线程发送消息\nself.clients.matchAll().then((clients) => {\n clients.forEach((client) => client.postMessage("msg from sw"));\n});\nconst cacheName = "PWA-v2"; // sw版本\nconst contentToCache = ["/index.html", "/css/styles.css?v2"]; // 缓存清单\nself.addEventListener("install", (e) => {\n const preCache = async () => {\n const cache = await caches.open(cacheName);\n return cache.addAll(contentToCache);\n };\n e.waitUntil(preCache());\n});\n// ... ...\n这个时候一个新的 Service Worker 会在后台被安装，而旧的 Service Worker 仍然会正常运行，直到没有任何页面使用到它为止，这时候新的 Service Worker 将会被激活，然后接管所有的页面。
\n参见：https://web.dev/add-manifest/
\n扩展名亦可使用 json
\n{\n "background_color": "purple",\n "description": "This is an example PWA App",\n "display": "fullscreen",\n "icons": [\n {\n "src": "icon/icon.png",\n "sizes": "192x192",\n "type": "image/png"\n }\n ],\n "name": "My PWA App Name",\n "short_name": "My App",\n "start_url": "/index.html"\n}\n有关事件（Chrome）
\nwindow.addEventListener("beforeinstallprompt", (e) => {\n // chromium >= 44\n // e.preventDefault(); 阻止默认显示安装提示\n // e.prompt(); 手动显示安装提示 // chromium >= 45\n console.log(e.platforms); // e.g., ["web", "android", "windows"]\n e.userChoice.then((outcome) => {\n console.log(outcome); // either "installed", "dismissed", etc.\n }, handleError);\n});\n仅使用 manifest 无法使应用离线运行，离线运行实际上还是靠 Service Worker 实现
注意：Chrome 要求应用程序注册一个 Service Worker 才会显示添加到主屏幕提示\nhttps://developer.mozilla.org/docs/Web/Manifest
对于简单的离线应用，可以使用 UpUp 库
https://github.com/TalAter/UpUp
注意：Service Worker 必须从同域加载，所以无法使用 cdn
<script src="upup.min.js"></script>\n<script>\n UpUp.start({\n "content-url": "offline.html", // 离线时显示offline.html\n assets: ["/img/logo.png", "/css/style.css", "headlines.json"],\n });\n</script>\nhttps://github.com/vercel/ncc
这个工具可以把 node.js 项目打包成单个 js 文件，打包后还可以顺便用 terser/uglify-js 之类的压缩一下，也可以加上混淆
https://github.com/vercel/pkg
也是来自 vercel 的，直接打包成单个二进制文件，自带运行时
https://github.com/nexe/nexe
打包成二进制文件，貌似不怎么维护了，不支持动态 require![\"release\"](\"https://s2.loli.net/2022/02/07/SjZHncsmIACX6Fk.png\")
https://github.com/pmq20/node-packer
\nhttps://github.com/nodejs/postject
\nhttps://github.com/leafac/caxa
\n","tags":["node.js"]},{"id":"android6-webview","url":"https://yieldray.fun/posts/android6-webview","title":"Android6折腾webview","date_published":"2022-01-18T20:46:38.000Z","date_modified":"2022-01-18T20:46:38.000Z","content_text":"想让旧手机物尽其用，但是它的系统是安卓 6，自带的 webview 是 chromium44，想着给它升级一下，否则没法用了。
然而蛋疼的是这国产 ROM 改了 SystemWebview 的包名，搞得没法直接覆盖安装新版本，遂在此记录一下。
先下载了最新的 webview，它的包名是 com.google.android.webview，系统的是 com.android.webview
在网上搜索发现要改/frameworks/base/core/res/res/values/config.xml文件，然而这手机并没/frameworks这个路径
最后是这么解决的（参考https://www.cnblogs.com/kinglandsoft/p/13261375.html）
用 mt 文件管理器，找到/system/framework/framework-res.apk 这个 apk。点击它，选查看，找到 resources.arsc，点击它，选 Arsc 编辑器，选字符常量池，右上角菜单点击过滤，内容为 com.android.webview（或者直接 webview）。点击搜索结果中的 com.android.webview，改成 com.google.android.webview。保存并一直返回，mt 会自动更新 apk 并自动备份。
顺便记一下安卓 5、6 怎么用 termux，termux 已经不维护安卓 5、6 的源了。
\necho "deb https://termux.com/game-packages-21-bin games stable" > $PREFIX/etc/apt/sources.list.d/game.list\necho "deb https://termux.com/science-packages-21-bin science stable" > $PREFIX/etc/apt/sources.list.d/science.list\n| 字母换行规则：word-break属性 | \n\n |
|---|---|
| 名称 | \nword-break | \n
| 值 | \nnormal | keep-all | break-all | break-word | \n
| 初始值 | \nnormal | \n
| 应用于 | \n文本 | \n
| 继承 | \n是 | \n
word-wrap 是 overflow-wrap 的别名
\n| 溢出换行：overflow-wrap/word-wrap属性 | \n\n |
|---|---|
| 名称 | \noverflow-wrap, word-wrap | \n
| 值 | \nnormal | break-word | anywhere | \n
| 初始值 | \nnormal | \n
| 应用于 | \n文本 | \n
| 继承 | \n是 | \n
| text-wrap 简写属性 | \n\n |
|---|---|
| 初始值 | \nwrap | \n
| 应用于 | \n文本和块容器 | \n
| 继承 | \n是 | \n
| 百分比 | \n简写属性的各个属性： text-wrap-mode: 无 text-wrap-style: 无 | \n
| 计算值 | \n简写属性的各个属性： text-wrap-mode: 按指定值 text-wrap-style: 按指定值 | \n
| 动画类型 | \n简写属性的各个属性： text-wrap-mode: 离散 text-wrap-style: 离散 | \n
翻译自https://susam.in/maze/timing-with-curl.html
\n下面的命令可以用来测试 HTTP 请求花费的时间：
\ncurl -L -w "time_namelookup: %{time_namelookup}\ntime_connect: %{time_connect}\ntime_appconnect: %{time_appconnect}\ntime_pretransfer: %{time_pretransfer}\ntime_redirect: %{time_redirect}\ntime_starttransfer: %{time_starttransfer}\ntime_total: %{time_total}\n" https://example.com/\n这里还有一个写成一行的命令，要用的时候直接复制粘贴就可以了：
\ncurl -L -w "time_namelookup: %{time_namelookup}\\ntime_connect: %{time_connect}\\ntime_appconnect: %{time_appconnect}\\ntime_pretransfer: %{time_pretransfer}\\ntime_redirect: %{time_redirect}\\ntime_starttransfer: %{time_starttransfer}\\ntime_total: %{time_total}\\n" https://example.com/\n一般来说，这个命令有如下输出：
\n$ curl -L -w "namelookup: %{time_namelookup}\\nconnect: %{time_connect}\\nappconnect: %{time_appconnect}\\npretransfer: %{time_pretransfer}\\nstarttransfer: %{time_starttransfer}\\ntotal: %{time_total}\\n" https://example.com/\n<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">\n<html>\n...\n</html>\ntime_namelookup: 0.001403\ntime_connect: 0.245464\ntime_appconnect: 0.757656\ntime_pretransfer: 0.757823\ntime_redirect: 0.000000\ntime_starttransfer: 0.982111\ntime_total: 0.982326\n为了简洁，上面的输出中用省略号代替了 HTML 内容
\n下面对每一行的输出进行解释，测试版本为 curl 7.20.0：
\ntime_namelookup: 解析域名所用时，单位为秒
\ntime_connect: 从开始建立 TCP 连接到服务器（或者代理服务器）到完成所用时
\ntime_appconnect: 从开始进行 SSL（或 SSH）等连接（或握手）到完成所用时（添加自 7.19.0）
\ntime_pretransfer: 文件传输即将开始之前的过程所用时间，包括了所有预传输命令和协议选择等
\ntime_redirect: 所有重定向所用时间，包括了域名解析，建立连接，预传输和直到最后的事务处理开始之前的传输用时。time_redirect 表示所有多重重定向花费的时间。（添加自 7.12.3）
\ntime_starttransfer: 在一个字节将于开始传输之前所有操作所用时。包括了 time_pretransfer 当然还有服务器计算结果所花费的时间
\n注意，time_appconnect 和 time_connect 时间相减就可以得出 SSL/TLS 握手花费的时间。对于没有 SSL/TLS 的明文连接，这个数字为零。下面是一个示例输出：
\n$ curl -L -w "time_namelookup: %{time_namelookup}\\ntime_connect: %{time_connect}\\ntime_appconnect: %{time_appconnect}\\ntime_pretransfer: %{time_pretransfer}\\ntime_redirect: %{time_redirect}\\ntime_starttransfer: %{time_starttransfer}\\ntime_total: %{time_total}\\n" http://example.com/\n<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">\n<html>\n...\n</html>\ntime_namelookup: 0.001507\ntime_connect: 0.247032\ntime_appconnect: 0.000000\ntime_pretransfer: 0.247122\ntime_redirect: 0.000000\ntime_starttransfer: 0.512645\ntime_total: 0.512853\n注意到上面两个输出中 time_redirect 都为零。这是因为访问 example.com 时，没有发生重定向。下面的示例演示了发生重定向时的输出：
\n$ curl -L -w "time_namelookup: %{time_namelookup}\\ntime_connect: %{time_connect}\\ntime_appconnect: %{time_appconnect}\\ntime_pretransfer: %{time_pretransfer}\\ntime_redirect: %{time_redirect}\\ntime_starttransfer: %{time_starttransfer}\\ntime_total: %{time_total}\\n" https://susam.in/blog\n<!DOCTYPE HTML>\n<html>\n...\n</html>\ntime_namelookup: 0.001886\ntime_connect: 0.152445\ntime_appconnect: 0.465326\ntime_pretransfer: 0.465413\ntime_redirect: 0.614289\ntime_starttransfer: 0.763997\ntime_total: 0.765413\n这个命令的结果有助于发现可能导致延迟的因素，所以当在 web 服务中遇到某些的延迟问题时，往往可以用这个命令来测试。
\n","tags":[]},{"id":"clang-test-code-pieces","url":"https://yieldray.fun/posts/clang-test-code-pieces","title":"C语言测试代码","date_published":"2021-12-07T14:43:01.000Z","date_modified":"2021-12-07T14:43:01.000Z","content_text":"int GCD(int a, int b)\n{\n if (b)\n while ((a %= b) && (b %= a))\n ;\n return a + b;\n}\n// 遍历整数的每一位\nint count = 0;\nwhile (cal > 0)\n{\n int last = cal % 10;\n count++;\n cal /= 10;\n}\n// 非实用\n// 不占用额外空间交换整数\nvoid swap(int *a, int *b)\n{\n *a = *a ^ *b;\n *b = *a ^ *b;\n *a = *a ^ *b;\n}\nchar *strcpy(char *dest, const char *source)\n{\n char *ptr = dest;\n while (*dest++ = *source++)\n ;\n return ptr;\n}\n// 不引入 stdbool\ntypedef enum {false, true} bool;\n// 约瑟夫\nint josephus(int n, int m)\n{\n if (n == 1)\n return 0;\n else\n return (josephus(n - 1, m) + m) % n;\n}\n// 汉诺塔\nvoid move(int id, char from, char to)\n{\n static int cnt = 0;\n printf("step %d: move %d from %c->%c\\n", ++cnt, id, from, to);\n}\nvoid hanoi(int n, char x, char y, char z)\n{\n if (n == 0)\n return;\n hanoi(n - 1, x, z, y);\n move(n, x, z);\n hanoi(n - 1, y, x, z);\n}\n// USAGE\n// int main()\n// {\n// int n;\n// scanf("%d", &n);\n// hanoi(n, 'A', 'B', 'C');\n// }\nJavaScript 中操纵二进制的接口
\nMath.log2(32768); // => 15\n\nnew Int16Array([0o77777]).toString(); // => '32767'\nnew Int16Array([2 ** 15 - 1]).toString(); // => '32767'\n// int16 可以保存2^15位的整数和正负号\nnew Uint16Array([0o777777]).toString(); // => '65535'\nnew Uint16Array([2 ** 16 - 1]).toString(); // => '65535'\nnew Uint16Array([0xffff]).toString(); // => '65535'\n// unsigned int16 即16位无符号整数，可以保存2^16位的正整数\n\nnew Int16Array([23.4]).toString(); // => '23'\n// 小数部分会被截断\nnew Int16Array([2 ** 15]).toString(); // => '-32768'\n// 越界到控制位\nArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。
它是一个字节数组，通常在其他语言中称为“byte array”。
https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer\nhttps://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/DataView
\n构造
\nArrayBuffer: new (byteLength: number) => ArrayBuffer\nDataView: new (buffer: ArrayBuffer | SharedArrayBuffer, byteOffset?: number, byteLength?: number) => DataView\n(method) DataView.set$Type$(byteOffset: number, value: number, littleEndian?: boolean): void\n(method) DataView.get$Type$(byteOffset: number, littleEndian?: boolean): number\n// 其中 $Type$ 替换为实际类型\nArrayBuffer 无法直接读写，要通过 DataView 对象操作（或 TypedArray）
\nconst buffer = new ArrayBuffer(16); // create an ArrayBuffer with a size in bytes\nconst view = new DataView(buffer);\nview.setInt8(1, 127); // (max signed 8-bit integer)\nconsole.log(view.getInt8(1)); // => 127\n![\"dataview.png\"](\"https://s2.loli.net/2021/12/07/XGgVTWv8NCtZnJL.png\")
Blob: new (blobParts?: BlobPart[], options?: BlobPropertyBag) => Blob\n\ninterface Blob {\n readonly size: number;\n readonly type: string;\n arrayBuffer(): Promise<ArrayBuffer>;\n slice(start?: number, end?: number, contentType?: string): Blob;\n stream(): ReadableStream;\n text(): Promise<string>;\n}\n\n\nconst debug = { hello: "world" };\nconst blob = new Blob([JSON.stringify(debug)], { type: "application/json" }); // => Blob { size: 17, type: "application/json" }\nconsole.log(await blob.text()); // => {"hello":"world"}\nconsole.log(await blob.slice(2).text()); // => hello":"world"}\n\n\nURL: new (url: string | URL, base?: string | URL) => URL\n(method) createObjectURL(obj: Blob | MediaSource): string\nhttps://developer.mozilla.org/docs/Web/API/Blob
\n![\"屏幕截图](\"https://s2.loli.net/2021/12/07/3ZK4Bvlxd587Arc.png\")
\n![\"屏幕截图](\"https://s2.loli.net/2021/12/07/zKYEkhpOvRXTeDU.png\")
// 因为是json格式所以也可以这样读取\nlet text = await new Response(blob).json();\n\n// 注意，数组会进行合并\nconsole.log(await new Response(new Blob(["123", "456"])).text()); // => '123456'\nhttps://developer.mozilla.org/docs/Web/API/URL/createObjectURL
\n// 获取一张图片\n\n// <img id="myImage" />\nfetch("test.png")\n .then((res) => res.blob())\n .then((res) => {\n const objectURL = URL.createObjectURL(res);\n myImage.src = objectURL;\n });\n浏览器原生 ReadableStream 不同于 nodejs 在 node:stream 中提供的 Readable
https://developer.mozilla.org/docs/Web/API/ReadableStream
ReadableStream: new <any>(underlyingSource?: UnderlyingSource<any>, strategy?: QueuingStrategy<any>) => ReadableStream<any>\n\ninterface ReadableStream<R = any> {\n [Symbol.iterator](): IterableIterator<any>;\n entries(): IterableIterator<[number, any]>;\n keys(): IterableIterator<number>;\n values(): IterableIterator<any>;\n}\n\ninterface UnderlyingSource<R = any> {\n cancel?: UnderlyingSourceCancelCallback;\n pull?: UnderlyingSourcePullCallback<R>;\n start?: UnderlyingSourceStartCallback<R>;\n type?: undefined;\n}\n\ninterface QueuingStrategy<T = any> {\n highWaterMark?: number;\n size?: QueuingStrategySize<T>;\n}\n\ninterface ReadableStream<R = any> {\n readonly locked: boolean;\n cancel(reason?: any): Promise<void>;\n getReader(): ReadableStreamDefaultReader<R>;\n pipeThrough<T>(transform: ReadableWritablePair<T, R>, options?: StreamPipeOptions): ReadableStream<T>;\n pipeTo(destination: WritableStream<R>, options?: StreamPipeOptions): Promise<void>;\n tee(): [ReadableStream<R>, ReadableStream<R>];\n}\nBase64 - 维基百科，自由的百科全书 (wikipedia.org)
\nbase64 可以将二进制数据以文本形式呈现
\n首先将任意数据以二进制表示，每六比特分为一组，再向每组之前补上两个零，构成八比特（ASCII 中一个字符占一个字节，即八比特，2^8=256）
\n然后再通过 base64 表转换成 ASCII，即可编码为 base64
\n因此，在 base64（以 ASCII 表示）中，共有 2^6=64 种 ASCII 字符
\n但是额外占用了约 4/3 的空间
\n例如：
\n文本：Man
ASCII（DEC）：77,97,110
BIN：01001101,01100001,01101110
base64 group：010011,010110,000101,101110
base64：TWFu
\n\n注：
\n
binary 二进制
octal 八进制
hexadecimal 十六进制
decimal 十进制
Base64 索引表
\n| 数值 | \n字符 | \n数值 | \n字符 | \n数值 | \n字符 | \n数值 | \n字符 | \n
|---|---|---|---|---|---|---|---|
| 0 | \nA | \n16 | \nQ | \n32 | \ng | \n48 | \nw | \n
| 1 | \nB | \n17 | \nR | \n33 | \nh | \n49 | \nx | \n
| 2 | \nC | \n18 | \nS | \n34 | \ni | \n50 | \ny | \n
| 3 | \nD | \n19 | \nT | \n35 | \nj | \n51 | \nz | \n
| 5 | \nF | \n21 | \nV | \n37 | \nl | \n53 | \n1 | \n
| 6 | \nG | \n22 | \nW | \n38 | \nm | \n54 | \n2 | \n
| 8 | \nI | \n24 | \nY | \n40 | \no | \n56 | \n4 | \n
| 9 | \nJ | \n25 | \nZ | \n41 | \np | \n57 | \n5 | \n
| 10 | \nK | \n26 | \na | \n42 | \nq | \n58 | \n6 | \n
| 11 | \nL | \n27 | \nb | \n43 | \nr | \n59 | \n7 | \n
| 12 | \nM | \n28 | \nc | \n44 | \ns | \n60 | \n8 | \n
| 13 | \nN | \n29 | \nd | \n45 | \nt | \n61 | \n9 | \n
| 14 | \nO | \n30 | \ne | \n46 | \nu | \n62 | \n+ | \n
| 15 | \nP | \n31 | \nf | \n47 | \nv | \n63 | \n/ | \n
最后，如果剩余了四比特或者二比特不够六比特的，在其后面填充零以构成六比特，每补充两比特，在生成的 base64 后面补充一个等号（=）
\n例如：\n文本：A (dec:65)\nBIN：01000001
base64 group：010000,010000
base64：QQ==
// binary to ascii\nbtoa(); // encode\nbtoa("A"); // => 'QQ=='\n// ascii to binary\natob(); // decode\natob("QQ=="); // => 'A'\ndata:[<mediatype>][;base64],<data>\nmediatype 默认值 text/plain;charset=US-ASCII
\nBase64 URL 与普通 Base4 的区别
\n移除尾部的 =
\n+ 替换成 -
\n/ 替换成 _
\n如此 base64 编码后的字符串就能在 url 中传递了
\n","tags":["crypto"]},{"id":"clang-null-ptr","url":"https://yieldray.fun/posts/clang-null-ptr","title":"C语言空指针","date_published":"2021-11-12T19:22:29.000Z","date_modified":"2021-11-12T19:22:29.000Z","content_text":"NULL 是一个表示空指针的宏，这个宏在多个头文件中（如 stdio.h）都有定义。如果使用 NULL，代码必须包含带有 NULL 宏的头文件。
\n![\"mingw64](\"https://i.loli.net/2021/11/12/8GiDnslM2aL7FkJ.png\")
\n\n[6.3.2.3-3] If a null pointer constant is converted to a pointer type, the resulting pointer, called a null pointer, is guaranteed to compare unequal to a pointer to any object or function.
\n
\n\n[6.3.2.3-Footnote] The macro NULL is defined in <stddef.h> (and other headers) as a null pointer constant
\n
NULL 是一个指针，指向一个随机的地址。有时指向的地址 0，
地址 0 是一些系统的保留地址，无法访问。
NULL 在 C 标准库的头文件 stddef.h 中定义如下
\n#define NULL ((void *)0)\n访问 NULL 就会报 Segmentation fault
\n#include <stdio.h>\nint main()\n{\n printf(NULL); // => Segmentation fault\n}\nC 语言中，字符串（或者说数组）的类型是指针
因此，需要注意区分空字符串和空指针
例如：getenv() 函数在环境变量不存在时返回 NULL 而不是空字符串
if(getenv("OS") == NULL) {\n printf("env 'OS' do not exist");\n}\n参见https://zh.cppreference.com/w/c/memory
\n内存分配相关函数定义在 stdlib.h 中
void* malloc( size_t size );分配 size 字节的未初始化内存。
若分配成功，则返回为任何拥有基础对齐的对象类型对齐的指针。
\n若 size 为零，则 malloc 的行为是实现定义的。例如可返回空指针。亦可返回非空指针；但不应当解引用这种指针，而且应将它传递给 free 以避免内存泄漏。
为获取返回值，在 malloc() 函数前进行强制类型转换
#include <stdio.h>\n#include <stdlib.h>\nint main()\n{\n int *arr = (int *)malloc(3 * sizeof(int));\n arr[0] = 1;\n arr[1] = 2;\n arr[2] = 3;\n for (int i = 0; i < 3; i++)\n {\n printf("%d ", arr[i]);\n }\n}\n动态创建数组，实际上分配了 3 * sizeof(int)的空间给 arr，arr 被定义为指向这块内存首个元素的指针（因为已经进行了强制转换）void 类型时返回内存块首字节的地址
于是可以通过数组语法访问这块内存
malloc() 分配的空间是未初始化的，这意味着使用时需要手动初始化
void* calloc( size_t num, size_t size );为 num 个对象的数组分配内存，并初始化所有分配存储中的字节为零。
若分配成功，会返回指向分配内存块最低位（首位）字节的指针，它为任何类型适当地对齐。
\n若 size 为零，则行为是实现定义的（可返回空指针，或返回不可用于访问存储的非空指针）。
注意：\n因为对齐需求的缘故，分配的字节数不必等于 num * size 。\n初始化所有位为零不保证浮点数或指针被各种初始化为 0.0 或空指针（尽管这在所有常见平台上为真）。
void* realloc( void *ptr, size_t new_size );重新分配给定的内存区域。它必须是之前为 malloc() 、 calloc() 或 realloc() 所分配，并且仍未被 free() 或 realloc() 的调用所释放。否则，结果未定义。
重新分配按以下二者之一执行：
\na) 可能的话，扩张或收缩 ptr 所指向的已存在内存。内容在新旧大小中的较小者范围内保持不变。若扩张范围，则数组新增部分的内容是未定义的。
b) 分配一个大小为 new_size 字节的新内存块，并复制大小等于新旧大小中较小者的内存区域，然后释放旧内存块。
若无足够内存，则不释放旧内存块，并返回空指针。
若 ptr 是 NULL ，则行为与调用 malloc(new_size) 相同。
若 new_size 为零，则行为是实现定义的（可返回空指针，此情况下可能或可能不释放旧内存，或返回不会用于访问存储的非空指针）。
void free( void* ptr );解分配之前由 malloc() 、 calloc() 、 aligned_alloc() (C11 起) 或 realloc() 分配的空间。
若 ptr 为空指针，则函数不进行操作。
若 ptr 的值不等于之前从 malloc() 、 calloc() 、 realloc() 或 aligned_alloc() (C11 起) 返回的值，则行为未定义。
若 ptr 所指代的内存区域已经被解分配，则行为未定义，即是说已经以 ptr 为参数调用 free() 或 realloc() ，而且没有后继的 malloc() 、 calloc() 或 realloc() 调用以 ptr 为结果。
若在 free() 返回后通过指针 ptr 访问内存，则行为未定义（除非另一个分配函数恰好返回等于 ptr 的值）。
#include <string.h>字符数组操作相关函数定义于在 string.h
mem 系列函数
void* memchr( const void* ptr, int ch, size_t count );在 ptr 所指向对象的首 count 个字符（每个都转译成 unsigned char ）中寻找 ch （在如同以 (unsigned char)ch 转换到 unsigned char 后）的首次出现。
若访问出现于被搜索的数组结尾后，则行为未定义。若 ptr 为空指针则行为未定义
\n注：该函数返回指向找到的字符位置的指针（也就是说输出该指针如同输出找到的字符及其之后的字符（直到'\\0'）），或若找不到该字符则为空指针。
int memcmp( const void* lhs, const void* rhs, size_t count );比较 lhs 和 rhs 所指向对象的首 count 个字节。比较按字典序进行。
结果的符号是在被比较对象中相异的首对字节的值（都转译成 unsigned char ）的差。
若在 lhs 和 rhs 所指向的任一对象结尾后出现访问，则行为未定义。若 lhs 或 rhs 为空指针则行为未定义。
注：可以看作 lhs - rhs
void *memset( void *dest, int ch, size_t count );errno_t memset_s( void *dest, rsize_t destsz, int ch, rsize_t count ); (C11 起)复制值 ch （如同以 (unsigned char)ch 转换到 unsigned char 后）到 dest 所指向对象的首 count 个字节。
若出现 dest 数组结尾后的访问则行为未定义。若 dest 为空指针则行为未定义。
void* memcpy( void *dest, const void *src, size_t count ); (C99 前)void* memcpy( void *restrict dest, const void *restrict src, size_t count ); (C99 起)errno_t memcpy_s( void *restrict dest, rsize_t destsz, const void *restrict src, rsize_t count ); (C11 起)从 src 所指向的对象复制 count 个字符到 dest 所指向的对象。两个对象都被转译成 unsigned char 的数组。
若访问发生在 dest 数组结尾后则行为未定义。若对象重叠（这违背 restrict 契约） (C99 起)，则行为未定义。若 dest 或 src 为非法或空指针则行为未定义。
void* memmove( void* dest, const void* src, size_t count );errno_t memmove_s(void *dest, rsize_t destsz, const void *src, rsize_t count); (C11 起)从 src 所指向的对象复制 count 个字节到 dest 所指向的对象。两个对象都被转译成 unsigned char 的数组。对象可以重叠：如同复制字符到临时数组，再从该数组到 dest 一般发生复制。
若出现 dest 数组末尾后的访问则行为未定义。若 dest 或 src 为非法或空指针则行为未定义。
void _memccpy(void _ restrict dest, const void * restrict src, int c, size_t count); (C23 起)从 src 所指向的对象复制字符到 dest 所指向的对象，在满足接下来的任何两个条件之一后停止：
count 个字符(unsigned char)c 。转译 src 与 dest 对象为 unsigned char 的数组。
若符合任何以下条件则行为未定义：
dest 数组结尾的访问restrict 契约）dest 或 src 为非法或空指针值参见 https://zh.cppreference.com/w/c/variadic
另见
要使用可变参数，引入 stdarg.h
\nva_list 一个数据类型（指针），声明可变参数指针 ，实际上是 typedef struct __va_list_tag va_list[1]
void va_start( va_list ap, parmN ); 宏函数，初始化可变参数，以首个可变参数前一个参数定位（parmN 为首个可变参数前的参数名）
T va_arg( va_list ap, T ); 宏函数，返回指定数据类型的指针，每读取一次，指针就指向下一个可变参数
void va_end( va_list ap ); 宏函数，清理 va_list 类型实例
#include <stdio.h>\n#include <stdarg.h>\nvoid printAll(int strAmount, ...)\n{\n va_list ap; // ap = argument pointer\n va_start(ap, strAmount);\n for (int i = 0; i < strAmount; i++)\n {\n char *text = va_arg(ap, char *);\n printf(text);\n }\n va_end(ap);\n}\nint main()\n{\n printAll(3, "111", "222", "333"); // => 111222333\n}\n\n\n注意！以下内容均在 gcc 10.3.0 下测试，情况可能会与 vc++6.0 不一致
\n可以跳着阅读
\n
指针类型 * 指针名
注意，这里星号可以在位置任意（星号总是写在类型与指针名之间）
甚至无需空格，如以下声明等效指针类型* 指针名\n指针类型 *指针名指针类型*指针名
指针的意思是指针变量，指针变量中存储了地址（内存地址）
\n这意味着指针是一个变量（左值），而地址是一个字面量（右值）
或者说地址是一个实际的值，而指针是变量
如00007ff673193000称为地址（字面量），声明int* p;后，p 称为指针变量
声明int* p;，可以发现，p 的类型为 int*，即 int 类型的指针
因为需要知道指针指向的地址中保存的值的类型，所以指针也自然需要类型
类似于3.14f为浮点数，声明float pi;后，pi 称为浮点变量
浮点变量中存储了浮点数，而指针变量中存储的地址
注意，*p不是指针，p才是指针，*p意味着取得指针指向的地址的值
因此，一般指针和地址可以互换，所以我们会说指针指向一个值，或者地址指向一个值，意思都是相同的
\n指针必须声明其指向的存储单元的类型。例如int* p，可以说p的类型是int*，也可以说 *p的类型是 int
通过 &变量 获取变量的地址
通过 *地址 来访问该地址
int a = 1;\nint *ptr;\nptr = &a;\n*ptr = *ptr + 1; // => 2\n上述代码中，声明了指向int类型的指针变量ptr，并将其(指针变量 ptr)赋值为变量 a 的地址
这样，ptr 就保存了 a 的地址，然后，通过*星号访问(访问意味着可以获取和修改)该地址指向的值
通过*ptr 访问某一地址指向的值。在上例中，*ptr + 1 返回 2，然后，通过*ptr = *ptr + 1 将该地址指向的值修改为 2
地址类似于00007ff673193000，表示内存单元的编号，它和一般的数不同
地址与整数值的运算表示地址的移动
\n地址 + 1 表示地址向后移动一位的地址（一位是指地址类型的长度）
假设地址为ads = 00000001，那么ads + 1究竟是多少，并不是说一定是00000002，其实取决于 ads 的类型，因为不同类型的变量所占内存空间也不同。
地址与地址相减，得到地址之间的距离
\n地址之间的比较运算(>,<)，比较的是各自的内存地址哪一个更大，返回值是整数 1（true）或 0（false）
\n数组名是一个常量指针，返回其首元素的地址
\n先声明以下变量
\nint arr[3]; // 为 arr 划分了占用 3 个 int 类型的连续的空间，并可通过 `arr` 访问\narr[0] = 0;\narr[1] = 1;\narr[2] = 2;\n依据以上原则，arr 返回&arr[0]
*arr 指向 arr[0]*(arr + 1) 指向 arr[1]*(arr + 2) 指向 arr[2]
很明显，对于 arr[n]， *(arr + i) 访问 arr[i]
可以这么认为：数组声明int arr[n]实质上开辟了 n 个类型为 int 的空间。
此操作类似于int* arr = malloc(n * sizeof(int))（或int* arr = calloc(n, sizeof(int))），手动划分了 n 个类型为 int 的空间。
然后，arr 是这段空间起始位置的地址，即 arr == &arr[0]，只不过数组声明的变量由系统管理（栈空间，而不是堆）。
根据上文可以发现，arr[i] 实际上就是 *(arr + i)，因为 arr 其实是数组起始位置的地址
声明一个元素全为指针的数组，即得到一个指针数组
\nchar* words[3];\nwords[0] = "Hello";\nwords[1] = "world";\nwords[2] = "clang";\n// or char* words[] = {"Hello", "world", "clang"};\nprintf(words[0]);\nprintf(", ");\nprintf(words[1]);\nprintf("! print by ");\nprintf(words[2]);\n// => Hello, world! print by clang\nint main(int argc, char* argv[])
一般使用 const 修饰 int main(int argc, char const *argv[])
其中 argc 意为 argument count，argv 为 argument vector
#include <stdio.h>\nint main(int argc, char const *argv[])\n{\n for (int i = 0; i < argc; i++)\n printf("argv[%d]=%s\\n", i, argv[i]);\n}\n假设编译后文件名为 code.out 或 code.exe
\ncode.exe hello world hello clang\n或 code.out hello world hello clang\n输出
\nargv[0]=disk:\\path\\to\\file\\code.exe 或 /path/to/file/code.out\nargv[1]=hello\nargv[2]=world\nargv[3]=hello\nargv[4]=clang\n注意 argv[0]是执行文件所在路径，后面的为命令行参数
\nint sum(int arr[], int len);\nint sum(int* arr, int len);\n以上声明是等价的，因为调用数组时都传入数组名，函数内部即获得数组首位置的地址
由于函数内部获取的是数组的地址，在函数内部对数组的改动会影响到传入的数组本身
void swap(int &a, int &b){\n int temp = a;\n a = b;\n b = temp;\n}\n函数定义时使用了&，表示传递引用，传入的参数和函数内得到的参数是一致的，否则则传递值，此时函数内部无法访问外部参数
\n字符串是字符数组
\n声明以下变量 s，s 占用连续 14 个长度为 char 的地址
char s[14] = "Hello, world!";
声明以下变量 p。\n"Hello, world!"为一字符串数组常量，按照约定，其字面量返回其首元素的地址， 即'H'的地址。
根据上文，我们声明了一个指针变量 p，其指向的类型为 char。
char *p = "Hello, world!";
现在，p 是'H'的地址（即 p == &p[0]），通过*p 可访问'H'本身
我们可以做以下验证
\n#include <stdio.h>\nint main()\n{\n char *p = "abc";\n printf("%p %p %p %p %p\\n", p, &p[0], &p[1], &p[2], &p[3]);\n char s[4] = "abc";\n printf("%p %p %p %p %p\\n", s, &s[0], &s[1], &s[2], &s[3]);\n}\n输出
\n00007ff673193000 00007ff673193000 00007ff673193001 00007ff673193002 00007ff673193003\n000000a1f53ff8a4 000000a1f53ff8a4 000000a1f53ff8a5 000000a1f53ff8a6 000000a1f53ff8a7\n证明了 p == &p[0]是正确的
然而对于字符串（字符数组），数组名返回首字符的地址。
使用标准库时，我们通过传入首字符的地址 printf(p) printf(s) 来输出整个字符串
我们可以做以下验证
\n#include <stdio.h>\nint main()\n{\n char *p = "abc";\n puts(&p[0]);\n char s[4] = "abc";\n puts(&s[0]);\n}\n证明了我们实际使用的就是字符数组第一个元素的地址，因为 puts()及某些 io 函数的某些参数其实就是一个指针
实际上函数定义如下int puts(const char *_Str)int printf(const char *__format, ...)
多级指针是指针的指针
\n#include <stdio.h>\nint main()\n{\n int a = 1;\n int **p; //p是地址的地址\n int *address = &a; //address保存了a的地址\n p = &address; //p保存了地址变量address的地址\n printf("%p %p %p %p", address, p, *p, **p);\n printf("\\n%d", **p);\n}\n输出
\n000000fb891ff974 000000fb891ff968 000000fb891ff974 0000024300000001\n1\n通过访问 p，*p 得到一个地址，然后访问这个地址**p，得到这个地址指向的值 1
#include <stdio.h>\nint main()\n{\n // 定义二维数组时，必须指明第二维的长度，第一维的长度可以自动推导\n // 相当于 int arr[2][3]\n // arr 的类型为 int (*)[3]\n int arr[][3] = {\n {1, 2, 3},\n {4, 5, 6},\n };\n // 首尾元素的地址\n printf("%p %p\\n", &arr[0][0], &arr[1][2]);\n // 若不指明第二维的长度，则默认为一维数组第一个元素，即使溢出\n printf("%p %p\\n", &arr[0][0], &arr[0]);\n printf("%p %p\\n", &arr[1][0], &arr[1]);\n printf("%p %p\\n", &arr[2][0], &arr[2]);\n printf("%p %p\\n", &arr[3][0], &arr[3]);\n // 首尾地址距离为 5\n printf("%d\\n", &arr[1][2] - &arr[0][0]);\n}\n输出
\n0000006553fffd00 0000006553fffd14\n0000006553fffd00 0000006553fffd00\n0000006553fffd0c 0000006553fffd0c\n0000006553fffd18 0000006553fffd18\n0000006553fffd24 0000006553fffd24\n5\nsizeof 作用于数组时，返回整个数组的字节大小
\n#include <stdio.h>\nint main()\n{\n int one[3] = {1, 2, 3};\n int two[][3] = {\n {1, 2, 3},\n {4, 5, 6},\n };\n int three[2][2][3] = {\n {\n {1, 2, 3},\n {4, 5, 6},\n },\n {\n {7, 8, 9},\n {10, 11, 12},\n },\n };\n printf("sizeof(int)=%d\\n", sizeof(int));\n printf("%d %d %d\\n", sizeof(one), sizeof(two), sizeof(three));\n printf("%d %d %d\\n", sizeof(one), sizeof(two[0]), sizeof(three[0][0]));\n printf("%d %d %d\\n", sizeof(one[0]), sizeof(two[0][0]), sizeof(three[0][0][0]));\n}\n输出
\nsizeof(int)=4\n12 24 48\n12 12 12\n4 4 4\n多维数组实质是数组的数组。
\n可以通过指针访问二维数组，就像用指针访问一维数组一样。
\n数组作为函数形参时会退化为指针。
\n#include <stdio.h>\nvoid printArray(int arr[][3])\n{ // arr 的类型为 int (*)[3]\n printf("%d %d\\n", arr[1][2], *(*(arr + 1) + 2));\n printf("%p %p\\n", &arr[1][2], *(arr + 1) + 2);\n}\nint main()\n{\n int arr[][3] = {\n {1, 2, 3},\n {4, 5, 6},\n };\n printArray(arr);\n // 因为多维数组本质上还是线性存储，所以表面上看是越界，实际上仍然可以访问\n printf("%d %d\\n", arr[2][0], arr[1][3]);\n printf("%d %d\\n", *(*(arr + 2)), *(*(arr + 1) + 3));\n}\n输出
\n6 6\n00000061fadff6f4 00000061fadff6f4\n16 16\n16 16\n下面两个语句完全等效
声明了 int 常量
const int a = 1;\nint const a = 1;\n下面两个语句也完全等效
声明了指向的值不可变的指针
因为是 const *p 形式，*p 被 const 修饰，所以*p 不可变 (但是p可变)
const int* p = 2;\nint const *p = 2;\n下面声明了地址不可变的指针
因为是 const p 形式，const 修饰 p，所以 p 不可变 (但是*p可变)
int* const p = 2;\n下面声明了地址和指向的值都不可变的指针
\nconst int* const p = 2;\n注意，指针不能指向 const 定义的常量的地址，因为 const 定义的常量类型带有 const，而不是原类型
所以编译不通过
例如：
const int n = 2; // n的类型是const int，而不是int\n使用强制转换时，编译通过， const 定义的常量可以被修改，这是很危险的操作\n这证明了 const 修饰符修饰的变量仅在编译的防止被修改，但无法保证通过对其地址访问进行修改\n此种情况下使用宏定义常量略有优势
\nint *p = (int*) &n;\n*p = 2;\nprintf("%d", p); // => 2\nvoid print(int a) {\n printf("%d\\n", a);\n}\n\nvoid (*print_ptr)(int) = &print;\n注意*的优先级问题，*修饰函数指针
函数名是指向函数代码的指针，通过函数名可以获取函数地址
\n// 因此\nprint == &print == *print == print_ptr == *print_ptr;\nprint(10) == (*print)(10) == (&print)(10) == (*print_ptr)(10) == print_ptr(10)\n以下代码作为验证
\n#include <stdio.h>\nvoid print(int a)\n{\n printf("%d\\n", a);\n}\nint main()\n{\n void (*print_ptr)(int) = &print;\n printf("%p %p %p %p %p", print, &print, *print, print_ptr, *print_ptr);\n}\n输出
\n00007ff7fcf31591 00007ff7fcf31591 00007ff7fcf31591 00007ff7fcf31591 00007ff7fcf31591\n注意，&print_ptr != print_ptr, 因为 print_ptr 是函数指针，而非函数名
https://esm.sh/
https://esm.run/ (by JsDelivr)
https://unpkg.com/ (?module)
https://jspm.org/
https://www.skypack.dev/
https://deno.land/x/
https://nest.land/
https://crux.land/
https://denopkg.com/https://denopkg.dev/
https://deno.toolforge.org/
https://cdn.vfiles.no/
https://ghuc.cc/
https://esbuild.vercel.app/
https://esb.deno.dev/
https://est.deno.dev/
https://bundle.deno.dev
https://esb.denoflare.dev/
https://bundle.denoflare.dev
https://polyfill-fastly.net/ https://polyfill-fastly.io/
ref: https://community.fastly.com/t/new-options-for-polyfill-io-users/2540
https://cdnjs.cloudflare.com/polyfill
ref: https://blog.cloudflare.com/polyfill-io-now-available-on-cdnjs-reduce-your-supply-chain-risk/
see also: https://polykill.io/
\nhttps://gitmirror.com/raw.html
https://raw.githubusercontents.com/
https://upset.dev/fonts
https://fonts.bunny.net/
https://font.im/
https://fonts.xz.style/
https://docs.xz.style/fonts
npm/github/wordpress
Home https://www.jsdelivr.com/
https://cdn.jsdelivr.net/
https://fastly.jsdelivr.net/
https://gcore.jsdelivr.net/
npm
Home https://unpkg.com/\nLegacy https://npmcdn.com/
jsdelivr
Home https://staticdelivr.com/
unpkg proxy
Link https://cdn.cbd.int/
jsdelivr\nHome https://cdn.iocdn.cc/
\nHome https://cdn.onmicrosoft.cn/
\nHome https://github.com/54ayao/Chinajsdelivr
\nrefs: https://github.com/zkeq/Coding/discussions/644#discussioncomment-4571515
\nhttps://registry.npmmirror.com/{pkg}/{version}/files/{path}
\nSee https://zhuanlan.zhihu.com/p/633904268
\nWhiteList https://github.com/cnpm/unpkg-white-list
\nunpkg
Link https://unpkg.zhimg.com/
unpkg
Link https://npm.elemecdn.com/
npm
Link https://code.bdstatic.com/npm/
Link https://www.v2ex.com/t/521411
Home https://cdnjs.com/
\ncdnjs
Home https://www.staticfile.org/ https://www.staticfile.net/
cdnjs,GoogleFontsHome https://cdn.baomitu.com/
cdnjsHome https://cdn.bytedance.com/
cdnjs,GoogleFonts,GoogleAjax,Gravatar
Doc https://u.sb/css-cdn/
https://cdnjs-jp.loli.net/
docs https://mirrors.sustech.edu.cn/help/cdnjs.html
\ncdnjs,GoogleFonts,GoogleAjax,GravatarDoc https://cdn.geekzu.org/cached.html
cdnjsHome https://jshub.com/
cdnjs\nHome https://www.bootcdn.cn/
cdnjs,GoogleFonts,GoogleAjax,Gravatar
https://www.7ed.net/start/public-cdn.html
Doc https://developers.google.com/speed/libraries/
\njQuery
Doc http://www.asp.net/ajax/cdn
ref: https://mirrors.quickso.cn/
\nhttps://developer.aliyun.com/mirror/
\nhttps://mirrors.cloud.tencent.com/
\nhttps://mirrors.huaweicloud.com/
\nhttps://mirrors.tuna.tsinghua.edu.cn/
\nhttps://mirrors.sjtug.sjtu.edu.cn/
\nhttps://mirrors.tongji.edu.cn/
\nhttps://mirrors.ynu.edu.cn/index/
\nhttps://mirrors.nwsuaf.edu.cn/
\nhttp://mirrors.neusoft.edu.cn/
\n","tags":["note","cdn"]},{"id":"github","url":"https://yieldray.fun/posts/github","title":"Github镜像","date_published":"2021-08-28T11:00:00.000Z","date_modified":"2021-08-28T11:00:00.000Z","content_text":"https://github.ink/
https://kkgithub.com/ (help)
https://hub.nuaa.cf/
https://hub.yzuu.cf/
https://mirror.ghproxy.com/
https://ghps.cc/
https://toolwa.com/github/
https://github.zhlh6.cn/
https://gitclone.com/
https://www.gitmirror.com/files.html
https://gh.ddlc.top/
https://gh.api.99988866.xyz/
Source Code: Github 文件加速
https://github.com/dotnetcore/FastGithub
\n","tags":["mirror","github"]},{"id":"google","url":"https://yieldray.fun/posts/google","title":"Google镜像Collection","date_published":"2021-08-28T11:00:00.000Z","date_modified":"2023-10-11T18:00:00.000Z","content_text":"Tips:请安全、合法地使用镜像. 建议不要在镜像站上登录账户，也不要搜索敏感词汇.
\nhttps://github.com/librarycloud/list
\nhttps://github.com/Heroic-Studio/Google-Mirrors
\nhttps://wangchujiang.com/google/
\n\nhttps://c3.glgoo.top/scholar(AD)
\n\n\n\nhttps://github.com/gfw-breaker/nogfw/blob/master/README.md
\n\n","tags":["mirror"]},{"id":"migrate","url":"https://yieldray.fun/posts/migrate","title":"博客迁移","date_published":"2021-08-28T11:00:00.000Z","date_modified":"2021-08-28T11:00:00.000Z","content_text":"从 typecho 迁移到 hexo 了
\n仅做备份 Crazy 白茫茫
\n","tags":["about"]},{"id":"pixiv","url":"https://yieldray.fun/posts/pixiv","title":"Pixiv 相关","date_published":"2021-08-28T11:00:00.000Z","date_modified":"2021-08-28T11:00:00.000Z","content_text":"https://2heng.xin/2017/09/19/pixiv/
\n\n\nWow. Yet another Pixiv client!
\n
https://github.com/Pixeval/Pixeval
\n\n\n\n一款 Pixiv 搜索辅助工具
\n
\n\n\nProvide Pixiv backend proxy & frontend service based on serverless technology
\n
\n\n\nA pinterest-style layout site, shows illusts on pixiv.net order by popularity.
\n
\n\n提供有限的 pixiv 排行查看与免费高级会员(热门排序)搜索的站点
\n
https://pixivic.com/
https://github.com/OysterQAQ/Pixiv-Illustration-Collection
\n\n又一个 Pixiv 阅览工具
\n
https://lab.getloli.com/pixiv-viewer/
https://github.com/journey-ad/pixiv-viewer
https://github.com/upbit/pixivpy
https://github.com/alphasp/pixiv-api-client
https://github.com/akameco/pixiv-app-api
https://github.com/mouyase/PivisionM
https://www.himiku.com/archives/pivision.html
\n\nPixiv 第三方 Android 客户端
\n
https://github.com/CeuiLiSA/Pixiv-Shaft
\n\n\n一个支持免代理直连及查看动图的第三方 Pixiv Android 客户端。
\n
https://github.com/Notsfsssf/Pix-EzViewer
\n\n\n一个支持免代理直连及查看动图的第三方 Pixiv flutter 客户端\nhttps://github.com/Notsfsssf/pixez-flutter
\n
\n\nUnofficial Pixiv app client for Android and iOS, built in React Native.
\n
https://github.com/alphasp/pxview
\n\n\nDownload illusts from pixiv.net P 站插画批量下载器
\n
https://github.com/Tsuk1ko/pxder
\n