HOME

Functional Reactive Programming 简介

推荐阅读:

HTML5Rocks有一篇关于Promise的经典文章,通过引入这样一个问题来说明Promise的优越性。问题如下:

我们需要渲染一个故事,首先我们获取故事的json,渲染标题(story.heading),然后再根据其中的charpter url,获取每一章的内容,并显示。中间出了任何问题,显示错误信息。

这个问题乍一看好像很容易,不就是ajax拿几个数据嘛。但是我们可以想想怎么做才是最高效的方式,程序优化的点有时候很难想到,有时候却是显而易见的。这个问题要高效解决我们至少需要做以下两点:

  • 故事的每一个章内容我们应该并行获取
  • 显示的时候,不能等到所有章节内容都获取到再显示,而应该在保持顺序的情况下尽快显示。比如第一章内容来了,我们立刻显示第一章,但是我们要等第二章内容,即便第三章先来,我们也不能显示。

再考虑到我们需要追踪每个ajax的错误信息,一旦有错误立刻显示错误页面,这个问题似乎没有那么好解决。传统的解决方法我们不可避免的要跟踪状态,比如当前有没有错误?内容已经到第几章了?这种代码写出来很容易出错而且很难看。

作者在这个gist上面贴出了文中问题的一些解法对比,包括使用promise,使用传统的状态追踪等。这个gist下面有个评论中使用了RxJS,代码十分简洁优美,很是引人注目。

RxJS指的是Functional Reactive Programming extensions for JavsScriptFunctional Reactive Programming是一种编程思想,并不局限于某一个语言。这种思想的核心就是流,RxJS中的使用的术语是Observable,但是我觉得这个词不好理解,用流也就是Stream更好理解。流代表的是一个随着时间而变化的序列,在这过程中,它可以产生值,或者错误,或者终止信号,只有这三种情况。

流的引入最大的优点是我们有了一个手段来表示“无尽”的东西,并且可以对它们进行各种变换,就像我们处理数组那样。处理数组我们有mapfilter,reduce这几个核心方法。对于流我们也有类似这些的基本方法,这里推荐一个好用的网站RxMarbles,非常直观的显示一些方法是怎样操作流的。

面向流的编程基本过程就是,创建代表原始输入的流,对它们进行组合、过滤等各种操作,最后生成我们感兴趣的结果流,监听结果流(subscribe)并进行相应操作即可,监听的时候提供三个函数,分别用于处理流产生了值,流产生了错误以及流结束这三种情况。

这里用RxJS首页的“自动补全(auto completion)”例子来看一看怎么使用RxJS。自动补全是搜索框中很常见的一个功能,随着用户的输入,系统会自动在下拉框中显示相关的词汇供用户选择,也可以起到给用户一些提示的作用,这是一个很方便的功能。实现思路也比较简单,根据用户目前输入的词汇去获取词汇列表,然后显示。但是这里面有几个细节:

  • 用户的输入需要debounce,否则会发送太多无意义的请求。
  • 只有用户输入的字符串大于一个长度我们才请求。否则返回的结果太模糊并且数量也大。
  • 考虑到网络延迟,需要追踪后台返回的数据是否匹配用户当前的输入。比如用户输入”ABC”,系统发了一次请求,用户又改输入为”DEF”,此时ABC的结果返回,我们就不能显示了,这个结果已经过时了。

首先,我们来构建原始流:

var $input = $('#input') //输入框
var originInputStream = Rx.Observable.fromEvent($input, 'keyup')

这里,我们使用RxJS提供的fromEvent方法来构建原始事件流,originInputStream代表的是每一个keyup事件,用户每输入一个字符,originInputStream便会产生一个值,值的内容为对应的事件对象。现在来想想怎么变换这个原始流,首先,我们需要debounce,然后我们map拿到用户输入的字符串,接下来需要过滤长度比较小的字符串,最后,如果后面的值和前面的值一样,我们就丢弃它。

var resultInputStream = originInputStream
  	.debounce(500 /* ms */)
	.map(evt => evt.target.value)
  	.filter(text => text.length > 2 )
  	.distinctUntilChanged()

resultInputStream代表的便是每一个需要请求后台的用户输入值,这个还不是最终的stream。最终的suggestionStream应该代表的是后台返回的结果,我们监听然后显示suggestions,就大功告成了。现在剩下的任务便是怎么由resultInputStream得到suggestionStream

这里我们要介绍两个重要的方法,分别是flatMap以及flatMapLatestmap方法是根据流(mainStream)里面的值,产生一个新的值,如果这个新的值是一个流(subStream)怎么办呢?大部分情况下,我们会希望这个新的流(subStream)它的值出现在mainStream中,这样我们可以直接监听mainStream而不用去监听每一个subStream。如图所示:

flatMap就是这样一个方法,flatMapLatest顾名思义,他只会处理最新的subStream,之前的subStream的值全部丢掉。这非常吻合我们的需求,因为当用户输入新的字符串时,之前的字符串的返回结果我们不再需要了。

有了flatMapLatest这个方法,我们接下来需要做的便是写一个方法,根据resultInputStream的每个值,请求后台,返回一个subStream(返回Promise便可,RxJS会自动帮我们转换为stream)。

function searchWikipedia (term) {
  return $.ajax({
    url: 'https://en.wikipedia.org/w/api.php',
    dataType: 'jsonp',
    data: {
      action: 'opensearch',
      format: 'json',
      search: term
    }
  })
}

var suggestionStream = resultInputStream.flatMapLatest(searchWikipedia)

得到suggestionStream以后,我们监听并显示结果就行了。至此,任务大功告成。

