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