在 Tailwind 中经常会有一些奇怪的类名，比如 w-[calc(100vw_-_64px)]，这种类名是无法直接使用 document.querySelector 来选择的，需要进行一些处理，将类名的中 []、()、: 替换为 \\[\\]、\\(\\)、\\:，然后使用 document.querySelector 来选择。
className.replace(/([\[\]\(\):])/g, "\\$1")
对于 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])
先看两组 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 中存在很多受控组件，比如 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)
下方的文本成功同步！
有时候我们希望某些网站不走代理，这时候就需要添加自定义规则，右击订阅，选择扩展脚本：
// 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，在保存脚本以后，会在 全局扩展脚本 下方出现一个日志按钮，点击以后会输出脚本的日志。
在 JavaScript 中，stopPropagation 和 stopImmediatePropagation 是两个用于控制事件传播的方法。它们之间有一些关键的区别。
stopPropagation 方法用于阻止事件冒泡到下一个元素，但允许其他事件处理程序在当前元素上继续执行。例如，如果你在一个按钮的点击事件中调用 stopPropagation，点击事件将不会冒泡到按钮的父元素，但该按钮上的其他点击事件处理程序仍然会被执行。
element.addEventListener("click", function (event) {
event.stopPropagation()
console.log("Button clicked")
})
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 当你希望完全停止事件传播并阻止当前元素上的所有后续事件处理程序执行时。了解这两个方法的区别可以帮助你更好地控制事件流，从而实现更复杂的用户交互逻辑。
函数的名称在定义时已经被确定，比如：
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)
prettier 也支持 Markdown 文件的格式化，但是有以下注意点：
JavaScript 代码块语言标识需要改为 javascript 或者 js，TypeScript 改为 typescript 或者 ts，驼峰命名的语言标识需要改为全小写，否则 prettier 无法识别tabWidth 要设置为 2，否则 Markdown 文件中的文本缩进会有问题.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px); /* 固定宽度为 100px */
grid-auto-rows: 100px; /* 固定高度为 100px */
gap: 10px; /* 网格间距 */
}
太牛了
Selecto.js 是一个用于在网页上进行拖拽选择的 JavaScript 库，允许用户通过绘制选择框来选择页面上的元素。通过配置选项，您可以自定义 Selecto 的行为和功能。以下是每个配置选项的详细说明：
container
HTMLElement | stringdocument.bodySelecto 会在该容器内检测和选择元素。可以直接传入 DOM 元素或选择器字符串。dragContainer
HTMLElement | stringcontainerselectableTargets
string[][]hitRate
number100selectByClick
booleantruetrue 时，用户可以直接点击元素进行选择。selectFromInside
booleantruefalse 时，用户无法从目标元素内部开始绘制选择框。continueSelect
booleanfalsetrue，新的选择结果会累加到已有的选择中。toggleContinueSelect
string | string[]nullcontinueSelect 状态的按键。当按下指定的键时，continueSelect 状态会被激活或关闭。例如：'shift'、['ctrl', 'meta']。keyContainer
HTMLElement | Document | WindowwindowtoggleContinueSelect 功能时，需要监听键盘事件以切换选择模式。ratio
number0scrollOptions
object | nullnullcontainer: 滚动的容器元素或选择器。threshold: 触发滚动的距离阈值。speed: 滚动速度。getScrollPosition: 自定义获取滚动位置的方法。boundContainer
HTMLElement | string | nullnullpreventDefault
booleanfalseevent.preventDefault()，以防止默认的浏览器行为（如文本选中、图片拖拽等）。cspNonce
stringnullcheckInput
booleanfalse<input>、<textarea>）。设置为 true 时，选择操作不会影响这些输入元素的交互。preventDragFromInside
booleantruetrue，可以避免与内部元素的拖拽操作冲突。getElementRect
function(el) => el.getBoundingClientRect()dragCondition
function() => truetrue 表示允许开始拖拽选择，false 则阻止拖拽。className
string''hoverClassName
string''toggleContinueSelectWithoutDeselect
booleanfalsecontinueSelect 状态时，是否保留已选中的元素而不取消选择。preventClickEvent
booleantrueappendTo
HTMLElement | stringcontainerdragCondition
functionnulltrue 允许拖拽，false 阻止拖拽。示例代码：
const selecto = new Selecto({
container: document.querySelector(".selecto-area"),
dragContainer: window,
selectableTargets: [".selectable"],
hitRate: 50,
selectByClick: true,
selectFromInside: false,
continueSelect: false,
toggleContinueSelect: "shift",
keyContainer: window,
ratio: 0,
scrollOptions: {
container: document.querySelector(".scroll-container"),
threshold: 30,
speed: 10,
},
boundContainer: document.querySelector(".bound-area"),
preventDefault: true,
cspNonce: "your-csp-nonce",
checkInput: true,
preventDragFromInside: false,
getElementRect: el =>
// 自定义获取元素位置的方法
({
left: el.offsetLeft,
top: el.offsetTop,
width: el.offsetWidth,
height: el.offsetHeight,
}),
className: "custom-selecto",
hoverClassName: "selected",
toggleContinueSelectWithoutDeselect: true,
preventClickEvent: true,
appendTo: document.body,
dragCondition: e =>
// 仅当按下左键时允许拖拽选择
e.inputEvent.button === 0,
})
通过正确配置以上选项，您可以根据具体需求定制 Selecto.js 的功能，例如：
continueSelect: true 实现多次选择累加。boundContainer 限制选择框的活动区域。className 和 hoverClassName 为选择框和被选中元素添加自定义样式。注意事项：
select, dragStart, dragEnd，可用于响应用户的选择操作。selectableTargets 和 getElementRect 以提升性能。希望以上解释能帮助您全面了解 Selecto.js 的配置选项，从而更好地应用到项目中。
dragContainer 和 container 的区别深入理解 selecto.js 中 container 和 dragContainer 的区别
在 selecto.js 中，container 和 dragContainer 都是用于配置选择行为的选项，但它们的作用不同。
containerHTMLElement | stringdocument.bodycontainer 是选择操作发生的区域，Selecto 会在这个容器内查找和选择元素。当您指定 selectableTargets 时，selecto.js 会在 container 内根据这些选择器查找目标元素。
container 的关键点：
selecto.js 进行选择操作的主要区域。document.body。dragContainerHTMLElement | stringcontainer 相同dragContainer 是用户可以开始拖拽以创建选择框的区域。换句话说，它是用户可以点击并拖动以开始选择的区域。
dragContainer 的关键点：
container 不同，允许在一个区域启动选择，但选择另一个区域内的元素。区别总结：
container：定义选择操作的目标区域和元素所在位置。dragContainer：定义用户可以开始拖拽选择的区域。使用场景：
默认行为（container 和 dragContainer 相同）
不同的 container 和 dragContainer
dragContainer 设置为不包含图片的区域，如空白背景。dragContainer 设置为该按钮或面板的元素选择器。示例代码：
const selecto = new Selecto({
// 定义可被选择的元素所在的容器
container: ".items-container",
// 定义用户可以开始拖拽选择的区域
dragContainer: ".selection-area",
// 可被选择的元素
selectableTargets: [".items-container .item"],
// 其他配置...
})
解释：
.items-container：包含了所有可被选择的项目。.selection-area：用户只能在此区域内开始拖拽选择。container（容器）：选择操作的范围，决定哪些元素可以被选择，以及选择框的位置计算。dragContainer（拖拽容器）：用户可以开始拖拽以进行选择的区域，决定了选择操作的触发区域。通过正确配置这两个选项，您可以：
建议：
希望以上解释能帮助您充分理解 container 和 dragContainer 的区别，并在项目中灵活应用。