iOS 元件化方案，帶有原始碼

發表於2016-12-25

iOS元件化原始碼

概述

近一年iOS業界討論元件化方案甚多，大體來說有3種。

Protocol註冊方案
URL註冊方案
Target-Action runtime呼叫方案

URL註冊方案據我瞭解很多大公司都在採用，蘑菇街 App 的元件化之路蘑菇街的Limboy在這篇部落格中做了很詳盡的闡述

Target-Action runtime呼叫方案Casa在 iOS應用架構談元件化方案中也做了很詳盡的描述，前陣時間Casa開了一篇部落格在現有工程中實施基於CTMediator的元件化方案清楚講述瞭如何用這套方案實施元件化

Protocol方案我尚未看到有人做過詳盡的分享，也許是我孤陋寡聞，不過在這裡，我會教大家用Protocol方案實施元件化,不僅如此..

我會採用以上3種方案詳盡的實現3個Demo，Demo會在文尾給到，本文不過多闡述3種方案的優劣，我會在最後做一個總結，希望給想了解元件化方案的同學或者給在專案中準備實施元件化方案的同學提供一個借鑑。

業務模擬場景

首頁展示商品列表
商品詳情頁展示商品的詳細資訊
確認訂單頁生成訂單

把業務連貫起來點選首頁中A商品，進入A商品的商品詳情頁 ,點選商品詳情頁中的 立即購買 進入確認訂單頁，點選確認訂單頁中的提交訂單 會返回到商品詳情頁,並且在商品詳情頁中告知使用者下單成功.

真實業務場景下確認訂單頁 點提交訂單 是不會回到商品詳情頁的，模擬這個場景是想在Demo中實現2個模組中反向回撥。

一、Protocol註冊方案

正式實施前先奉上Demo,建議只下一個主專案就可以了（注：下載完不需要pod install或者pod update，pods在我私有源上我沒有填寫.gitignore檔案,下載完都是可以直接跑的）

1.基本準備工作

先去gitHub建立一個專案存放私有Repo源,repo地址https://github.com/sun6boys/CRRepositories.git 後面3種方案私有pod源都會放在這裡。
本地新增私有源終端執行命令pod repo add CRRepositories https://github.com/sun6boys/CRRepositories.git（如果之前並未向gitHub push過檔案也沒有把SSH公鑰儲存到gitHub，這時候應該會提示你輸入gitHub賬號密碼)
以上操作完成 cd ~/.cocoapods/repos目錄下至少會有2個資料夾 *CRRepositories 和 master, master檔案下面存放的是公有原始檔,CRRepositories目錄下目前是空的，後面會存放我們私有原始檔
基本準備工作完成。

2.Xcode建立專案[CRProtocolManager]

CRProtocolManager和MGJRouter、CTMediator一樣屬於模組之間排程的中介軟體

在CRProtocolManager專案下建立名為CRProtocolManager的資料夾，後面我們需要做成私有pod的檔案均放在該資料夾下。

建立CRProtocolManager類(.h,.m)，定義2個對外介面

@interface CRProtocolManager : NSObject

+ (void)registServiceProvide:(id)provide forProtocol:(Protocol*)protocol;

+ (id)serviceProvideForProtocol:(Protocol *)protocol;

@end

@interface CRProtocolManager : NSObject

+ (void)registServiceProvide:(id)provide forProtocol:(Protocol*)protocol;

+ (id)serviceProvideForProtocol:(Protocol *)protocol;

@end

具體方法實現很簡單可以參看Demo，我這裡只是簡單處理。
接下來就是要把專案提交到gitHub，做私有pod了

