242018.11

photopea:在线版photoshop

日志 周末日常

今天异常的冷,穿上了珍藏一年的外套。前天还在穿短裤,今天就穿上了两件衣服,冬天终于是来了的意思吗?这么冷的天,最适合的运动当然是睡觉,于是早上睡到中午,接着睡到下午吃饭,之后终于起床干点什么事情。

打开冰箱,水果都快堆积如山了。公司食堂可以免费拿一个水果,不想吃的时候就会囤起来,最后越囤越多,把冰箱都塞满了。不行,丢掉也太可惜,就在京东上顺手下单了一个榨汁机。巡视了一圈儿,竟然没有满意的,我就要那种价格不贵,能够干事,下次搬家就丢的那种,怎么就没有呢?最后选了一个200块不到的。

修仙一天,发现只要不玩游戏,慢生活也是不错的,听听音乐,看看博客,想想歪脑经,总之就这么愉快的过去了,不想着什么事还没做,也不想兜里没钱了,就像一个普通到无聊的一天一样度过,也并没有丢失什么,梦想还是会有,只是今天不需要。

20:28:57 已有0条回复
232018.11

日志 今日无事

今日无事可记。

23:41:41 已有0条回复

rxjs中可以做到在流之间转换,其中一个就是switch,它的意思和英文意思一样,即从一个流切换到另外一个流。但是,单纯从一个流切换到另外一个流是没有意义的,需要将前一个流中的数据在切换时,要将它的数据传给下一个流中去使用。rxjs中的switchMap就是要做这样一件事,它接收一个函数,这个函数的参数是上一个流遗留下来的数据,而它需要返回一个新的流,这个流中你可以使用上一个流遗留下来的数据。

Rx.Observable.fromEvent(document, ‘mousedown’)
  .map(e => e.target)
  .switchMap(target => Rx.Observable.fromEvent(document, ‘mousemove’).map(e => {
  return { 
    startX: target.offsetX, 
    startY: target.offsetY,
    moveX: e.pageX,
    moveY: e.pageY,
  }
}))
.subscribe(pos => console.log(pos))

你可以看到,switchMap里面的函数接收mousedown这个流给的target,然后再返回一个新的关于mousemove的流,并且对这个新的流作map处理,过程中把前面的target也用上了。在switch发生的时候,mousedown的事件监听就给丢掉了。后面就全是跟mousemove相关的监听。

总结一下,rxjs里面的switch就是切换流的操作,切换的时候,前一个流会被丢掉。

23:40:49 已有0条回复
222018.11

日志 连续同源异步操作队列

问题的发现

来自同源的多个异步操作可能引起异步冲突问题,特别是在网络请求时。同源操作产生了两个ajax请求,它们的请求结果将用于渲染同一个区域,然而由于网络问题,先发出的请求后返回,导致最终得到的界面是错误的。

解决这个问题的最好办法,是利用原生XHR的abort方法,在后一次操作时,将前一次操作引起的ajax请求给cancel掉。

但是在现实条件下,异步操作并非都有cancel操作。js原生的Promise没有,原生的fetch基于Promise也没有。基于Promise的很多工具都没有cancel操作。这种情况下怎么解决这个问题呢?

其实方法是有的,就是直接丢弃Promise的推送,不执行它的resolve回调即可。这样,虽然异步操作已经执行了,但不会对现有的环境造成任何副作用。(虽然这样看上去浪费了异步操作这个资源。)

问题的思考

如何来判断是否要丢掉它的回调?我们可以创建一个队列,每次产生一个异步操作时,就将它加入到队列中,当队列中存在操作对象时,每次只取最后一个,等待它推送结果,执行它的回调,排在它前面的操作全部丢弃掉。

基于这样的想法,我写了一个工具deferer-queue。它为异步操作创建队列,并根据不同的场景实现不同的队列操作形式。你可以通过这里阅读它的源码和文档。它提供了4种可供选择的场景:

并联

异步操作进入队列的时候立即开始执行,它们的回调将按照它们进入队列的顺序执行。

这个图中有这些元素:

  • 时间轴
  • 圆圈:一个异步操作被push进队列
  • 向下箭头:队列中开始执行某个异步操作
  • 虚线:执行顺序(执行流)
  • 方框:每个异步操作的回调
  • 竖线:队列周期(从开始到停止的过程)分割线

上图表现的是,1-4这4个异步操作在不同的事件点被加入到队列中。它们在一个周期内,也就是从1开始执行,到队列中所有的异步操作执行完毕,进入停滞状态。1-4这些操作,一进入队列就开始执行。它们执行完之后,就会告知队列执行完毕状态,回调就会执行。但是由于回调一定是按照异步操作进入队列的顺序执行的,因此,即使4已经完成了,但它的回调也必须等到3结束后才会执行。

