一、需求背景

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、类图

2、代码原理剖析

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

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

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

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

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

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（显示释放中奖，播放数字闪动动画)

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

视频资料

iOS_架构模式

如果您觉得还不错，麻烦在文末 “点个赞” 或者下方评论，谢谢您的支持
查看原文

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