博客 | 子虚伊人

HTTP 状态码

2024年11月18日 · 阅读需 2 分钟

子虚伊人

状态码类别	状态码	英文说明	中文说明
1xx 信息性	100	Continue	继续。客户端应继续请求
	101	Switching Protocols	切换协议。服务器同意切换协议
2xx 成功	200	OK	请求成功。一般用于 GET 与 POST 请求
	201	Created	已创建。成功请求并创建了新的资源
	204	No Content	无内容。服务器处理成功，但未返回内容
3xx 重定向	301	Moved Permanently	永久移动。请求的资源已永久移动到新 URI
	302	Found	临时移动。请求的资源临时移动到新 URI
	304	Not Modified	未修改。资源未改变，可使用缓存
4xx 客户端错误	400	Bad Request	错误请求。请求语法错误
	401	Unauthorized	未授权。需要身份验证
	403	Forbidden	禁止。服务器拒绝请求
	404	Not Found	未找到。服务器找不到请求的资源
	405	Method Not Allowed	方法禁用。不允许使用该请求方法
	429	Too Many Requests	请求过多。用户在给定时间内发送了太多请求
5xx 服务器错误	500	Internal Server Error	服务器内部错误
	502	Bad Gateway	错误网关。服务器作为网关收到无效响应
	503	Service Unavailable	服务不可用。服务器暂时过载或维护
	504	Gateway Timeout	网关超时。服务器作为网关未及时响应

在 Express 中实现断点续传

2024年11月18日 · 阅读需 1 分钟

1adybug

子虚伊人

import { createReadStream } from "fs"
import { stat } from "fs/promises"

import express from "express"

const app = express()

app.get("/video", async (request, response) => {
    const filename = "demo.mp4"
    const { size } = await stat(filename)
    response.setHeader("Content-Type", "video/mp4")
    const range = request.headers.range

    if (!range) {
        response.setHeader("Content-Length", size)
        response.status(200)
        createReadStream(filename).pipe(response)
        return
    }

    const parts = range.replace(/bytes=/, "").split("-")
    const start = parseInt(parts[0])
    const end = parts[1] ? parseInt(parts[1]) : size - 1
    const chunksize = end - start + 1
    response.setHeader("Content-Range", `bytes ${start}-${end}/${size}`)
    response.setHeader("Accept-Ranges", "bytes")
    response.setHeader("Content-Length", chunksize)
    response.status(206)
    createReadStream(filename, { start, end }).pipe(response)
})

app.listen(4567)

在 hono 中实现断点续传

2024年11月18日 · 阅读需 1 分钟

1adybug

子虚伊人

import { createReadStream } from "fs"
import { stat } from "fs/promises"
import { Readable } from "stream"

import { Hono } from "hono"

const app = new Hono()

function nodeToWebStream(nodeStream: Readable) {
    return new ReadableStream({
        start(controller) {
            // 处理数据块
            nodeStream.on("data", chunk => controller.enqueue(chunk))

            // 处理流结束
            nodeStream.on("end", () => controller.close())

            // 处理错误
            nodeStream.on("error", error => controller.error(error))
        },
        cancel() {
            nodeStream.destroy()
        },
    })
}

app.get("/video", async c => {
    const filename = "demo.mp4"
    const { size } = await stat(filename)
    const headers = new Headers()
    headers.set("Content-Type", "video/mp4")
    const range = c.req.header("Range")

    if (!range) {
        headers.set("Content-Length", String(size))
        return c.newResponse(nodeToWebStream(createReadStream("demo.mp4")), {
            status: 200,
            headers,
        })
    }

    const parts = range.replace(/bytes=/, "").split("-")
    const start = parseInt(parts[0])
    const end = parts[1] ? parseInt(parts[1]) : size - 1
    const chunksize = end - start + 1
    headers.set("Content-Range", `bytes ${start}-${end}/${size}`)
    headers.set("Accept-Ranges", "bytes")
    headers.set("Content-Length", String(chunksize))
    return c.newResponse(nodeToWebStream(createReadStream(filename, { start, end })), { status: 206, headers })
})

