三端易用的現代跨平臺JavaScript Bridge之IOS篇

dsBridge是一個三端（Android、IOS、JavaScript）易用的現代跨平臺 JavaScript bridge， 經過它，你能夠在Javascript和原生之間同步或異步的調用彼此的函數.

Github: https://github.com/wendux/DSBridge-IOS

特性

1. Android、IOS、Javascript 三端易用，輕量且強大、安全且健壯。
2. 同時支持同步調用和異步調用
3. 支持以類的方式集中統一管理API
4. 支持API命名空間
5. 支持調試模式
6. 支持API存在性檢測
7. 支持進度回調：一次調用，屢次返回
8. 支持Javascript關閉頁面事件回調
9. 支持Javascript 模態/非模態對話框
10. Android端支持騰訊X5內核

安裝

pod "dsBridge"

示例

請參考工程目錄下的 dsbridgedemo/ 文件夾. 運行並查看示例交互.

若是要在你本身的項目中使用 dsBridge :

使用

使用

1.新建一個類，實現API

@implementation JsApiTest
   //同步API 
   - (NSString *) testSyn:(NSString *) msg
   {
       return [msg stringByAppendingString:@"[ syn call]"];
   }
   //異步API
   - (void) testAsyn:(NSString *) msg :(void (^)(NSString * _Nullable result,BOOL complete))completionHandler
   {
       completionHandler([msg stringByAppendingString:@" [ asyn call]"],YES);
   }
   @end

能夠看到，DSBridge正式經過API類的方式集中、統一地管理API。

2.添加API類實例到 DWKWebView

DWKWebView * dwebview=[[DWKWebView alloc] initWithFrame:bounds];
// register api object without namespace
[dwebview addJavascriptObject:[[JsApiTest alloc] init] namespace:nil];

3.在Javascript中調用原生 (Java/Object-c/swift) API ,並註冊一個 javascript API供原生調用.

初始化 dsBridge

//cdn方式引入初始化代碼(中國地區慢，建議下載到本地工程)
//<script src="https://unpkg.com/dsbridge@3.0.7/dist/dsbridge.js"> </script>
//npm方式安裝初始化代碼
//npm install dsbridge@3.0.7
var dsBridge=require("dsbridge")

調用原生API ,並註冊一個 javascript API供原生調用

//同步調用
 var str=dsBridge.call("testSyn","testSyn");

 //異步調用
 dsBridge.call("testAsyn","testAsyn", function (v) {
   alert(v);
 })

 //註冊 javascript API 
  dsBridge.register('addValue',function(l,r){
      return l+r;
  })

4.在Object-c中調用Javascript API

[dwebview callHandler:@"addValue" arguments:@[@3,@4] completionHandler:^(NSNumber* value){
          NSLog(@"%@",value);
   }];

命名空間

命名空間能夠幫助你更好的管理API，這在API數量多的時候很是實用，好比在混合應用中。DSBridge (>= v3.0.0) 支持你經過命名空間將API分類管理，而且命名空間支持多級的，不一樣級之間只需用'.' 分隔便可。

調試模式

在調試模式時，發生一些錯誤時，將會以彈窗形式提示，而且原生API若是觸發異常將不會被自動捕獲，由於在調試階段應該將問題暴露出來。若是調試模式關閉，錯誤將不會彈窗，而且會自動捕獲API觸發的異常，防止crash。強烈建議在開發階段開啓調試模式，能夠經過以下代碼開啓調試模式：

// open debug mode
[dwebview setDebugMode:true];

進度回調

一般狀況下，調用一個方法結束後會返回一個結果，是一一對應的。可是有時會遇到一次調用須要屢次返回的場景，好比在javascript鐘調用端上的一個下載文件功能，端上在下載過程當中會屢次通知javascript進度, 而後javascript將進度信息展現在h5頁面上，這是一個典型的一次調用，屢次返回的場景，若是使用其它Javascript bridge, 你將會發現要實現這個功能會比較麻煩，而DSBridge本省支持進度回調，你能夠很是簡單方便的實現一次調用須要屢次返回的場景，下面咱們實現一個倒計時的例子：

