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 的区别，并在项目中灵活应用。
对称加密是一种加密算法，其中加密和解密使用同一个密钥。它的工作原理是，发送方用密钥对数据进行加密，接收方使用相同的密钥来解密数据。由于加密和解密过程中使用的密钥是相同的，因此被称为“对称”。
非对称加密是一种加密算法，它使用一对密钥：公钥和私钥。这对密钥中的一个用于加密，另一个则用于解密。公钥可以公开给任何人，而私钥必须由所有者保密。非对称加密解决了对称加密中“密钥分发”的难题，因为加密和解密使用不同的密钥。
由于使用不同的密钥，加密和解密过程更加安全，尤其是在公钥公开的情况下，只有持有对应私钥的人才能解密密文。
公钥和私钥是非对称加密算法中的两种密钥，它们共同构成一对密钥，用于加密和解密数据。这两个密钥具有特殊的数学关系：使用一个密钥加密的数据，必须用另一个密钥来解密。
加密和解密：
由于公钥可以公开，任何人都能加密消息，但只有持有私钥的人能解密。
数字签名：
这种机制确保了消息的完整性和发送者的身份，防止了数据篡改和伪造。
HTTPS（超文本传输安全协议）使用了对称加密、非对称加密和数字证书来保证通信的安全性。这个过程大致可以分为以下几个步骤:
建立安全连接:
当浏览器连接到 HTTPS 网站时,服务器会发送其 SSL 证书给浏览器。这个证书包含了服务器的公钥,以及由可信任的证书颁发机构(CA)签名的证书信息。
验证证书:
浏览器会验证证书的有效性,包括检查证书是否过期、是否由可信的 CA 签发等。这一步骤可以确保浏览器连接到的确实是预期的服务器,而不是某个冒充的恶意服务器。
生成会话密钥:
验证通过后,浏览器会生成一个随机的对称密钥(会话密钥)。然后使用服务器的公钥对这个会话密钥进行加密。
密钥交换:
浏览器将加密后的会话密钥发送给服务器。服务器使用自己的私钥解密,获得会话密钥。
安全通信:
此后,浏览器和服务器就可以使用这个共享的会话密钥,通过对称加密算法来加密它们之间的所有通信内容。
为什么要使用这些技术:
非对称加密(公钥加密):
对称加密:
CA 证书:
通过结合使用这些技术,HTTPS 能够:
这种方式既保证了安全性,又兼顾了效率,是目前互联网上广泛使用的安全通信方式。
document 和 document.documentElement 确实有一些重要区别:
定义:
document 是整个 HTML 文档的根节点。document.documentElement 是 HTML 文档的根元素,通常是 <html> 标签。层级:
document 是 DOM 树的顶层对象。document.documentElement 是 document 的直接子节点。属性和方法:
document 包含许多特有的属性和方法,如 createElement(), getElementById() 等。document.documentElement 主要继承自 Element 接口,拥有元素通用的属性和方法。尺寸获取:
document.documentElement.clientWidth/clientHeight。document 本身没有这些尺寸属性。滚动相关:
document.documentElement.scrollTop/scrollLeft。document.body 而非 document.documentElement。DOCTYPE:
document 包含 DOCTYPE 声明。document.documentElement 不包含 DOCTYPE,仅从 <html> 开始。could not connect to the development server
解决方案：
Gradle 的 Java 位置设置为系统位置解决方案：
在 Android Studio 中打开 android 目录
原因：
动画暂停之后再开始，会以设置的全部时间来完成剩余的进度
解决方案：
/** 初始值 */
const fromValue = 0
/** 重点值 */
const toValue = 100
/** 时间 */
const duration = 10000
/** 速度 */
const speed = (toValue - fromValue) / duration
/** 动画值 */
const translateX = useRef(new Animated.Value(fromValue)).current
/** 暂停值 */
const stopValue = useRef(fromValue)
/** 动画状态 */
const status = useRef(false)
function onClick() {
// 如果暂停值已经达到目标值，说明动画已经完成
if (stopValue.current === toValue) return
// 如果动画处于播放状态，暂停动画，并且将当前值赋予给暂停值
if (status.current) translateX.stopAnimation(value => (stopValue.current = value))
// 否则播放动画
else {
Animated.timing(translateX, {
toValue,
duration: (toValue - stopValue.current) / speed,
useNativeDriver: true,
easing: Easing.linear,
}).start(({ finished }) => finished && (stopValue.current = toValue))
}
status.current = !status.current
}
在使用 Ant Design 的 Form 表单时，经常会遇到这个警告：
Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?
如果确定传递了 form 属性，那么一般是由于调用 form 实例的方法时，Form 表单还没有被渲染的原因，常见于 Modal 中嵌套的 Form，解决办法为监听弹窗是否被打开：
useEffect(() => {
if (!open) return
form.setFieldsValue({})
}, [open, form])
接口扩展
interface Person {
sayName(): void
}
class Person {
constructor(public name: string) {}
}
Person.prototype.sayName = function sayName() {
console.log(this.name)
}
const person = new Person("Tom")
person.sayName()
声明合并
class Person {
constructor(public name: string) {}
}
interface Person {
sayName(): void
}
Person.prototype.sayName = function sayName() {
console.log(this.name)
}
const person = new Person("Tom")
person.sayName()
方法 1 和方法 2 看起来似乎只是 class 和 interface 的顺序区别，以下是 claude 给出的解释：
主要区别：
声明顺序：
在接口扩展中，我们先声明接口，后声明类。 在声明合并中，我们先声明类，后声明接口。
语义和意图：
接口扩展更像是在定义一个契约，然后让类去实现这个契约。 声明合并更像是在已有的类上添加额外的属性或方法。
使用场景：
接口扩展通常用于你预先知道类需要实现某些属性或方法时。 声明合并通常用于你想要在已有的类上添加新的属性或方法，尤其是在处理第三方库或 legacy 代码时。
灵活性：
声明合并提供了更大的灵活性，因为你可以在代码的不同部分逐步扩展类的定义。 接口扩展要求你在一个地方定义所有的接口成员。
代码组织：
接口扩展可能导致更清晰的代码结构，因为所有的类型信息都在一个地方。 声明合并允许你在需要的地方添加类型信息，这在某些情况下可能更方便。
实际上，这两种方法在功能上是等价的。TypeScript 编译器会以相同的方式处理它们。选择使用哪种方法主要取决于你的代码风格偏好和具体的使用场景。
在实际开发中，声明合并（第二种方法）可能更常用，特别是在需要扩展现有类或处理第三方库时。但是，如果你正在从头开始设计一个新的类，使用接口扩展（第一种方法）可能会让你的意图更加清晰。
现在可以直接声明属性了：
const Bar = () => console.log("Hello World")
Bar.color = "red"
console.log(Bar.color)
function Foo() {
console.log("Hello World")
}
Foo.color = "red"
console.log(Foo.color)
有的时候我们希望函数的参数能够是某一种类，有两种办法限制这种参数：
使用 typeof：
class Person {
constructor(public name: string) {}
}
function createPerson(constructor: typeof Person) {
return new constructor("Tom")
}
const person = createPerson(Person)
使用 new：
class Person {
constructor(public name: string) {}
}
function createPerson(constructor: new (name: string) => Person) {
return new constructor("Tom")
}
const person = createPerson(Person)
或者，扩展一下：
interface Animal {
name: string
}
class Person {
constructor(public name: string) {}
}
function createAnimal(constructor: new (name: string) => Animal) {
return new constructor("Tom")
}
const person = createAnimal(Person)
这里我们可以学到，只要在一个函数类型的前面加一个 new 关键字，便变成了构造函数
cacheTime 表示缓存数据回收时间。默认为 5 分钟。如果设置为 -1, 则表示缓存数据永不过期
staleTime 表示缓存数据新鲜时间。默认为 0。在该时间间隔内，认为数据是新鲜的，不会重新发请求。如果设置为 -1，则表示数据永远新鲜
cacheTime 表示数据在全局的缓存时间，即使到期被销毁了，也不影响已经加载完成的请求，它们的 data 依然是有有效数据的，不会重新请求。但是如果有新的组件（请求）产生了，此时它 data 便无法从全局的缓存中读取数据，因此初始 data 是 undefined，会进行一次新的请求，在请求完成后会同步更新所有相同的 cacheKey 的 hooks 的 data
staleTime 表示数据的新鲜时间，在新鲜的时间内，产生了新的请求，不会真正地去请求，而是使用全局缓存中的数据，如果全局缓存中的数据不存在，依然会进行一次真正的请求，在请求完成后会同步更新所有相同的 cacheKey 的 hooks 的 data
cacheTime 和 staleTime 以请求完成那个配置为准，后续的更新也不会改变