欢迎来到第 24 期的【视界修炼 – 技能周刊】，下面是本期的精选内容简介。
强烈引荐
- CSS 原生嵌套语法
- 原生支撑的深复制
- locatorjs
开源&东西
- OpenAI GPT 衍生玩具
- madge – 文件依靠联系图生成
- monkeytype – 打字速度测验
文章&资讯
- 新的js事件 – scrollend
- CSS 下划线款式
- 终端里运转Chrome
也引荐我们关注一下最后的引荐内容（周刊的主要内容来源途径）
下面开端本期内容的介绍，估计阅览时间 8 分钟
强烈引荐
1. CSS 原生嵌套语法
从 Chrome 109 开端供给试验性支撑 112 正式发布
下面看个简略的比如
ul li{
color: red;
}
允许嵌套后等价于
ul {
& li {
color: red;
}
}
更多语法示例 移步 => w3c – css-nesting
实验性 flag 翻开步骤：① 访问 chrome://flags/ ② 查找并翻开 Experimental Web Platform features flag
2. 原生支撑的深复制
这个特性出来有一段时间了，笔者最新才 Get 到
语法如下（办法挂在window上，第二个参数可选）
structuredClone(value)
structuredClone(value, { transfer })
支撑常见的类型（值类型，对象，数组，Set，Map，RegExp等等），详见 结构化克隆支撑的类型。
来看个demo（运用十分简略）大部分场景能够替代lodash deepClone 不兼容场景也可配合 babel + corejs 引进 polyfill
const obj = { name: 'xm', hobby: ['coding', 'reading'] }
const obj2 = structuredClone(obj)
console.log(obj === obj2); // false
console.log(obj.hobby === obj2.hobby); // false
下面看一下浏览器支撑程度
题外话：以后边试被问深克隆，又有多的选择了，当然面试官仍是会叫你手写
3. locatorjs
本周搭档安利的一个 Chrome 插件（也有npm包）
装上后支撑开发环境下点击网页元素直接经过Vs Code 翻开源码（无需改造代码，常见框架均支撑）
下面看个demo（以笔者的博客为例 Vitepress）
强烈引荐我们装置体验一下，尤其是在多人经手的项目里，组件文件十分多，平时找起来较麻烦，用这个能一步到位
开源&东西
4. OpenAI GPT 衍生玩具
4.1 ATA
Ask the Terminal Anything (ATA): OpenAI GPT in the terminal
支撑在终端东西里用对话的形式调用的CLI东西，只需要配置一个 api key 即可
4.2 周报生成器
这个好用，能对美化一下案牍，供给灵感，防止每次周报内容千篇一律（挤牙膏）
下面是运用示例
假如想自己调用API建立一个，可经过下面2步搞定
- ① 注册 chatGPT
-
② 获取 api keys
- 每个账户有
18$的免费调用额度，按次计费，一天常规运用费用不到0.1$，用几个月仍是没问题的
- 每个账户有
5. madge – 文件依靠联系图生成
用于生成某个项目或许文件和依靠引进联系图 支撑多种导出格局
做一些依靠或引用剖析的东西时能够用上
6. monkeytype – 打字速度测验
如题，测验你的键盘敲打速度和正确度
供给多种场景的案牍(包含但不限于写作，编码 当然不支撑中文)
下面一起来看看笔者的“手速”(emm 30s)
emmm，这个让我想起了曾经中学时期的金山打字游戏，警察抓小偷 教师还说我的指法不正规（瞎探索的）
文章&资讯
7. 新的js事件 – scrollend
element.addEventListener("scrollend", (event) => {
console.log('scrollend')
});
8. CSS 下划线款式
网站供给下划线款式的方便生成，并介绍了下划线的长处
Get 很久没有用到的 text-decoration 特点用处
国内内容站点用 下划线的比较少，在画内容页面，案牍部分杰出的时候能够考虑一下
9. 终端里运转Chrome
暂时不知道能干嘛，但确实很酷
趣图
篇幅有限，假如你还没看够，可移步后边的引荐途径，继续旅游，前史周刊（<20）移步博客
⭐️强力引荐关注
- 阮一峰: 科技爱好者周刊 – 记载每周值得共享的科技内容，周五发布
- 云谦：MDH 前端周刊 – 前端资讯和共享
- 童欧巴：前端食堂 – 你的前端食堂，吃好每一顿饭
- rottenpen：FE News – 共享前端，日子
- 常识星球：咲奈的平行时空 – 前端前沿技能、资讯、办法论共享
