跟我学Rx编程——调皮的背景音乐按钮
有些H5的页面会有一个按钮控制背景音乐播放，如果只是单一页面的话，没有什么逻辑可言。但如果涉及到转场，那么逻辑就复杂起来。
涉及操作符
- partition
- switchMapTo
- takeUntil
业务逻辑
- 点击背景音乐按钮，则播放音乐，再次点击暂停播放音乐
- 当切换场景的时候，如果音乐正在播放，则切换新的场景的背景音乐
- 当切换场景的时候，如果音乐已经暂停，则等待点击后再播放新的音乐
- 当有音乐的时候，按钮播放旋转动画，暂停播放时按钮静止不动
对于使用者来说再正常不过的逻辑，开发起来却不是那么容易，因为涉及到声音的加载，切换，暂停和响应点击等。
这次我们不再写常规操作，大家可以自行脑补。
RxJS实现
首先我们定义播放按钮的事件流，以及切换场景的事件流
let playMusicClickOb = fromEvent(musicBn, 'click')
let changeStageOb = ...//此处省略创建过程接下来我们需要通过partition操作符分离出两个事件流
let [playingStageOb, muteStageOb] = changeStageOb.pipe(partition(_ => isPlaying))当切换场景的时候，正在播放和没有播放的情况分成两个事件流对象playingStageOb和muteStageOb
接下来我们就可以利用上面定义好的4个事件流组合成我们要的逻辑了
rxjs.merge(playingStageOb, muteStageOb.pipe(switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv))).pipe(map((index => {
playAni()//按钮旋转动画
return Laya.SoundManager.playMusic('stage' + index + ".mp3")
})), switchMapTo(playMusicClickOb.pipe(takeUntil(muteStageOb)), outV => outV)).subscribe(channel => {
if (isPlaying) {
channel.pause()
stopAni()//停止按钮旋转动画
} else {
channel.resume()
playAni()//按钮旋转动画
}
})分析
代码中分为三个功能区
加载音乐并播放
playAni()//按钮旋转动画
return Laya.SoundManager.playMusic('stage' + index + ".mp3")暂停播放
channel.pause()
stopAni()//停止按钮旋转动画恢复播放
channel.resume()
playAni()//按钮旋转动画这个三块功能何时执行，是本案最为关键的部分。 我们来分析
rxjs.merge(playingStageOb, muteStageOb.pipe(switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv))).pipe(map((index => {首先，最后的map操作符是为了把场景的序号转换成对应的mp3文件名，这个没什么好说的，可以忽略
map((index => {所以核心逻辑就是
rxjs.merge(playingStageOb, muteStageOb.pipe(switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv)))我们观察，最外层是merge操作即
rxjs.merge(playingStageOb, muteStageOb.pipe(...))意思是转场事件触发的事件流，包括正在播放音乐时转场，以及不在播放音乐时转场。其中不在播放音乐时转场还有后续的操作 即
switchMapTo(playMusicClickOb.pipe(take(1)), outv => outv)这句话的意思是，如果在静音的时候转场，就会开始监听playMusicClickOb，即按钮点击事件，take(1)只取一次事件，就立即关闭，目的是组合出那种状态即——静音后转场，然后又点击了播放音乐的按钮。 合起来，就是在下面两种情况之一就执行加载音乐并播放音乐和动画的逻辑
1. 正在播放音乐时转场
2. 静音时转场，然后点击了播放音乐的按钮
下面我们分析以下的逻辑：
})), switchMapTo(playMusicClickOb.pipe(takeUntil(muteStageOb)), outV => outV)).subscribe(channel => {这段逻辑建立在之前已经加载音乐并且播放起来后执行。当之前的逻辑执行后，我们通过switchMapTo切换成后面这个事件流
playMusicClickOb.pipe(takeUntil(muteStageOb)), outV => outV)即如果此时点击了音乐按钮，就会触发直到收到了静音转场的事件。什么意思？就是说此时用户点击了音乐播放按钮，就会在暂停和播放两种状态切换。直到我们暂停的情况下转场了，就不再监听。为什么是这样设计呢？假设我们此时切换了暂停和播放若干次，我们要转场了，如果此时正好在暂停状态，那么我转场后，是什么状态呢？对了，就是上面
2. 静音时转场，然后点击了播放音乐的按钮
的状态，看到没，所以我们使用takeUntil来终止当前事件流。如果是播放音乐的状态下转场了呢？这就回到了上面的
1. 正在播放音乐时转场
的状态，会执行加载音乐并播放的逻辑，但我们的切换暂停和播放的功能依旧需要运行，所以在takeUntil中我们只有一种情况需要终止当前事件流就是muteStageOb
是不是有点绕，多想想就能明白 利用Rx编程，我们复用了事件流对象，组合出了各种状态下的逻辑，并将实际执行代码压缩到最精简，假如有逻辑需求变化，也能很快修改。比如我们需要一开始就播放音乐，只需要在merge里面加一个of(0)——参数0没有任何意义，纯粹为了触发事件
rxjs.merge(of(0),playingStageOb, muteStageOb......腾讯云开发者
