一篇文章了解Js Bridge-原创手记-慕课网

作者：lazydu，原文地址

什么是JS Bridge

在大多数APP开发过程中，都会通过H5来实现部分功能，而Hybird APP基本90%以上都是H5。现在很少有纯原生的APP。但是，由于H5页面是内嵌到原生应用的WebView组件（一个浏览器内核）中，而手机浏览器Javascript引擎是在一个沙箱环境中运行，因此JavaScript的权限受到严格限制，比如没有本地文件读写权限、不能使用GPS、不能修改系统配置等。所以，如果JavaScript要用到这些受限的能力时，就需要委托原生去实现，原生完成后，再将结果通知JavaScript，因此，JavaScript和原生之间就需要一个通信的桥梁，而这个桥梁本质上就是原生的浏览器组件（我们统一称之为WebView）与Javascript 通信的通道，一般称为 WebView JavaScript Bridge, 为了简单，一般简称为 JS bridge。需要说明的是，原生不仅仅指移动端（Android、IOS）上原生代码开发的部分，它也可以是Windows、MAC上的，所以原生一词主要是为了区分H5，而本文只讨论移动端的Js Bridge 。

移动开发的大势

今年来，动态化是移动开发的主流趋势，所谓动态化是指可以随时更新APP的能力，这是为了克服原生应用修改后必须重新发版的天然不足。目前动态化的技术主要有四种：热补丁、混合开发框架（React-Native、Weex等）、纯粹的Web APP、原生加H5（需要经常更新的部分用H5实现）。其中热补丁技术主要用于修复一些线上bug，不用于主流开发，当然也有一些基于热补丁技术的分包动态化方案，本文暂不讨论。而剩余的三种方案，都是通过Javascript 和原生配合实现的，而它们都用到了 Js Bridge，可见使用一个好的Js Bridge的重要性。而不同的混合开发框架、Web APP中Js Bridge的实现和通信协议都不相同，当然，如果你使用的事这些开发框架，你只需要了解相应框架下的通信协议就行，这没有什么问题。但是，对于采用原生加H5的APP，就需要自己挑选一个合适的Js Bridge了，那么对于开发者来说，什么是好的JavaScript Bridge?

什么是好的JS Bridge？

可用性

能够满足通信需求、功能完善；当然，如果都不能用，还是回家洗洗睡吧~。

健壮性

所谓健壮就是经得住考验，bug少、兼容性好、在各种情况下都能稳定运行。然而，可怕的事，现有的知名开源js bridge 质量都存在着严重问题，下面是我在两个知名Android JS Bridge开源库下提的问题:

https://github.com/lzyzsd/JsBridge/issues/119
https://github.com/jesse01/WebViewJavascriptBridge/issues/5
可见，要想造一座好桥，还是不容易的。

跨平台

为了保证同一份Javascript代码既能同时在Android和IOS下正常运行，那么好的JavaScript Bridge 应该要能跨平台，这样才能保证在Android和IOS和H5通信协议一致。然而，目前Github上万star的 marcuswestin/WebViewJavascriptBridge 官方也只提供了IOS版，尽管有一些第三方Android实现，但大都存在各种各样的问题，有的存在严重bug，如 https://github.com/jesse01/WebViewJavascriptBridge/issues/5 , 有的和IOS版差别太大，如 https://github.com/fangj/WebViewJavascriptBridge 。

安全

安全是很重要的，现在有些Android实现中使用了 webview.addJavascriptInterface ，而在Android 4.2.2之前， webview.addJavascriptInterface 存在任意代码执行漏洞，这就会导致严重的安全问题。

使用简单

一个好东西应该是用起来简单的。

对于JS Bridge来说，使用简单应该包括三个端：Android、IOS、 JavaScript，也就是说无论对于哪个端，用起来要足够的简单，这很重要，这样可以避免大量的原生开发和前端开发的撕逼。

强大

在满足可用性和使用简单的基础上，功能要尽可能强大。现在的很多实现，基本上只满足了可用性，而功能方面都比较弱，比如：

不支持检测是否存在某个API的方法；有时随着版本迭代不确定某个版本下是否存在某个Native或Javascript方法（在版本迭代过程中一些是新添加的）。
不支持进度回调；现有JS Bridge基本都只支持一次调用一次返回，但是有些时候，如js调用原生下载文件功能的方法时，原生需要在下载过程中将下载进度不停返回给js。
不支持API管理；现有JS Bridge注册API时基本都是每个API都需要单独注册，这样在API多的情况下，不仅使用回非常麻烦，也不利于API分类管理。

福音

我给大家捅破了现实，也必须为大家重塑希望！听不懂？那简单来说，就是前面都是铺垫，下面才是真正目的！

那么到底有没有一个可用、健壮、跨平台、安全、使用简单、强大的现成的JS Bridge?

哈哈，当然是有的，经过我通宵达旦、四处浏览、呕心沥血、废寝忘食，终于创造了这么一个健壮、跨平台、安全、使用简单、强大的JS Bridge，那就是DSBridge，它有如下特点：

Android、IOS、Javascript 三端易用，轻量且强大、安全且健壮。
同时支持同步调用和异步调用
支持以类的方式集中统一管理API
支持API命名空间
支持调试模式
支持API存在性检测
支持进度回调：一次调用，多次返回
支持Javascript关闭页面事件回调
支持Javascript 模态/非模态对话框
支持腾讯X5内核

当然得给出源码地址：

DSBridge for IOS：github.com/wendux/DSBr…

DSBridge for Android: github.com/wendux/DSBr…

详情请参考Github文档，都有中文哦。

最后，如果你喜欢DSBridge，欢迎star，不能多年辛苦无人知啊，哈哈。