iOS链式语法数据绑定轻量级框架实践

254 阅读4分钟

一、需求背景

1、现状

当前组件化开发中,经常会用到MVVM设计模式,它促进了UI代码与业务逻辑的分离,一定程度解决viewController臃肿问题,但也使得数据绑定变得复杂,很多情况下需要我们手动绑定数据和刷新界面,经常要写一堆零散的数据绑定业务代码。

关于数据绑定的复杂度问题,我们完全可以使用ReactiveCocoa框架(一个典型的函数响应式编程框架)解决,这里不做深入了解,它虽然很好很强大,但对于组件化开发来说还是供过于求,目前我们仅仅需要一个轻量级的数据绑定框架。

2、目标

自己维护一个轻量级的数据绑定开源框架,例如CRDataBind(Chain Response Data Bind),它的接口调用支持链式语法,并通过响应式编程快速实现数据绑定更新。

(本方案主要以老虎机抽奖demo对其进行实践和分析,所用数据绑定框架原出自:github.com/shidavid/DV…,非常感谢作者的贡献!)

二、解决方案及亮点

1、方案概述

  • 使用链式编程,支持多项绑定,支持单向/双向数据流;
  • 支持过滤,某些条件下不更新绑定的数据;
  • 支持数值与字符串自动转换,以及自定义数据接收格式;
  • 只要支持KVC的对象都能实现数据绑定,不限定只能View和ViewModel;
  • 无需依赖第三方,无需手动解绑,当目标对象内存释放时,CRDataBind自动解绑和释放。

2、问题难点

1)、如何通过链式语法一次绑定多个对象?

2)、如何通过响应式编程实现数据绑定?

3)、如何实现自动解绑?

3、分析过程

1)、链式语法

在Objective-C中,我们调用方法一般使用“[]”,简单的调用看起来过得去。但如果叠加很多层调用后,便不易阅读,常有漏掉某个“]”或“[”报错情况。

链式语法的核心是点语法。为了让OC在进行多层方法调用时,能够优雅和清晰的展示代码,我们可以借鉴Swift、Masonary等的点语法形式。

示例:

    // Swift:获取文件路径
    let path: String = Bundle.main.path(forResource: "image",     ofType: "jpg")!  

    // Objective-C:Masonary布局更新
    [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self);
        make.width.equalTo(@(self.buttonSize.width)).priorityLow();
        make.height.equalTo(@(self.buttonSize.height)).priorityLow();
        make.width.lessThanOrEqualTo(self);
        make.height.lessThanOrEqualTo(self);
    }];
复制代码

点语法的关键是block,可借鉴Swift闭包的使用。它的特殊在于其本身可以帮助方法进行参数传递,并返回数据,这样我们便可以让方法不断返回实例本身,继续调用实例方法。

示例:

    /**绑定3
     model.winCode <---> winCodeLb.text <---> winCodeTF.text
     增加fiter过滤中奖号大于3位数的响应
     */
    CRDataBind
    ._inout(self.lotteryVM.currentLottery, @"winCode")
    ._out(self.winCodeLb, @"text")
    ._inout_ui(self.winCodeTF, @"text", UIControlEventEditingChanged)
    ._filter(^BOOL(NSString *text) {
        // 增加过滤:中奖号码不超过3位数,界面上无法配置大于3位数
        return text.length <= 3;
    });
复制代码

2)、响应式编程实现数据绑定

响应式编程是一种面向数据流和变化传播的编程范式,数据的输入输出(in&out)是关键,绑定-响应-刷新。数据inout的形式有:普通对象如target.property = value;UI对象如textField.text响应EditingChanged等等。

设想在同一个chain(响应链)中,我们需要一个观察者,观察者通过弱引用缓存所观察对象。然后,监听普通对象,可以使用KVO;监听UI对象时,绑定对应UI事件。那么chain上所观察的某个对象属性变化时,我们就可以遍历所有观察对象通过KVC(setValue:forkey:)进行更新操作。

3)、实现自动解绑

经过上面的分析,我们基本能实现接口的调用和实际数据绑定。接下来思考下:既然有绑定过程,那么对应的解绑也应该提供,而且最好是自动解绑,不需要外部手动去调用解绑和释放缓存。

