close
当前位置: 物联网在线 > 技术文库 > ios >

iOS 组件化 —— 路由设计思路分析

iOS 组件化 —— 路由设计思路分析

前言

随着用户的需求越来越多,对App的用户体验也变的要求越来越高。为了更好的应对各种需求,开发人员从软件工程的角度,将App架构由原来简单的MVC变成MVVM,VIPER等复杂架构。更换适合业务的架构,是为了后期能更好的维护项目。

但是用户依旧不满意,继续对开发人员提出了更多更高的要求,不仅需要高质量的用户体验,还要求快速迭代,最好一天出一个新功能,而且用户还要求不更新就能体验到新功能。为了满足用户需求,于是开发人员就用H5,ReactNative,Weex等技术对已有的项目进行改造。项目架构也变得更加的复杂,纵向的会进行分层,网络层,UI层,数据持久层。每一层横向的也会根据业务进行组件化。尽管这样做了以后会让开发更加有效率,更加好维护,但是如何解耦各层,解耦各个界面和各个组件,降低各个组件之间的耦合度,如何能让整个系统不管多么复杂的情况下都能保持“高内聚,低耦合”的特点?这一系列的问题都摆在开发人员面前,亟待解决。今天就来谈谈解决这个问题的一些思路。

目录

1.引子

2.App路由能解决哪些问题

3.App之间跳转实现

4.App内组件间路由设计

5.各个方案优缺点

6.最好的方案

一. 引子

大前端发展这么多年了,相信也一定会遇到相似的问题。近两年SPA发展极其迅猛,React 和 Vue一直处于风口浪尖,那我们就看看他们是如何处理好这一问题的。

iOS 组件化 —— 路由设计思路分析

在SPA单页面应用,路由起到了很关键的作用。路由的作用主要是保证视图和 URL 的同步。在前端的眼里看来,视图是被看成是资源的一种表现。当用户在页面中进行操作时,应用会在若干个交互状态中切换,路由则可以记录下某些重要的状态,比如用户查看一个网站,用户是否登录、在访问网站的哪一个页面。而这些变化同样会被记录在浏览器的历史中,用户可以通过浏览器的前进、后退按钮切换状态。总的来说,用户可以通过手动输入或者与页面进行交互来改变 URL,然后通过同步或者异步的方式向服务端发送请求获取资源,成功后重新绘制 UI,原理如下图所示:

iOS 组件化 —— 路由设计思路分析

react-router通过传入的location到最终渲染新的UI,流程如下:

iOS 组件化 —— 路由设计思路分析

location的来源有2种,一种是浏览器的回退和前进,另外一种是直接点了一个链接。新的 location 对象后,路由内部的 matchRoutes 方法会匹配出 Route 组件树中与当前 location 对象匹配的一个子集,并且得到了 nextState,在this.setState(nextState) 时就可以实现重新渲染 Router 组件。

大前端的做法大概是这样的,我们可以把这些思想借鉴到iOS这边来。上图中的Back / Forward 在iOS这边很多情况下都可以被UINavgation所管理。所以iOS的Router主要处理绿色的那一块。

二. App路由能解决哪些问题

iOS 组件化 —— 路由设计思路分析

既然前端能在SPA上解决URL和UI的同步问题,那这种思想可以在App上解决哪些问题呢?

思考如下的问题,平时我们开发中是如何优雅的解决的:

1.3D-Touch功能或者点击推送消息,要求外部跳转到App内部一个很深层次的一个界面。

比如微信的3D-Touch可以直接跳转到“我的二维码”。“我的二维码”界面在我的里面的第三级界面。或者再极端一点,产品需求给了更加变态的需求,要求跳转到App内部第十层的界面,怎么处理?

2.自家的一系列App之间如何相互跳转?

如果自己App有几个,相互之间还想相互跳转,怎么处理?

3.如何解除App组件之间和App页面之间的耦合性?

随着项目越来越复杂,各个组件,各个页面之间的跳转逻辑关联性越来越多,如何能优雅的解除各个组件和页面之间的耦合性?

