By 被删

更新日期:

文章目录
  1. 1. Input输入流
    1. 1.1. Driver驱动
    2. 1.2. 实现流创建和监听
    3. 1.3. 检验实现
    4. 1.4. 双向绑定
  2. 2. 结束语

因为对Rxjs的好感玩上了Cycle.js，《Cycle.js学习笔记》系列用于记录使用该框架的一些笔记。
本文我们从了解Driver驱动开始，完成Input值的设置set value，然后实现Input的双向绑定。

Input输入流

有小伙伴们把Cycle.js翻译中文了，大家可以看看中文文档。

Driver驱动

这里我们先来看看什么是Driver。
Driver其实是一些函数，它用来监听输入流，然后执行必要的副作用操作，最后可能会返回输出流。

至于抽象想象什么的，本骚年已经在《Cycle.js学习笔记5–关于框架设计和抽象》中发挥过脑洞的力量了。

Driver应该始终与某些I/O effect联系在一起。
大多数Driver，比如DOM Driver，以sink（为了描述write）作为输入，以source（为了捕获read）作为输出。

像我们要实现一个Websocket的Driver：

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 {adapt} from '@cycle/run/lib/adapt';
function makeSockDriver(peerId) {
  let sock = new Sock(peerId);
  function sockDriver(outgoing$) {
    // 添加流监听
    outgoing$.addListener({
      next: outgoing => {
        sock.send(outgoing));
      },
      error: () => {},
      complete: () => {},
    });
    // 创建流
    const incoming$ = xs.create({
      start: listener => {
        sock.onReceive(function (msg) {
          listener.next(msg);
        });
      },
      stop: () => {},
    });
    return adapt(incoming$);
  }
  return sockDriver;
}

实现流创建和监听

我们希望能通过set value的方式注入流，我们可以创建一个流，然后调用监听器：

  1. 创建流，提取出监听器。
  2. 将1步骤创建的流作为输入更新Input的value。
  3. 在调用setValue()方法时触发监听器。
  4. 将Input的change或者keyup事件流，合并3步骤更新的流，作为输出。

我们大概能得到这样一个Input：

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
31
32
33
34
35
36
37
38
@bindMethods
export class InputComponent {
  id;
  listener;
  DOM;
  inputGet;
  inputSet;
  constructor(domSource, type) {
    this.id = id++;
    // 初始化流，并提取出监听器
    this.inputSet = xs.create({
      start: listener => {
        this.listener = listener;
      },
      stop: () => {},
    }).startWith(undefined);
    // 接上设置流
    this.DOM = xs.merge(this.inputSet).map(val =>
      <input type={type} id={'input' + this.id} className="form-control" value={val} />
    );
    // 合并输入流和源流，然后输出更新值
    this.inputGet = xs.merge(domSource.select('#input' + this.id).events('keyup')
    .map(ev => ev.target.value), this.inputSet).startWith('');
  }
  getDOM() {
    return this.DOM;
  }
  getValue() {
    return this.inputGet;
  }
  setValue(val) {
    // 触发监听器
    this.listener.next(val);
  }
}

检验实现

检验的时候到了，我们通过设置一个定时器，触发Input输入的自动更新，当然，你也可以自己手动输入验证。

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
31
32
33
34
35
36
37
38
export function LoginComponent(sources) {
    const domSource = sources.DOM;
    // 登录点击和路由切换
    const loginClick$ = domSource.select('#submit').events('click')
    // 通过InputComponent注册的Input和值
    const unameInputSource = new InputComponent(domSource, 'text')
    const unameInputDOM$ = unameInputSource.getDOM()
    const unameInputValue$ = unameInputSource.getValue()
    // 设计一个定时器，每秒自增1，并输入到username的input
    let a = 1;
    setInterval(() => {
        unameInputSource.setValue(a++);
    }, 1000);
    // 合流生成最终DOM流
    const loginView$ = xs.combine(unameInputDOM$, unameInputValue$).map(([unameDOM, unameValue]) => {
        return (
            <form>
                <h1>System</h1>
                <div>
                    {unameDOM}
                </div>
                {unameValue}
                <div>
                    <a className="btn btn-default" id="submit">Login</a>
                </div>
            </form>
        )
    }
    );
    return {
        DOM: loginView$,
        router: loginClick$.mapTo("/app")
    };
}

双向绑定

我们能看到，在定时器的作用下，Input值每秒自增，同时获取到的值也触发更新。
当我们讲输入和输出连接到一起的时候，我们就实现了简单的双向绑定。前面也说过了，双向绑定只是个语法糖而已，拆开来说也就是能设置输入，并获取输出。

这时候，我们巧妙地使用get和set，就可以实现双向绑定：

1
2
3
4
5
6
7
8
9
10
11
12
@bindMethods
export class InputComponent {
  // 其他没有改变
  // 将 getValue 和 setValue 调整为 get 和 set 的方式
  get value() {
    return this.inputGet;
  }
  set value(val) {
    // 触发监听器
    this.listener.next(val);
  }
}

这样，我们在使用的时候：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export function LoginComponent(sources) {
  // ...其他
  // 通过InputComponent注册的Input和值
  const unameInputSource = new InputComponent(domSource, 'text')
  const unameInputDOM$ = unameInputSource.getDOM()
  // 通过获取值的方式
  const unameInputValue$ = unameInputSource.value
  // 设计一个定时器，每秒自增1，并输入到username的input
  let a = 1;
  setInterval(() => {
    // 通过设置的方式
    unameInputSource.value = a++;
  }, 1000);
}

塔嗒！是不是好了。

结束语

这节主要简单（真的很简单）介绍了驱动Driver，并成功地完成了之前没有完成的部分，完成Input的输入，并将Input的输入和输出衔接在一起，对外呈现出一种双向绑定的方式。
此处查看项目代码
此处查看页面效果

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难，写文不易，给我家猪囤点猫粮了喵~

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. Input输入流
    1. 1.1. Driver驱动
    2. 1.2. 实现流创建和监听
    3. 1.3. 检验实现
    4. 1.4. 双向绑定
  2. 2. 结束语