In Object-c

- ( void )callProgress:(NSDictionary *) args :(void (^)(NSNumber * _Nullable result,BOOL complete))completionHandler
{
    value=10;
    hanlder=completionHandler;
    timer =  [NSTimer scheduledTimerWithTimeInterval:1.0
                                              target:self
                                            selector:@selector(onTimer:)
                                            userInfo:nil
                                             repeats:YES];
}
-(void)onTimer:t{
    if(value!=-1){
        hanlder([NSNumber numberWithInt:value--],NO);
    }else{
        hanlder(@"",YES);
        [timer invalidate];
    }
}

In javascript

dsBridge.call("callProgress", function (value) {
    document.getElementById("progress").innerText = value
})

完整的示例代碼請參考demo工程。

Javascript 彈出框

DSBridge已經實現了 Javascript的彈出框函數(alert/confirm/prompt)，這些對話框按鈕、標籤文字默認都是中文的，若是你想自定義這些文本能夠參考 customJavascriptDialogLabelTitles API，若是你不想使用DSBridge實現的對話框，你能夠經過設置DSUIDelegate 屬性（是WKUIDelegate的代理屬性）徹底自定義。

另外注意，DSBridge實現的彈出框都是模態的，這會阻塞UI線程，若是你須要非模態的對話框，請參考disableJavascriptDialogBlock API.

API詳細列表

下面是完整的API列表，詳細的文檔請移步：https://github.com/wendux/DSBridge-IOS

Object-C API

addJavascriptObject:(id) object namespace:(NSString *) namespace

removeJavascriptObject:(NSString *) namespace

callHandler:(NSString *) methodName arguments:(NSArray *) args]

callHandler:(NSString *) methodName completionHandler:(void (^)(id value))completionHandler

callHandler:(NSString *) methodName arguments:(NSArray *) args completionHandler:(void (^ )(id value))completionHandler

disableJavascriptDialogBlock:(bool) disable

setJavascriptCloseWindowListener:(void(^_Nullable)(void))callback

hasJavascriptMethod:(NSString*) handlerName

setDebugMode:(bool) debug

customJavascriptDialogLabelTitles:(NSDictionary*) dic

Javascript API

dsBridge.call(method,[arg,callback])

dsBridge.register(methodName|namespace,function|synApiObject)

dsBridge.registerAsyn(methodName|namespace,function|asyApiObject)

dsBridge.hasNativeMethod(handlerName,[type])

dsBridge.disableJavascriptDialogBlock(disable)

和 fly.js一塊兒使用

當dsBridge碰見 Fly.js 時，將會打開一個新的世界。fly.js傳送門

正如咱們所知，在瀏覽器中，ajax請求受同源策略限制，不能跨域請求資源。然而， Fly.js 有一個強大的功能就是支持請求重定向：將ajax請求經過任何Javascript bridge重定向到端上，而且 Fly.js 官方已經提供的 dsBridge 的 adapter, 能夠很是方便的協同dsBridge一塊兒使用。因爲端上沒有同源策略的限制，因此 fly.js能夠請求任何域的資源。

另外一個典型的使用場景是在混合APP中，因爲Fly.js 能夠將全部ajax請求轉發到端上，因此，開發者就能夠在端上進行統一的請求管理、證書校驗、cookie管理、訪問控制等。

詳情請參考 https://github.com/wendux/fly. （DSBridge Android版 demo中包含fly.js的示例）

最後

若是你喜歡 DSBridge, 歡迎star，以便更多的人知道它, 謝謝 ! 再次貼出DSBridge倉庫連接：

DSBridge for IOS：https://github.com/wendux/DSBridge-IOS

DSBridge for Android: https://github.com/wendux/DSBridge-Android