基于 Observable 构建前端防腐策略

Posted 阿里技术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于 Observable 构建前端防腐策略相关的知识，希望对你有一定的参考价值。

fromFetch(res.json())); fromFetch(res.json())); lastValueFrom(forkJoin([getMemoryFreeObservable(), getMemoryUsageObservable()]).pipe( map(+((usage / (usage + free)) * )); lastValueFrom(getMemoryFreeObservable()); lastValueFrom(getMemoryUsageObservable());的实现代码如下，此时该组件将不再依赖具体的接口，而直接依赖防腐层的实现。
[usage, setUsage] = useState< useEffect(=> ( result = getMemoryUsagePercent( setUsage( ) , []); < 构建所以不需要进行任何改动。
fromFetch( mergeMap(res.json()),data.data) ); fromFetch( mergeMap(res.json()),data.data) ); free: number; fromFetch( mergeMap(res.json()), map(data.data) ); getMemoryObservable().pipe(map(data.free)); getMemoryObservable().pipe(map(data.usage)); lastValue(getMemoryObservable().pipe( map(+((usage / (usage + free)) * ));> legacyUsage = fromFetch( mergeMap(res.json()) ); legacyFree = fromFetch( mergeMap(res.json()) ); forkJoin([legacyUsage, legacyFree], ( free: free.data.free, usage: usage.data.usage, ));> current = fromFetch( mergeMap(res.json()), map(data.data) ); race(getMemoryLegacyObservable(), current); getMemoryObservable().pipe(map(data.free)); getMemoryObservable().pipe(map(data.usage)); lastValue(getMemory().pipe( map(+((usage / (usage + free)) * ));操作符，当 v2 与 v3 任何一个版本的接口可用时，防腐层都可以正常工作，在组件层无需再关注接口受环境的影响。

的数据返回，使得组件层可以直接使用百分比数据，而不需要再次进行转换。

cache: [key: string]: any = ; getData() ( of( fromFetch( mergeMap((res) => res.json()), map(( tap(( ) ); race(getMemoryLegacy(), current).pipe(=> )) );

   forkJoin([getMemoryUsage(), getMemoryFree()]).pipe(   map(+((usage / (usage + free)) *  ); options = []; (i =    value =    options.push(value);  of(options);

五  总结


在本文中我们介绍了以下内容：


  1. 前端面对接口频繁变动时的困境及原因如何

  2. 防腐层的设计思想与技术选型

  3. 使用 Observable 实现防腐层的代码示例

  4. 防腐层的额外作用

请读者注意，只在特定的场景下引入前端防腐层才是合理的，即前端处于跟随者或供应商/客户关系中，且面临大量接口无法保障稳定和兼容。如果在防腐层可以在后端 Gateway 构建，或者接口数量较少时，引入防腐层带来的额外成本会大于其带来的好处。

RxJS 在防腐层构建场景下提供的更多的是 Observable 化的能力，如果读者不需要复杂的 operators 转换工具，也可以自行构建 Observable 构建方案，事实上只需要 100 行的代码就可以实现 https://stackblitz.com/edit/mini-rxjs。

改造后的前端架构将不再直接依赖接口实现，不会入侵现有前端数据层设计，还可以承担概念映射、格式适配、接口缓存、稳定性兜底以及协助联调测试等工作。文中所有的示例代码都可以在仓库 https://github.com/vthinkxie/rxjs-acl 获得。


‍

求职特训营火热来袭！阿里专家教你制作专业简历！

如何在众多简历中吸引HR关注？如何描述过往经历突出亮点？如何增加简历加分项？阿里专家从面试官角度告诉你一份高质量简历应该长什么样！

阿里云开发者社区举办“阿里专家五堂课教你制作专业简历”训练营，邀请四位阿里专家倾情传授简历秘籍，深挖简历承载的价值，从面试官的角度切入讲解简历必含模块，更有资深专家直播在线答疑帮你修改简历！金三银四黄金求职季，阿里专家助力你的求职之路！还在等什么？立即点击阅读原文免费报名参加！

‍

RxSwift 基于变量构建 Observable

【中文标题】RxSwift 基于变量构建 Observable【英文标题】：RxSwift Build an Observable based on a Variable 【发布时间】：2017-03-07 19:42:20 【问题描述】：

我正在尝试构建一个 Observable，它会根据变量的值输出一个值。

类似的东西：

let fullName = Variable<String>("")
let isFullNameOKObs: Observable<Bool>

isFullNameOKObs = fullName
            .asObservable()
            .map  (val) -> Bool in
                // here business code to determine if the fullName is 'OK'
                let ok = val.characters.count >= 3
                return ok

不幸的是 map func 中的 bloc 从未被调用！

这背后的原因是：

    fullName 变量通过双向运算符 绑定到 UITextField，如 RxSwift 示例中所定义。 isFullNameOKObs Observable 将被观察到隐藏或显示我的 ViewController 的提交按钮。

任何帮助将不胜感激。

谢谢

型号

class Model 

    let fullName = Variable<String>("")
    let isFullNameOKObs: Observable<Bool>

    let disposeBag = DisposeBag()

    init()

        isFullNameOKObs = fullName
            .asObservable()
            .debug("isFullNameOKObs")
            .map  (val) -> Bool in
                let ok = val.characters.count >= 3
                return ok
            
            .debug("isFullNameOKObs")


        isRegFormOKObs = Observable.combineLatest(
            isFullNameOKObs,
            is...OK,
            ... )  $0 && $1 && ... 


        isRegFormOKObs
            .debug("isRegFormOKObs")
            .asObservable()
            .subscribe  (event) in
                // update the OK button
            
            // removing this disposedBy resolved the problem
            //.disposed(by: DisposeBag())

视图控制器：

func bindModel() -> Void 

    _ = txFullName.rx.textInput <-> model!.fullName
    ......

【问题讨论】：

已解决，但我不明白如何。我对表单的每个 TextField 使用相同的模式：一个名为 isMyTextFieldOK 的 Observable，它计算一些业务规则。一个最终的 observable，它是所有 isMyTextFieldOK observable 中的 combineLatest。我确实在最后一个 observable 上附加了一个 dispose(by: disposeBag) 调用。删除它解决了一切。但我不知道为什么。 :-( 【参考方案1】：

您需要UITextField 和您的Variable 之间的双向绑定吗？

如果没有，我建议您尝试只使用bindTo()，而不是像这样： myTextField.rx.text.orEmpty.bindTo(fullName).disposed(by: disposeBag)

【讨论】：

不变。变量由 UITextField 正确更新。但是 Observable 的值仍然不能反映正确的情况。 如何将isFullNameOKObs 绑定到您的按钮？请分享您正在使用的代码 还没确定怎么做。 据我所知，正确的方法是：isFullNameOKObs.bindTo(myButton.rx.isEnabled).disposed(by: disposeBag)。关于您对删除disposed(by: disposeBag) 的评论：这可能是因为您过早地处理了您的订阅，即。通过在代码中设置disposeBag = nil。

以上是关于基于 Observable 构建前端防腐策略的主要内容，如果未能解决你的问题，请参考以下文章

RxSwift 基于变量构建 Observable

策略模式，从防腐层改造聊到Nacos插件的应用

策略模式，从防腐层改造聊到Nacos插件的应用

前端Node项目发布流程

webpack 前端构建性能优化策略小结

前端不止：Web性能优化 - 关键渲染路径以及优化策略