iOS组件化开发实战记录

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 = <<-DESC
 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
   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_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:[WDRepaymentheaderView class]] forHeaderFooterViewReuseIdentifier:kWDRepaymentheaderView]
 @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. 总结

经过半年的努力重构,终于将工程拆分成组件化开发了,也从中学到了很多,希望自己能再接再厉和同事一起进步。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • iOS组件依赖避免冲突的小技巧分享

    问题缘由 本文以 YBImageBrowser[1] 组件举例. YBImageBrowser 依赖了 SDWebImage,在使用 CocoaPods 集成到项目中时,可能会出现一些依赖冲突的问题,最近社区提了多个 Issues 并且在 Insights -> Traffic -> Popular content 中看到了此类问题很高的关注度,所以不得不着手解决. 严格的版本限制 一个开源组件的迭代过程中,保证上层接口的向下兼容就不错了.为了优化性能并且控制内存,YBImageBrowser

  • iOS组件化开发实战记录

    1. 组件化需求来源 起初的这个项目,App只有一条产品线,代码逻辑相对比较清晰,后期随着公司业务的迅速发展,现在App里面承载了大概五六条产品线,每个产品线的流程有部分是一样的,也有部分是不一样的,这就需要做各种各样的判断及定制化需求.大概做了一年多后,出现了不同产品线提过来的需求,开发人员都需要在主工程中开发,但是开发人员开发的是不同的产品线,也得将整个工程跑起来,代码管理.并行开发效率.分支管理.上线时间明显有所限制.大概就在去年底,我们的领导提出了这个问题,希望作成组件化,将代码重构拆分

  • 详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • Vue-router 类似Vuex实现组件化开发的示例

    本文介绍了Vue-router 类似Vuex实现组件化开发的示例,分享给大家,具体如下: 随着项目越来越大,把所有route写在一个文件里就显得杂乱. #单个组件路由 import a from '../components/a' export default { path: '/a', name: 'a', component: a } import arouter from 'xxx' export default new Router({ routes: [ arouter ] }) #多

  • Vue组件化开发思考

    一般说到组件,我首先想到的是弹窗,其他就大脑空白了. 因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件- 然而我才发现这个想法是有问题的. 我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了... 缘起于最近的一个表单开发,页面上有2个是联动菜单的选项. 首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈- (废话,同一个项目 当然要保持ui风格的相同啊!) 不过差别在于 我这个是 一个1级 一个2级, 地址那个是4级的. 然后我就想着把那个地址的组件引进来

  • Android组件化开发路由的设计实践

    调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术 编译时注解,个人想法是一口吃不成胖子,先做个比较实用的. VpRouter路由框架主要应用于组件化开发中 设计目的 解耦 跨模块跳转 方便服务器配置schema,实现动态配置跳转目标 对外部提供远程访问的功能,实现跨应用调用响应 主要功能点 支持intent,http,schema三种跳转 路由表支持xml配置,可自定义,支持多路径 有拦截器 同时支持反射和隐式意图 支持结果回调 支持参数传递 链

  • webpack-mvc 传统多页面组件化开发详解

    最近有一个项目,还是使用的传统 MVC 模式开发,完全基于jQuery,使用了基于java模板引擎velocity,页面中嵌入了大量java语法,使得前后端分离不彻底,工程打包上线苦不堪言,为实现后端为服务化,前端也得彻底从后端中分离出来. 方案: webpack4 + ejs webpack 打包所有的 资源 打包所以的 脚本 打包所以的 图片 打包所以的 样式 打包所以的 表 ejs 高效的 JavaScript 模板引擎,代替 velocity webpack 配置 基本插件 @babel

  • Vue组件化开发之通用型弹出框的实现

    本文主要分享关于组件化开发的理解,让刚入门的小伙伴少走一些弯路,提高开发效率,作者本人也是新手,如有不当之处,请大佬指出,感谢. 相信很多刚入门的小伙伴,经常会写很多重复的代码,而这些代码一般情况下也都是大同小异,在这种情况下,如何让开发和学习变得更加高效,组件化的思想就显得尤为重要.这里通过设计一个简单的弹出框,给小伙伴们分享组件化的应用. 组件&组件化 组件化是对某些可以进行复用的功能进行封装的标准化工作.组件一般会内含自身的内部UI元素.样式和JS逻辑代码,它可以很方便的在应用的任何地方进

  • laravel框架学习笔记之组件化开发实现方法

    本文实例讲述了laravel框架学习笔记之组件化开发实现方法.分享给大家供大家参考,具体如下: 1.第一个难点,就是把本地的组件引入到项目中,进行开发和测试,这个已经解决了 2.就是需要发布组件中的配置文件到项目中 3.就是怎么在组建中加载组建中的视图view层 视图 你需要告诉 laravel 视图的位置才能使 laravel 加载包中的视图.你可以通过服务提供者的 loadViewsFrom 方法.loadViewsFrom 方法接受两个参数:视图的路径和包的名称.比如,如果你的包名称是"c

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • C#多线程开发实战记录之线程基础

    目录 前言 线程基础 1.创建线程 2.暂停线程 3.线程等待 4.线程终止 C#中的lock关键字 总结 前言 最近由于工作的需要,一直在使用C#的多线程进行开发,其中也遇到了很多问题,但也都解决了.后来发觉自己对于线程的知识和运用不是很熟悉,所以将利用几篇文章来系统性的学习汇总下C#中的多线程开发. 线程基础 "进程是操作系统分配资源的最小单元,线程是操作系统调度的最小单元" 这句话应该学习计算机的朋友或多或少都听说过,这在操作系统这门课中是很重要的一个概念. 在操作系统中可以同时

随机推荐