美文网首页
UI组件模块设计思路

UI组件模块设计思路

作者: gy先生 | 来源:发表于2019-12-29 14:09 被阅读0次

模块设计思路

功能职责细分

  • UI组件
  • 组件类型
  • 如何创建组件
  • 菜单获取
  • 菜单缓存管理
  • 菜单路由跳转
  • 组件流式布局
  • 下拉刷新动画
  • 自定义导航
  • 首页、我的业务
  • 广告组件

UI组件

组件如何设计?

思路1 - UI组件中包含具体业务

  • 优点:快速完成功能,业务服务于UI
  • 缺点:业务耦合性太强,没有通用性,程序不好扩展

思路2 - UI组件抽象化

  • 优点:类似于UI模板,没有具体业务,形态由外部状态变化决定,扩展性强
  • 缺点:额外需要添加兼容性代码,满足各种业务情况

采用组件思路2,模块设计的意义

组件类型

一组枚举值,标注每种组件的类型,和服务端中的组件类型对应

如何创建组件

传入组件类型,通过工厂方法创建实例;业务层可通过该方式获得组件,并传入组件专用model;组件内部根据该model中的item列表展开信息,布局子视图

基础UI模块

纯粹的UI组件库,可以对任意业务模块提供支持和扩展;包含UI组件,组件类型,组件工厂等功能

菜单获取

菜单接口API

缓存管理

将获取到的菜单数据进行本地缓存,开放相应的缓存策略,根据策略获取到菜单数据

菜单路由跳转

负责对菜单数据中的功能进行封装,登录限制、禁用原因、路由跳转等

组件流式布局

采用GYTableView控件,将UI组件添加到Cell中,Cell高度为自适应(内部提供高度),通过组件类型作为cellIdentifer进行组件复用

下拉刷新动画

二次封装MJRefreshStateHeader,提供两组动画数据,下拉逐帧动画和刷新中循环动画,动画帧起止位置数据本地可配

自定义导航

提供天气组件,切换样式

首页、我的业务

封装TableView,下拉刷新,导航栏;获取菜单,交互细节变化,调整坐标等

广告业务模块

前言

广告模块呈现的形式类似于SDK,所以不管广告业务功能多么复杂,调用的方式必须趋于单一,相关功能必须聚合在模块内部;

广告组件

广告组件功能上和基础UI中的组件一样,但是传入的数据结构不一致,且需要植入埋点功能;广告组件需要自带model转换功能;那么如何封装基础UI中的组件使得满足该广告业务需求和模块聚合性,且不破坏原有组件的扩展性?

思路1 继承后重写

  • 优点:方便重写和扩展方法
  • 缺点:通过工厂方法创建的组件类必须改为继承后的子类,需要重写工厂方法

思路2 iOS分类

  • 优点:通过hook的方式,注入model类型转换和埋点功能,且工厂方法创建的实例仍然生效
  • 缺点:hook覆盖问题,防止同名方法冲突

结论

采用思路2的方式比较容易满足需求,改动范围较小,保证整体业务流程的完整性;如广告业务模块在不引入的情况下,原有组件创建和显示的流程任然有效;

相关文章

  • UI组件模块设计思路

    模块设计思路 功能职责细分 UI组件 组件类型 如何创建组件 菜单获取 菜单缓存管理 菜单路由跳转 组件流式布局 ...

  • 任职要求

    1. 精通 iOS 平台的模块化设计架构,能够设计出 SDK 和 UI 组件方案,并实现定制化UI组件界面,动画;...

  • vue组件设计

    Vue设计思想 组件设计主要是模块设计,主要体现在UI、基本功能、业务需求、性能。UI即我们写的html代码主要是...

  • ui设计思路;ui设计思路框架

    ui设计思路;ui设计思路框架。哈喽大家好!我是你们的好朋友小易,关于ui设计,每次感觉好像都是有讲不完的东...

  • element-ui源码阅读-开篇

    最近没那么忙,准备研究下element-ui源码,借签一下大神的组件设计思路,来提升下组件开发的能力,将其运用到工...

  • 第四章 深入理解组件

    4.1 组件state 4.1.1 如何设计state 组件的state是一个组件的UI呈现的完整状态集合。(UI...

  • Resources - 收藏集 - 掘金

    Elton UI Kit – 一套简洁设计风格的 UI 套件下载 - 设计 - 掘金摘要:分享一套简洁UI组件,方...

  • vue组件

    模块化:是从代码逻辑的角度进行划分的 组件化:是从ui界面的角度进行划分的;前端的组件化,方便ui组件的重用 创建...

  • 前端开发流程规范化

    业务需求 参与业务需求讨论,熟悉业务流程 UI设计 边界值,响应式布局 架构思考 模块划分,基础组件,自动化构建,...

  • iOS组件化储备

    资料 组件化/模块化 蜂鸟商家版 iOS 组件化 / 模块化实践总结 模块化与解耦 浅析 iOS 应用组件化设计 ...

网友评论

      本文标题:UI组件模块设计思路

      本文链接:https://www.haomeiwen.com/subject/lhpyoctx.html