4.如何能统一iOS和Android两端的页面跳转逻辑?甚至如何能统一三端的请求资源的方式?

项目里面某些模块会混合ReactNative,Weex,H5界面,这些界面还会调用Native的界面,以及Native的组件。那么,如何能统一Web端和Native端请求资源的方式?

5.如果使用了动态下发配置文件来配置App的跳转逻辑,那么如果做到iOS和Android两边只要共用一套配置文件?

6.如果App出现bug了,如何不用JSPatch,就能做到简单的热修复功能?

比如App上线突然遇到了紧急bug,能否把页面动态降级成H5,ReactNative,Weex?或者是直接换成一个本地的错误界面?

7.如何在每个组件间调用和页面跳转时都进行埋点统计?每个跳转的地方都手写代码埋点?利用Runtime AOP ?

8.如何在每个组件间调用的过程中,加入调用的逻辑检查,令牌机制,配合灰度进行风控逻辑?

9.如何在App任何界面都可以调用同一个界面或者同一个组件?只能在AppDelegate里面注册单例来实现?


(责任编辑:ioter)

用户喜欢...

那些设计iOS API需要知道的事

为了能够将我们项目中的代码能够在后续开发者使用(重用代码),通常使用的方法是将代码按照功能模块编写成API。那么我们就很有必要了解Objective-C语言中常见的编程范式(paradigm),同...


如何打造易扩展的高性能图片组件

内容提要 图片组件可以说是app开发中使用最多的组件之一,它既简单也不简单,如何设计和开发一个具有高扩展性,高性能的图片组件呢?本次分享将会从架构设计到性能优化等多方面,全...


iOS高可控性日历基础组件-SKCalendarView的使用和实现思路的分享

SKCalendarView是一个高可控性的日历基础组件,为了提高应用的自由度,默认只提供了日历部分的视图封装,但不涵盖切换月份按钮、年月分显示等非关键性控件,但请不要担心,SKCalendarView为...


iOS 开发周报:苹果正在重新设计 Mac Pro、Weex 布局引擎(Yoga)探究

苹果正在重新设计 Mac Pro :苹果正在加班加点开发一款 完全重新思考 的 Mac Pro,采用模块化设计,可以为高端 CPU 和 GPU 提供空间,而且未来的升级也将更加方便。苹果还在开发自有品牌的专...


iOS开源:Magnetic - 可定制地类似 Apple Music 磁力吸引式泡泡选择器组件

Magneticis a customizable bubble picker like the Apple Music genre selection. $ pod try Magnetic 要求 iOS 9.3+ Xcode 8.0+ Swift 3.0+ 使用 A Magnetic object is an SKScene . To display, you present it from an SKView object. import Magneticclass V...


iOS控件CHIPageControl:酷帅的翻页状态切换动画组件

CHIPageControl is a set of cool animated page controls to replace boring UIPageControl. We were inspired by Jardson Almeida dribbble shot and implemented a few more page controls. Made with :heart: by Chili . Overview Requirements iOS 9.0+ Xcode 8+...


iOS开源:Paparazzo - 拍照、选取、编辑图片于一身的精简、实用组件

Paparazzois a component for picking and editing photos. Key Features :camera: Taking photos using camera :iphone: Picking photos from user's photo library :scissors: Photo cropping and rotation Contents Installation Usage Presenting entire module A...


iOS开源:ELWaterFallLayout-可定制瀑布流布局 UI 组件

ELWaterFallLayout Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation ELWaterFallLayout is available through CocoaPods. To install it, simply add the following line to...


iOS开源 - 一款完整的文件资源管理器组件

FileExplorer (iOS 10.0+) :construction_worker: Project created and maintained by Rafał Augustyniak . Introduction FileExplorer is a control designed to provide an easy way to browse and interact with local file system on iOS devices. It works as f...


iOS开源 - 复制 iOS 样式库到 Sketch 以改善、加速设计流程

I’ve decided to take styles from Xcode and do my best to replicate them for Sketch. Along the way, I documented the process of how I ended up with the result so you can look into things even further. UIBlurEffectStyle The API doesn't provide any...