月度归档： 2025 年 8 月

发布于

JavaScript内核与高级编程之：`TypeScript` 的 `infer` 关键字：其在类型推断中的应用。

各位观众老爷，早上好！我是老码，今天给大家唠唠 TypeScript 里一个非常有趣，但也常常让人挠头的关键字：infer。 别看它只有五个字母，但它在类型推断的世界里可是个大杀器。 掌握了它，你的 TypeScript 类型体操水平，绝对能上一个新台阶。 今天咱们就以讲座的形式，深入浅出地剖析 infer 的用法，保证各位听完之后，都能把它玩得溜溜的。 一、啥是 infer？ 首先，我们得明白 infer 是干啥的。 简单来说，infer 是 TypeScript 中用于 类型推断 的一个关键字。 它的作用是：在条件类型中，允许我们声明一个类型变量，并让 TypeScript 自动推断出该变量的类型。 有点绕是吧？ 没关系，咱们慢慢来。 想象一下，你是一位侦探，需要根据一些线索（类型条件）来推断出嫌疑人（类型变量）的身份。 infer 就相当于你手中的放大镜，帮助你从线索中提取出关键信息。 二、infer 的基本语法 infer 总是出现在条件类型中，它的基本语法是这样的： type MyType<T> = T extends SomeType<infer U&gt …

继续阅读“JavaScript内核与高级编程之：`TypeScript` 的 `infer` 关键字：其在类型推断中的应用。”

发布于

JavaScript内核与高级编程之：`TypeScript` 的 `Conditional Types`：其在泛型编程中的条件判断。

各位靓仔靓女们，很高兴今天能和大家聊聊 TypeScript 里的一个相当酷炫的玩意儿——条件类型（Conditional Types）。这玩意儿，听起来高大上，其实就是让 TypeScript 的类型系统也能玩条件判断，就像 if…else 一样。有了它，我们的类型定义就能更加灵活，更加智能，简直是泛型编程的福音！ 开场白：TypeScript 类型系统的一点抱怨 说实话，在没遇到条件类型之前，我对 TypeScript 的类型系统是又爱又恨。爱的是它能帮我揪出很多低级错误，恨的是有时候它太死板了，稍微复杂一点的逻辑就搞不定。 比如，我想定义一个函数，如果传入的是字符串，就返回字符串的长度，如果传入的是数字，就返回数字的平方。这在 JavaScript 里简直是小菜一碟，但在 TypeScript 里，如果没有条件类型，就得用各种类型断言或者函数重载，代码一下子就变得臃肿不堪。 // 传统的做法，略显笨拙 function processData(input: string): number; function processData(input: number): number …

继续阅读“JavaScript内核与高级编程之：`TypeScript` 的 `Conditional Types`：其在泛型编程中的条件判断。”

发布于

JavaScript内核与高级编程之：`TypeScript` 的 `Mapped Types`：如何使用映射类型转换对象类型。