应该如何触发解绑过程?比如target是进行数据绑定的对象,那么正常逻辑是target释放了,或者主动调用才进行解绑操作。我们需要捕获对象释放,现成的方式是利用dealloc方法,但我们的目的是自动解绑,所以不应在绑定的所有外部对象dealloc中调用解绑。于是我们可以考虑为所有target实现一个NSObject分类,并通过runtime关联一个targetModel,当target释放后,model也跟着释放,此时我们便可以在targetModel的dealloc中调用unbindWithTarget:进行解绑和释放缓存的操作。

三、详细设计

1、类图

image

2、代码原理剖析

1)、A 与 B 双向数据绑定,Ain数据变化更新Aout、Bout数据,Bin同理。

image

2)、有时候 A 与 B 双向绑定,B 与 C 双向绑定,其实相当于 A、B、C 一起绑定在一条数据链Chain上,每当有一个in数据变化,发送新数据到C

hain上,再由Chain更新所有的out数据。

image

这样实现单向/双向数据流。

image

3)、利用KVO和UI(addTarget:)事件,数据链就相当于Obverse,每个Observer用一个ChainCode标记,Observer观察每个in数据变化,并更新到所有out数据。

image

4)、主要对外接口阐述

链式语法调用的API,必须以 _inout 或 _in 开头(肯定要有数据in来源,不然后续也没意义),后面的绑定顺序可随意,不影响绑定结果。

  • _inout 发送+接收数据
  • _in 只发送数据
  • _out 只接收数据
  • _cv 进行自定义数据转换后再返回
  • _filter 条件过滤
  • _out_key_any 绑定自定义事件
  • _out_not 接收的数据取反再返回

具体接口如下:

#pragma mark - 双向绑定
+ (DataBindBlock)_inout;
+ (DataBindUIBlock)_inout_ui;
+ (DataBindConvertBlock)_inout_cv;
+ (DataBindUIConvertBlock)_inout_ui_cv;

- (DataBindBlock)_inout;
- (DataBindUIBlock)_inout_ui;
- (DataBindConvertBlock)_inout_cv;
- (DataBindUIConvertBlock)_inout_ui_cv;

#pragma mark - 单向绑定-发送(数据更新,只发送新数据,不接收)
+ (DataBindBlock)_in;
+ (DataBindUIBlock)_in_ui;

- (DataBindBlock)_in;
- (DataBindUIBlock)_in_ui;

#pragma mark - 单向绑定-接收(数据更新,只接收新数据,不发送)
- (DataBindBlock)_out;
- (DataBindConvertBlock)_out_cv;
- (DataBindBlock)_out_not;
- (DataBindKeyAnyOutBlock)_out_key_any;

#pragma mark - 过滤
- (DataBindFilterBlock)_fil
复制代码

四、使用示例

设置数据绑定一般放在胶水层(ViewController)中进行,具体可结合自身设计模式灵活运用。

导入头文件:

#import "CRDataBind.h"
复制代码

进行单向/双向数据绑定(label-只接收数据,model-即发送也接收数据响应):

    /**绑定
     model.winRate <---> rateLb.text <---> rateSlider.value
     */
    CRDataBind
    ._inout(self.lotteryVM.currentLottery, @"winRate")
    ._inout_ui(self.rateSlider, @"value", UIControlEventValueChanged)
    ._out(self.rateLb, @"text");
复制代码

根据条件过滤,未达到条件不处理响应:

    /**绑定
     model.winCode <---> winCodeLb.text <---> winCodeTF.text
     增加fiter过滤中奖号大于3位数的响应
     */
    CRDataBind
    ._inout(self.lotteryVM.currentLottery, @"winCode")
    ._out(self.winCodeLb, @"text")
    ._inout_ui(self.winCodeTF, @"text", UIControlEventEditingChanged)
    ._filter(^BOOL(NSString *text) {
        // 增加过滤:中奖号码不超过3位数,界面上无法配置大于3位数
        return text.length <= 3;
    });
复制代码

