如何優(yōu)雅的實現界面跳轉 之 統(tǒng)跳協議 - DarwinNativeRouter

PS 感謝大家的關注,由于我本想開源4個庫,除了router, 另外三個分別是native dispatcher, web dispatcher 和 react dispatcher , 所以router 對native dispatcher 有了庫依賴,為了共同學習,我把router單獨分離成pod,再次感謝大家的關注,歡迎叫router更完善。best regards.

如何優(yōu)雅的實現界面跳轉 之 統(tǒng)跳協議 - DarwinNativeRouter


@author Jou Email Weibo or Github


預熱 - 我要解決的問題

首先我還是要推薦Gaosboy的這篇文章解耦神器 —— 統(tǒng)跳協議和Rewrite引擎
文章中,介紹了天貓app,基于文件配置和uri的頁面跳轉。這大大增加了app端的靈活性, 而這種實現很類似今天的前端或后端開發(fā)中的 靜態(tài)路由 和 動態(tài)路由協議。
除了天貓,在很多的客戶端架構的文章中,路由解耦的案例并不不少見,如攜程移動App架構優(yōu)化之旅
蘑菇街App的組件化之路
原生路由協議, 其實兩年前就有了類似的實現。比如900+Star的HHRouter,而作者是當時還在布丁動畫工作的Light。2015年我有幸見到本人,人很nice,并真是全棧。
DarwinNativeRouter 在接口設計上,很大程度上的參考了現有的react路由協議 react router。并且對原生跳轉方式保留很大的可擴展性。所以我的初衷 DarwinNativeRouter 是一個足夠輕量級的框架。Light & Flexible。

全局路由協議能解決的問題

錯中復雜的Controller的跳轉依賴

在iOS的世界里,傳統(tǒng)的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, 在點擊對應的新浪微博熱點 條目時, 就發(fā)生了跳轉,并跳到了條目詳情。
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 特性

靜態(tài)路由 /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.

}];

動態(tài)路由 /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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容