iOS元件化開發實踐-知識星球

作者：Colin_狂奔的螞蟻

連結：https://www.jianshu.com/p/f472fa9f0616

1、元件化需求來源

起初的這個專案，App只有一條產品線，程式碼邏輯相對比較清晰，後期隨著公司業務的迅速發展，現在App裡面承載了大概五六條產品線，每個產品線的流程有部分是一樣的，也有部分是不一樣的，這就需要做各種各樣的判斷及定製化需求。大概做了一年多後，出現了不同產品線提過來的需求，開發人員都需要在主工程中開發，但是開發人員開發的是不同的產品線，也得將整個工程跑起來，程式碼管理、並行開發效率、分支管理、上線時間明顯有所限制。大概就在去年底，我們的領導提出了這個問題，希望作成元件化，將程式碼重構拆分成模組，在主工程中組裝拆分的模組，形成一個完整的App。

2、元件化初識

隨著業務線的增多，業務的複雜度增加，App的程式碼邏輯複雜度也增加了，後期的開發維護成本也增加了，為什麼這麼說呢？業務邏輯沒有分類，查詢問題效率降低（針對新手），執行也好慢哦，真的好煩哦……我們要改變這種局面。而元件化開發，就是將一個臃腫，複雜的單一工程的專案, 根據功能或者屬性進行分解，拆分成為各個獨立的功能模組或者元件 ; 然後根據專案和業務的需求，按照某種方式, 任意組織成一個擁有完整業務邏輯的工程。

元件化開發的缺點：

程式碼耦合嚴重
依賴嚴重
其它app接入某條產品線難以整合
專案複雜、臃腫、龐大，編譯時間過長
難以做整合測試
對開發人員，只能使用相同的開發樣式
……

元件化開發的優點：

專案結構清晰
程式碼邏輯清晰
拆分粒度小
快速整合
能做單元測試
程式碼利用率高
迭代效率高
……

元件化的實質：就是對現有專案或新專案進行基礎、功能及業務邏輯的拆分，形成一個個的元件庫，使宿主工程能在拆分的元件庫裡面查詢需要的功能，組裝成一個完整的App。

3、元件化必備的工具使用

元件的存在方式是以每個pod庫的形式存在的。那麼我們組合元件的方法就是透過利用CocoaPods的方式新增安裝各個元件，我們就需要製作CocoaPods遠端私有庫，將其發不到公司的gitlab或GitHub，使工程能夠Pod下載下來。

Git的基礎命令：

echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/c/test.git
git push -u origin master

Git命令的簡單整理

CocoaPods遠端私有庫製作：

1、Create Component Project

pod lib create ProjectName

2、Use Git

echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/c/test.git
git push -u origin master

3、Edit podspec file

vim CoreLib.podspec
Pod::Spec.new do |s|
  s.name             = '元件工程名'
  s.version          = '0.0.1'
  s.summary          = 'summary'

  s.description      = <  description
                       DESC

  s.homepage         = '遠端倉庫地址'
  s.license          = { :type => 'MIT', :file => 'LICENSE' }
  s.author           = { '作者' => '作者' }
  s.source           = { :git => '遠端倉庫地址', :tag => s.version.to_s }

  s.ios.deployment_target = '8.0'

  s.source_files = 'Classes/**/*.{swift,h,m,c}'
  s.resources = 'Assets/*'

  s.dependency 'AFNetworking', '~> 2.3'
end

4、Create tag

//create local tag
git tag '0.0.1'
或
git tag 0.0.1

//local tag push to remote
git push --tags
或
git push origin 0.0.1

//delete local tag
git tag -d 0.0.1

//delete remote tag
git tag origin :0.0.1

5、Verify Component Project

pod lib lint --allow-warnings --no-clean

6、Push To CocoaPods

pod repo add CoreLib git@git.test/CoreLib.git
pod repo push CoreLib CoreLib.podspec --allow-warnings

4、模組拆分

模組拆分&組裝圖.jpeg

基礎元件庫：

基礎元件庫放一些最基礎的工具類，比如金額格式化、手機號/身份證/郵箱的有效校驗，實質就是不會依賴業務，不會和業務牽扯的檔案。

功能元件庫：

分享的封裝、圖片的輪播、跑馬燈功能、推送功能的二次封裝，即開發一次，以後都能快速整合的功能。

業務元件庫：

登入元件、實名元件、訊息元件、借款元件、還款元件、各條產品線元件等。

