什么是 js bridge？jsb 有哪些实现方式？

什么是 JS Bridge？

JS Bridge，即JavaScript Bridge，是一种在不同环境或者平台之间进行通信的技术，尤其是在Web视图（如WebView）中嵌入的JavaScript与宿主应用（通常是移动应用）之间的通信桥梁。通过JS Bridge，可以使得原生应用可以调用JavaScript代码，JavaScript代码也能调用原生应用的API，从而实现混合开发，充分利用原生应用的性能优势与Web技术的灵活性。

JSB 有哪些实现方式？

实现JS Bridge的方式通常取决于所使用的平台和具体的需求，以下是一些常见的实现方式：

1. URL Scheme： 这是一种较为简单的实现方式。原生应用可以通过拦截WebView中的URL跳转请求来实现与JavaScript的通信。当JavaScript需要与原生应用通信时，它会尝试跳转到一个特殊的URL（如 myscheme://someaction?param1=value1），原生应用拦截这个URL请求，并解析出相应的行为和参数，然后执行相应的原生代码。
2. 注入API对象： 通过原生代码将一些对象或者方法注入到WebView中的JavaScript环境里。Injected API可以直接在JavaScript代码中被调用，从而实现JavaScript对原生功能的调用。这种方式可以提供更加丰富和直接的接口给JavaScript。
3. 消息通道（如postMessage）： 现代的Web视图组件（如iOS中的WKWebView）支持使用类似于HTML5中定义的 postMessage API的消息通道，可以实现双向通信。JavaScript可以通过这个API发送消息给原生代码，并且原生代码也可以返回消息给JavaScript。
4. Native Modules： 在一些JavaScript框架中，如React Native，可以创建特定的Native Modules来扩展原生应用的功能。这些模块可以被JavaScript代码直接调用，原生代码也可以向JavaScript环境发送事件。

示例：

假设我们需要实现一个简单的功能，让WebView中的JavaScript能够打开原生应用的摄像头并拍照。使用URL Scheme的方式实现可能如下：

在JavaScript中，你可能会有这样的调用代码：

javascript
function openNativeCamera() {
  window.location.href = 'myapp://camera/open';
}

在原生应用中（以iOS为例），你可能需要实现如下的拦截逻辑：

objective
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  NSURL *URL = [request URL];
  if ([[URL scheme] isEqualToString:@"myapp"]) {
    if ([[URL host] isEqualToString:@"camera"] && [[URL path] isEqualToString:@"/open"]) {
      // 调用原生摄像头的代码
      [self openCamera];
      return NO;
    }
  }
  return YES;
}

- (void)openCamera {
  // 打开摄像头的逻辑
}

以上示例展示了如何通过URL Scheme拦截WebView中的跳转来调用原生功能。其他实现方式会有不同的代码示例，但核心思想都是建立一个通信通道，让JavaScript与原生代码能够互相调用。