在deferer-queue中,所有的回调一定遵循先进队列先执行,后进队列后执行的顺序规则。

串联

异步操作进入队列后并不立即执行,它从队列中取出第一个,执行,等待这个异步操作完成(成功或失败都算完成)并执行它的回调,然后再取出下一个,继续执行。

上图表现的是,1-4这4个异步操作,进入队列后,按照顺序依次执行。但是,在一个周期内,只有1是立即执行的,其他操作必须等到上一个操作结束(promise resolved或rejected)之后,才会开始执行。

尾调

异步操作进入队列后并不立即执行,它从队列中取出最后一个,执行,并把前面所有的操作丢弃,这个操作执行完后直接进入回调,队列结束。

这张图表现的是,1-4这个4个异步操作被按顺序加入到队列中,但是,在一个周期内,只有4(最后一个)被执行。1-3全部被丢掉了。你可能会问,假如4进入队列的时候,1已经在执行了怎么办?答案是,1会被丢掉,只要在一个周期内,只会有一个执行的回调会被执行。

连续

异步操作进入队列后并不立即执行,它从队列中取出第一个,执行,等待这个异步操作完成(成功或失败都算完成)并执行它的回调,之后取出最新的一个执行,执行完之后再看队列中是否有新的,如果有新的,再取出最新的一个,继续执行,如此往复下去。

这幅图表面的是一种连续不断的执行队列的模式,当1-4被push进队列之后,1被执行,2-4被丢掉。当1完成之后,检查队列是否加入了新的异步操作,如果检查到5-6,那么取6进行执行,把5丢掉。进入后续过程后,感觉上和尾调非常像,但是,尾调是在一个周期内,只会执行最后一个回调,而连续不是,它会不断的检查队列是否已经被执行完,如果没有,那么就会执行一个类似尾调的过程,这个过程结束,又会再做一次。队列开始的时候,取第一个异步操作执行,当第一个操作结束后,后面之后去取最后一个执行。这些执行之间是串联关系,只有正在执行的异步操作已经完成的情况下,新的操作才会被执行。这是一种比较奇葩的场景,但是它可以解决一些需要连续不断做某些事情的应用。

注意:当一个周期结束后,队列处于停滞状态,但是,一旦有新的defer被push进队列,它又会开始一个新的周期。

问题的解决

基于上述的思考,我最终发布了deferer-queue,你可以通过npm安装这个包,在自己的项目中使用它。它的操作模式超级简单,首先实例化一个queue对象,然后往这个queue push异步操作,异步操作被装在一个函数中被push进队列,它的回调函数一定是按照push的顺序执行。

import DefererQueue from 'deferer-queue'

const queue = new DefererQueue()

const defer1 = () => new Promise((resolve, reject) => { ... })
const defer2 = () => axios.get(...)
const defer3 = async () => ...

queue.push(defer1).then(() => { console.log(1) })
queue.push(defer2).then(() => { console.log(2) })
queue.push(defer3).then(() => { console.log(3) })

无论defer1-3中的谁,执行后谁先返回结果,控制台输出的结果永远是1 2 3(defer都成功的前提下)。

要使用上述的四种模式,只需要在实例化的时候,传入一个options对象,将mode设置为parallel/serial/switch/shift中的一个即可:

const queue = new DefererQueue({
  mode: 'switch',
})

其他的用法一样。这样,你的队列就会按照“尾调”的模式运行。

关于具体的API使用细则,你可以阅读它的文档。其中,利用axios的cancel能力那个地方非常有借鉴意义。

23:56:06 已有0条回复

rxjs的Subject具有多播的特性。对于单播和多播怎么理解呢?

首先要了解一个概念“冷流和热流”。所谓“冷流”是指数据的变化是固定死的,举个例子:

let observable = Rx.Observable.create(function subscribe(obsever) {
observer.next(1)
observer.next(2)
})
observable.subscribe(v => console.log(v))

上面这段代码,subscribe的输出结果是可预知的,一定是先输出1,然后输出2.

“热流”是什么呢?就是它的数据变化是不可知的,随机的,随意的。例如通过fromEvent产生的observable。

现在回来说单播和多播。

单播是说,一个observable只能被一个观察者消费。还是用代码说话:

let observable = Rx.Observable.create(function subscribe(obsever) {
  observer.next(1)
  observer.next(2)
})
observable.subscribe(v => console.log(v))
observable.subscribe(v => console.log(v))

上面这段代码会输出两次1,2。简单的说,当调用observable.subscribe时,create的传入参数function subscribe会被调用一次。也就是说,一个subscribe只能被一个observer消费。这就是单播。这些observer之间相互不影响(不要有全局变量),它们虽然订阅同一个obserable,但是,它们仅仅是利用了observable的处理数据的能力,至于数据源、处理结果,都是独立的。

