Open 981377660LMT opened 1 year ago
https://leetcode-solution-leetcode-pp.gitbook.io/mz-ri-yi-jm/2023-02
useSignal 机制 https://www.builder.io/blog/usesignal-is-the-future-of-web-frameworks 《useSignal() is the Future of Web Frameworks》这篇文章解释了为什么 react 不能像 vue 那样智能追踪需要更新的组件。react 想做到这一点，就需要引入类似 useSignal() 这样的机制。而 preact 就对 useSignal() 进行了支持。 目前 Vue, Preact, Solid 和 Qwik 都支持。
const [state, setstate] = useState(0) const [getCount, setCount] = createSignal(0)
signal 是 reactive 的 getter 里可以做一些拦截，而单纯的 value 的传递不会向信号提供关于实际使用该值的位置的任何信息。 例如，在模板渲染时，signal 知道了只有文本节点才能访问 count. value。因为invoking the getter creates a subscription.。 因此，如果 count 的值发生变化，它只需要更新文本节点，而不需要更新其他内容。
只有文本节点才能访问 count. value
invoking the getter creates a subscription.
useState() 的缺点是每次更新就需要重新渲染整个组件
重新渲染整个组件
useRef() 不渲染 React 具有 useRef () ，它类似于 useSignal () ，但是它不会导致 UI 重新渲染。UseRef ()缺少的是订阅跟踪和通知，只是返回一个对象，该对象具有一个 current 属性，该属性可以在组件的整个生命周期内保持不变。
useMemo() 内置
在 vue 中, useSignal()表现为shallowRef()
shallowRef()
ts-reset 是一个类似于垫片的库，可以”修复“一些 ts 上的诡异行为
visual-chatpgt 可以允许你使用自然语言来进行图像识别， 图片修改（P 图）等操作， 底层基于 chatgpt
visual-chatpgt
一个可以获取客户端 IP 的 JS 脚本，原理是基于 webrtc 协议会发送 IP 的特点。 https://github.com/joeymalvinni/webrtc-ip
vitest 是一个前端测试框架， 类似于 jest，用法”基本“兼容了 jest 中的常用 api， 因此很多项目都可以很容易地从 jest 迁移到 vitest。 比如大名鼎鼎的 react query 就刚刚从 jest 迁移到了 vitest。 https://vitest.dev/guide/features.html vitest 的特点是：
signal 《Demystifying Create React Signals Internals》via: https://blog.axlight.com/posts/demystifying-create-react-signals-internals/ 《dan_abramov's reply for Discussion on: React vs Signals: 10 Years Later》via: https://dev.to/dan_abramov/comment/256g9 《The Evolution of Signals in JavaScript》via: https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob 《React vs Signals: 10 Years Later》 via: https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71
交互式的 Lisp 编译器教程 https://citw.dev/tutorial/create-your-own-compiler
浏览器提供了一个内置的 API： structured-clone 用来深拷贝。 https://www.builder.io/blog/structured-clone
无法克隆函数、DOM结点、属性描述符。对象的原型等
JSON.stringify() 和 JSON.parse() 也可以实现深拷贝，但是它们有一些限制：
lodash 的 cloneDeep 有一些缺点： 体积 5.3kb (gzip 后)
监听是否滚动已经停止 document.onscrollend
document.onscrollend
FinalizationRegistry 是一个新的浏览器 api，可以监听 JS 中的变量的内存释放情况。 https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3
Transferable objects(可转移对象) https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects 在计算机科学中，可转移对象（Transferable object）是指一种可以在不同的上下文或环境中传递和使用的数据结构或对象。它可以在不同的计算机进程、线程或系统之间传输，而无需复制整个对象的内容。 js 里的可转移的对象是拥有属于自己的资源的对象，这些资源可以从一个上下文转移到另一个，确保资源一次仅在一个上下文可用。传输后，原始对象不再可用；它不再指向转移后的资源，并且任何读取或者写入该对象的尝试都将抛出异常。 可转移对象通常用于共享资源，该资源一次仅能安全地暴露在一个 JavaScript 线程中。例如，ArrayBuffer 是一个拥有内存块的可转移对象。当此类缓冲区（buffer）在线程之间传输时，相关联的内存资源将从原始的缓冲区分离出来，并且附加到新线程创建的缓冲区对象中。原始线程中的缓冲区对象不再可用，因为它不再拥有属于自己的内存资源了。
共享资源
使用 structuredClone() 创建对象的深层拷贝时，也可以使用转移。克隆操作后，传输的资源将被移动到克隆的对象，而不是复制。
使用转移对象资源的机制取决于对象自身。例如，当 ArrayBuffer 在线程之间转移时，它指向的内存资源实际上以快速且高效的零拷贝操作在上下文之间移动。其他对象可以通过拷贝关联的资源，然后将它从旧的上下文中删除来转移它。
type Transferable = | OffscreenCanvas | ImageBitmap | MessagePort | ReadableStream | WritableStream | TransformStream | ArrayBuffer // 在线程之间传输对象 // Create an 8MB "file" and fill it. 8MB = 1024 * 1024 * 8 B const uInt8Array = new Uint8Array(1024 * 1024 * 8).map((v, i) => i) console.log(uInt8Array.byteLength) // 8388608 // Transfer the underlying buffer to a worker worker.postMessage(uInt8Array, [uInt8Array.buffer]) console.log(uInt8Array.byteLength) // 0
像 Int32Array 和 Uint8Array 等类型化数组是可序列化的，但是不能转移。然而，它们的底层缓冲区是一个 ArrayBuffer，它是一个可转移对象。我们可以在数据参数中发送 uInt8Array.buffer，但是不能在传输数组中发送 uInt8Array。
可序列化的，但是不能转移
error lens 是一个 vscode 插件， 可以内敛的形式显示错误信息。在这之前大家需要在 output 或者 problems 面板查看，相当麻烦。
如何实现弹幕防遮脸功能？ 普通的弹幕都是在视频上放一些 div 然后滚动即可， 防遮挡只需要：
mask-image
关键是如何预处理出遮罩图片呢？我们可以在后台利用人脸识别技术对视频中的每一帧进行人脸识别， 并将人脸处理成一张遮罩图片。这样我们得到了每一帧的遮罩图片， 前端根据视频进度不断更新对应这道图片即可。
给 JS 选手的 Go 语言学习手册 https://github.com/miguelmota/golang-for-nodejs-developers
iptv(Internet Protocol television) 可以让你看世界各地的电视直播 https://github.com/iptv-org/iptv
blurhash 优化 placeholder 的显示 https://github.com/woltapp/blurhash 可以根据原图计算一个哈希，然后根据这个哈希可以直接在本地渲染一个 placeholder， 这个 placeholder 在上一个解决方案的基础上还不用占用网络带宽。
对自己服务中的外链进行监控 直接爬虫后正则匹配网站后发送一个请求查看其是否可用即可。这里介绍一个工具，它的作用就是帮你检查网站的坏链。 使用方法非常简单，一行命令就可以了。
$ npx check-html-links your_site_url
两行代码将 playground 集成到你的项目中 https://github.com/codesandbox/sandpack
import { Sandpack } from '@codesandbox/sandpack-react' ;<Sandpack template="react" />
excel 使用不同颜色区分数据 具体操作为：选择“条件格式”-“色阶”-“红白绿色阶”，这样就使得涨幅大的数据自动显示深红色，跌幅大的数据自动显示深绿色。
色阶
库
File System Access API
https://leetcode-solution-leetcode-pp.gitbook.io/mz-ri-yi-jm/2023-02
2023-02-03
useSignal 机制 https://www.builder.io/blog/usesignal-is-the-future-of-web-frameworks 《useSignal() is the Future of Web Frameworks》这篇文章解释了为什么 react 不能像 vue 那样智能追踪需要更新的组件。react 想做到这一点，就需要引入类似 useSignal() 这样的机制。而 preact 就对 useSignal() 进行了支持。 目前 Vue, Preact, Solid 和 Qwik 都支持。
signal 是 reactive 的 getter 里可以做一些拦截，而单纯的 value 的传递不会向信号提供关于实际使用该值的位置的任何信息。 例如，在模板渲染时，signal 知道了
只有文本节点才能访问 count. value。因为invoking the getter creates a subscription.。 因此，如果 count 的值发生变化，它只需要更新文本节点，而不需要更新其他内容。useState() 的缺点是每次更新就需要
重新渲染整个组件useRef() 不渲染 React 具有 useRef () ，它类似于 useSignal () ，但是它不会导致 UI 重新渲染。UseRef ()缺少的是订阅跟踪和通知，只是返回一个对象，该对象具有一个 current 属性，该属性可以在组件的整个生命周期内保持不变。
useMemo() 内置
在 vue 中, useSignal()表现为
shallowRef()ts-reset 是一个类似于垫片的库，可以”修复“一些 ts 上的诡异行为
visual-chatpgt可以允许你使用自然语言来进行图像识别， 图片修改（P 图）等操作， 底层基于 chatgpt一个可以获取客户端 IP 的 JS 脚本，原理是基于 webrtc 协议会发送 IP 的特点。 https://github.com/joeymalvinni/webrtc-ip
vitest 是一个前端测试框架， 类似于 jest，用法”基本“兼容了 jest 中的常用 api， 因此很多项目都可以很容易地从 jest 迁移到 vitest。 比如大名鼎鼎的 react query 就刚刚从 jest 迁移到了 vitest。 https://vitest.dev/guide/features.html vitest 的特点是：
signal 《Demystifying Create React Signals Internals》via: https://blog.axlight.com/posts/demystifying-create-react-signals-internals/ 《dan_abramov's reply for Discussion on: React vs Signals: 10 Years Later》via: https://dev.to/dan_abramov/comment/256g9 《The Evolution of Signals in JavaScript》via: https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob 《React vs Signals: 10 Years Later》 via: https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71
交互式的 Lisp 编译器教程 https://citw.dev/tutorial/create-your-own-compiler
浏览器提供了一个内置的 API： structured-clone 用来深拷贝。 https://www.builder.io/blog/structured-clone
无法克隆函数、DOM结点、属性描述符。对象的原型等JSON.stringify() 和 JSON.parse() 也可以实现深拷贝，但是它们有一些限制：
lodash 的 cloneDeep 有一些缺点： 体积 5.3kb (gzip 后)
监听是否滚动已经停止
document.onscrollendFinalizationRegistry 是一个新的浏览器 api，可以监听 JS 中的变量的内存释放情况。 https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3
Transferable objects(可转移对象) https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Transferable_objects 在计算机科学中，可转移对象（Transferable object）是指一种可以在不同的上下文或环境中传递和使用的数据结构或对象。它可以在不同的计算机进程、线程或系统之间传输，而无需复制整个对象的内容。 js 里的可转移的对象是拥有属于自己的资源的对象，这些资源可以从一个上下文转移到另一个，确保资源一次仅在一个上下文可用。传输后，原始对象不再可用；它不再指向转移后的资源，并且任何读取或者写入该对象的尝试都将抛出异常。 可转移对象通常用于
共享资源，该资源一次仅能安全地暴露在一个 JavaScript 线程中。例如，ArrayBuffer 是一个拥有内存块的可转移对象。当此类缓冲区（buffer）在线程之间传输时，相关联的内存资源将从原始的缓冲区分离出来，并且附加到新线程创建的缓冲区对象中。原始线程中的缓冲区对象不再可用，因为它不再拥有属于自己的内存资源了。使用 structuredClone() 创建对象的深层拷贝时，也可以使用转移。克隆操作后，传输的资源将被移动到克隆的对象，而不是复制。
使用转移对象资源的机制取决于对象自身。例如，当 ArrayBuffer 在线程之间转移时，它指向的内存资源实际上以快速且高效的零拷贝操作在上下文之间移动。其他对象可以通过拷贝关联的资源，然后将它从旧的上下文中删除来转移它。
像 Int32Array 和 Uint8Array 等类型化数组是
可序列化的，但是不能转移。然而，它们的底层缓冲区是一个 ArrayBuffer，它是一个可转移对象。我们可以在数据参数中发送 uInt8Array.buffer，但是不能在传输数组中发送 uInt8Array。2023-01
error lens 是一个 vscode 插件， 可以内敛的形式显示错误信息。在这之前大家需要在 output 或者 problems 面板查看，相当麻烦。
如何实现弹幕防遮脸功能？ 普通的弹幕都是在视频上放一些 div 然后滚动即可， 防遮挡只需要：
mask-image就可以实现。关键是如何预处理出遮罩图片呢？我们可以在后台利用人脸识别技术对视频中的每一帧进行人脸识别， 并将人脸处理成一张遮罩图片。这样我们得到了每一帧的遮罩图片， 前端根据视频进度不断更新对应这道图片即可。
给 JS 选手的 Go 语言学习手册 https://github.com/miguelmota/golang-for-nodejs-developers
iptv(Internet Protocol television) 可以让你看世界各地的电视直播 https://github.com/iptv-org/iptv
blurhash 优化 placeholder 的显示 https://github.com/woltapp/blurhash 可以根据原图计算一个哈希，然后根据这个哈希可以直接在本地渲染一个 placeholder， 这个 placeholder 在上一个解决方案的基础上还不用占用网络带宽。
2022-10
对自己服务中的外链进行监控 直接爬虫后正则匹配网站后发送一个请求查看其是否可用即可。这里介绍一个工具，它的作用就是帮你检查网站的坏链。 使用方法非常简单，一行命令就可以了。
两行代码将 playground 集成到你的项目中 https://github.com/codesandbox/sandpack
excel 使用不同颜色区分数据 具体操作为：选择“条件格式”-“
色阶”-“红白绿色阶”，这样就使得涨幅大的数据自动显示深红色，跌幅大的数据自动显示深绿色。2022-09
库的现代化指南 https://github.com/frehner/modern-guide-to-packaging-js-library/blob/main/README-zh_CN.md2022-08
2022-05
2022-04
File System Access API来实现这个功能。 https://css-tricks.com/getting-started-with-the-file-system-access-api/ https://juejin.cn/post/7203701875530039357 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showDirectoryPicker2022-03
2022-02