中介軟體（元件通訊）：

各個業務元件拆分出來後，元件之間的通訊、傳參、回呼就要考慮了，此時就需要一個元件通訊的工具類來處理。

CocoaPods遠端私有庫：

每個拆分出去的元件存在的形式都是以Pod的形式存在的，並能達到單獨執行成功。

宿主工程：

宿主工程就是一個殼，在元件庫中尋找這個工程所需要的元件，然後拿過來組裝成一個App。

5、元件工程相容swift環境

在做元件化之前，這個專案使用的是Objective-C語言寫的，還沒有支援在專案裡面使用Swift語言的能力，考慮到後期肯定會往Swift語言切過去的，於是藉著這次重構的機會，建立的元件工程都是swift工程。

Podfile檔案需要新增==use_frameworks!==

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
inhibit_all_warnings!
use_frameworks!

target 'CoreLib_Example' do
  pod 'CoreLib', :path => '../'
end

這裡其實有個大坑需要特別註意，在支援Swift環境後，部分Objective-C語言的三方庫採用的是==靜態庫==，在OC檔案中取用三方庫頭檔案，會一直報頭檔案找不到，我們在遇到這個問題時找遍了百度，都沒找到解決方案，整整花了一個星期的時間嘗試。

解決方案：我們對這些三方庫（主要有：UMengAnalytics、Bugly、AMapLocation-NO-IDFA）再包一層，使用CocoaPods遠端私有庫管理，對外暴露我們寫的檔案，取用我們寫的頭檔案，就能呼叫到。

Pod::Spec.new do |s|
  s.name             = ''
  s.version          = '0.0.1'
  s.summary          = '包裝高德地圖、分享、友盟Framework.'

  s.description      = <                       DESC

  s.homepage         = ''
  s.license          = { :type => 'MIT', :file => 'LICENSE' }
  s.author           = { '' => '' }
  s.source           = { :git => '', :tag => s.version.to_s }

  s.ios.deployment_target = '8.0'

  s.source_files = ['Classes/UMMob/**/*.{h,m}','Classes/Bugly/**/*.{h,m}','Classes/AMap/**/*.{h,m}']
  s.public_essay-header_files = ['Classes/*.h']
  s.libraries = 'sqlite3', 'c++', 'z', 'z.1.1.3', 'stdc++', 'stdc++.6.0.9'
  s.frameworks = 'SystemConfiguration', 'CoreTelephony', 'JavaScriptcore', 'CoreLocation', 'Security', 'Foundation'
  s.vendored_frameworks = 'Frameworks/**/*.framework'
  s.xcconfig = { "FRAMEWORK_SEARCH_PATHS" => "Pods/WDContainerLib/Frameworks" }

  s.requires_arc = true
end

6、元件之間的通訊

在將業務控制器拆分出去後，如果一個元件要呼叫另一個元件裡面的控制器，平常的做法是直接==#import “控制器頭檔案”==，現在在不同的元件裡面是無法import的，那該怎麼做呢？答案就是使用==訊息傳送機制==。

思路：

1、每個業務元件庫裡面會有一個控制器的配置檔案（路由配置檔案），標記著每個控制器的key；

2、在App每次啟動時，元件通訊的工具類裡面需要解析控制器配置檔案（路由配置檔案），將其載入進記憶體；

3、在記憶體中查詢路由配置，找到具體的控制器並動態生成類，然後使用==訊息傳送機制==進行呼叫函式、傳引數、回呼，都能做到。

((id (*)(id, SEL, NSDictionary *)) objc_msgSend)((id) cls, @selector(load:), param);
((void(*)(id, SEL,NSDictionary*))objc_msgSend)((id) vc, @selector(callBack:), param);

Or

[vc performSelector:@selector(load:) withObject:param];
[vc performSelector:@selector(callBack:) withObject:param];

好處：

解除了控制器之間的依賴；

使用iOS的訊息傳送機制進行傳引數、回呼引數、透傳引數；

路由表配置檔案，能實現介面動態配置、動態生成介面；

路由表配置檔案放到服務端，還可以實現線上App的跳轉邏輯；

將控制器的key提供給H5，還可以實現H5跳轉到Native介面；

7、元件化後的資源載入

