zoukankan      html  css  js  c++  java
  • 函数响应式编程

    函数响应式编程

    image

    函数响应式编程是种编程范式。它是通过构建函数操作数据序列,然后对这些序列做出响应的编程方式。它结合了函数式编程以及响应式编程

    函数式编程是种编程范式,它需要我们将函数作为参数传递,或者作为返回值返还。我们可以通过组合不同的函数来得到想要的结果。

    函数试编程的优点

    • 灵活
    • 高复用
    • 简洁
    • 易维护
    • 适应各种需求变化

    函数式编程 -> 函数响应式编程

    把一个按钮的点击事件看作是一个序列:

    image

    // 假设用户在进入页面到离开页面期间,总共点击按钮 3 次
    
    // 按钮点击序列
    let taps: Array<Void> = [(), (), ()]
    
    // 每次点击后弹出提示框
    taps.forEach { showAlert() }

    这样处理点击事件是非常理想的,但是问题是这个序列里面的元素(点击事件)是异步产生的,传统序列是无法描叙这种元素异步产生的情况。为了解决这个问题,于是就产生了可监听序列Observable。它也是一个序列,只不过这个序列里面的元素可以是同步产生的,也可以是异步产生的:

    image

    // 按钮点击序列
    let taps: Observable<Void> = button.rx.tap.asObservable()
    
    // 每次点击后弹出提示框
    taps.subscribe(onNext: { showAlert() })

    这里 taps 就是按钮点击事件的序列。然后我们通过弹出提示框,来对每一次点击事件做出响应。这种编程方式叫做响应式编程。我们结合函数式编程以及响应式编程就得到了函数响应式编程:

    image

    passwordOutlet.rx.text.orEmpty
        .map { $0.characters.count >= minimalPasswordLength }
        .bind(to: passwordValidOutlet.rx.isHidden)
        .disposed(by: disposeBag)

    我们通过不同的构建函数,来创建所需要的数据序列。最后通过适当的方式来响应这个序列。这就是函数响应式编程。

    数据绑定(订阅)

    image

    在 RxSwift 里有一个比较重要的概念就是数据绑定(订阅)。就是指将可监听序列绑定到观察者上:

    我们对比一下这两段代码:

    let image: UIImage = UIImage(named: ...)
    imageView.image = image
    
    
    let image: Observable<UIImage> = ...
    image.bind(to: imageView.rx.image)
    

    第一段代码我们非常熟悉,它就是将一个单独的图片设置到imageView上。

    第二段代码则是将一个图片序列 “同步” 到imageView上。这个序列里面的图片可以是异步产生的。这里定义的 image 就是上图中蓝色部分(可监听序列),imageView.rx.image就是上图中橙色部分(观察者)。而这种 “同步机制” 就是数据绑定(订阅)。

  • 相关阅读:
    vue vant 循环picker模块的实现方法
    Element的表单验证规则,清空或填充数据如何避免自动触发
    递归寻找树结构的子节点
    vue源码解析实例(二)---vue 虚拟DOM篇
    vue源码解析实例(一)
    变化侦测篇---Object.create(null)的定义
    vue源码-变化侦测篇(小知识点)
    Vue源码学习-开篇
    position: sticky轻松做出吸顶功能
    自适应图片高度蒙层 css
  • 原文地址:https://www.cnblogs.com/liuxiaokun/p/12680485.html
Copyright © 2011-2022 走看看