如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter

PS 感谢大家的关注,由于我本想开源4个库,除了router, 另外三个分别是native dispatcher, web dispatcher 和 react dispatcher , 所以router 对native dispatcher 有了库依赖,为了共同学习,我把router单独分离成pod,再次感谢大家的关注,欢迎叫router更完善。best regards.

如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter



@author Jou Email Weibo or Github


预热 - 我要解决的问题

首先我还是要推荐Gaosboy的这篇文章解耦神器 —— 统跳协议和Rewrite引擎
文章中,介绍了天猫app,基于文件配置和uri的页面跳转。这大大增加了app端的灵活性, 而这种实现很类似今天的前端或后端开发中的 静态路由 和 动态路由协议。
除了天猫,在很多的客户端架构的文章中,路由解耦的案例并不不少见,如携程移动App架构优化之旅
蘑菇街App的组件化之路
原生路由协议, 其实两年前就有了类似的实现。比如900+Star的HHRouter,而作者是当时还在布丁动画工作的Light。2015年我有幸见到本人,人很nice,并真是全栈。
DarwinNativeRouter 在接口设计上,很大程度上的参考了现有的react路由协议 react router。并且对原生跳转方式保留很大的可扩展性。所以我的初衷 DarwinNativeRouter 是一个足够轻量级的框架。Light & Flexible。

全局路由协议能解决的问题

错中复杂的Controller的跳转依赖

在iOS的世界里,传统的Controller跳转方式, A 跳转 B, 则 A 必须持有 B 的对象。 而在app长大的过程中, 势必会造成 A -> B , B -> C, A -> C D, E, F...
从而产生复杂的依赖链。全局的Router 使 A 不必依赖于 特定的 Controller 便可以实现跳转。

如下面跳转:

We Always Do:

1   UIViewController *personal = [UIViewController new];
2   personal.userId = @"10238372";
3   [self.navigationController pushViewController:personal animated:YES];
Router Code:
 1 [[DNRouter router]open:@"./user/10238372/profile"]; 

又比如我们要在navigationController根路径跳转

We Always Do:

1   [self.navigationController popToRootViewControllerAnimated:NO];
2   UIViewController *personal = [UIViewController new];
3   personal.userId = @"10238372";
4   [self.navigationController pushViewController:personal animated:YES];
Router Code:
      [[DNRouter router]open:@"/user/10238372/profile"];
推送通知,点击打开指定页面

对于这种需求, 相信,目前最多的实现应该是两种, 一种的传参的Url, 而另一种,是传递int类型,并通过类似switch case对参数值的硬编码,实现跳转逻辑。
我是很反感第二种的跳转方式, 1. int毫无疑义, 只能硬解释。 2. 跳转的页面有限。 当然如果url采用硬编码, 也是跳转有限的。
而有了router,一切不一样。

  1. 从didFinishLaunchingWithOptions 和 didReceiveRemoteNotification捕获payload
  2. 跳用Router

Somethings we may do:

 1 switch (type) {
 2   case 1001:
 3     //jumping code
 4     break;
 5
 6   case 1002:
 7     //jumping code
 8     break;
 9   case 1003:
10     //jumping code
11     break;
12   case 1004:
13     //jumping code
14     break;
15
16   default:
17     break;
18   }

Now we need do:

 1 if([[DNRouter router]canOpen:url.absoluteString]) [[DNRouter router]open:url.absoluteString]; app间通讯 及 deeplink

Router 可以轻松handle deeplink。 deeplink 即: 从safari打开app的指定页面。 这方面做得比较好的, 如新浪微博的app, 在点击对应的新浪微博热点 条目时, 就发生了跳转,并跳到了条目详情。
Router, 同样可以被用作 app 间通讯, 和 deeplink 的原理相同。uri的通讯方式,被认为是最简单的app间通讯。 如我们常常使用的微信分享,配置的 scheme 就是用来做跳转和通讯的。

Router Code

1 - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
2 {
3   if([[DNRouter router]canOpen:url.absoluteString])
4   {
5     [[DNRouter router]open:url.absoluteString];
6     return YES;
7   }
8   return NO;
9 }

一致的行为处理, Hybrid & React Native

有了Router, 你可以使这些跳转 有一致的行为。

DarwinNativeRouter 特性

静态路由 /user

 1 [DNRouter routerWithName:@"profile" path:@"/user"
 2     navigationController:(UINavigationController *)self.window.rootViewController
 3               controller:^__kindof UIViewController *{
 4
 5   UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];
 6   return controller;
 7
 8 } action:^(__kindof UIViewController *controller) {
 9
10   [DNDispatcher dispatcher].defaultNavigationController.animation(NO).pushViewController(controller);
11 // 希望大家注意下动画的设置,若animation设为YES, 容易造成animation system的混乱,需要保证最后一个push的前的所有controller的动画为NO.
12
13 }];
动态路由 /user/:id
 1 [DNRouter routerWithName:@"profile" path:@"/user/:id"
 2     navigationController:(UINavigationController *)self.window.rootViewController
 3               controller:^__kindof UIViewController *{
 4
 5   UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];
 6   return controller;
 7
 8 } action:^(__kindof UIViewController *controller) {
 9
10   [DNDispatcher dispatcher].defaultNavigationController.animation(NO).pushViewController(controller);
11 // 希望大家注意下动画的设置,若animation设为YES, 容易造成animation system的混乱,需要保证最后一个push的前的所有controller的动画为NO.
12 }];
更方便的跳转,名称跳转 name jumping
 1 [[DNRouter router]redirect:@"profile"]; 相对路径跳转
//跟路径
[[DNRouter router]open:@"/user"];

//当前路径
[[DNRouter router]open:@"./user"];

//上一级
[[DNRouter router]open:@"../user"];

