Skip to content

Latest commit

 

History

History
134 lines (95 loc) · 5.33 KB

issue-0017.md

File metadata and controls

134 lines (95 loc) · 5.33 KB

MDH 前端周刊第 17 期:unplugin、SWR 1、zx 4、手写 Valtio、领域

这是 「MDH:前端周刊」 第 0017 期,发表于:2021/08/30。本期刊开源(GitHub: sorrycc/weekly),欢迎 issue 区投稿,推荐或自荐项目。

封面图:sickle @ www.unsplash.com

❄️ TL;DR

👉 GitHub CLI 2.0
👉 TypeScript 4.4
👉 unplugin
👉 JavaScript 标准库提案
👉 SWR 1.0
👉 zx 4.0
👉 DiceBear
👉 手写 Valtio 数据流
👉 领域的定义、寻找和精进

⚡ 展开讲讲

GitHub CLI 2.0

https://github.blog/2021-08-24-github-cli-2-0-includes-extensions/

1.0 是一刀切的思路,并不能满足每个开发者的需要,所以 2.0 支持扩展,开发者可以开发扩展,也可以使用别人开发的扩展。扩展以 gh- 开头的仓库,可通过 gh extension create 创建项目,实现基于 go。

TypeScript 4.4

https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/

学太多反正记不住,只写一个最有用的吧,在 function test(a: string | undefined) {} 里,之前 if (a) a.trim() 是正常的,而 const b=a; if(a) a.trim() 会报错,TypeScript 4.4 里支持这种 aliased condition 的判断,不再报错。

unplugin

https://github.com/unjs/unplugin

为构建工具设计的统一(Unified)的插件系统,支持 Vite、Rollup 和 Webpack。用 Rollup 的方式写,unplugin 处理兼容。功能方面仅支持各构建工具的交集,不支持的部分通过 hooks 手动区分处理。

JavaScript 标准库提案

https://github.com/tc39/proposal-built-in-modules

目前 stage 1,通过 js namespace 提供内置模块(或者叫标准库),比如 import { stringify } from 'js:json'

SWR 1.0

https://swr.vercel.app/blog/swr-v1

新功能如下,

  1. 功能不减尺寸减半,部分功能支持 path import,比如 swr/infinite
  2. 支持 SSR、ISR、SSG 场景下使用 Fallback Data,也可用于测试时 MOCK API,缺点是两份数据,一份 html,一份 api 接口
  3. 通过 swr/immutable 支持 Immutable Mode,此模式下会禁用 revalidation 且只请求一次
  4. 自定义 Cache Provider,默认是空 Map,具体场景比如 mutate cache 里的多个 key,实现基于 LocalStorage 的长效缓存等
  5. 支持中间件,允许在 SWR hooks 执行之前和之后进行扩展,具体场景比如给请求打日志、修改数据显示状态比如延迟更新、序列化 Object 类型的 key 等

zx 4.0

https://github.com/google/zx/releases/tag/4.0.0

上了两个期待已久的特性,1) 支持 path,2) 支持 cjs 输出,这意味着可以用 esno 或 ts-node 直接跑 zx 脚本;但也有个不喜欢的改动,用 ts 写时 zx 的功能需要 import 才能用 。

DiceBear

https://github.com/dicebear/dicebear

DiceBear is an avatar library for designers and developers. You can choose between simple identicons and lovely designed characters.

手写 Valtio 数据流

https://blog.axlight.com/posts/how-valtio-proxy-state-works-vanilla-part/

  1. 基于 Proxy
  2. 通过 set 记录变更,比如 let version = 0; const foo = new Proxy({}, set() { version += 1; }) 然后 foo.bar = 1 就能记录了
  3. 提供 snapshot 方法访问当前快照,version 有变时才生成新的
  4. 提供 subscribe 方法,在 set 里执行注册的所有 listener
  5. 通过 snapshot + subscribe 把 mutable state 连接到 react
  6. 除此之外,还要支持嵌套对象、以及对象是数组的场景
  7. 然后基本流程就 ok 了,但别高兴,这不是结束,而是开始,接下来需要面对的是大量的 edge case

代码,

let version = 0;
let lastVersion;
let lastSnapshot;
const listeners = new Set();

const p = new Proxy({}, {
  set(target, prop, value) {
    ++version;
    target[prop] = value;
    listeners.forEach((listener) => listener());
  },
});

const snapshot = () => {
  if (lastVersion !== version) {
    lastVersion = version;
    lastSnapshot = { ...p };
  }
  return lastSnapshot;
};

const subscribe = (callback) => {
  listeners.add(callback);
  const unsubscribe = () => listeners.delete(callback);
  return unsubscribe;
};

subscribe(() => {
  console.log('mutated!');
});

p.a = 10; // shows "mutated!"
console.log(snapshot());  // ---> { a: 10 }
p.b = 20; // shows "mutated!"
console.log(snapshot()); // ---> { a: 10, b: 20 }

领域的定义、寻找和精进

https://mp.weixin.qq.com/s/lFQhP9LvjN2BBxUkZl3YCg

每期一个非技术类的文章分享。

  1. 努力很重要。更重要的是,你选择在什么领域努力。
  2. 可是,什么是「领域」?它跟兴趣、项目有什么区别,又有什么联系?为什么你必须认真地思考,自己要往哪个方向发展?
  3. 你所在领域,最重要的问题是什么,为什么你没有致力于其中之一? -- Richard Hamming

🕒 订阅

本周刊每周一发布,同步更新在语雀 「mdh/weekly」 和微信公众号。 微信搜索 「云谦」 或者扫描二维码,即可订阅。

(完)