什么是JSbridge？

运行在webview中的JS代码有能力调用原生的系统API，没有传统浏览器沙箱的限制

为什么JSbridge是异步的？

JavaScript 是运行在一个单独的 JS Context 中（例如，WebView 的 Webkit 引擎、JSCore）。由于这些Context 与原生运行环境的天然隔离，我们可以将这种情况与 RPC（Remote Procedure Call，远程过程调用）通信进行类比，将 Native 与 JavaScript 的每次互相调用看做一次 RPC 调用。如此一来我们可以按照通常的 RPC 方式来进行设计和实现。

在 JSBridge 的设计中，可以把前端看做 RPC 的客户端，把 Native 端看做 RPC 的服务器端，从而 JSBridge 要实现的主要逻辑就出现了：

通信调用（Native 与 JS 通信）
句柄解析调用

如果你是个前端，而且并不熟悉 RPC 的话，你也可以把这个流程类比成 JSONP 的流程

npm包开发

原理:

IOS 和安卓中，原生代码会监听特定的 iframe 加载事件。当检测到 iframe 加载了特定的 URL 时，原生会执行初始化逻辑，创建 WebviewJavascript 对象并将其注册到 window 对象上（IOS使用Objective—C、IOS使用Java）。

结合npm具体代码解释

`

 connectJsBridge: function (callback: any) {
  //第一步：
      if (window.WebViewJavascriptBridge) {
          //WebViewJavascriptBridge 对象是原生注册到window，如果不存在，就需要通过iframe建立连接；          存在则往这个对象添加方法就可以。
          //目的是在JavaScript与原生代码之间建立一个通信桥
          return callback(window.WebViewJavascriptBridge)
      }

      //第二步：
      if (window.WVJBCallbacks) {
          // WebViewJavascriptBridge桥接对象尚未初始化完成，会把调用的方法存储到WVJBCallbacks中。
          // 待WebViewJavascriptBridge初始化完成后，原生代码会遍历WVJBCallbacks对象，并依次执行其中的回调函数。
              return window.WVJBCallbacks.push(callback)
      }lese {
          window.WVJBCallbacks = [callback]
      }
      //第三步：
      // 创建一个隐藏的iframe来触发Webview中的js和原生代码之间的桥初始化过程。
      // 这个过程，原生会注册WebViewJavascriptBridge对象到window中
      var WVJBIframe = document.createElement('iframe')
      WVJBIframe.style.display = 'none'
      // 这个URL通常是原生代码监听的特定标识
      WVJBIframe.src = 'https://__bridge_loaded__'
      document.documentElement.appendChild(WVJBIframe)
      setTimeout(function () {
          //将iframe添加到文档中。这一个操作会触发Webview内部的特定处理逻辑。随便，设置定时器将iframe移除。
          document.documentElement.removeChild(WVJBIframe)
      }, 0)
  },
`

通过创建和加载隐藏的iframe，JavaScript代码触发了原生代码的桥接初始化过程。原生代码在检测到iframe的特定URL后，会创建并注册WebViewJavascriptBridge对象到window中。这个过程完成后，JavaScript可以通过这个对象与原生代码进行通信。

JSbridge方法

信息类：

    定位信息
    网络信息
    用户信息
    权限信息（session、token、个性化服务信息、系统权限）
    屏幕信息
    购物车信息
    剪贴板信息

功能类：

    支付 | 弹窗 | 分享 | 录音 | 存储 | 图片保存 | 标题栏设置 | 页面操作
    其它：添加购物车 | 设置日历提醒 | IOS是否有桌面组件

调测页面

内嵌于测试版App里的Webview页面，用于给原生、H5开发，及产品同学测试已存在的JSBridge，更好的理解需求和应用API。

此页面可以调测各种信息类方法，以获知目前能拿到的各种数据信息；也可以调测功能类方法，每个方法都可以传入自定义参数以获知不同的效果展示。

特点：方法功能完整；自定义参数；及时维护；功能纯粹操作方便

自动化测试页

内嵌于测试版App里的Webview页面，此页面提供给测试同学，用于新增方法后及版本上线前，用于测试JSBridge功能是否存在Bug。

一键测试所有信息类方法，拿到自动化测试评分及报表，报表包括不通过信息验证的方法及返回数据。

特点：简单易用；兼容测试所有App版本；问题定位快

JSbridge 全家桶开发实践