易扩展, 自定义跳转 action

[DNRouter routerWithName:@"profile" path:@"/user/:id"
    navigationController:(UINavigationController *)self.window.rootViewController
              controller:^__kindof UIViewController *{

  UIViewController *controller = [[UIStoryboard storyboardWithName:@"Main" bundle:nil]instantiateViewControllerWithIdentifier:@"kMainBoard"];
  return controller;

} action:^(__kindof UIViewController *controller) {

  [DNDispatcher dispatcher].defaultNavigationController.animation(YES).pushViewController(controller);

}];

默认行为,及 异常处理,index & 404

// index page
[DNRouter defaultRouterWithController:^__kindof UIViewController *{

} action:^(__kindof UIViewController *controller) {

}];

// 404 page
[DNRouter notFoundRouterWithController:^__kindof UIViewController *{

} action:^(__kindof UIViewController *controller) {

}];

后言

DarwinNativeRouter 现在还没有到1.0版本,还有很多可以想象的东西,欢迎让他更加完善,和提pr。
DarwinNativeRouter‘s Github

@author Jou Email Weibo or Github

时间: 2024-10-01 21:18:10

如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter的相关文章

[转]如何优雅的实现界面跳转 之 统跳协议 - DarwinNativeRouter

转自:http://www.jianshu.com/p/d6a246752ca5 预热 - 我要解决的问题 首先我还是要推荐Gaosboy的这篇文章解耦神器 —— 统跳协议和Rewrite引擎文章中,介绍了天猫app,基于文件配置和uri的页面跳转.这大大增加了app端的灵活性, 而这种实现很类似今天的前端或后端开发中的 静态路由 和 动态路由协议.除了天猫,在很多的客户端架构的文章中,路由解耦的案例并不不少见,如携程移动App架构优化之旅蘑菇街App的组件化之路原生路由协议, 其实两年前就有了

页面解耦—— 统跳协议和Rewrite引擎

原文: http://pingguohe.net/2015/11/24/Navigator-and-Rewrite.html 解耦神器 —— 统跳协议和Rewrite引擎 Nov 24, 2015 • Gaosboy 题记:天猫App长大了,已经长成了流量以千万计规模的App,当下至少有10个团队在直接维护天猫App.在App长大,团队扩充的过程中解耦是一个永恒的话题,而界面解耦又是App架构的重中之重. 统跳协议是天猫App统一跳转协议,主要负责天猫App界面之间的串联,也就是界面跳转服务.R

ASP.Net MVC跳转,分为form的submit提交跳转和ajax跳转

1,用jquery ajax跳转的话,需要在前台用window.location("跳转网址")来跳转,在success后使用 2,用原声的form的submit来跳转,如下图 3,上面一段js+html也可用js来代替,如下 关于跳转的一些方式,大家有哪些意见和建议,可以在下面留言,欢迎讨论 最近在研究node.js,觉得这东西很牛逼,但是不知道对于我现在的小项目来说,能不能用,怎么用,用起来怎么样,还有我在学习xojo,听说这个是高度封装,好处就是少写代码,坏处就是无法更多的自由,

[Java]Get与Post,客户端跳转与服务器端跳转

http://www.thinksaas.cn/group/topic/133101/ 虽然说get 与post 问题很老套了,但是作为web 开发人员来说对于这个的理解确实很有必要,其实说到get 和post,还可以有doGet 与doPost 和客户端跳转与服务端跳转的区别: GET 与POST 的区别: 一.Get 是从服务器上获取 数据,Post 则是向服务器传送 数据: 二.Get 将表单中数据的按照variable=value 的形式,添加到action 所指向的URL 地址的后面 

uitableView 选择跳转后 再跳回来 颜色不变 问题

今天遇见过这个问题  以前都没这方面需求所以没有遇见 今天遇见了 网上查了 没有查到 好吧 只能说自己的问题 但是 还好kai哥到 一句话就解决了 ! 就是在- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath中反选回来 如下代码: - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(

js页面跳转(含框架跳转)整理

js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/javascript">           window.location.href="target.aspx";     </script> 2.window.navigate方式跳转   <script language="javascript&q

客户端跳转和服务器跳转的区别以及各位困惑的在哪用

客户端跳转与服务器端在哪用forward是服务器请求资源,就是把所有参数都带上.服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服务器发送的内容是从哪儿来的,所以它的地址栏中还是原来的地址. redirect就是服务端根据逻辑,发送一个状态码,告诉浏览器重sendRedirect: 这个只是跳转,但是没有把查询参数带上,如果你想带参数的话,就得自己构造URL,就是那个location. 客户端跳转与服务器端跳转的区别 客户端跳转时用Ht

Apache Rewrite实现URL的跳转和域名跳转

Apache Rewrite实现URL的跳转和域名跳转 Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基 于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果要想用到rewrite模块,必须先安装或加载rewrite模块.方法有两种一种是编译apache的时候就直接 安装rewrite模块,别一种是编译apache时以DSO模式安装apache,然后再利用源码和apxs来安装rewrite模块. 基于服务器级的(httpd.co

301 服务器端跳转与客户端跳转

首先我们需要理解什么是服务器端跳转,什么是客户端的跳转. 简单理解所谓服务器端跳转就是指地址栏内容不变(客户端浏览器的地址栏不会显示目标地址的URL),//注:客户端请求到达以后,服务器发现当前资源给不出回应,要在服务器内部请求另一个资源的跳转.所以,1.跳转与否客户端不知道(URL不变),2.属于一次request 而客户端跳转是指地址栏内容发生改变(客户端向服务器发请求偶,然后服务器再给客户端一个响应,然后客户端再根据服务器端给的响应中的URL再向服务器发送请求,所以是两次请求,因此地址栏改