新專案已開始就採用元件化開發，還是特別容易的，如果是老專案重構成元件化，那就比較悲劇了，OC專案重構後，app包裡面會有一個==Frameworks==檔案夾，所有的元件都在這個檔案夾下，並且以==.framework==（比如：WDComponentLogin.framework）結尾。在工程中使用的==xib、圖片==，使用正常的方式載入，是載入不到的，原因就是xib、圖片的路徑==（工程.app/Frameworks/WDComponentLogin.framework/LoginViewController.nib、工程.app/Frameworks/WDComponentLogin.framework/login.png）==發生了變化。

以下是在元件庫中載入nib檔案/圖片檔案的所有情況：

/**
 從主工程mainBundle或從所有的元件(元件名.framework)中載入圖片
 @param imageName 圖片名稱
 @return 傳回查詢的圖片結果
 */
+ (UIImage *_Nullable)loadImageNamed:(NSString *_Nonnull)imageName;

/**
 從指定的元件中載入圖片，主要用於從當前元件載入其他元件中的圖片
 @param imageName 圖片名稱
 @param frameworkName 元件名稱
 @return 傳回查詢的圖片結果
 */
+ (UIImage *_Nullable)loadImageNamed:(NSString *_Nonnull)imageName frameworkName:(NSString *_Nonnull)frameworkName;

/**
 從指定的元件的Bundle檔案夾中載入圖片，主要用於從當前元件載入其他元件Bundle檔案夾中的圖片
 @param imageName 圖片名稱
 @param bundleName Bundle檔案夾名
 @param frameworkName 元件名稱
 @return 傳回查詢的圖片結果
 */
+ (UIImage *_Nullable)loadImageNamed:(NSString *_Nonnull)imageName bundleName:(NSString *_Nonnull)bundleName frameworkName:(NSString *_Nonnull)frameworkName;

/**
 從主工程mainBundle的指定Bundle檔案夾中去載入圖片
 @param imageName 圖片名稱
 @param bundleName Bundle檔案夾名
 @return 傳回查詢的圖片結果
 */
+ (UIImage *_Nullable)loadImageNamed:(NSString *_Nonnull)imageName bundleName:(NSString *_Nonnull)bundleName;
/**
 從指定的元件(元件名.framework)中載入圖片
 說明：載入元件中的圖片，必須指明圖片的全名和圖片所在bundle的包名
 @param imageName 圖片名稱
 @param targetClass 當前類
 @return 傳回查詢的圖片結果
 */
+ (UIImage *_Nullable)loadImageNamed:(NSString *_Nonnull)imageName targetClass:(Class _Nonnull)targetClass;

/**
 從指定的元件(元件名.framework)中的Bundle檔案夾中載入圖片
 說明：載入元件中的圖片，必須指明圖片的全名和圖片所在bundle的包名

 @param imageName 圖片名稱
 @param bundleName Bundle檔案夾名
 @param targetClass 當前類
 @return 傳回查詢的圖片結果
 */
+ (UIImage *_Nullable)loadImageNamed:(NSString *_Nonnull)imageName bundleName:(NSString *_Nonnull)bundleName targetClass:(Class _Nonnull)targetClass;

/**
 載入工程中的nib檔案
 eg：[_tableview registerNib:[WDLoadResourcesUtil loadNibClass:[WDRepaymentessay-headerView class]] forHeaderFooterViewReuseIdentifier:kWDRepaymentessay-headerView]
 @param class nib檔案名
 @return 傳回所需要的nib物件
 */
+ (UINib *_Nullable)loadNibClass:(NSObject *_Nonnull)targetClass;

控制器載入方式：

@implementation WDBaseViewController

- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    NSString *classString = [[NSStringFromClass(self.class) componentsSeparatedByString:@"."] lastObject];
    if ([[NSBundle bundleForClass:[self class]] pathForResource:classString ofType:@"nib"] != nil) {
        //有xib
          return [super initWithNibName:classString bundle:[NSBundle bundleForClass:[self class]]];
    }else if ([[NSBundle mainBundle] pathForResource:classString ofType:@"nib"] == nil) {
        //沒有xib
        return [super initWithNibName:nil bundle:nibBundleOrNil];
    } else {
        return [super initWithNibName:(nibNameOrNil == nil ? classString : nibNameOrNil) bundle:nibBundleOrNil];
    }
}
@end

UIView檢視載入方式：

OC版本