那什么是多播呢?就是一个有一个东西,可以被多个观察者同时订阅。这个时候要引进rxjs里面的Subject,它所创造的实例,能被多个观察者消费。代码说话:

let observable = Rx.Observable.create(function subscribe(obsever) {
  observer.next(1)
  observer.next(2)
})
let subject = new Rx.Subject() subject.subscribe(v => console.log(v)) subject.subscribe(v => console.log(v))
observable.subscribe(subject)

这个代码和前面不一样的地方在于,observable被subject订阅,当subject被两个不同的observer订阅时,subject执行一次function subscribe,但是同时通知这两个observer。所以,当你得到的结果是:1,1;2,2时,应该一点都不觉得奇怪。在第一次执行next(1)的时候,两个observer同时被执行。

18:13:17 已有0条回复

rxjs在编程实践中主要考虑三个部分:数据怎么来?数据怎么流动?怎么使用数据?

数据怎么来?rxjs有一大堆创建observable的东西,而这些东西,虽然创建的三observable,但实际上,它们就控制了数据是怎么来的。比如formEvent,表示数据是从事件中来的。比如bindCallback表示数据是从函数的运行结果中来的。总之,虽然rxjs不是我们传统的函数,没有主动调用函数时传入参数的概念,但是,它内部已经囊括了数据怎么来的各种方式,利用它的API就可以在特定的场景拿到你的数据。

数据怎么流动?完全靠rxjs的各种操作符,例如map、switch。除此之外,observable还能被组合。总之,observable虽然看上去是个形容词,但实际在rxjs代表那个用来装数据流的东西,是一个名词。而observable的形状(用了哪些操作符),决定了你或许数据的形式(时间上)和形态(空间上)。

数据怎么使用?实际上subscribe里面就决定了当数据流经observable之后,你怎么使用这个最后的数据。而且,rxjs可多值、多播。

 

11:22:30 已有0条回复
212018.11

日志 有个小姐姐加我

早上有个小姐姐加我微信,说看我的博客感觉到温暖,让我有些震惊,小姐姐是不是对温暖有什么误解,不过还是非常感谢你说这么体己的话,让我觉得你很温暖。❤️

正式决定投入Rx.js的怀抱,如果说react vue之流是打开了现代化前端编程的新大门,那么rxjs就是这个时代的《国富论》一个超前的思想的具体呈现,对它的研究花了我不少时间。单就理解它的概念,了解它的工作流程,就让我非常入迷。再由于之前一个朋友分享了函数式编程的思维,对应rxjs的使用,瞬间就感到了新的编程方式/思维的高级性。接下来继续研究它的操作符。

晚上在全民K歌录了一首陶喆《就是爱你》,第一次尝试在一首歌里面录两个声音,歌曲的后面部分有两个声音叠加呼应。其实方法很简单,就是用合唱的方式,第一遍录歌的主体架构,第二遍把副歌的合声部分录进去。这首歌真的很好听,这里贴出来分享。

我的全民K歌账号1192825603,有兴趣加一波呀。

23:01:16 已有0条回复

3分14秒之后,好难唱呀。

RxJS中的概念梳理:

我们可以把一切输入都当做数据流来处理,比如说:

  • 用户操作
  • 网络响应
  • 定时器
  • Worker

RxJS提供了各种API来创建数据流:

  • 单值:of, empty, never
  • 多值:from
  • 定时:interval, timer
  • 从事件创建:fromEvent
  • 从Promise创建:fromPromise
  • 自定义创建:create

创建出来的数据流是一种可观察的序列,可以被订阅,也可以被用来做一些转换操作,比如:

  • 改变数据形态:map, mapTo, pluck
  • 过滤一些值:filter, skip, first, last, take
  • 时间轴上的操作:delay, timeout, throttle, debounce, audit, bufferTime
  • 累加:reduce, scan
  • 异常处理:throw, catch, retry, finally
  • 条件执行:takeUntil, delayWhen, retryWhen, subscribeOn, ObserveOn
  • 转接:switch

也可以对若干个数据流进行组合:

  • concat,保持原来的序列顺序连接两个数据流
  • merge,合并序列
  • race,预设条件为其中一个数据流完成
  • forkJoin,预设条件为所有数据流都完成
  • zip,取各来源数据流最后一个值合并为对象
  • combineLatest,取各来源数据流最后一个值合并为数组

数据的管道是什么形状的?在RxJS中,存在这么几种东西:

  • Observable 可观察序列,只出不进
  • Observer 观察者,只进不出
  • Subject 可出可进的可观察序列,可作为观察者
    • ReplaySubject 带回放
  • Subscription 订阅关系

前三种东西,根据它们数据进出的可能性,可以通俗地理解他们的连接方式,这也就是所谓管道的“形状”,一端密闭一端开头,还是两端开口,都可以用来辅助记忆。

09:53:22 已有0条回复