Web前端最新iOS组件化方案-总结第一篇(1)，斗鱼hr面之后都会收到offer

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

确认订单业务接口组件地址

确认订单业务组件地址

业务调度中间件地址

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

具体方法实现很简单可以参看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

参照CRProtocolManager做成私有pod

以上实施完毕，新建一个projectCRGoodsDetail,新建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

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

最终CRGoodsDetailServiceProvide实现代码如下

#import “CRGoodsDetailServiceProvide.h”

#import <CRGoodsDetailServiceProtocol/CRGoodsDetailServiceProtocol.h>

#import <CRProtocolManager/CRProtocolManager.h>

#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);

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-yBFo4JgS-1715904811597)]

[外链图片转存中…(img-EDACxP1E-1715904811598)]