插播一条小广告.orz
我的个人项目: iOS仿写有妖气漫画(组件化架构+响应式编程) 已经正式启动啦.jpg。
Update 2019-04-11：有妖气漫画这个项目因为结构不是很好，暂时先搁置了。小伙伴们需要MVVM+RxSwift源码的可以看我这两篇文章。
- iOS MVVM最佳实践（一）
- iOS MVVM最佳实践（二）
关于RxSwift
对RxSwift不熟悉的同学可以查看这两篇文档：
- RxSwift中文文档
- ReactiveX中文文档
这两篇文档翻译的都非常好，小伙伴们多多练习多多体会每个操作符，Rx系列其实也并不是那么难学(打不开的同学可以问我要电子书)。
MJRefresh的窘境
MJRefresh相信从事iOS开发的小伙伴们都很熟悉了，是由李明杰老师开源的下拉刷新上拉加载的第三方库。它使用的是cocoa中非常常见的target-action模式。先来看一眼传统的使用方式：
// 初始化一个header
tableView.mj_header = MJRefreshNormalHeader(refreshingTarget: self, refreshingAction: #selector(loadData))
// 设置刷新的回调
@objc func loadData() {
// 发起网络请求，balabala...
}
这种使用方式在经典的MVC架构下并没有太多问题（MVC结构下网络层代码无处安放，只有ViewController稍微合适，这块的内容网上大书特书，我就不瞎BB了）。
而在MVVM结构下，网络请求相关逻辑被移入了ViewModel。稍微扯几句MVVM，MVVM下View是知道ViewModel的，因为要执行数据绑定更新UI，而ViewModel是不知道View的，否则耦合就比较严重，ViewModel不能独立测试，MVVM的优势就荡然无存了。
接着上面的话题，传统的使用方式上:
@objc func loadData() {
// 发起网络请求，balabala...
API.loadData(success: { (responseObj) in
// 1. 处理返回的数据
// balabala...
// 2. 关闭mj_header/mj_footer的刷新状态
self.tableView.mj_header.endRefreshing()
}, failure: { (error) in
// 1. 处理错误
// balabala...
// 2. 同样要关闭刷新状态
self.tableView.mj_header.endRefreshing()
})
Command+R运行良好，可以泡杯茶休息一下了~~
慢着慢着，如果是MVVM，那么在ViewModel中就会是：
static func loadData() -> Observable {
return Observable.create({ (observer) in
let task = URLSession.shared.dataTask(with: URLRequest(url: URL(string: "http://balabala...")!), completionHandler: { (data, _, error) in
// 处理出错
guard error != nil else {
observer.onError(error!)
return
}
// 处理出错
guard let data = data else {
observer.onError(NSError(domain: "com.archer.errorDomain", code: 250, userInfo: nil))
return
}
// 请求成功 返回数据
observer.onNext(data)
observer.onCompleted()
})
task.resume()
return Disposables.create { task.cancel() }
})
}
那么问题来了，ViewModel中是不能持有View的，那么在这里就不能直接停止mj_header/mj_footer的刷新状态。又要返回View Controller在订阅的地方处理吗？像这样？
API.loadData()
.subscribe(onNext: { (data) in
// 处理数据
// balabala...
}, onError: { (error) in
// 1. 处理出错
// balabala...
// 2. 停止刷新
self.tableView.mj_header.endRefreshing()
}, onCompleted: {
// 停止刷新
self.tableView.mj_header.endRefreshing()
}).disposed(by: disposeBag)
对这个简单的请求来说可以是可以，可是这一点也不Rx。如果是一个返回给RxTableViewSectionedReloadDataSource的Observable
API.loadData() // 假设返回Observable
.bind(to: tableView.rx.items(dataSource: dataSouce))
.disposed(by: disposeBag)
emmm...没有地方处理刷新控件的状态了。聪明的你又想到了再写一遍API.loadData().subscribe去处理。zzZ~~简单来说这样会触发两次网络请求，因为Rx本身并不保持状态，你需要这样：
// 使用share操作符来共享状态
let mObservable = API.loadData().share(replay: 1)
mObservable
.bind(to: tableView.rx.items(dataSource: dataSouce))
.disposed(by: disposeBag)
mObservable
.subscribe(onNext: { (data) in
// ...
}, onError: { (error) in
// ...
}, onCompleted: {
// ...
}).disposed(by: disposeBag)
好吧，这样的代码已经和优雅不沾边了。
RxSwift结合MJRefresh
废话了半天，终于引出我们的主角了。简单总结一下我们的需求：在用户下拉tableView到一定距离，MJRefresh通知我们它已经进入刷新状态，此时可以去发起请求了，在请求成功结束或失败的时候，我们通知MJRefresh结束其刷新状态，这样就完成了一次具体下拉刷新操作。
查看一下MJRefresh的源码，MJRefreshHeader和MJRefreshFooter均继承自MJRefreshComponent，在MJRefreshComponent中定义了一个枚举：
/** 刷新控件的状态 */
typedef NS_ENUM(NSInteger, MJRefreshState) {
/** 普通闲置状态 */
MJRefreshStateIdle = 1,
/** 松开就可以进行刷新的状态 */
MJRefreshStatePulling,
/** 正在刷新中的状态 */
MJRefreshStateRefreshing,
/** 即将刷新的状态 */
MJRefreshStateWillRefresh,
/** 所有数据加载完毕，没有更多的数据了 */
MJRefreshStateNoMoreData
};
/** 刷新状态 一般交给子类内部实现 */
@property (assign, nonatomic) MJRefreshState state;
就是这个state控制了整个刷新控件的状态，实例方法beginRefreshing(), endRefreshing(), endRefreshingWithNoMoreData()均是改变state属性。
#pragma mark 进入刷新状态
- (void)beginRefreshing
{
[UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
self.alpha = 1.0;
}];
self.pullingPercent = 1.0;
// 只要正在刷新，就完全显示
if (self.window) {
self.state = MJRefreshStateRefreshing;
} else {
// 预防正在刷新中时，调用本方法使得header inset回置失败
if (self.state != MJRefreshStateRefreshing) {
self.state = MJRefreshStateWillRefresh;
// 刷新(预防从另一个控制器回到这个控制器的情况，回来要重新刷新一下)
[self setNeedsDisplay];
}
}
}
#pragma mark 结束刷新状态
- (void)endRefreshing
{
dispatch_async(dispatch_get_main_queue(), ^{
self.state = MJRefreshStateIdle;
});
}
- (void)endRefreshingWithNoMoreData
{
dispatch_async(dispatch_get_main_queue(), ^{
self.state = MJRefreshStateNoMoreData;
});
}
MJRefreshComponent的子类都是根据这个state来改变自身状态。明白了原理，接下来的目标就相对明确了。我们需要这个state通知我们何时发起请求，又需要通知这个state结束刷新，因此它需要同时是Observable和Observer。RxCocoa中为我们提供的ControlProperty刚好满足这个需求。
翻阅一下RxCocoa，UITextFiled的rx.text属性就实现为ControlProperty，让我们看一下它是怎么实现的：
public func controlProperty(
editingEvents: UIControlEvents,
getter: @escaping (Base) -> T,
setter: @escaping (Base, T) -> ()
) -> ControlProperty {
// 创建Observable
let source: Observable = Observable.create { [weak weakControl = base] observer in
// base被销毁就结束流
guard let control = weakControl else {
observer.on(.completed)
return Disposables.create()
}
// 发出初始值
observer.on(.next(getter(control)))
let controlTarget = ControlTarget(control: control, controlEvents: editingEvents) { _ in
if let control = weakControl {
// editingEvent触发时发出下一个值
observer.on(.next(getter(control)))
}
}
return Disposables.create(with: controlTarget.dispose)
}
// 流的生命周期和base一致
.takeUntil(deallocated)
let bindingObserver = Binder(base, binding: setter)
return ControlProperty(values: source, valueSink: bindingObserver)
}
最后的实现为这么一个泛型函数，传递的editingEvent是[.allEditingEvents, .valueChanged]。函数内部首先创建了一个Observable
整个流程理清了以后，实现RxMJRefresh就很简单了，直接上代码。
// RxTarget类并不是公开API 我们自己实现一下就好了
class Target: NSObject, Disposable {
private var retainSelf: Target?
override init() {
super.init()
self.retainSelf = self
}
func dispose() {
self.retainSelf = nil
}
}
// 自定义target，用来接收MJRefresh的刷新事件
private final
class MJRefreshTarget: Target {
weak var component: Component?
let refreshingBlock: MJRefreshComponentRefreshingBlock
init(_ component: Component , refreshingBlock: @escaping MJRefreshComponentRefreshingBlock) {
self.refreshingBlock = refreshingBlock
self.component = component
super.init()
component.setRefreshingTarget(self, refreshingAction: #selector(onRefeshing))
}
@objc func onRefeshing() {
refreshingBlock()
}
override func dispose() {
super.dispose()
self.component?.refreshingBlock = nil
}
}
// 扩展Rx 给MJRefreshComponent 添加refresh的rx扩展
extension Reactive where Base: MJRefreshComponent {
var refresh: ControlProperty {
let source: Observable = Observable.create { [weak component = self.base] observer in
MainScheduler.ensureExecutingOnScheduler()
guard let component = component else {
observer.on(.completed)
return Disposables.create()
}
// 发出初始值MJRefreshStateIdle
observer.on(.next(component.state))
let observer = MJRefreshTarget(component) {
// 在用户下拉时 发出MJRefreshComponent 的状态
observer.on(.next(component.state))
}
return observer
}.takeUntil(deallocated)
// 在setter里设置MJRefreshComponent 的状态
// 当一个Observable发出，假如这个state是MJRefreshStateIdle，那么MJRefreshComponent 就会结束刷新
let bindingObserver = Binder(self.base) { (component, state) in
component.state = state
}
return ControlProperty(values: source, valueSink: bindingObserver)
}
}
几乎就是照葫芦画瓢了~~
再来预习一下使用：
func bind(reactor: ViewControllerReactor) {
// 如果发出一个refreshing事件，就发起请求
// 这里就是用户下拉tableview了
tableView.mj_header
.rx.refresh
.filter { $0 == .refreshing }
.map { _ in Reactor.Action.refresh }
.bind(to: reactor.action)
.disposed(by: disposeBag)
// 点击按钮转换成发出refreshing事件 refreshing已绑定到Reactor.Action.Refresh
// 触发mj_header刷新 然后请求数据
navigationItem.rightBarButtonItem?.rx.tap
.map { MJRefreshState.refreshing }
.bind(to: tableView.mj_header.rx.refresh)
.disposed(by: disposeBag)
// 绑定tableview数据源
reactor.state
.map { $0.sectionModels }
.bind(to: tableView.rx.items(dataSource: dataSouce))
.disposed(by: disposeBag)
// 根据返回的状态控制mj_header的状态
reactor.state
.map { $0.refreshingState }
.bind(to: tableView.mj_header.rx.refresh)
.disposed(by: disposeBag)
}
这里使用了ReactorKit而不是MVVM，关于ReactorKit大家可以去Github上看看不难使用。最后附上代码MJRefresh+Rx。