export default {
    port: 4567,
    fetch: app.fetch,
}

使用 Tailwind CSS 选择元素

2024年11月18日 · 阅读需 1 分钟

1adybug

子虚伊人

在 Tailwind 中经常会有一些奇怪的类名，比如 w-[calc(100vw_-_64px)]，这种类名是无法直接使用 document.querySelector 来选择的，需要进行一些处理，将类名的中 []、()、: 替换为 \\[\\]、\\(\\)、\\:，然后使用 document.querySelector 来选择。

className.replace(/([\[\]\(\):])/g, "\\$1")

AbortSignal 的用法

2024年10月28日 · 阅读需 1 分钟

1adybug

子虚伊人

对于 AbortSignal，我们常见的用法应该是用于取消 fetch 请求：

const controller = new AbortController()
const signal = controller.signal

fetch(url, { signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error))

// 取消请求
controller.abort()

但是 AbortSignal 还有其他的用法，比如用于取消事件监听：

useEffect(() => {
    const controller = new AbortController()
    const signal = controller.signal
    window.addEventListener("click", () => console.log("click"), { signal })
    return () => {
        controller.abort()
    }
}, [])

当然，更高效的用法是取消多个事件监听

AbortSignal 类还有两个静态方法 AbortSignal.timeout 和 AbortSignal.any

AbortSignal.timeout 用于设置超时时间，在指定时间后会自动取消：

const signal = AbortSignal.timeout(1000)

类似于：

const controller = new AbortController()
const signal = controller.signal
setTimeout(() => controller.abort(), 1000)

AbortSignal.any 用于多个 AbortSignal 任意一个触发时取消：

const controller = new AbortController()
const controller2 = new AbortController()
const signal = AbortSignal.any([controller.signal, controller2.signal])

Nebula Graph 中的连续匹配

2024年10月23日 · 阅读需 2 分钟

1adybug

子虚伊人

先看两组 Cypher 语句：

