获得徽章 23
#每天一个知识点# indeterminate 是一个较少用到的属性,一般用在 checkbox 中,比如常见的一组 checkbox 外层有一个 checkbox 来控制全选状态,如果其中只选中了一部分则可以使用 indeterminate 来将 checkbox 置为模糊态。css 中也存在对应的伪类 :indeterminate。
需要注意 indeterminate 是一个 dom 属性不是 html 的属性无法直接在 html 中设置。
#每天一个知识点# css :has 选择器可以用来做选择器逆推逻辑,从而实现父类选择器、前兄弟选择器等。
比如 .a:has(.b) 即可选中子孙符合 .b 的 .a 元素,而 .a:has(+.b) 则可选中 .b 相邻前面的 .a
#每天一个知识点# HTML 添加了新的元素 dialog,可以调用 dialog 元素的 showModal 方法将其显示为一个 modal 框,得益于 web 的发展速度,越来越多原来需要实现的东西都在慢慢的标准化。
#每天一个知识点# importmap 已经在所有主流浏览器中获得支持,后续可以直接使用 importmap script 块声明要引入的 es module 的名称和地址的映射,然后直接 import 模块名即可。
#每天一个知识点# CSS 选择器已经原生支持嵌套语法,& 符号可以省略,CSS 变量和嵌套语法,感觉在大多数情况下都可以不再使用 sass 之类的预处理器了
#每天一个知识点# 浏览器已原生支持调用文件选择器。以前需要实现类似操作需要生成一个隐藏的 file input 框然后模拟该 input 框的点击事件来触发。现在可以直接使用 showOpenFilePicker 来主动调用文件选择器,且可支持使用 multiple、types 来支持多选和文件类型,并且还支持了 excludeAcceptAllOption 可以用来避免用户强制切换到选择所有文件。
不过该 API 目前还在试验阶段,需要在浏览器中开启才可使用。
#每天一个知识点# 不用再手撸 deepClone 了,浏览器开始原生支持 structuredClone,使用 structuredClone 就可以直接深克隆,并且还支持 transfer 来保留特定的属性。
#每天一个知识点# 浏览器已经原生 popover,通过 popovertarget 和目标 popover 元素的 id 绑定,即可实现 popover 功能,不过还在试验阶段。
#每天一个知识点# 要使用 React 实现完整的 SSR 功能需要进行以下操作:
1. 在 server 端引入组件,需要清理组件中的浏览器依赖,服务端需要支持解析 jsx
2. 使用 renderToString 将组件渲染为字符串,返回给前端
3. 在前端使用 hydrate 复活组件交互,所以还需要在服务端拼接 js 文件引用
4. 需要在前端和服务端约定好共享的初始 props
#每天一个知识点# 使用 JS 可以直接解析 excel 文件,其解析原理是 excel 文件其实是一个 zip 包,其中包含了一些 xml 配置文件。所以要解析 excel 我们只需要通过 JS 对该文件使用 zip 解压,然后按照 excel 协议解析其中的 xml 文件读取数据。所以也同样可以对 excel 进行编辑,修改 xml 后直接通过 JS 进行 zip 压缩即可。
下一页