Vue 3 中使用 JSX 如何绑定 scopeId
vue3 scopeId
前言 在特定情况下，我需要在 SFC 组件中使用 JSX 的方法进行部分页面内容处理，但是在默认的情况下，JSX 并不会带 scopeId，这导致我不能通过 scope css 的方法修改 JSX 的样式。在 jsx 这个插件的 github issues 中，查找到了在组件中带上组件 scopeId 的方法，虽然略显累赘，但终归是可以用。 方法 在 vue 中，导出对象有 withScopeId 这样一个函数，它可以传递一个 参数1：scopeId 前组件的 scopeId 执行后，它会返回另一个函数 withCtx。 这个 withCtx 函数可以传递两个参数，执行后返回 renderFnWithContext，它的返回值是一个带 scopeId 的 VNode。 参数1：fn jsx 函数，签名 () => JSX.Element 参数2：ctx vue 实例，ComponentInternalInstance | null | undefined 至此，我们的 JSX 就带上了 scopeId。 封装成成一个简单的 hooks 供调用 hooks.ts samp
阅读全文/ /JavaScript 基础知识复习一
Number.MAX_SAFE_INTEGER 最大安全整数 Number.MAX_SAFE_INTEGER 是 number 类型能表示的最大安全整数，为 9007199254740991，如果数字大于这个数，就会不再精确，比如常见的情况是，后端用 long 类型定义 id，因为 long 类型最大值是 9223372036854775807，这个数比 JS 的最大安全整数大很多，如果后端用了比 Number.MAX_SAFE_INTEGER 大的数作 id，前端在接收到 JSON 字符串，并格式化后，就会丢失精度。 解决方案是让后端用 String 类型传递 id。 如果是在前端需要对这么大的数进行运算，可以引入第三方库（如 decimal.js）处理，也可以用 JS 新数据类型 BigInt 进行处理。 相关知识：Number.MIN_SAFE_INTEGER 最小安全整数、Number.EPSILON 最大浮点误差值
阅读全文/ /sessionStorage 的继承
sessionStorage
前言 在现代浏览器中，sessionStorage 存储的内容，一般情况下只可以在当前打开的 tab 页使用。但这样也存在问题，用户打开其他的页面那就没有 sessionStorage 了？ 测试 其实，sessionStorage 有一套 “继承” 的机制，使得不同 tab 页中可以传递。以下测试研究 sessionStorage 的 “继承” 机制。（sessionStorage 不支持跨域，跨域了在任何时候都不能 “继承”，下面的测试都是同域测试）。 1. a 标签直接跳转 通过这种方式，其实 tab 并没有变化，这并不存在 “继承” 的问题，原来的 sessionStorage 依然可用。 2. a 标签设置 target="_blank" 跳转 这种方式会导致 sessionStorage 丢失，也就是并不能 “继承”。 3. window.open() 方法跳转 这种方法可以 “继承” 源页面的 sessionStorage。 测试总结 可以看到，当前 tab 页打开链接，不存在需要 “继承” 的问题，这很好理解。因为 tab 与 sessionSto
阅读全文/ /JavaScript 实现树状数组构造函类
树状数组 JavaScript
在力扣上刷题时，遇到非常有意思的一种数据结构，可以方便计算前缀和的同时，还可以进行单点更新。它就是树状数组。 在网上并没有搜索到太多树状数组的 JavaScript 相关代码，所以在这里自己动手实现一个树状数组类。
阅读全文/ /shift 和 unshift 函数的时间复杂度问题
测试 关于在数组中使用 shift() 和 unshift() 方法，基于数组的特性，相较于 pop() 和 push() 方法应该是会存在时间复杂度上的劣势的。 下面就用代码验证一下自己的想法： 通过轮流注释下面几行代码，就得出了，以下结果 方法 次数 多次运行平均时间 unshift 1000 29ms unshift 10000 315ms shift 1000 27ms shift 10000 242ms push 1000 0ms push 10000 0.5ms pop 1000 0ms pop 10000 0.5ms 总结 因为数组是在有序排列的数据结构，在进行 unshift() 和 shift() 操作时，需要在数组的开始位置插入或删除元素，导致整个数组的其他元素均需要移动，这样就导致了需要大量时间进行数组元素移动操作，时间复杂度为 O(n)。 在开发中如果需要进行长度较大的数组进行操作，应该尽量避免大量使用 unshift() 和 shift() 操作。不过也不必太过于严格规避，毕竟大多数时候并没那么大长度的数组，而且如只
阅读全文/ /快速排序中的 partition 函数
写了很多次 快速排序，每次都要在 partition 函数这里卡很久， 经过多次总结，发现这样写的 partition 函数最简洁。自己 Mark 一下。
阅读全文/ /记录一个算法刷题经验分享网站
leecode 算法
LABULADONG 的算法网站 站主会分享他刷题的思路，和一些算法知识，非常适合算法初学者学习。 他还推荐了一些题目给我们练习，跟着一起练习会起到非常好的效果。
阅读全文/ /for/while/for in/ for of 循环速度测试
最近一直在学算法，发现循环的时候不同的循环方式有不一样的速度。 下面用遍历数组这种典型的情况测试各循环 for/while/for in/for of的速度差异。 for 循环 结果 Node 12ms，Chrome 22ms。 while 循环 结果 Node 12ms, Chrome 45ms，Chrome 下比 for 循环慢，但 Node 中都差不多。 for in 循环 结果 Node 6888ms, Chrome 8507ms，慢得令人发指。当然，他本来就不是为了遍历数组而生的，它的出现是为了遍历对象。 for of 循环 结果 Node 200ms，Chrome 250ms，比 for in 好太多了，但这种方法拿不到索引，实用性不强，这个方法在 Chrome 中测试差异比较大，测试时经常可以看到 50ms 左右的差异，也就是浮动在 25% 左右。 总结 结论 for > while > for of > for in。for/while 与其他循环的方法根本不在一个次元的产物。 最后也测试 forEach() 函数遍历的速度，结果是 Node 229m
阅读全文/ /
- 1
- 2
- 3
- 4