DSBridge 與 JSBridge 的區別

最近新開源了一個新項目DSBridge，號稱最好用的javascript bridge。筆者仔細對比了一下，DSBridge分分鐘秒殺全部啊。

DSBridge的主要特色：

1. DSBridge真正跨平臺，官方同時支持ios和android。
2. DSBridge支持同步調用。
3. 三端友好；不管是在ios、android或者web，使用起來都很是簡單優雅，這一點和WebViewJavascriptBridge相比，簡直就是藝術。
4. DSBridge爲國人項目，有詳細中文文檔和問題反饋渠道。

DSBridge 是H5頁面與Native之間通訊的橋樑，它有以下特色：

• 跨平臺；同時支持ios和android。
• 雙向調用；js能夠調用native， native能夠調用js
• 不只支持異步調用，並且頁支持同步調用（dsbridge是惟一一個支持同步調用的javascript bridge）
• 支持進度回調，屢次返回（經常使用於文件下載進度、計時器等）
• Android支持騰訊x5內核
• 三端易用；不管是前端仍是android或ios，使用都很是簡單，極大的下降集成／學習成本

DSBridge之原生傳遞值給js

經過webView.callHandler()方法調用
第一個參數是約定註冊的名稱，與js接受處一致；
第二個參數是要傳遞的值，這裏將data轉成了json String的傳給前端；
第三個參數是接受js返回的回調，可用於js接受成功後，再去通知原生。

HtmlData data = new HtmlData();
data.html = txt;
webView.callHandler("nativeToJs", new Object[]{new Gson().toJson(data)}, new OnReturnValue<String>() {
    @Override
    public void onValue(String o) {
        
    }
});
複製代碼

js接受傳值，直接經過dsBridge.register()方法接受
第一個參數是上面的註冊名，與原生保持一致；
第二個是js的方法，參數data就是傳遞的值，這裏經過JSON.parse()格式化，方法的return返回值就是傳遞給原生的，對應上面的第三個參數。

<script>
    dsBridge.register('nativeToJs', function (data) {
        var value = JSON.parse(data);
        document.getElementById("test").innerHtml = value.html;
        return "success";
    });
</script>
複製代碼

DSBridge之js傳值給原生

js經過dsBridge.call()方法傳值，簡單模擬了點擊事件來傳遞。
第一個參數是約定註冊的名稱，與原生接受處方法名一致；
第二個參數是要傳遞的值；
第三個參數是接受原生返回的回調。

function myClick(){
    dsBridge.call("jsToNative", "testVal", function(res) {
        console.log(res);
    });
}
複製代碼

原生接受，經過JavascriptInterface註解，方法名與註冊名一致。 第一個參數是傳遞的值； 第二個參數可回調信息給js；

webView.addJavascriptObject(new JsApi(), null);

public class JaApi {
    @JavascriptInterface
    public void jsToNative(Object msg, CompletionHandler<String> handler){
        handler.complete(msg+"回調給js");
    }
}
複製代碼

---

參考： 跨平臺Js bridge新秀-DSBridge