一次模块重构的总结

前言

由于当时项目进度赶得紧,功能相对简单,代码写的随意,到后来的多次小改大改,改到最后以至于不得不重构的地步,
业务逻辑已经相当的复杂,维护起来很是吃力。于是就产生了重构的想法,重构时才发现很多不合理的设计。

场景说明和重构设计

效果图中的功能为一个上报的模块,该模块需要填写的内容非常的多,上传的字段大约有80-90个,分为多个模块区,
每个模块中都可能使用到上述的这五个类型的控件,
自定义控件化后整个上报模块的页面布局和值的赋值和读取都变得非常清晰简单。
而且本文中的时间的选择、照片的选择、多选框的选择在工程中都是在 BaseViewController中统一处理的,这也是为了复用而做的处理。
#import <UIKit/UIKit.h>
@interface BaseItem : UIView

@property(copy,nonatomic)NSString *itemTitle;//标题
@property(copy,nonatomic)NSString *itemText;
@property(copy,nonatomic)NSString *itemNo;
@property(assign,nonatomic)BOOL isMust;//是否是必填子段

- (void)setLeftStarImage;
- (void)setRightUnit :(NSString *)unitName;
@end
  • BaseItem 是基础父类,定义公共的方法入口
  • BaseItemForText 是文本输入控件,可设置文本框右侧的单位
  • BaseItemForPopView 是下拉弹框控件
  • BaseItemForSelectTime 是点击底部弹出日期选择,选择后展示日期的控件
  • BaseItemForSelectImage 是点击拍照或者选择相册中相片的控件
  • BaseItemForMoreSelect 多选弹框控件
[self.leftLabel setSingleLineAutoResizeWithMaxWidth:Scale_X(150)];//自动根据内容设定宽度。

不同子类通过重写 BaseItem 的公共属性的 set、get 方法来达到初始化组件或者获取所需提交数据等 这一步中把转化的逻辑都写在了自定义控件内部,对外只暴露公共入口,使外部的调用非常的简单。

简化必填子段验证

- (BOOL)backEmptyKeyWarn;
{
    for (int i = 0; i<25; i++) {
        if (baseItem[i].superview) {
            if (baseItem[i].isMust && NilStr(baseItem[i].itemText) ) {
                return NO;
            }
        }
    }
    return YES;
 }

原来的逻辑设置:

1.没有控件话,页面都是基本UILabel、UIButton 等贴的,而且控件之间由于一开始很简单,没有完全相对布局,里面有很多绝对坐标。 2.绝对布局对于需要根据选择的内容不同动态隐藏或者展示某块区域,某个大的模块来说是非常的不友好,大量的硬编码(y值的硬计算)使得修改和维护起来很是吃力。 3.在VC【众多自定义视图是 VC 的View的子视图】中定义所有自定义视图的下拉弹框的数据源和处理所有自定义视图的交互事件,使得代码耦合度更大,不符合开闭原则,很容易造成一处修改,误使其他模块出错的现象。 4.上报时需要一个个判断是否为空来验证必填参数是否已经填写。 5.参数的收集和初始化赋值的时候都是一个一个对应着设置,不同视图需要不同操作,很是麻烦和易错。

重构后

1.绝对布局全部换成相对布局,这样在后续新需求时添加、删除页面元素更方便修改。 2.每个小控件和大的自定义视图都自动设置自身高度,省去手动计算定值高度的麻烦。 3.隐藏/展示某个控件或者自定义视图时可以直接设置其高度,在需要改变的地方调用统一的刷新方法刷新整体布局。 4.每个自定义视图处理自己的下拉弹框的数据源初始化和交互事件,使得职责更加的内聚合。 5.通过 for 循环即可验证必填参数的自定义控件是否为空,节省了一大坨代码并使验证的逻辑更加简明易懂。 6.由于父类的存在,设置统一赋值、取值的公共方法入口,使得对自定义控件的赋值、取值都是一致和简单的。

心得总结

重构中你只能通过设计把逻辑变得更易懂和更易维护及扩展,但是无法减少已有的逻辑,该有的逻辑还是无法省去的。

【1】注释

  #pragma mark------ XXXX---------

清晰的注释对代码的逻辑梳理有非常大的帮助。而且个人固定的代码风格也有助于代码逻辑的理解,没有固定风格的代码随心所欲的写法是很让人头疼的。

【2】类的命名和方法的命名都可以通过名称达到归类和易于理解的效果。

【3】代码复用:

1.公共组件,工程中多处调用。
2.继承,在父类中统一处理。
3.抽象成类中的公用方法,多处调用。

【4】纯代码写页面中,所有的代码布局都应该是 相对布局,可以使用 SDAutolayout 实现完全自动布局,里面有 SC 和 Cell的自动布局,都是设置底部依据试图,设置边距即可。 使用SDAutolayout 可以彻底解决所有情景下的高度自适应问题,而不单单是 cell的高度自适应问题。

PS:重构中一定要注意低级错误。自己在这上面浪费了很多时间和精力。

第一个控件的 get 方法重写时写错了,其他的都是拷贝第一个的,结果一直没有调用子类“重写的get方法” 其实没有重写父类的,因为方法写的都不对。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

3848
来自专栏腾讯NEXT学位

CSS模块化的演进

? | 导语 CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升...

2672
来自专栏進无尽的文章

UI篇-自定义控件中关于父试图中的键盘遮挡问题

我们平时在设计页面的时候,考虑到MVC的设计模式会出现很多层的试图分离,这里面就不可以避免的出现自定的控件。 我在一次自定义控件中出现了以下问题,记录在案以供...

661
来自专栏熊二哥

Bootstrap快速入门

Bootstrap学习有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的;一个是常用结构的熟悉,做到需要的组件及时...

4556
来自专栏更流畅、简洁的软件开发方式

从吉日嘎拉那里学到的……

多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

2146
来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

1752
来自专栏练小习的专栏

请不要忘了,有一个值叫 inherit

请不要忘了,有一个值叫 inherit 下午在写组件的时候瞄了一眼qq群,看到有个哥们在问一道css的问题,他的问题如下图 ? 红圈部分超出主体的部分,他是用伪...

2315
来自专栏IMWeb前端团队

iconfont关于content值的坑

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

20910
来自专栏Modeng的专栏

如何更愉快地使用em

CSS提供了很多种方式去定义一个值。大家最熟悉的可能也是最容易使用的就是像素(pixel),这被称做“绝对单位”。也就是说,5px在不同的场景下是一样的值。而其...

1313
来自专栏极客编程

前端的对决:React的JSX与Vue的templates

React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。

2032

扫码关注云+社区

领取腾讯云代金券