Skip to content

周刊第1期:搬新家了

Published:

我为什么要写周刊

前几天特地写了篇文章来分享一下我为什么要办这个周刊:《我为什么要写周刊》。

我搬新家了

在去年《2021 年度总结》有提到,我曾有过一段开小电动车上班的时光,通勤时间极短,幸福感倍高,但由于公司地址搬迁,就再也没有享受过这样的日子了,即便后来跳槽到新公司,通勤时间缩短了一半,但也要 40 分钟左右的通勤时间,所以,在租房合同到期后,我决定搬到公司附近。

但搬家真的好累,而且广州这几天连续不断地下雨,心情也变得烦躁起来,搬家过程不太顺利,期间还遗漏了物品在楼下没带上车,幸好楼下的邻居平时关系比较好,愿意帮我保管,第二天又跑回去拿。

但从明天开始就可以享受极短通勤距离的好处,想想还是蛮开心的。

分享文章

一些我本周阅读过的好文章、以及我的总结和启发;非常建议你阅读原文,而不是只看这些摘要,毕竟一千个读者就有一千个哈姆雷特,而且我的理解可能是错误的。

我对 Svelte 的看法

原文地址:《我对 Svelte 的看法》 | Randy’s Blog

简单来说 Svelte 是一个在编译时实现了 Reactivity (反应式) 的框架。

如何不用 defineProperty 实现 Reactivity:

  1. 只要在每次赋值的时候,手动执行 update 方法
  2. Svelte 在编译阶段自动帮我们做了这件事
  3. Svelte 使用了一个 label 语法($:),实现类似于 Vue 的 computed 功能。

Svelte 的跨组件通讯:

Svelte 所有功能都在编译阶段完成,并且可以写更少的代码,它相对于 React 和 Vue 更简单,不需要学太多额外的 API 和新语法。

目前的适用场景:

我的启发

学习一个框架或者一个语言,并不一定非要把它用到生产上才算真的有用。更多地是因为想看看在面对同一个问题的时候,不同的人解决问题的思路是怎样的,从而帮助我们提高自己的视野,这才是学习框架和语言真正的魅力。

Svelte 的异步更新实现原理

原文地址:《Svelte 的异步更新实现原理》 | Randy’s Blog

如何异步更新:将所有导致 UI 更新的操作统一放到一个微任务里执行。

Svelte 的实际做法:

  1. 一个组件会被编译成一个 fragment
  2. 更新操作通过 $$invalidate 包裹
  3. 触发 schedule_update() ,通知框架需要被更新,框架会维护一个 dirty_components 数组。
  4. 在微任务更新时会统一遍历 dirty_components 数组里的任务,触发组件的更新方法。

开发模式 “Development Mode” 是如何工作的?

原文地址:《开发模式 “Development Mode” 是如何工作的?》 | Dan Abramov

process.env.NODE_ENV 实际上是一个常量,在构建时会被替换成一个字符串,所以判断条件最终是:

// In development:
if ('development' !== 'production') { // true
  doSomethingDev(); // 👈
} else {
  doSomethingProd();
}

// In production:
if ('production' !== 'production') { // false
  doSomethingDev();
} else {
  doSomethingProd(); // 👈
}

以上判断条件会被「死码消除」给优化,不被执行的代码将被移除。

但是,如果写成这样,则不会奏效:

let mode = 'production';
if (mode !== 'production') {
  // 🔴 not guaranteed to be eliminated
}

因为 JavaScript 并没有智能到这种程度。

我的启发

以前看 Vue 源码的时候发现很多文件都会重复好几次这样的代码:

if (process.env.NODE_ENV !== "production") {
  if (something) {
    console.warn("something error message");
  }
}

非常好奇为什么不重构成这样:

// utils.js
const warn = (condition, message) => {
  if (process.env.NODE_ENV !== "production") {
    if (condition) {
      console.warn(message);
    }
  }
};

// something.js
warn(xxx, "something error message");

现在知道为什么了,因为前者被「死码消除」后,所有相关代码都会被移除,

而后者,相当于调用了一个空的 warn 方法。

但没想到在 Vue3 中已经这么做了:defaultOnWarn

延伸阅读:高效实现框架和 JS 库瘦身

通俗易懂的代数效应

原文地址:《通俗易懂的代数效应》 | Dan Abramov

代数效应是什么:

React 中的代数效应:

防御性 CSS

原文地址:《防御性 CSS》 | ishadeed

  1. 确保 flex 布局能够换行
  2. 确保文字过长时的间距以及换行处理
  3. 防止图片被拉伸或压缩
  4. 弹窗锁定滚动
  5. CSS 变量回退
  6. 尽量使用 min-height 固定宽度和高度
  7. 确保重置 background-repeat
  8. 使用 gap 设置 flex 布局间距
  9. 给图片设置一个 background-color,以确保图片上方的文字能够正常显示
  10. 使用 overflow: auto
  11. 图片 object-fit: cover
  12. 分组选择器只要有一个无效,则所有选择器不生效
我的启发

了解常用的防御性 CSS ,可以避免很多开发中没有意识到的问题。

SSR、SSG、ISR、DPR 有什么区别?

原文地址:《SSR、SSG、ISR、DPR 有什么区别?》 | 前端里

不优雅的 React Hooks

原文地址:《不优雅的 React Hooks》 | 蚂蚁 RichLab 前端团队

「奇怪的」规矩:

有缺陷的生命周期:

useCallback:

小结:

DevTools 实现原理

原文地址:《DevTools 实现原理》 | vivo 互联网浏览器内核团队

DevTools 架构:

内核实现

有趣的链接


作者 : 4Ark

地址 : https://4ark.me/posts/2022-02-12-weekly-01/

来源 : https://4ark.me

著作权归作者所有,转载请联系作者获得授权。