自定义数据接收格式:

    /**绑定
     model.sn <---> snLb.text <---> self.view.backgroundColor
     其中backgroundColor需要转换输出格式
     */
    CRDataBind
    ._inout(self.lotteryVM.currentLottery, @"sn")
    ._out(self.snLb, @"text")
    ._out_cv(self.view, @"backgroundColor", ^UIColor *(NSNumber *num) {
        NSInteger index = num.integerValue % kBGColors.count;
        return kBGColors[index];
    });
复制代码

绑定自定义事件:

   /**绑定
     model.isWin <---> isWinLb.text <---> self.isWin
     增加外部自定义事件,中奖后让抽奖号码闪烁
     */
    __weak __typeof(&*self) weakSelf = self;
    CRDataBind
    ._inout(self.lotteryVM.currentLottery, @"isWin")
    ._out(self.isWinLb, @"text")
    ._out_key_any(@"202122", ^(NSNumber *num) {
        weakSelf.isWin = num.boolValue;
        NSLog(@">>>在setIsWin:中触发中奖时号码闪烁,iswin = %d", weakSelf.isWin);
    });
复制代码

五、成效举证

针对本案制作了CRDataBindDemo,它是一个老虎机摇号抽奖程序,通过MVVM + CRDataBind链式响应编程,快速地完成了多个带界面交互的数据绑定业务。

1、demo效果

地址:github.com/stkusegithu…

主要数据绑定链有:

  • model.sn <---> snLb.text <---> self.view.backgroundColor(期号递增显示不同背景色)
  • model.winRate <---> rateLb.text <---> rateSlider.value(滑动slider改变中奖率)
  • model.code <---> codeLb.text(抽奖后显示抽奖号码变化)
  • model.winCode <---> winCodeLb.text <---> winCodeTF.text(设置下一期中奖号)
  • model.isWin <---> isWinLb.text <---> self.isWin(显示释放中奖,播放数字闪动动画)

image

image

2、成效说明

比如demo中,需要配置老虎机下一期中奖号码时,在未使用CRDataBind前的业务代码书写如下:

- (void)setupBind {
    // 绑定textField编辑事件
    [self.winCodeTF addTarget:self    action:@selector(winCodeTFdidEdittingChanged:) forControlEvents:UIControlEventEditingChanged];

    // 未知的地方调用
    self.lotteryVM.currentLottery.winCode = @"222";
    [self freshWinCodeUI];
}

- (void)winCodeTFdidEdittingChanged:(UITextField *)textField {
    if (textField.text.length > 3) {
        textField.text = [textField.text substringToIndex:3];
        return;
    }
    self.lotteryVM.currentLottery.winCode = self.winCodeLb.text = textField.text;
}

- (void)freshWinCodeUI {
    // 刷新界面
    NSString *winCode = self.lotteryVM.currentLottery.winCode;
    self.winCodeLb.text = self.winCodeTF.text = winCode;
复制代码

可以看出上面比较零散和繁琐。再看看当我们使用CRDataBind后,是不是变得干净清爽多了:

- (void)setupBind {
    /**绑定
     model.winCode <---> winCodeLb.text <---> winCodeTF.text
     增加fiter过滤中奖号大于3位数的响应
     */
    CRDataBind
    ._inout(self.lotteryVM.currentLottery, @"winCode")
    ._out(self.winCodeLb, @"text")
    ._inout_ui(self.winCodeTF, @"text", UIControlEventEditingChanged)
    ._filter(^BOOL(NSString *text) {
        // 过滤:中奖号码需小于3位数
        return text.length <= 3;
    });
}
复制代码

六、核心代码范围

代码位于目录 CRDataBindDemo/CRDataBindDemo/CRDataBind/下

---CRDataBind

+---CRDataBindDefine.h

+---CRDataBind.h

+---CRDataBind.m

+---CRDataBindObserverManager.h

+---CRDataBindObserverManager.m

+---CRDataBindObserver.h

+---CRDataBindObserver.m

+---NSObject+DataBind.h

+---NSObject+DataBind.m

+---CRDataBindObserverModel.h

+---CRDataBindObserverModel.m

+---CRDataBindTargetModel.h

+---CRDataBindTargetModel.m

收录:原文地址