var $results = $("#results") // ul to hold the results
suggestionStream.subscribe(
  data => {
    $results
      .empty()
      .append($.map(data[1], value =>  $('<li>').text(value)))
  },
  error=> {
    $results
      .empty()
      .append($('<li>'))
        .text('Error:' + error);
  })

最终的代码可以看这里

上面是一个使用RxJS的经典例子。下面我们再来看一个例子。

这是一个十分常见的用户注册表单。几乎每一个网站都要实现的功能。实现起来也比较简单,用户点击Submit的时候提交内容到后台就行了,根据后台的结果再进行反馈,比如后台返回成功,则告诉用户注册成功,跳转到个人中心,后台返回“用户名已存在”,则告诉用户注册失败,重新输入。

但是,我们也可以做一些事情来提高这个简单表单的用户体验,包括但不限于:

  • 用户输入用户名的时候,就进行用户名可用性检测,当然,我们需要debounce
  • 进行用户名可用性检测的时候,显示相应的信息告知用户我们正在检测用户名可用性
  • 告知用户用户名可用性检测的结果
  • 如果用户名或者密码为空,禁用提交按钮
  • 如果用户名不可用,禁用提交按钮
  • 当用户点击提交按钮以后,立刻禁用提交按钮,防止二次提交

我们先来看看使用jQuery怎么解决。

var $username = $("[name=username]")
var $password = $("[name=password]")
var $btn = $("button")

$btn.click(function(evt) {
  evt.preventDefault()
  btnClicked = true
  setButtonState()

  $.ajax({
    type: "POST",
    url: "/register",
    data: {
      username: $username.val(),
      password: $password.val(),
    },
    success: function() {
      alert("Success!")
    },
  })
})

// Status variables
var usernameAvailable, 
    checkingUsername, 
    prevUsername, 
    timeout, 
    btnClicked, 
    counter = 0

$username.keyup(function(evt) {
  var username = $username.val()
  if(username === prevUsername) return
  usernameAvailable = false
  setButtonState()
  clearAllInfo()

  if(username.length === 0) return

  if(timeout) clearTimeout(timeout)
  prevUsername = username
  timeout = setTimeout(function() {
    checkingUsername = true
    toggleCheckingIndicator()
    var id = ++counter
    $.ajax({
      url: "/check",
      data: {
        username: $username.val(),
      },
      success: function(res) {
        if(id !== counter) return
        checkingUsername = false
        usernameAvailable = res.available
        setButtonState()
        toggleCheckingIndicator()
        showResult()
      },
    })
  }, 500)
})

$password.keyup(function(evt) {
  setButtonState()
})

function setButtonState() {
  var enabled = $username.val().length > 0 &&
    $password.val().length > 0 &&
    usernameAvailable &&
    !btnClicked
  $btn.prop("disabled", !enabled)
}

function toggleCheckingIndicator() {
  $("#result-ok").hide()
  $("#result-bad").hide()
  if(checkingUsername) {
    $("#indicator").show()
  } else {
    $("#indicator").hide()
  }
}

function showResult(available) {
  usernameAvailable ? $("#result-ok").show() : $("#result-bad").show()
}

function clearAllInfo() {
  $("#result-ok").hide()
  $("#result-bad").hide()
  $("#indicator").hide()
}

setButtonState()

代码不需要太多解释,逻辑很直接,使用几个变量来追踪我们想要追踪的状态来实现上述的几个功能。这样的代码有一个问题,那就是随着需求的增加,会变来越来越复杂,引入越来越多的状态,直到最后无法控制。

我们再来看看RxJS怎么解决这个问题。

var $username = $("[name=username]")
var $password = $("[name=password]")
var $btn = $("button")

function getStream($ele) {
  return Rx.Observable.fromEvent($ele, "keyup")
  	.pluck("target", "value")
  	.distinctUntilChanged().startWith("")
}

var usernameStream = getStream($username)
var passwordStream = getStream($password)
var btnClickedStream = Rx.Observable.fromEvent($btn, "click")

var enteredStream = usernameStream
	.combineLatest(passwordStream, (username, password) => {
  		return username.length > 0 && password.length > 0
	})

var ajaxStream = usernameStream
  .debounce(500)
  .filter(s => s.length > 0)
  .flatMapLatest(s => {
    setIndicator(true)
    return $.getJSON("/check", {username: s})
  })
  .map(res => {
    setIndicator(false)
    setResult(res.available)
    return res.available
  })

var availabilityStream = ajaxStream.merge(usernameStream.map(s => false))
availabilityStream.subscribe(clearResult)

var buttonStateStream = enteredStream
	.combineLatest(availabilityStream, (a, b) => a && b)
	.merge(btnClickedStream.map(s => false))

btnClickedStream.flatMap(register).subscribe(
  d => {
    if(d.success) {
      alert("Success!")
    }
  },
  jqXHR => {
    console.error(jqXHR.statusText)
  }
)

buttonStateStream.subscribe(
  function(enabled) {
    $btn.prop("disabled", !enabled)
  }
)

function register(evt) {
  evt.preventDefault()
  return $.ajax({
    url: "/register",
    method: "POST",
    data: {
      username: $username.val(),
      password: $password.val(),
    },
  })
}


function setIndicator(enabled) {
  clearResult()
  enabled ? $("#indicator").show() : $("#indicator").hide()
}

function clearResult() {
  $("#result-ok,#result-bad").hide()
}

function setResult(ok) {
  ok ? $("#result-ok").show() : $("#result-bad").show()
}

还是一样的思路,首先构建原始的stream,变换得到我们想要监听的stream,除了辅助的UI函数以外,剩下的代码都在操作stream,没有任何状态的跟踪,代码变得简洁清楚明了。

最后,用户注册的完整代码包括UI和一个express的服务器可以在frp-demo下载。