一篇文章了解JsBridge

什么是JSBridge

在大多数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 和原生配合实现的，而它们都用到了 JsBridge， 可见使用一个好的Js Bridge的重要性。而不一样的混合开发框架、Web APP中Js Bridge的实现和通讯协议都不相同，固然，若是你使用的事这些开发框架，你只须要了解相应框架下的通讯协议就行，这没有什么问题。 可是，对于采用原生加H5的APP，就须要本身挑选一个合适的Js Bridge了，那么对于开发者来讲，什么是好的JavaScript Bridge?

什么是好的JS Bridge？

可用性

可以知足通讯需求、功能完善；固然，若是都不能用，仍是回家洗洗睡吧~。

健壮性

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

1. https://github.com/lzyzsd/JsBridge/issues/119
2. 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， 也就是说不管对于哪一个端，用起来要足够的简单，这很重要，这样能够避免大量的原生开发和前端开发的撕逼。

强大

在知足可用性和使用简单的基础上，功能要尽量强大。如今的不少实现，基本上只知足了可用性，而功能方面都比较弱，好比：

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

福音

我给你们捅破了现实，也必须为你们重塑但愿！听不懂？那简单来讲，就是前面都是铺垫，下面才是真正目的！

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

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

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

固然得给出源码地址：

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

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

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

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