DSBridge 和 WebViewJavascriptBridge(1)

最新推荐文章于 2024-04-15 15:10:31 发布

2401_84097883

最新推荐文章于 2024-04-15 15:10:31 发布

阅读量957

点赞数 27

分类专栏：程序员文章标签： cocoa macos objective-c

本文链接：https://blog.csdn.net/2401_84097883/article/details/137438073

版权

程序员专栏收录该内容

148 篇文章 0 订阅

订阅专栏

通过github上的信息可以看到DSBridge官方是同时支持ios/android的，但是注意到，DSBridge ios版是支持wkwebview的，而wkwebview也是可以用在osx中，也就是说DSBridge ios版也是可以用于mac开发的。也就是说DSBridge同时支持：ios/android/osx。再来看看WebViewJavascriptBridge，官方说明是支持ios/osx的，但WebViewJavascriptBridge并不支持android, 当然，由于WebViewJavascriptBridge的人气实在太高，也有一些人在android上实现了兼容的版本如这个点我，但是总的来说，并非一家之作，这可能会给日后维护带来问题。而DSBridge是同一个作者，如果将来更新时可以保证双端同步。第一回合，DSBridge胜！

易用性

Javascript Bridge比较特殊，因为它要同时涉及三端，让三个端使用起来都比较容易是很有挑战的一个任务，这不仅是能力层面，也和接口和使用方式的设计息息相关，当然能在三端之间做出最好的平衡，也对作者能力要求比较高（必须同时了解ios/android/web)。接下来我们分别从三端的接口和使用方式做一个详细对比。

web端

Javascript调用native

假设native有个回显信息的函数，签名如下：

String echo(JSONObject args); //先用java描述

该函数功能是js调用时传递一个字符串msg给端，然后端上再返回 “you put string “+msg; 参数以json传递。

先来看看WebViewJavascriptBridge的调用方式：

第一步：复制 setupWebViewJavascriptBridge 函数声明到你的js中：

第二步：调用 setupWebViewJavascriptBridge,在回调中获得bridge, 然后通过bridge调用native方法：

setupWebViewJavascriptBridge(function(bridge) { bridge.callHandler(‘echo’, {‘msg’:‘hello world’}, function responseCallback(responseData) { console.log(responseData) }) })

我们再来看看DSBridge的调用方式：

var bridge = getJsBridge(); var str=bridge.call(“testSyn”, {msg: “hello world”}); console.log(str)

甚至只需要一行代码：

console.log(getJsBridge().call(“testSyn”, {msg: “hello world”}))

对比一下，WebViewJavascriptBridge 的setupWebViewJavascriptBridge函数必须在使用者代码中声明，而此函数主要的作用就是安装bridge,安装成功后，只能在回调中获取bridge对象；这么做有两大缺点：

bridge安装细节不应暴漏给用户；setupWebViewJavascriptBridge不应该由用户声明，这个函数从来都不变，安装的过程应该由sdk去做，这样强制要求用户自己声明调用不仅不符合职责分离的软件设计原则，而且还会造成代码冗余，试想每个网页中都要加这么一块代码，不仅麻烦，而且也浪费带宽。（可能你不在乎用户的流量，但是如果你的用户很多而服务器、带宽资源有限，这对服务器来说也是一个问题，笔者阿里云的ecs带宽只有1兆，而网站就跑了六个，同时在线人数超过200人没人将会感觉到卡，如果你是土豪，那无视这个吧）。
不能直接获取返回值；这点很重要，只能通过回调方式处理返将直接影响前端代码组织逻辑，将会在后面同步／异步对比部分详细讨论。

然而DSBridge 竟是如此优雅！

Natvie 调用 javascript函数

使用WebViewJavascriptBridge时，提供给native调用js函数必须通过bridge在前端进行注册，如：

setupWebViewJavascriptBridge(function(bridge) { bridge.registerHandler(‘jsfun’, function(data, responseCallback) { console.log(“I am js function, arg is:”, data) responseCallback(data) }) })

而DSBridge中完全不需要，只需像正常函数一样将其声明为全局函数即可：

function jsfun(data){ console.log(“I am js function, arg is:”, data) }

如果你的代码不再全局环境下（在一个闭包中），您只需将函数作为window对象的一个属性即可：

window.jsfun=function(data){ console.log(“I am js function, arg is:”, data) }

第二回合 DSBridge完胜！

IOS端

实现API的方式

WebViewJavascriptBridge需要手动注册所有可供js调用的api，如下：

[self.bridge registerHandler:@“echo” handler:^(id data, WVJBResponseCallback responseCallback) {

//设置js函数的返回值，该值将在js调用时传递的回调中接收

responseCallback(…);

}];

[self.bridge registerHandler:@“api2” handler:^(id data, WVJBResponseCallback responseCallback) {

responseCallback(…);

}];

…

需要注意的是WebViewJavascriptBridge对返回值的处理只能通过block.

我们看看DSBridge，很简单只需要将所有api放到一个类中，然后统一注册即可，还有返回值可以直接返回

//JsApiTest.m

@implementation JsApiTest

(NSString *) echo:(NSDictionary *) args

{

return @“…”;

}

(NSString *) api2:(NSDictionary *) args

{

return @“…”;

}

@end

//统一注册

jsApi=[[JsApiTest alloc] init];

webview.JavascriptInterfaceObject=jsApi;

Android端

android端和ios端类似，我们复制一下github.com/gzsll/WebVi… 下的例子（这是android的一个兼容实现）：

webView.registerHandler(“api1”, new WVJBWebView.WVJBHandler() { @Override public void request(Object data, WVJBWebView.WVJBResponseCallback callback) { callback.callback(“return value”); } }); webView.registerHandler(“api2”, new WVJBWebView.WVJBHandler() { @Override public void request(Object data, WVJBWebView.WVJBResponseCallback callback) { callback.callback(“return value”); } }); …

每个api都要单独注册，我们来看看DSBridge官方给出的例子：

public class JsApi{ //同步api @JavascriptInterface String api1(JSONObject jsonObject) throws JSONException { return jsonObject.getString(“msg”) + “［syn call］”; } //异步api @JavascriptInterface void api2(JSONObject jsonObject, CompletionHandler handler) throws JSONException { handler.complete(jsonObject.getString(“msg”)+" [asyn call]"); } } //注册 webView.setJavascriptInterface(new JsApi());

DSBridge不用每个api都去手动注册,只需要将所有api放到一个类中,将需要供js调用的api添加@JavascriptInterface标注即可（出于安全的考虑，关于这个话题，如果有兴趣可自行google）。

对比一下：

WebViewJavascriptBridge为每个api都要单独注册，并且返回值只能通过block或委托；而DSBridge这种统一注册的方式不仅简洁方便，而且所有api放在同一个类中也有助于代码管理，清晰，优雅；而DSBridge同步api可以直接返回值！

综上所述，无论在前端还是在ios/android,在易用性上 DSBridge完胜WebViewJavascriptBridge。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。