gitHub新建一個project名為CRProtocolManager
終端cd至CRProtocolManager專案目錄下執行命令git remote add origin https://github.com/sun6boys/CRProtocolManager.git
因cocoaPods強制新增開源許可檔案執行命令echo MIT>FILE_LICENSE建立名為FILE_LICENSE的檔案
終端cd至CRProtocolManager目錄下執行命令pod spec create CRProtocolManager
執行命令vim .CRProtocolManager.podspec編輯podspec檔案，具體如何編輯可參看Demo中的podspec檔案或者google
退出編輯執行命令git add .
`git commit -m ‘log’
git tag 0.0.1 tag一定要和podspec中的version一致
git push origin master --tags –tags為了把剛才新增的tag提交上去
執行命令pod repo push CRRepositories CRProtocolManager.podspec --verbose --allow-warnings 注：CRRepositories即為準備工作中的私有源倉庫
成功後pod search CRProtocolManager應該就能搜尋到了

萬里長征終於走完第一步，基礎設施已經構建完畢

3.商品詳情業務模組

既然元件化了，那我們所有的業務模組都是單獨的project，但是這裡我會分2個project，一個是商品詳情業務入口模組，一個是商品詳情業務模組。業務入口模組即是定義該模組對外提供業務介面的protocol，如果A模組需要呼叫到B模組，那A模組只需要引入CRProtocolManager和B模組的protocol,而不是引入整個B模組。

新建一個projectCRGoodsDetailServiceProtocol,建立一個和專案名一樣的protocol檔案，定義介面如下

@protocol CRGoodsDetailServiceProtocol 

@required;

- (UIViewController *)goodsDetailViewControllerWithGoodsId:(NSString*)goodsId goodsName:(NSString *)goodsName;

@end

@protocol CRGoodsDetailServiceProtocol

@required;

- (UIViewController *)goodsDetailViewControllerWithGoodsId:(NSString*)goodsId goodsName:(NSString *)goodsName;

@end

參照CRProtocolManager做成私有pod

以上實施完畢，新建一個projectCRGoodsDetail,新建2個類

CRGoodsDetailServiceProvide
CRGoodsDetailViewController

1 2	CRGoodsDetailServiceProvide CRGoodsDetailViewController

CRGoodsDetailServiceProvide即是CRGoodsDetailServiceProtocol的實現者 所以他依賴
CRGoodsDetailServiceProtocol，因為商品詳情模組需要跳轉到訂單確認頁，所以他也依賴CRProtocolManager。

新增Podfile檔案編輯如下

source 'https://github.com/sun6boys/CRRepositories.git'
source 'https://github.com/CocoaPods/Specs.git'

target 'CRGoodsDetail' do

pod "CRProtocolManager"
pod "CRGoodsDetailServiceProtocol"

end

source 'https://github.com/sun6boys/CRRepositories.git'

source 'https://github.com/CocoaPods/Specs.git'

target 'CRGoodsDetail' do

pod "CRProtocolManager"

pod "CRGoodsDetailServiceProtocol"

end

執行pod install --verbose --no-repo-update

最終CRGoodsDetailServiceProvide實現程式碼如下

#import "CRGoodsDetailServiceProvide.h"
#import 
#import 

#import "CRGoodsDetailViewController.h"

@interface CRGoodsDetailServiceProvide()

@end

@implementation CRGoodsDetailServiceProvide

+ (void)load
{
    [CRProtocolManager registServiceProvide:[[self alloc] init] forProtocol:@protocol(CRGoodsDetailServiceProtocol)];
}

- (UIViewController *)goodsDetailViewControllerWithGoodsId:(NSString*)goodsId goodsName:(NSString *)goodsName
{
    CRGoodsDetailViewController *goodsDetailVC = [[CRGoodsDetailViewController alloc] initWithGoodsId:goodsId goodsName:goodsName];
    return goodsDetailVC;
}

@end

#import "CRGoodsDetailServiceProvide.h"

#import

#import "CRGoodsDetailViewController.h"

@interface CRGoodsDetailServiceProvide()

@end

@implementation CRGoodsDetailServiceProvide

+ (void)load

{

[CRProtocolManager registServiceProvide:[[self alloc] init] forProtocol:@protocol(CRGoodsDetailServiceProtocol)];

}

- (UIViewController *)goodsDetailViewControllerWithGoodsId:(NSString*)goodsId goodsName:(NSString *)goodsName

{

CRGoodsDetailViewController *goodsDetailVC = [[CRGoodsDetailViewController alloc] initWithGoodsId:goodsId goodsName:goodsName];

return goodsDetailVC;

}

@end

CRGoodsDetailViewController實現程式碼如下

#import "CRGoodsDetailViewController.h"

@interface CRGoodsDetailViewController ()

@property (nonatomic, copy) NSString *goodsId;
@property (nonatomic, copy) NSString *goodsName;

@property (nonatomic, strong) UILabel *statusLabel;
@property (nonatomic, strong) UIButton *buyButton;
@end

@implementation CRGoodsDetailViewController

- (instancetype)initWithGoodsId:(NSString *)goodsId goodsName:(NSString *)goodsName
{
    self = [super init];
    if (self) {
        _goodsId = goodsId;
        _goodsName = goodsName;
    }
    return self;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.title = self.title;

    [self.view addSubview:self.statusLabel];
    [self.view addSubview:self.buyButton];
}

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    self.statusLabel.frame = CGRectMake(0, 0, 100, 20);
    self.statusLabel.center = self.view.center;

    self.buyButton.frame = CGRectMake(0, self.view.frame.size.height - 45, self.view.frame.size.width, 45);
}

#pragma mark - event 
- (void)didClickBuyButton:(UIButton *)button
{

}

#pragma mark - getters
- (UILabel *)statusLabel
{
    if (_statusLabel == nil) {
        _statusLabel = [[UILabel alloc] init];
        _statusLabel.textColor = [UIColor redColor];
        _statusLabel.font = [UIFont systemFontOfSize:15.f];
        _statusLabel.textAlignment = NSTextAlignmentCenter;
        _statusLabel.text = @"暫未購買";
    }
    return _statusLabel;
}

- (UIButton *)buyButton
{
    if (_buyButton == nil) {
        _buyButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [_buyButton setTitle:@"立即購買" forState:UIControlStateNormal];
        [_buyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [_buyButton setBackgroundColor:[UIColor redColor]];
        [_buyButton addTarget:self action:@selector(didClickBuyButton:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _buyButton;
}
@end

#import "CRGoodsDetailViewController.h"

@interface CRGoodsDetailViewController ()

@property (nonatomic, copy) NSString *goodsId;

@property (nonatomic, copy) NSString *goodsName;

@property (nonatomic, strong) UILabel *statusLabel;

@property (nonatomic, strong) UIButton *buyButton;

@end

@implementation CRGoodsDetailViewController

- (instancetype)initWithGoodsId:(NSString *)goodsId goodsName:(NSString *)goodsName

{

self = [super init];

if (self) {

_goodsId = goodsId;

_goodsName = goodsName;

}

return self;

}

- (void)viewDidLoad {

[super viewDidLoad];

self.navigationItem.title = self.title;

[self.view addSubview:self.statusLabel];

[self.view addSubview:self.buyButton];

}

- (void)viewWillLayoutSubviews

{

[super viewWillLayoutSubviews];

self.statusLabel.frame = CGRectMake(0, 0, 100, 20);

self.statusLabel.center = self.view.center;

self.buyButton.frame = CGRectMake(0, self.view.frame.size.height - 45, self.view.frame.size.width, 45);

}

#pragma mark - event

- (void)didClickBuyButton:(UIButton *)button

{

}

#pragma mark - getters

- (UILabel *)statusLabel

{

if (_statusLabel == nil) {

_statusLabel = [[UILabel alloc] init];

_statusLabel.textColor = [UIColor redColor];

_statusLabel.font = [UIFont systemFontOfSize:15.f];

_statusLabel.textAlignment = NSTextAlignmentCenter;

_statusLabel.text = @"暫未購買";

}

return _statusLabel;

}

- (UIButton *)buyButton

{

if (_buyButton == nil) {

_buyButton = [UIButton buttonWithType:UIButtonTypeCustom];

[_buyButton setTitle:@"立即購買" forState:UIControlStateNormal];

[_buyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

[_buyButton setBackgroundColor:[UIColor redColor]];

[_buyButton addTarget:self action:@selector(didClickBuyButton:) forControlEvents:UIControlEventTouchUpInside];

}

return _buyButton;

}

@end

把CRGoodsDetail做成私有pod 記得編輯podspec檔案的時候新增dependencyCRProtocolManager CRGoodsDetailServiceProtocol

4.新建主專案`MainProject`

為了少建一個專案首頁模組我是直接放在主專案中的，按理首頁也應該是一個獨立的pod.
首頁業務場景是，顯示商品列表，點選某個商品進入該商品詳情頁. 所以他依賴CRGoodsDetailServiceProtocol和CRProtocolManager因為首頁模組即是主專案所以他還得依賴CRGoodsDetail

最終首頁核心程式碼如下

#pragma mark - event
- (void)didClickGoodsButton:(UIButton *)button
{
    id goodsServiceProvide = [CRProtocolManager serviceProvideForProtocol:@protocol(CRGoodsDetailServiceProtocol)];
    UIViewController *goodsDetailVC = [goodsServiceProvide goodsDetailViewControllerWithGoodsId:@"123" goodsName:@"農夫山泉礦泉水"];
    [self.navigationController pushViewController:goodsDetailVC animated:YES];

}

#pragma mark - event

- (void)didClickGoodsButton:(UIButton *)button

{

id goodsServiceProvide = [CRProtocolManager serviceProvideForProtocol:@protocol(CRGoodsDetailServiceProtocol)];

UIViewController *goodsDetailVC = [goodsServiceProvide goodsDetailViewControllerWithGoodsId:@"123" goodsName:@"農夫山泉礦泉水"];

[self.navigationController pushViewController:goodsDetailVC animated:YES];

}

5.確認訂單模組

參照商品詳情新建確認訂單業務入口pod 以及確認訂單業務pod.和商品詳情有區別的是，提交訂單完成後要回到商品詳情並且通知商品詳情使用者已經購買,所以CRConfirmOrderServiceProtocol介面定義如下

@protocol CRConfirmOrderServiceProtocol 

- (UIViewController *)confirmOrderViewControllerWithGoodsId:(NSString *)goodsId sureComplete:(dispatch_block_t)sureComplete;

@end

@protocol CRConfirmOrderServiceProtocol

- (UIViewController *)confirmOrderViewControllerWithGoodsId:(NSString *)goodsId sureComplete:(dispatch_block_t)sureComplete;

@end

最後記得在商品詳情加上跳轉並且podspec裡面加上dependency

Protocol註冊方案完結

初稿未完結待續

iOS 元件化方案
2016-09-22
iOS元件化
iOS元件化方案（二）
2017-01-06
iOS元件化
iOS 元件化方案探索
2016-03-21
iOS元件化
IOS元件化方案總結
2018-12-26
iOS元件化
iOS 元件化實踐方案－LDBusMediator 煉就
2016-05-31
iOS元件化
iOS元件化解決方案
2021-09-09
iOS元件化
Vue 原始碼閱讀（六）元件化
2018-03-08
Vue原始碼元件化
Android程式碼混淆&元件化混淆方案
2020-11-20
Android元件化
iOS 元件化開發（三）：載入資原始檔
2018-04-06
iOS元件化
帶有Python的音訊處理（附帶原始碼）
2021-02-09
Python音訊原始碼
iOS有關架構元件化的文章連結
2016-12-09
iOS架構元件化
iOS-元件化
2021-05-28
iOS元件化
談談元件化-從原始碼到理解
2018-06-04
元件化原始碼
去中心化（多鏈）錢包系統開發方案（現有原始碼）
2022-06-07
中心化原始碼
滴滴外掛化方案 VirtualApk 原始碼解析
2019-02-27
APK原始碼
元件化方案調研
2018-02-15
元件化
iOS元件化實踐
2019-03-03
iOS元件化
iOS的元件化（模組化）之路
2019-03-04
iOS元件化
Flutter元件化開發方案
2018-12-15
Flutter元件化
iOS元件化之私有庫
2018-08-30
iOS元件化
iOS的元件化思路分享
2018-12-05
iOS元件化
iOS的元件化開發
2018-10-09
iOS元件化
iOS 元件化實踐思考
2017-10-27
iOS元件化
線上直播原始碼開發IOS端問題解決方案
2020-06-01
原始碼iOS
WAS 6.1中附帶有以下的開放原始碼專案
2008-09-05
原始碼
ASM概述、元件、優點、條帶化
2017-02-26
ASM元件
iOS專案元件化歷程
2019-03-12
iOS元件化
iOS專案元件化研究（一）
2018-05-27
iOS元件化
Axios原始碼解析
2021-09-22
iOS原始碼
Axios原始碼分析
2019-01-13
iOS原始碼
iOS Aspects原始碼剖析
2017-12-21
iOS原始碼
Hyperf/Crontab 元件原始碼解析
2020-06-02
元件原始碼
分頁元件原始碼分享
2018-10-10
元件原始碼
原始碼分析axios（1）~原始碼分析、模擬axios的建立
2022-01-24
原始碼iOS
iOS混編模組化、元件化、經驗指北
2017-12-14
iOS元件化
原始碼面前沒有祕密，推薦 9 個帶你閱讀原始碼的開源專案
2021-09-16
原始碼
JS輸入框郵箱自動提示(帶有demo和原始碼)
2013-12-10
JS原始碼
NOW直播——Flutter元件化開發方案
2018-11-22
Flutter元件化

iOS 元件化方案，帶有原始碼

Protocol註冊方案

URL註冊方案

Target-Action runtime呼叫方案

業務模擬場景

一、Protocol註冊方案

1.基本準備工作

2.Xcode建立專案[CRProtocolManager]

3.商品詳情業務模組

4.新建主專案MainProject

5.確認訂單模組

Protocol註冊方案完結

初稿未完結 待續

相關文章

4.新建主專案`MainProject`

初稿未完結待續