前端技术周刊

🍦 资讯动态

01 TypeScript 5.6 Beta：在编辑器中的区域优先诊断

02 CSS font-size-adjust 现已处于 Baseline 中：这个属性可以帮助防止在加载字体时布局发生位移，并确保在较小字体大小下替代字体的可读性。

03 必须消除第三方cookies：在看到Google宣布他们不再计划弃用第三方cookies的消息后，W3C 希望就此明确立场。 

04 uni-app 官方教程：开发鸿蒙应用

鸿蒙开发支持Vue3，不支持Vue2、不支持plus、但支持nvue

nvue编译到鸿蒙后非原生渲染，而是与web一样渲染（自动注入一些默认样式进行兼容）

🧩 开发类库

01 is-online(1.2k star) 

用于检查当前网络是否连接

在浏览器中，虽然已经有 navigator.onLine 属性，但它并不太有用，因为它只能告诉你是否有本地连接，但不能告诉你互联网是否可访问。

02 Swapy（1.9k star） 

一个与框架无关的工具库，可将任何布局转换为可拖拽交换位置的布局。

官网 deme：Swapy – Easy Drag-to-Swap Solution

🏔️ 技术博文

01. Vue3 用了组合式 (Composition) API 后代码变得更乱了，怎么办？

• 组合式 (Composition) API 的一大特点是“非常灵活”，但也因为非常灵活，每个开发都有自己的想法。

• 加上项目的持续迭代导致我们的代码变得愈发混乱，最终到达无法维护的地步。

• 本文是作者这几年使用组合式API的一些经验总结，希望通过本文让你也能够写出易维护、优雅的组合式 API 代码。

02. Hybrid 应用低成本的 H5 秒开方案 - 接口预请求

• 作为直接面向用户的前端开发人员，我们都知道页面首屏打开速度的重要性，直接关系到用户的留存。

• 提升 H5 页面打开速度的方法也有很多，当优化达到一定程度，想要继续仅基于 H5 自身优化已难以再提升，就需要和客户端合作，提升 H5 页面的打开速度，比如离线缓存、预加载等。

03. 为什么未知类型（Unknown Types）很有用

• 当外部数据进入你的程序时，除非你进行验证，否则你无法真正确定它的类型。比如某个库的输出信息、某个 API 的响应，尤其是用户输入……你确定它们就是你想的那样吗？

• 在你检查之前，给这些数据分配的最准确类型就是表示“我实际上不知道”的类型。

04. Popover API 101

• 最近，浏览器以非常快的速度引入了一些重要的功能。许多以前需要多个 JavaScript（或 CSS）库才能实现的功能，现在浏览器中已经开箱即用。

• 从对话框（Dialogs）到弹出提示（Popovers）！可以用来创建弹出提示的 Popover API 现在在大多数现代浏览器中都已经广泛支持。

• 在本文中，作者介绍了 Popover API 的基本知识，以及如何以最简洁的方式使用它来创建弹出提示。

05. Scroll，你玩明白了嘛？-- 腾讯 IMWeb 前端团队

• 本文介绍了关于 scroll 的一些 api 使用，原生 scrollIntoView 的坑以及区分人为滚动和脚本滚动的实现参考

• 滚动，这一个看似微小的交互点，实际上可能隐藏着不少的工作量，在往后的评估或者实践中，需要多加重视和思考，隐藏在交互体验之下的复杂逻辑。