+ (id)loadFromNIB {
    if ([[NSFileManager defaultManager] fileExistsAtPath:[NSBundle bundleForClass:[self class]].bundlePath]) {
        return [[[NSBundle bundleForClass:[self class]] loadNibNamed:[self description]
                                                               owner:self
                                                             options:nil] lastObject];
    }else{
        return [[[NSBundle mainBundle] loadNibNamed:[self description] owner:self options:nil] lastObject];
    }

}

+ (id)loadFromNIB:(NSInteger)index {
    if ([[NSFileManager defaultManager] fileExistsAtPath:[NSBundle bundleForClass:[self class]].bundlePath]) {
        return [[NSBundle bundleForClass:[self class]] loadNibNamed:[self description]
                                                              owner:self
                                                            options:nil][index];
    }else{
        return [[NSBundle mainBundle] loadNibNamed:[self description] owner:self options:nil][index];
    }

}

Swift版本

// MARK: - 透過nib載入檢視
@objc public static func loadFromNIB() -> UIView! {
    return (Bundle(for: self.classForCoder()).loadNibNamed(self.description().components(separatedBy: ".")[1], owner: self, options: nil)?.first as? UIView)!
}

8、OC工程底層換swift程式碼

目前正在做OC底層的統一，換成swift寫的程式碼。

1、控制器Base、Web控制器Base使用OC程式碼，因為OC控制器不能繼承Swift，而Swift控制器可以繼承OC寫的控制器。

2、導航欄、工具欄、路由、基礎元件、功能元件、混合開發外掛都是用Swift語言。

3、Swift移動元件大部分完成，OC工程、Swift工程都統一使用開發的移動元件庫。

9、總結

經過半年的努力重構，終於將工程拆分成元件化開發了，也從中學到了很多，希望自己能再接再厲和同事一起進步。

釋出到看一看

</div><br />
<p><span class=”like_comment_msg” id=”js_b_like_comment_msg” style=”visibility: hidden;”>最多200字，當前共<span id=”js_b_like_current_cnt”/>字</span><br />
</div><br />
</div><br />
<div class=”like_comment_primary_mask” id=”js_mask_2″/><br />
</div><br />
<div id=”js_loading” style=” display: none;”><br />
<div class=”weui-mask_transparent”/><br />
<div class=”weui-toast”><br />
<i class=”weui-loading weui-icon_toast”/></p><br />
<p class=”weui-toast__content”>傳送中</p><br />
</div><br />
</div><br />
<div id=”js_fail” style=”display:none”><br />
<div class=”weui-mask”/><br />
<div class=”weui-dialog”><br />
<div class=”weui-dialog__bd”><br />
        網路異常，請稍後重試    </div><br />
<div class=”weui-dialog__ft”><br />
<a class=”weui-dialog__btn weui-dialog__btn_primary” href=”javascript:;” id=”js_fail_inform”>知道了</a><br />
</div><br />
</div><br />
</div><br />
<div class=”weui-desktop-popover weui-desktop-popover_pos-up-center weui-desktop-popover_img-text” id=”js_pc_weapp_code” style=”display: none;”><br />
<div class=”weui-desktop-popover__content”><br />
<div class=”weui-desktop-popover__desc”><br />
<img id=”js_pc_weapp_code_img”/><br /><br />
            微信掃一掃<br/>使用小程式<span id=”js_pc_weapp_code_des”/> </div><br />
</div><br />
</div><br />
<div id=”js_minipro_dialog” style=”display:none;”><br />
<div class=”weui-mask”/><br />
<div class=”weui-dialog”><br />
<div class=”weui-dialog__bd”>即將開啟”<span id=”js_minipro_dialog_name”/>”小程式</div><br />
<div class=”weui-dialog__ft”><br />
<a class=”weui-dialog__btn weui-dialog__btn_default” href=”javascript:void(0);” id=”js_minipro_dialog_cancel”>取消</a><br /><br />
<a class=”weui-dialog__btn weui-dialog__btn_primary” href=”javascript:void(0);” id=”js_minipro_dialog_ok”>開啟</a><br />
</div><br />
</div><br />
</div><br />
</div><br />

iOS元件化開發實踐

目錄：

1、元件化需求來源

2、元件化初識

3、元件化必備的工具使用

4、模組拆分

5、元件工程相容swift環境

6、元件之間的通訊

7、元件化後的資源載入

8、OC工程底層換swift程式碼

9、總結

朋友將在看一看看到

釋出到看一看

相關推薦

熱門標籤

熱門文章

分享創造快樂