2025/08/18-2025/08/24
基于Ant Design的一套Ui框架
该框架基于Ant Design，完全兼容Antd组件，它是为构建AIGC web应用而生。并且目前仅支持ESM。 资料：https://ui.lobehub.com/
ES2025提案中的一些方法
- 类似switch的匹配模式 match() {when({}) -> (
- 原生不可变数据结构，不再依赖第三方库 #{} #[]
- 异步上下文传播，允许上下文在异步操作之间持久化
- 原生支持导入json
- 管道操作符 userInput |> parseFloat(%) ｜>不断下去，解决类似Math.round(Math.abs(Math.sqrt(parseFloat(userInput))));这种嵌套
资料：https://github.com/tc39/ecma262
Observer Api
Chrome 135+中开始支持,如果浏览器原生支持那么是否能够替代Rxjs。不过该ApI也是参考RXJS来实现的。
// 方式1
const button = document.getElementById("myButton");
button.when("click")
.subscribe({
next: (event) => console.log("点击坐标:", event.clientX, event.clientY),
error: (err) => console.error("事件错误:", err),
complete: () => console.log("监听已终止") // DOM移除时自动触发
});
// 方式2-手动创建
function listen(element, eventName) {
return new Observable(observer => {
// Create an event handler which sends data to the sink
let handler = event => observer.next(event);
// Attach the event handler
element.addEventListener(eventName, handler, true);
// Return a cleanup function which will cancel the event stream
return () => {
// Detach the event handler from the element
element.removeEventListener(eventName, handler, true);
};
});
}
// Return an observable of special key down commands
function commandKeys(element) {
let keyCommands = { "38": "up", "40": "down" };
return listen(element, "keydown")
.filter(event => event.keyCode in keyCommands)
.map(event => keyCommands[event.keyCode])
}
let subscription = commandKeys(inputElement).subscribe({
next(val) { console.log("Received key command: " + val) },
error(err) { console.log("Received an error: " + err) },
complete() { console.log("Stream complete") },
});资料：https://github.com/tc39/proposal-observable
资料2：https://github.com/WICG/observable
提升用户交互体验
通过分析performance的任务面板，优化长任务（超过50毫秒耗时的任务），因为JS的运行是单线程的，如果有一个任务长时间占用就会产生一种与页面交互卡顿的错觉。
- 拆分长任务成多个小任务
- 利用setTimeout/promise把任务推到主线程之后执行实现让步
- 让步的另外一种方式scheduler.yield() scheduler任务调度API是浏览器原生支持的，yield()的作用是把主线程的控制权交给浏览器，后续继续从中断处继续执行 以上三点结合使用能让用户在网页的交互上更加体验更加丝滑。
其实除了优化在使用中的过程，还能优化于首屏加载中。例如在Vue中很多人可能都喜欢在mounted或者created中获取当前所需数据，想一下如果一个页面多个模块需要单独获取数据那么就会给用户一种首屏空白时间过长的错觉，但是如果我们结合上述三点来优化一下再加上做一个骨架屏是否能让用户感知更流畅些？
资料：https://web.dev/articles/optimize-long-tasks?hl=zh-cn
打包构建分析工具Rsdoctor
8月份发布的1.2版本。该工具为Rspack量身打造，同时完全兼容webpack。 新版本增强：
- 深入 concatenate module 分析，增强对最终bundle体积的优化分包能力。
- 增加Bundle体积分析支持Gzip，能看到真实上线之后的体积（记得服务端开启Gzip）
- Treemap视图增强
- 增加Rsdoctor MCP 服务，能通过提问方式分析构建依赖内容，让它给出优化建议等等
一个拼音匹配库
能够通过拼音来匹配字符串，实现类似微信/企业微信搜索框的功能，输入拼音首写字母即可匹配内容。
资料：https://juejin.cn/post/6844904161461403661
Ai在线画流程图工具
直接在线贴入你的文章内容或者描述即可帮你生成流程图。有免费的额度。
其他
关注“技术K记”公众号，不定时更新日志。大佬路过请多指点。