从前端初识JSBridge

从前端初识JSBridge

参考：JSBrdige的原理-掘金

---

什么是 JSBridge

目前在很多 app 中，有利用 webview 组件内嵌 h5 实现一部分页面和功能，h5 部分采用 js 开发，native 部分原生开发，就是 Hybrid 的混合开发模式。由于 h5 部分 的 js 是运行在app 沙盒中，故怎么实现 h5 和 native 的通信是很重要的事情，JSBridge 就是可用于解决 js 和 native 双向通信的一种方案。

例如：

• 基于web UI 的 hybrid 解决方案：微信浏览器，公司内的 hybrid 方案
• 非基于 Web UI 但业务逻辑基于 JavaScript 的解决方案：例如 React-Native

---

为什么需要JSBridge

客户端对于前端而言，功能更强大，有系统级别的调用，如摄像头，获取用户端信息，GPS等。有了 JSBridge 之后，前端如果也想拥有这些功能，就可以借助 JSBridge ，通知 native 调用特定功能，然后将结果再通过 JSBridge 返回给 js 。客户端也比前端环境更安全，可以对js 请求进行校验。

有时候使用前端构建页面比客户端方便，前端拥有强大的动态化功能。前端在执行某些业务后，可以通过 JSBridge 通知 Native 相关状态

---

JSBridge的实现方式

Javascript 运行在独立的JS Context中，与原生部分天然隔离。则 js 和 native 的相互通信调用可以类比为 RPC 远程过程调用。从前端的角度看，两者的通信过程可以用 jsonp 进行类比。
Bridge 本质是跨领域，跨语言通信 javascript <-> OC/Java，实现方式常见大致有2种：

• 信号式，伪造请求。eg: 微信：wx://，支付宝：alipay://，
  优点：兼容性好，可扩展性强
  缺点：调用延迟较高，创建请求需要时间
• 注入式，通过webView 注入，类似于BOM
  优点：调用速度快，参照alert
  缺点：版本兼容问题，且可能会造成线程阻塞

---

JSBridge的通信

Js 调用 native

1.注入式：偏向native端实现，由native 端 向 webView 容器 注入 API 实现

通过 webview 提供的原生接口，native 端可以向 js 的 context(window) 对象注入全局的对象或方法。当js 调用这些方法时，将直接运行 native 端的代码，达到 js 调用 native 的作用。

Android： 暴露出给 js 端调用的接口方法