最近在學習vue.js的時候發現，vue的組件化的思想對于編寫代碼是一個非常有用的事情。
首先為什么需要組件化？
下面我列舉了一些比較常見的問題
- 業務模塊劃分不清楚，各模塊之間耦合度很大，難以維護
- 例如我們公司的商城項目隨著功能和時間，代碼量越來越大，早期的一些代碼已經不需要了，但是不敢輕易刪除，不敢保證該文件是夠有被使用。
- 就算手動去查找刪除，也是一件治標不治本的方法，等過一段時間還會出現這種問題
- 所有模塊代碼都編寫在一個項目中，測試某個模塊或功能的時候，需要編譯運行整個項目
- 這一點在做自動化測試的時候尤其明顯，如果某個地方出現問題，現在就無法再繼續進行測試了
- 復用性不好，需要經常造輪子
- 在我們的項目中，如果之前的開發人員離職了，那么他造過哪些輪子，經常后續的開發人員是不了解不清楚的。
- 如果又需要做一些類似的功能，新的開發人員有需要重復造輪子
- 開發效率很低，分工不明確
- 如果有新人加入項目，不能保證可以立刻投入開發。需要較長的時間來熟悉代碼，且新人在熟悉代碼的過程也容易走彎路。
組件化解決問題的思路
利用中間層來做到：只讓別的模塊對中間層產生耦合，中間層不對其他模塊產生耦合
關于這個中間層，這個問題在這里我們就不深究了，大家可以參考蘑菇街解決思路。
組件化的目的
我們可以講每一個模塊作為一個組件。并且建立一個主項目，這個朱羨慕負責集成所有組件。
好處：
- 業務劃分清晰，新人接受項目容易，不同的組件是不同的開發任務，大組件下的小組件是一個小的開發任務
- 項目維護性更強，需要什么功能，很好找到，提高了開發的銷量。
- 能夠更好的發現問題并找到問題，當某個地方出現問題了，可以直接對該組件進行處理，處理好了更新組件就好。
- 開發和測試的時候，可以只編譯自己寫的代碼，不需要編譯全部項目。測試人員也可以測試單個組件。
在這里需要解釋一下什么是組件？
一個分類可以是一個組件，一個輪播圖也可以是一個組件，一個Controller也是一個組件，甚至一個首頁模塊(包含內部的所有Controller和業務)，都可以是一個組件。
像分類這種被稱為基礎組件，輪播圖這種被稱為UI組件，Controller和首頁模塊這種被稱為業務組件。從前到后，從簡單到復雜，都是組件。
我們應該怎么做？
在組件化的架構中，有一個主項目用來負責集成其余組件。每一個組件又是一個單獨的工程。
組件只需要對外提供服務，通過中間件來調用這些服務。
在這里將通過iOS的cocoapods私有庫的形式來完成一個組件化的示例。
以cocoapods的AFNetworking為例。
當我們使用pod search AFNetworking的時候，就是去cocoapods的Specs索引中找到AFNetworking的配置信息，然后通過這個配置信息，配置信息包含的在github上的代碼地址，去獲得對應的代碼。
現在我們要做的就是按照cocoapods官方的這一套來生成我們自己的一套，我們自己生成一個非官方的Specs索引，在這個索引里只存放公司的庫索引，也就是一個個組件，這些組件的具體地址，放到我們想放到的地址下面。如coding私有庫，碼云，公司部署的gitlab等。
簡單的來說就是仿照上圖的這三個東西。
準備工作
本地的cocoapods必須要安裝好，如何安裝cocoapods，這里就不寫了
成員劃分
組件化主要負責人：負責建立最基本的Spec索引，搭建宿主項目，合并業務組件到宿主工程(理想狀況下)
團隊開發者：編寫組件，更新組件。
詳細步驟
-
編寫組件代碼，比如一個輪播圖，一個數據庫工具等，具體寫代碼的過程就不說了，這里我使用小碼哥的代碼來做示范，因為這個實踐的文檔也是基于一位講師的文章來做的。
下面是編寫好的代碼，在這里分了兩個模塊，一個是
Base，一個是Category。這兩個模塊不依賴于任何別的第三方文件和庫。Image Copied on 2019-02-21 at 15.15.35 PM.png
- 建立自己的
Spec索引，這里我們建立在碼云上，因為碼云免費且沒有項目個數的限制。在這里我的Spec項目名為LJDemoSpecs，這里我沒有添加ReadMe和.gitignore文件，因此會提示添加readme和lisence。
f9140582-fd88-4190-8e4b-e2478856ab3b.png.jpeg
現在我們將整個建立的podSpecs添加到我們本地的pod索引中，這里會驗證一下用戶名和密碼。
現在前往電腦中的個人下的.cocoapods文件夾，可以看到repos下面有兩個文件夾，一個是master，一個是LJDemoSpecs。
master是cocoapods的官方索引庫，而LJDemoSpecs是剛才我們建立的私人的索引庫，現在里面還什么都沒有。
這里想要查看
.cocoapods文件夾需要開啟顯示隱藏文件的權限
-
現在利用
pod來生成一個組件化的項目，這個項目的名字叫做LJDemoBase。這里不通過
xcode來建立project，而是使用pod命令來直接生成組件化的項目。這里的命令就是
pod lib create LJDemoBase，它會從cocoapods的模板中給你clone一個項目。- 詢問你使用的語言
- 是否需要
demo工程 - 是否使用測試
framework - 是否基于
View測試 - 類的前綴
輸入完畢后稍等片刻，
xcode會自動打開這個項目，我把全部的命令貼一下
ac80d2ec-62d0-4d88-84b1-10ba5f1c37c9.png
- 下面是自動生成的
pod項目的目錄結構-
Example主要存放對應的demo -
LJDemoBase主要存放代碼和需要的資源 - 而
podspec文件則是記錄著當前組件的相關信息，包括git地址，對應的描述，需要依賴的庫等等。 -
右側的信息不用填寫，后面再填寫
89386329-6665-49aa-b982-38e867140538.png
-
- 現在把第一步中的代碼添加到這個
pod項目中，添加代碼的方法有好幾種，這里我僅僅寫我使用的方法。- 在對應的
Example中編寫調試代碼，編寫完成后如下圖所示
- 在對應的
-
代碼已經寫完了，也調試好了。現在將對應的代碼放到
LJDemoBase下的Classes文件夾下，將Classes下已有的Relpace文件刪除。這里我們直接在
finder里操作，不是在Example的workspace操作。
08eb10e5-ab9c-4828-8252-1c8808798d53.png
- 現在刪除
Example項目中的的Base和Category，然后在Example目錄下使用命令pod install。對應的結果如下
7d573656-0777-4390-aa74-362c33fd0307.png.jpeg
- 再次查看
LJDemoBase.xcworkspace，可以看到對應的代碼已經自動被放到Development Pods下面了。
7818a553-4aef-4424-99de-b7bf342799dc.png
-
現在如果這就是我們這個小組件的第一個版本，當前代碼只是寫在本地，需要將他放到遠程倉庫上。我們在
gitoschina建立一個對應的倉庫。建立好以后如下圖所示：
1435f846-56dd-4c6b-b45f-e02b9d1c0f31.png
這里任然不添加
ReadMe和.gitignore文件，因為pod lib create創建的項目里已經有這兩個文件了
- 代碼雖然已經寫完了，但是對應的配置信息卻一點都沒有寫，現在來把配置信息補齊。
Pod::Spec.new do |s|
s.name = 'LJDemoBase' #名稱
s.version = '0.1.0' #版本號
s.summary = 'A short description of LJDemoBase.' #簡短介紹，下面是詳細介紹
# This description is used to generate tags and improve search results.
# * Think: What does it do? Why did you write it? What is the focus?
# * Try to keep it short, snappy and to the point.
# * Write the description between the DESC delimiters below.
# * Finally, don't worry about the indent, CocoaPods strips it!
s.description = <<-DESC
TODO: Add long description of the pod here.
DESC
#主頁,這里要填寫可以訪問到的地址，不然驗證不通過
s.homepage = 'https://gitee.com/lj360691676/LJDemoBase'
#截圖
# s.screenshots = 'www.example.com/screenshots_1', 'www.example.com/screenshots_2'
#開源協議
s.license = { :type => 'MIT', :file => 'LICENSE' }
#作者信息
s.author = { 'liangjian' => '360691676@qq.com' }
#項目地址，這里不支持ssh的地址，驗證不通過，只支持HTTP和HTTPS，最好使用HTTPS
s.source = { :git => 'https://gitee.com/lj360691676/LJDemoBase.git', :tag => s.version.to_s }
#多媒體介紹地址
# s.social_media_url = 'https://twitter.com/<TWITTER_USERNAME>'
#支持的平臺及版本
s.ios.deployment_target = '8.0'
#代碼源文件地址，**/*表示Classes目錄及其子目錄下所有文件，如果有多個目錄下則用逗號分開，如果需要在項目中分組顯示，這里也要做相應的設置
s.source_files = 'LJDemoBase/Classes/**/*'
#資源文件地址
# s.resource_bundles = {
# 'LJDemoBase' => ['LJDemoBase/Assets/*.png']
# }
#公開頭文件地址
# s.public_header_files = 'Pod/Classes/**/*.h'
#所需的framework，多個用逗號隔開
# s.frameworks = 'UIKit', 'MapKit'
#依賴關系，該項目所依賴的其他庫，如果有多個需要填寫多個s.dependency
# s.dependency 'AFNetworking', '~> 2.3'
end
在上面已經將對應的參數通過備注的形式解釋了，下面我貼一下我這個組件的podspec的截圖，劃線部分是修改過的地方。
由于不要依賴第三方庫和別的資源文件，因此s.dependency和s.resource_bundles都沒有打開注釋。
-
現在本地
LJDemoBase代碼和對應LJDemoBase的podspec都搞好了，LJDemoBase的遠程倉庫也建立好了，現在把本地和遠程的庫關聯起來。下面的操作基于
LJDemoBase主文件夾：
da93e30d-82ca-4fcb-98b1-47ee4be76bfc.png
-
做完上面的這些操作，再來看
oschina上的對應倉庫，對應的內容已經全部同步了a696054c-f7e0-46b9-8a58-268ce669b13e.png
現在本地和遠程倉庫已經關聯了
-
在我們使用
cocoapods的過程中，常常會發現當搜索某個庫的時候會有對應的Version,可以使用指定版本的代碼來集成到項目中，如下圖所示-> AFNetworking (3.1.0) A delightful iOS and OS X networking framework. pod 'AFNetworking', '~> 3.1.0' - Homepage: https://github.com/AFNetworking/AFNetworking - Source: https://github.com/AFNetworking/AFNetworking.git - Versions: 3.1.0, 3.0.4, 3.0.3, 3.0.2, 3.0.1, 3.0.0, 3.0.0-beta.3, 3.0.0-beta.2, 3.0.0-beta.1, 2.6.3, 2.6.2, 2.6.1, 2.6.0, 2.5.4, 2.5.3, 2.5.2, 2.5.1, 2.5.0, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 2.0.0-RC3, 2.0.0-RC2, 2.0.0-RC1, 1.3.4, 1.3.3, 1.3.2, 1.3.1, 1.3.0, 1.2.1, 1.2.0, 1.1.0, 1.0.1, 1.0, 1.0RC3, 1.0RC2, 1.0RC1, 0.10.1, 0.10.0, 0.9.2, 0.9.1, 0.9.0, 0.7.0, 0.5.1 [master repo] - Subspecs: - AFNetworking/Serialization (3.1.0) - AFNetworking/Security (3.1.0) - AFNetworking/Reachability (3.1.0) - AFNetworking/NSURLSession (3.1.0) - AFNetworking/UIKit (3.1.0)Version對應相關版本的代碼，通過git tag的形式來做到區分版本。下面我們也給當前的代碼制定一下版本，命令非常簡單，如下所示就是打了個0.1.0的
tag
93f0543c-982a-443b-8fc8-22e62feeef8f.png
查看遠程倉庫，可以看到這就是剛才的tag
- 現在一切準備就緒，需要將我們寫的這個組件的配置信息加入到私有的
pod索引里去，也就是第二步中那個Spec索引。
還是在當前打tag的目錄執行下面的命令
93961340-0612-4b04-a2e4-32103ad796a3.png
下面來看看本地和遠程的索引庫，發現現在都有啦
上面的命令會自動幫我們同步到本地和遠程
- 下面來檢索這個
LJDemoBase，可以看到下面的。
8e1cfa1d-8414-46b7-8f8e-b19eda899347.png
發現搜索不到，這是緩存的問題
輸入`rm ~/Library/Caches/CocoaPods/search_index.json`然后重新搜索
- 現在通過
xcode建立主工程LJDemoProject，建立好項目之后使用pod初始化后如圖
fabbe9ba-4504-4436-8ae0-eb48ec6168fd.png
-
打開
LJDemoProject.xcworkspace，編輯Podfile文件，添加source添加
source的目的:默認情況下cocoapods指定使用官方的索引，這里我們不僅要使用官方，也要使用個人私有的索引修改后的文件內容如下:
3fab3438-e326-4e98-a55c-ba683348b38a.png
至于怎么看source的地址，使用下列命令pod repo
liangdeiMac:LJDemoBase apple$ pod repo
LJDemoSpecs
- Type: git (master)
- URL: https://gitee.com/lj360691676/LJDemoSpecs.git
- Path: /Users/devliang/.cocoapods/repos/LJDemoSpecs
master
- Type: git (master)
- URL: https://github.com/CocoaPods/Specs.git
- Path: /Users/apple/.cocoapods/repos/master
2 repos
-
現在在
Podfile文件的的父目錄下pod insatll
打開LJDemoProject.xcworkspace會看到如下圖所示，這樣我們的組件就被集成進項目里了da2cd47c-0413-4e8c-8d8d-e390c90fc98e.png
到這里我們制作集成組件就講的差不多了，下面是補充一些相關的東西
- 如何細分組件，給組件劃分模塊
- 如何給組件添加依賴
- 如何更新組件
- 如何給組件添加資源文件
- 多人協作開發時，如何做到組件化開發
細分組件
在組件的開發過程中，常常會對組件進行結構劃分，例如上面的組件劃分為Base和Category，雖然在物理文件夾上將這兩個模塊的代碼分開了。但是在使用代碼的過程中卻并沒有分開，就像15步的最后那張圖，這兩部分的代碼最后被一起放到了LJDemoBae下。
其實在使用cocoapods的過程中，會發現有一個Subspecs字段，這就是對應的組件細分，如下面的AFNetworking所示。
-> AFNetworking (3.1.0)
A delightful iOS and OS X networking framework.
pod 'AFNetworking', '~> 3.1.0'
- Homepage: https://github.com/AFNetworking/AFNetworking
- Source: https://github.com/AFNetworking/AFNetworking.git
- Versions: 3.1.0, 3.0.4, 3.0.3, 3.0.2, 3.0.1, 3.0.0, 3.0.0-beta.3, 3.0.0-beta.2, 3.0.0-beta.1, 2.6.3, 2.6.2, 2.6.1,
2.6.0, 2.5.4, 2.5.3, 2.5.2, 2.5.1, 2.5.0, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.0,
2.0.3, 2.0.2, 2.0.1, 2.0.0, 2.0.0-RC3, 2.0.0-RC2, 2.0.0-RC1, 1.3.4, 1.3.3, 1.3.2, 1.3.1, 1.3.0, 1.2.1, 1.2.0, 1.1.0,
1.0.1, 1.0, 1.0RC3, 1.0RC2, 1.0RC1, 0.10.1, 0.10.0, 0.9.2, 0.9.1, 0.9.0, 0.7.0, 0.5.1 [master repo]
- Subspecs:
- AFNetworking/Serialization (3.1.0)
- AFNetworking/Security (3.1.0)
- AFNetworking/Reachability (3.1.0)
- AFNetworking/NSURLSession (3.1.0)
- AFNetworking/UIKit (3.1.0)
下面要做到導入組件的時候會自動將已經劃分好的目錄結構導入，并且還能夠按需導入，比如說我只需要
Base那么可以只導入該組件下的Base，而不會將其他文件導入。
其實文件的目錄劃分在上面已經做好了（這里我是之前劃分好了，你如果沒劃分是要劃分的），現在這里只需要配置一下Specs就可以了。
-
如下圖所示，修改的地方我都已經標注好了
4b0e8f98-3321-4ff8-84a2-158451dd008c.png
- 現在提交新的代碼，提交代碼加打
tag都放在下面了
3cf502d8-7a99-4b45-ae1c-f7272e15815c.png
41c1b201-48a4-4d33-bb9b-04c3f807ef1c.png
53daf856-0c48-46cc-9150-26bb4e8e5b6b.png
- 更新
spec索引pod repo push LJDemoSpecs LJDemoBase.podspec。
538f1bcb-71e8-41d1-bb4e-bf0491d2d2a2.png
- 搜索組件
pod search ljdemobase，如下圖所示，現在的Versions有0.1.0和0.2.0，且Subspecs有Base和Category了。
754693ea-1026-449e-b93c-dfb2d65dde89.png
- 現在更新一下LJDemoProject項目中使用到的組件，
pod update --no-repo-update，至于為什么要加后面的參數是因為不如不加的話會更新pod官方索引，需要的時間比較長，我們不想更新官方的索引。
869cf4a6-fd9e-4fd3-800d-d45123a0a4b3.png
- 現在再看一下項目中用到的這個組件，發現現在對應的目錄結構已經分好了。
如果現在只想使用組件中的一個子組件，那么在Podfile中可以寫作如下所示
修改完畢以后再使用pod update --no-repo-update重新安裝一下依賴組件即可
如何給組件添加依賴
在制作組件的過程中，常常需要依賴一些第三方的框架，常見的如AFNetworking和SDWebimage等，下面講解一下如何添加依賴。
- 添加依賴的是公開的代碼，如
AFNetworking- 添加的配置信息是寫在組件的
podspec文件里，很簡單如下所示
560b5a9c-fd4d-4e05-a754-af97530ff052.png
- 添加的配置信息是寫在組件的
- 更新到遠程倉庫，打
tag并更新Spec索引
0013c54a-1190-4317-9b1a-421d986bf407.png
- 在項目中使用新版本的組件，下面的命令是在
LJDemoProject項目下
385f10c1-a6c7-46f5-9c10-50cff508f10c.png
執行完上面的命令，現在來看一下項目中的依賴庫
-
如果需要給某個組件的子組件添加依賴庫，那么
podspec文件寫作如下所示這里我只截圖了兩部分的內容，上圖為代碼添加，下圖為spec的修改
313c5f8e-9e65-4278-ac8e-4cb2a03abe10.png
Image Copied on 2019-02-21 at 18.01.52 PM.png
- 上面的工作都做完以后，現在執行我們的更新組件三部曲
-
推送組件代碼到遠程，打
tag,這里我直接貼圖了，下面的命令在上面的講解中我已經講過很多次了927f5c17-e215-46d0-b7fd-c6189fa2ccdc.png
-
- 更新
spec索引pod repo push LJDemoSpecs LJDemoBase.podspec。
-
先修改
LJDemoProject項目中的Podfile。這里分兩種，一種子組件不依賴第三方，一種的子組件依賴第三方
- 不依賴第三方，
pod 'LJDemoBase/Category' - 依賴第三方，
pod ‘LJDemoBase’, :subspaces =>[‘Category’, ‘Network’]
在項目中使用新版本的組件，下面的命令是在
LJDemoProject項目下5e16ea7c-a5c1-4e16-9df4-e6840281a827.png - 不依賴第三方，
-
子組件不依賴第三方
f39b9ea6-2cd9-4ccb-a28c-bc87fef11082.png
-
子組件依賴第三方
5318c5d9-af9c-4724-aa75-e22d8d500eea.png
可以很清晰的看到，子組件如果依賴第三方庫，當使用子組件的時候會自動幫我們安裝依賴的三方庫，而如果沒有使用依賴三方庫的子組件，并不會安裝對應的第三方庫
- 添加依賴的是私有庫，比如前面寫了個
LJDemoBase，現在又要創建一個新的組件叫LJDemoView，它依賴于LJDemoBase
先創建對應的pod lib
21ce98c2-58ba-4a33-a243-ca68e4e7af05.png
- 在
LJDemoView的Podfile中添加對應的私有pod索引，如下圖所示看清楚，這里是
LJDemoView的Podfile
69e1c212-a13e-4425-9b8b-826a69e293e0.png
- 在
LJDemoView的LJDemoView.podspec下添加依賴，下圖中不僅添加了依賴，描述，git地址等配置信息都填好了(因為這是一個新的組件)
19209d8a-1008-41e1-82ee-44e62e7f67cb.png
- 推送代碼到遠程倉庫，打
tag并更新Spec索引，下面我只貼命令了，相信大家已經知道用什么命令了（前面敲了n次）liangdeiMac:LJDemoView apple$ git add . liangdeiMac:LJDemoView apple$ git commit -m"initial LJDemoView with first version" liangdeiMac:LJDemoView apple$ git remote add origin https://gitee.com/lj360691676/LJDemoView.git liangdeiMac:LJDemoView apple$ git push origin master liangdeiMac:LJDemoView apple$ git tag liangdeiMac:LJDemoView apple$ git tag 0.1.0 liangdeiMac:LJDemoView apple$ git push --tags liangdeiMac:LJDemoView apple$ pod repo push LJDemoSpecs LJDemoView.podspec --allow-warnings - 在
LJDemoProject下的Podfile中添加新的組件，這里為了區別之前的LJDemoBase組件，把之前的組件注釋掉
3e247d93-39e2-4b4c-aff4-07092cf820f6.png
重新安裝組件
liangdeiMac:LJDemoView apple$ cd /Users/apple/Documents/LJDemo/LJDemoProject
liangdeiMac:LJDemoProject apple$ pod update --no-repo-update
重新安裝后的項目pod依賴如下
組件直接的相互依賴就說到這里，如果還有問題可以參看下面的官方文檔的介紹
如何更新組件
添加對應的代碼，修改
podspec文件，推送到遠程打
tag并推送tag更新
spec索引，如pod repo push LJDemoSpecs LJDemoBase.podspec-
使用組件，在項目的
Podfile中添加我這里只是寫的大體步驟，具體步驟上面做了很多次了，相信都已經很了解了
如何給組件添加資源文件
在開發組件的過程中，常常需要用到一些資源文件，常見的如圖片，xib等。
這里我就不花大篇幅來講了，大家可以看這個老師寫的添加組件資源的博客
多人協作開發時，如何做到組件化開發
經過上面的講解，相信大家應該知道怎么來制作更新一個組件了，但是上面的一切都是基于個人的操作，如何在團隊中能夠開發并使用是接下來討論的問題。
這里我是基于oschina建立了一個組織，組織里就是公司的同事。
完成后的組織結構如下圖所示
重要：下面的操作是在另一位同事的電腦上，這個同事叫MT
-
將
LJDemoSpecs的內容clone到本地。這里的本地地址為：前往電腦中的個人下的.cocoapods文件夾，可以看到repos下面有一個文件夾master，master里存放的官方的庫索引，我們現在要加入組織的私有庫索引
LJDemoSpecs。下面我貼下命令
MTdeiMac:~ apple$ cd /Users/apple/.cocoapods/repos MTdeiMac:repos apple$ git clone https://gitee.com/j1-iOS/ljdemospecs.git做完上面的操作，如下圖所示
3eaaaf74-c232-4147-a0ab-b9bccc989cac.png
現在通過pod repo可以看到有兩個庫索引，如下圖
- 現在可以把放在
oschina上的組件和項目都clone下來，然后和文章前面所講的一樣來進行組件的開發和項目的開發了。
參考資料：
