如何优雅的实现界面跳转 之 统跳协议 - 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:


  UIViewController *personal = [UIViewController new];
  personal.userId = @"10238372";
  [self.navigationController pushViewController:personal animated:YES];
  

Router Code:


      [[DNRouter router]open:@"./user/10238372/profile"];

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

We Always Do:

  [self.navigationController popToRootViewControllerAnimated:NO];
  UIViewController *personal = [UIViewController new];
  personal.userId = @"10238372";
  [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:

switch (type) {
  case 1001:
    //jumping code
    break;

  case 1002:
    //jumping code
    break;
  case 1003:
    //jumping code
    break;
  case 1004:
    //jumping code
    break;

  default:
    break;
  }

Now we need do:

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


- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<NSString*, id> *)options
{
  if([[DNRouter router]canOpen:url.absoluteString])
  {
    [[DNRouter router]open:url.absoluteString];
    return YES;
  }
  return NO;
}

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

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

DarwinNativeRouter 特性

静态路由 /user

[DNRouter routerWithName:@"profile" path:@"/user"
    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(NO).pushViewController(controller);
// 希望大家注意下动画的设置,若animation设为YES, 容易造成animation system的混乱,需要保证最后一个push的前的所有controller的动画为NO.

}];

动态路由 /user/:id

[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(NO).pushViewController(controller);
// 希望大家注意下动画的设置,若animation设为YES, 容易造成animation system的混乱,需要保证最后一个push的前的所有controller的动画为NO.
}];

更方便的跳转,名称跳转 name jumping

  [[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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容