29

每日一句分享: 不乱于心，不困于情。不畏将来，不念过往。如此，安好。——丰子恺
A: 马老师发生瑟么事了
B: 我大意了没有闪
Rust 之父近日加入了亚马逊..
快餐文分享:
现代化 Web 开发实践之 PWA
https://www.infoq.cn/article/jS2oC7UgFjdJdgJLdaRs
摘要: PWA 具有快速、可靠、粘性的特点。快速即快速响应，通过独立的线程进行资源缓存，提高页面的加载时间；可靠指在不稳当的网络环境下， App 也能瞬间加载并展现内容，在离线环境下也提供用户有效反馈；粘性则是通过沉浸式的用户界面、桌面图标、消息推送等手段来增强用户的粘度。
字体跳动团队的一篇软文，前言介绍的不错，后面实践部分有点浅了。
网站分享:
分享几个我经常刷的图像网站:
视频分享:
【FunnyCoder第0期】非科班前端老司机从2K到40K之路
https://www.bilibili.com/video/BV1cV411Y77T
收获最重要的一点是: 学习是终身的任务，这是个漫长的过程也是一个值得付出的过程。
快餐文分享:
2万字20个实例解析Java8 Stream，带你玩转集合四大点！
https://juejin.cn/post/6900424495937355783
大家可以看看文中 demo，去体会 stream 背后的意义。
stream 代表得正是命令式编程与函数式编程的差异。
而我经常发现很多同学 coding 时没有此抽象能力。
就比如，我想求一个数组的和，命令式代码如下：
```
const getSum = arr => {
    let sum = 0
    for(let i = 0 ; i < arr.length; i++) {
        sum += arr[i]
    }
    return sum
}
```
函数式代码如下：
```
const sum = arr.reduce((a,b)=>a+b)
```
看起来，函数式代码更短小，但demo的意义不在于此。
我想表达的是，很多时候完全不用把行为的逻辑分为一个个“原子”操作。
这样会增加心智负担，并且维护性也不好。
有很多行为可以抽象一个原子，当这些行为可组合起来时，收益将是无穷的。

export type JsonObject = {[Key in string]?: JsonValue};
export interface JsonArray extends Array<JsonValue> {}
export type JsonValue = string | number | boolean | null | JsonObject | JsonArray;

三行代码定义 json schema 简直酷毙了

```
export type Split<S extends string, D extends string> =
string extends S ? string[] :
S extends '' ? [] :
S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] :
[S];
```
我突然明白了 TypeScript String Template Type 的意义了，原来是在类型系统是实现了一套模式匹配... 远不止修饰 key 那么简单，哇哦。 TypeScript 给我太多惊喜了...
字面类型与类型系统天然冲突。以后我们不使用 TypeScript 编程，而是使用 Type 编程 - JJC
人物分享: 安德斯·海尔斯伯格（Anders Hejlsberg） https://baike.baidu.com/item/%E5%AE%89%E5%BE%B7%E6%96%AF%C2%B7%E6%B5%B7%E5%B0%94%E6%96%AF%E4%BC%AF%E6%A0%BC/2152925
1960年12月出生于丹麦哥本哈根，曾在丹麦科技大学学习工程学，计算机科学家。Turbo Pascal编译器的主要作者，Delphi、C#和TypeScript之父，.NET(dotnet)创立者。
https://www.welcometothejungle.com/en/articles/anders-hejlsberg-microsoft-career 安德斯大叔的一次访谈, 讲了他做过的项目初衷.

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() { return #xValue; }
  set #x(value) {
    this.#xValue = value;
    window.requestAnimationFrame(this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }

  constructor() {
    super();
    this.onclick = this.#clicked.bind(this);
  }

  connectedCallback() { this.#render(); }

  #render() {
    this.textContent = this.#x.toString();
  }
}
window.customElements.define('num-counter', Counter);

https://github.com/tc39/proposal-private-methods

JS 私有变量的提案已经通过, 现在又来了个私有方法提案...

每次看到这个#var 就头疼, 太丑了吧..

这设计得毫无美感可言...

Previous19 Next18

Last updated 3 years ago

class Counter extends HTMLElement { #xValue = 0; get #x() { return #xValue; } set #x(value) { this.#xValue = value; window.requestAnimationFrame(this.#render.bind(this)); } #clicked() { this.#x++; } constructor() { super(); this.onclick = this.#clicked.bind(this); } connectedCallback() { this.#render(); } #render() { this.textContent = this.#x.toString(); } } window.customElements.define('num-counter', Counter);