MATCH p = (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
RETURN count(p)

MATCH (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
MATCH p = (u:`user`)-[w:watched]->(m:`movie`)
RETURN count(p)

通过运行结果可知两组语句的结果是一样的，可知连续匹配的作用域就是上一个匹配的结果。 u、w 和 m 是上一个匹配的结果，所以第二组语句中的 count(p) 与第一组语句中的 count(p) 是一样的。

如果我们把第二组语句改为：

MATCH (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
MATCH p = (u:`user`)-[w2:watched]->(m:`movie`)
RETURN count(p)

那么此时，只有 u 和 m 是继承了上一次匹配的结果，w2 是重新匹配的结果，所以 count(p) 的结果就不一样了，也就是对于每一组 u 和 m 重新匹配了 w2 这条边，那么 count(p) 的结果必然是大于或者等于第一组语句的结果。

MATCH (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
WITH u, m
MATCH p = (u:`user`)-[w:watched]->(m:`movie`)
RETURN count(p)

此时如果我们使用 WITH，那么 w 依然被丢失了，在第二次匹配中的 w 也相当于重新匹配的结果，所以 count(p) 的结果也是大于或者等于第一组语句的结果。

如果我们做以下改动也是错误的：

MATCH (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
WITH u, m
MATCH p = (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
RETURN count(p)

因为第一次匹配的结果并没有保证 u 和 m 之间的组合是独一无二的，也就是结果的列表中可能会存在系统的 u 和 m 组合，所以我们应该加一个语句：

MATCH (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
WITH u, m, count(w) as c
MATCH p = (u:`user`)-[w:watched]->(m:`movie`)
WHERE w.rate > 4
RETURN count(p)

通过 count(w) 就可以让 u 和 m 之间的组合是独一无二的

在 react 中手动触发 change 事件

2024年10月22日 · 阅读需 2 分钟

1adybug

子虚伊人

在 react 中存在很多受控组件，比如 input、textarea 等，一般来说，受控组件将会是如下写法：

import { FC } from "react"

const App: FC = () => {
    const [value, setValue] = useState("")

    return <input value={value} onChange={e => setValue(e.target.value)} />
}

export default App

这种写法在 react 内部使用没有任何问题，但是对于外部使用者来说却存在很多问题，比如：

import { FC, useState } from "react"

const App: FC = () => {
    const [value, setValue] = useState("")

    return (
        <div>
            <div>
                <label htmlFor="input">input:</label>
                <input id="input" value={value} onChange={e => setValue(e.target.value)} />
            </div>
            <div>value:{value}</div>
        </div>
    )
}

export default App

当我们使用如下代码来更改 input 的值：

input.value = "123456"

却看到输入框的值发生了更改，下方的文本却没有任何变化，说明我们更改 input 的值的行为并没有触发 react 内部的 change 事件，那我们来手动触发 change 和 input 事件：

const changeEvent = new Event("change", { bubbles: true })
const inputEvent = new Event("input", { bubbles: true })

input.dispatchEvent(changeEvent)
input.dispatchEvent(inputEvent)

可以看到，下方文本任然没有任何变化，Google 一番终于找到了正确答案 Simulate React On-Change On Controlled Components：

const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set

set?.call(input, "123456")

const inputEvent = new Event("input", { bubbles: true })

input.dispatchEvent(inputEvent)

下方的文本成功同步！

在 Clash 中添加全局规则

2024年10月14日 · 阅读需 3 分钟

1adybug

子虚伊人

有时候我们希望某些网站不走代理，这时候就需要添加自定义规则，右击订阅，选择扩展脚本：

// Define main function (script entry)

/**
 * @param {object} config
 * @param {string[]} config.rules
 * @param {string} profileName
 */
function main(config, profileName) {
    config.rules.unshift("DOMAIN-SUFFIX,axshare.com,DIRECT")
    config.rules.unshift("DOMAIN-SUFFIX,bing.com,DIRECT")
    config.rules.unshift("DOMAIN-SUFFIX,codesandbox.io,DIRECT")
    config.rules.unshift("DOMAIN-SUFFIX,csbops.io,DIRECT")
    config.rules.unshift("DOMAIN-SUFFIX,csb.app,DIRECT")
    config.rules.unshift("DOMAIN-SUFFIX,gallerycdn.vsassets.io,节点选择")
    config.rules.unshift("DOMAIN-SUFFIX,gallery.vsassets.io,节点选择")
    config.rules.unshift("DOMAIN-SUFFIX,marketplace.visualstudio.com,节点选择")
    return config
}

DOMAIN 是指定域名，DOMAIN-SUFFIX 是指定域名后缀，DIRECT 和 节点选择 都是规则内的分组。

规则类型	匹配逻辑	匹配目标	性能等级	关键注意事项
`DOMAIN`	精确域名匹配	域名	低	仅匹配完全相同的域名字符串。
`DOMAIN-SUFFIX`	域名后缀匹配	域名	低	匹配指定后缀及其所有子域名。
`DOMAIN-KEYWORD`	域名关键词匹配	域名	中	匹配域名中任何位置出现的关键词，可能产生误匹配。
`IP-CIDR`	目标 IPv4 地址段	目标 IPv4	高	默认触发 DNS 解析。
`IP-CIDR6`	目标 IPv6 地址段	目标 IPv6	高	默认触发 DNS 解析。
`GEOIP`	目标 IP 地理位置	目标 IP	高	基于 MaxMind 数据库；默认触发 DNS 解析。
`SRC-IP-CIDR`	源 IPv4 地址段	源 IPv4	低	主要用于网关模式，区分局域网内不同设备。
`DST-PORT`	目标端口	目标端口	低	基于 TCP/UDP 目标端口进行匹配。
`SRC-PORT`	源端口	源端口	低	基于 TCP/UDP 源端口进行匹配。
`PROCESS-NAME`	进程名称	进程名	中	操作系统相关；适用于 Windows, macOS, Linux, FreeBSD。
`PROCESS-PATH`	进程路径	进程路径	中	操作系统相关；比进程名更精确，但可移植性差。
`IPSET`	Linux IP 集	目标 IP	低 (内核)	仅 Linux 可用；需要 ipset 工具；性能极高。

有时候我们希望某些规则对于所有的订阅都生效，这时候我们可以右击 全局扩展脚本，选择编辑文件：

// Define main function (script entry)

/**
 * @param {object} config
 * @param {string[]} config.rules
 * @param {string} profileName
 */
function main(config, profileName) {
    /** @type string | undefined */
    const name = config["proxy-groups"]?.at(0)?.name
    config.rules.unshift(`DOMAIN-SUFFIX,neo4j.com,${name}`)
    return config
}

这里的意思找到订阅的第一个分组（一般都是通用的代理规则），然后将这条规则添加到这个分组中。

如果需要对于脚本进行调试，可以添加 console.log，在保存脚本以后，会在 全局扩展脚本 下方出现一个日志按钮，点击以后会输出脚本的日志。

stopPropagation 和 stopImmediatePropagation 之间的区别

2024年10月12日 · 阅读需 2 分钟

1adybug

子虚伊人

在 JavaScript 中，stopPropagation 和 stopImmediatePropagation 是两个用于控制事件传播的方法。它们之间有一些关键的区别。

stopPropagation

stopPropagation 方法用于阻止事件冒泡到下一个元素，但允许其他事件处理程序在当前元素上继续执行。例如，如果你在一个按钮的点击事件中调用 stopPropagation，点击事件将不会冒泡到按钮的父元素，但该按钮上的其他点击事件处理程序仍然会被执行。

element.addEventListener("click", function (event) {
    event.stopPropagation()
    console.log("Button clicked")
})

stopImmediatePropagation

stopImmediatePropagation 方法不仅阻止事件冒泡，还阻止当前元素上所有后续的事件处理程序执行。这意味着一旦调用了 stopImmediatePropagation，当前元素上的其他事件处理程序将不会被触发。

element.addEventListener("click", function (event) {
    event.stopImmediatePropagation()
    console.log("Button clicked")
})

element.addEventListener("click", function (event) {
    console.log("This will not be logged")
})

何时使用

使用 stopPropagation 当你只想阻止事件冒泡但仍希望当前元素上的其他事件处理程序执行时。
使用 stopImmediatePropagation 当你希望完全停止事件传播并阻止当前元素上的所有后续事件处理程序执行时。

了解这两个方法的区别可以帮助你更好地控制事件流，从而实现更复杂的用户交互逻辑。

修改函数的名称

2024年10月12日 · 阅读需 1 分钟

1adybug

子虚伊人

函数的名称在定义时已经被确定，比如：

function foo() {}

// 打印 "foo"
console.log(foo.name)

然而，匿名函数或者箭头函数的名称是空字符串：

const foo = (() => function () {})()

// 打印 ""
console.log(foo.name)

之所以要写成 (() => function () {})() 这么奇怪的形式，是应为使用 var、let 或 const 定义的变量名会赋值给函数的名称：

const foo = function () {}

// 打印 "foo"
console.log(foo.name)

const bar = () => 0

// 打印 "bar"
console.log(bar.name)

变量定义时，属性名也会被赋值给函数的名称：

const obj = {
    foo: function () {},
    bar: () => 0,
}

// 打印 "foo"
console.log(obj.foo.name)

// 打印 "bar"
console.log(obj.bar.name)

然而，后续的赋值操作不会影响函数的名称：

const obj = {}

obj.foo = function () {}

// 打印 ""
console.log(obj.foo.name)

const name = "bar"
obj[name] = () => 0

// 打印 ""
console.log(obj.bar.name)

然而，更有趣的是，定义对象字面量时，动态的属性名会被赋值给属性名：

const name = "foo"

const obj = {
    [name]: function () {},
}

// 打印 "foo"
console.log(obj[name].name)

最后，如果你想修改函数的名称，可以使用 Object.defineProperty：

const foo = function () {}
Object.defineProperty(foo, "name", { value: "bar" })

// 打印 "bar"
console.log(foo.name)

stopPropagation​

stopImmediatePropagation​

何时使用​

stopPropagation

stopImmediatePropagation

何时使用