前段时间在 GitHub 上看到一个 Vue 异步计算属性的库 - vue-async-computed, 将异步操作转化为计算属性, 例如这样用

1
2
3
4
5
6
7
8
9
10
11

new Vue({
  data: {
    userId: 1
  },
  asyncComputed: {
    username () {
      return Vue.http.get('/get-username-by-id/' + this.userId)
        .then(response => response.data.username)
    }
  }
}

好奇其中原理, 看了源码, 了解其中巧妙的实现思路, 绘制了一张核心思路的原型图.

接下来我们实现一个简(阉)易(割)版本的 vue-async-computed 插件,

趁着 beforeCreate 往 data 中添加 asyncComputed 的 key, 使之响应式.

本文将简要介绍一些工具泛型使用及其实现, 这些泛型接口定义大多数是语法糖(简写), 甚至你可以在 typescript 包中的 lib.d.ts 中找到它的定义, 最新版的 typescript (2.9) 已经包含了大部分, 没有包含的我会特别指出.

Partial

Partial 作用是将传入的属性变为可选项.
首先我们需要理解两个关键字 keyof 和 in, keyof 可以用来取得一个对象接口的所有 key 值.
比如

最近自己的一个项目使用了 RxJS 进行状态管理, 需要在组件中订阅流来获取全局状态， 但是在组件卸载的时候需要手动取消订阅流.
这样写起来有点繁琐，所以考虑用装饰器简化下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import * as React from "react";
import { Subscription } from "rxjs";
import { action$, state$ } from "../store/store";

class Artist extends React.Component {
  sub: Subscription;
  handleClick() {
    setInterval(() => {
      action$.next((state: any) => state);
    }, 1000);
  }
  componentDidMount() {
    this.sub = state$.subscribe(v => {
      console.log("artist", v);
    });
  }
  componentWillUnmount() {
    console.log("artist unsubscribe");
    this.sub.unsubscribe();
  }
  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>Click Me</button>
      </div>
    );
  }
}

export default Artist;

macos 安装

brew install nginx

然后它的默认配置存放于 /usr/local/etc/nginx/nginx.conf
默认网站托管文件存放于 /usr/local/Cellar/nginx/1.15.0/html

基本操作

启动

sudo nginx

多年来，我注意到自己在处理组件 api 和构建应用程序和库方面有一系列模式。以下是一系列如何设计组件 api 的想法、观点和建议，这会让组件更灵活、更具有组合性、更容易理解。这些规则都不是硬性的，但它们帮助我想明白了如何组织和创建组件。

提供最少的 API

正如 React 库本身的目标是 最少化 API 一样，我建议在设计组件 API 时采用类似的观点。需要学习的新内容越少，其他人就越容易知道如何使用你创建的组件，从而使它们更可容易被重用。如果有人不理解你的组件 API，那么他们重复你的工作的可能性就会增加。这是我如何创建组件的核心理念，我发现在我工作中牢记它很有帮助。

前言

一直觉得装饰器的写法有种蜜汁好感和好奇，例如 @component或者@connect(x, y)。

装饰器在 React 和 Angular 中很常见，因为这两个框架很强调类，而装饰器的作用范围正是类和类成员，来看装饰器提案的一句话

Decorators make it possible to annotate and modify classes and properties at design time.

指出了装饰器作用对象，注意到最后三个单词 at design time, 再抄袭一句话

装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数

Subject

其实一个 Observable 可以被订阅多次, 但是并不共享一个流的数据,如下例

1
2
3
4
5
6

let stream$ = Rx.of(1, 2, 3);
stream$.subscribe(r => console.log("a", r));

setTimeout(() => {
  stream$.subscribe(r => console.log("b", r));
}, 110);

输出结果

1
2
3
4
5
6

a 1
a 2
a 3
b 1
b 2
b 3

RxJS 6

操作符

一些常用的操作符

• of
• from
• first
• last
• tap
• interval
• timer
• forkJoin
• filter
• map
• switchMap
• scan
• takeWhile
• takeUtil
• take
• concat
• throttle
• debounce
• merge

of

将数字转化为 Observable

1
2

Rx.of("1", "2").subscribe(v => console.log(v));
// 输出 1, 2

高阶函数

• map
• filter
• some
• every
• reduce
• unary
• once
• pluck
• pick
• zip
• flatten
• merge
• takeLast
• uniq
• omit
• memoized
• compose
• pipe
• debounce
• throttle