晚上好，各位未来的代码大师们！今天咱们来聊聊 TypeScript 里一个相当酷炫的东西——映射类型 (Mapped Types)。这玩意儿，说白了，就是让 TypeScript 拥有了批量处理对象类型的超能力。你想批量把一个类型的属性变成只读？想让所有属性都变成可选？有了映射类型，So easy！ 一、啥是映射类型？（别怕，没那么高深） 想象一下，你有一堆饼干，每块饼干都有不同的配料。现在你想给每块饼干都加一层巧克力酱。你会怎么做？一块一块手动涂？太累了吧！映射类型就像一个巧克力酱机器，你把所有饼干（类型）放进去，它自动给每块饼干（属性）都涂上巧克力酱（某种转换）。 用更专业的术语来说，映射类型允许你基于一个已有的类型，创建一个新的类型，新类型的每个属性都经过某种转换。这种转换可以包括： 将属性变成只读 (Readonly) 将属性变成可选 (Partial) 移除属性的只读或可选修饰符 改变属性的类型 等等… 二、映射类型的基本语法：像写作文一样简单 映射类型的语法长这样： type NewType<Type> = { [Property in keyof …

继续阅读“JavaScript内核与高级编程之：`TypeScript` 的 `Mapped Types`：如何使用映射类型转换对象类型。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `Web USB` API：其在 `JavaScript` 中与 `USB` 设备通信。

嘿，各位码农朋友们，准备好了吗？今天咱们来聊点硬核的——Web USB API！ 话说，你们有没有觉得，JavaScript这玩意儿，就像个“变形金刚”，啥都能干。以前只能在浏览器里耍耍花枪，现在连USB设备都想染指了。是不是有点不敢相信？别急，今天就带大家伙儿看看，这Web USB API，到底是个什么鬼，怎么玩儿！ 一、啥是Web USB？先来个“相亲介绍”！ Web USB API，简单来说，就是让你的网页，通过JavaScript，直接和USB设备“勾搭”上。想想看，以前要搞个硬件交互，那叫一个麻烦！要么装插件，要么搞Native App，现在呢？浏览器直接上，方便快捷，简直就是硬件开发者的福音！ 但凡事都有两面性，Web USB这玩意儿，安全问题也是个大头。毕竟，直接操作硬件，搞不好就搞出大新闻了。所以，浏览器厂商们也是小心翼翼，加了不少安全限制。 二、安全第一！“恋爱”之前先验明正身！ 既然是直接操作硬件，安全问题必须放在首位。Web USB API也不是你想用就能用的，必须满足以下几个条件： HTTPS： 必须是安全的HTTPS协议，否则免谈！毕竟，明文传输，啥秘密都泄露 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `Web USB` API：其在 `JavaScript` 中与 `USB` 设备通信。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `Portals` 提案：如何在 `Web` 应用中嵌入其他页面。

各位靓仔靓女们，大家好！我是你们的老朋友，Bug Killer。今天咱们来聊点新鲜玩意儿，一个可能会改变Web应用交互方式的提案——Portals。 这玩意儿，说白了，就是让你的网页能像俄罗斯套娃一样，嵌套其他网页，而且性能和用户体验还倍儿棒。是不是听起来有点像<iframe>？别急，听我慢慢道来，告诉你Portals比<iframe>强在哪儿，以及它到底是怎么运作的。 Part 1: 为什么我们需要 Portals？<iframe>它不香吗？ <iframe>，这老家伙我们用了这么多年，的确解决了不少问题，比如嵌入第三方内容，隔离样式和脚本等等。但是，它也有一堆让人头疼的毛病： 性能问题： 每个<iframe>都相当于一个独立的浏览器上下文，加载和渲染都需要额外的资源，页面多了，性能直接爆炸。 SEO不友好： 搜索引擎很难抓取<iframe>里面的内容，这对于需要SEO优化的网页来说简直是噩梦。 交互体验差： <iframe>和主页面之间的通信比较麻烦，需要用到postMessage等机制，而且还有跨 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `Portals` 提案：如何在 `Web` 应用中嵌入其他页面。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `WebAssembly`：如何将 `C++` 代码编译成 `Wasm`，并在 `JavaScript` 中调用。

各位老铁，双击666，今天要跟大家唠唠嗑，不对，是聊聊硬核的 WebAssembly。咱们的目标是：把 C++ 代码编译成浏览器能跑的 Wasm，再用 JavaScript 像使唤丫鬟一样使唤它。 第一部分：WebAssembly 是个啥？ WebAssembly (简称 Wasm)，你可以把它想象成一个轻量级的虚拟机，但这个虚拟机不是跑操作系统那种，而是专门跑代码的。它的特点是： 快！ 比 JavaScript 快得多，因为它是编译型的，直接运行机器码。 安全！ 在沙箱里运行，不会直接访问你的电脑。 可移植！ 几乎所有现代浏览器都支持。 简单来说，Wasm 就是为了解决 JavaScript 在性能密集型应用上的不足而生的。比如，游戏、图像处理、音视频编码等等。 第二部分：Emscripten：C++ 到 Wasm 的桥梁 要让 C++ 代码变成 Wasm，我们需要一个工具，这个工具就是 Emscripten。Emscripten 是一个 LLVM 编译器，它可以把 C++ 代码编译成 Wasm 字节码，还能生成一些 JavaScript 代码，方便我们在 JavaScript 中调 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `WebAssembly`：如何将 `C++` 代码编译成 `Wasm`，并在 `JavaScript` 中调用。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `Web Workers`：其在 `React` 中的多线程渲染实践。

各位靓仔靓女们，晚上好！我是你们今晚的JavaScript特邀讲师，今天咱们聊点刺激的——如何在React里玩转Web Workers，让你的页面不再卡成PPT。 开场白：单线程的苦恼 想象一下，你正在用React做一个超复杂的图表，或者一个需要大量计算的动画。你的浏览器只有一个线程在跑，所有事情都得排队。结果就是，用户点击一下按钮，页面卡顿半天，体验直线下降。这就好像只有一个快递员，却要负责整个城市的包裹，效率可想而知。 这就是JavaScript单线程的痛点。但是，别担心，Web Workers就是来解决这个问题的！ Web Workers：你的私人线程 Web Workers允许你在后台运行JavaScript代码，而不会阻塞主线程。你可以把那些耗时的计算、数据处理或者渲染任务扔给它们，让它们在另一个线程里默默工作，主线程就可以继续响应用户的操作。这就好像你雇佣了一批快递员，专门负责处理一部分包裹，大大提高了效率。 Web Workers的基本用法 Web Workers的使用并不复杂，主要分为以下几个步骤： 创建Worker对象： const worker = new Work …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `Web Workers`：其在 `React` 中的多线程渲染实践。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `WebRTC`：其在 `P2P` 实时通信中的工作原理。

各位靓仔靓女们，今天咱们来聊聊一个听起来高大上，用起来贼方便的技术——WebRTC，也就是网页实时通信技术。想必大家或多或少都用过视频会议、在线聊天之类的应用，它们背后可能就有WebRTC的身影。今天咱们就一起扒一扒它的裤子，看看它在P2P实时通信中到底是怎么运作的。 一、什么是WebRTC？它为啥这么牛？ WebRTC，全称Web Real-Time Communication，是W3C搞出来的一套开放源代码标准。简单来说，它让浏览器拥有了实时音视频通信的能力，而且无需安装任何插件。是不是很酷？ 不用插件： 告别Flash、Java Applet这些老古董，拥抱原生浏览器能力。 实时性强： 延迟低，保证音视频通信的流畅性。 免费开源： 大家都可以用，都可以改，社区支持强大。 P2P能力： 理论上支持浏览器之间直接通信，减少服务器压力（当然，实际应用中往往需要服务器辅助）。 二、WebRTC的核心API和流程： WebRTC的核心API主要有三个： getUserMedia： 获取用户的音视频流。相当于你的麦克风和摄像头，是通信的原材料。 RTCPeerConnection： 建立点对 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `WebRTC`：其在 `P2P` 实时通信中的工作原理。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `FileSystem` API：如何在浏览器中进行沙盒化的文件系统操作。

各位观众，大家好！ 今天咱们来聊聊一个有点神秘，但又非常实用的东西：JavaScript 的 FileSystem API。 别担心，虽然名字听起来像是在操作系统底层搞事情，但其实它非常友好，而且是在浏览器里跑的“沙盒化”文件系统。 啥叫沙盒化？ 就是说，它不会让你直接访问硬盘上的文件，而是在浏览器里给你划出一块安全的地方，让你尽情玩耍，不用担心把系统搞崩。 一、 为什么要用 FileSystem API？ 可能有人会问，都 2024 年了，我们有各种云存储、本地存储方案，为啥还要用这个看起来有点古老的 FileSystem API 呢？ 它的价值体现在以下几个方面： 离线应用支持： 如果你的应用需要处理大量数据，并且希望用户在离线状态下也能访问和修改，FileSystem API 就可以派上大用场。 比如，一个离线笔记应用，或者一个简单的离线图像编辑器。 高性能数据处理： 直接操作文件，比频繁读写 localStorage 或 IndexedDB 效率更高。特别是处理大文件的时候，优势更明显。 模拟本地文件系统： 某些场景下，你可能需要模拟一个本地文件系统的结构，例如，构建一个在线 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `FileSystem` API：如何在浏览器中进行沙盒化的文件系统操作。”

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `Credential Management` API：其在无密码登录中的工作流。

各位靓仔靓女们，早上好/下午好/晚上好！（取决于你们什么时候看这篇文章啦~）我是你们的老朋友，今天咱们来聊聊一个很酷炫的技术——JavaScript的Credential Management API，以及它在实现无密码登录中的神奇作用。 准备好你的咖啡或者茶，咱们开始今天的旅程！ 一、密码，你的名字叫麻烦 在咱们深入Credential Management API之前，先来吐槽一下密码这玩意儿。 用户角度： 记不住！记不住！就是记不住！要么是忘记密码，要么是设置了一堆复杂的密码，最后自己也忘了。然后就是无尽的重置密码流程，简直让人崩溃。 开发者角度： 存储！加密！安全！各种安全漏洞让你提心吊胆。万一数据库被黑，用户密码泄露，那就等着挨骂吧。 所以，大家都想摆脱密码这个大麻烦。那么，怎么才能在保证安全的前提下，让用户摆脱记住密码的痛苦呢？Credential Management API就是来拯救大家的！ 二、Credential Management API：无密码登录的利器 Credential Management API是一组JavaScript接口，它允许网站以编程方式访问 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `Credential Management` API：其在无密码登录中的工作流。”