iOS 开发 之 JSBridge

简单了解下：

一、iOS开发时使用到的两个WebView
1.UIWebView : 使用JavaScriptCore进行JS和OC的交互。
交互原理：通过一个JSContext获取UIWebView的JS执行上下文，然后通过这个上下文进行JS和OC交互。
_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        NSLog(@"%@",@"获取 WebView JS 执行环境失败了!");
    };
2.WKWebView : 使用WKUserContentController进行JS和OC的交互。
交互原理：
通过userContentController把需要观察的JS执行函数注册起来
然后通过一个协议方法将所有注册过的JS函数执行的参数传递到此协议方法中国呢。
步骤：
注册 需要 观察的 JS 执行函数
 [webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];

在 JS 中调用这个函数并传递参数数据
window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});

OC 中遵守 WKScriptMessageHandler 协议。
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 


此协议方法里的 WKScriptMessage 有 name & body 两个属性。 name 可以用来判断是哪个 JSFunc 调用了。body 则是 JSFunc 传递到 OC 的参数。


二、Hybrid APP
1.Hybrid APP : 混合模式移动应用（Web-app、Native-app），说白了就是介于这两者之间的APP
2.Web-app ：是一种基于Web的系统和应用（优点：跨平台开发的优势）
3.Native-app ：是一种基于智能手机本地操作系统（如iOS、Android、WP）并使用原生程式编写运行的第三方应用程序，也叫做本地APP（对应语言：Objective-C、JAVA、C++）（优点：良好的用户交互体验优势）

三、WebViewJSBridge框架
1.WebViewJSBridge : 是一个OC和JS交互的桥接机制，主要包含三个类，JS端的Window.WebViewJavascriptBridge，OC端的WebViewJavascriptBridge和WebViewJavascriptBridgeBase。桥接类支持JS调用OC的方法、OC调用JS方法、JS调用OC通过重定向url并取handlerName来调用、OC调用JS通过stringByEvaluationJavaScriptFromString调用。

JSBridge是什么？有什么作用？

JSBridge是JS和Native Code两者交互的一座连接桥梁（桥接），可以让两端相互嗲用
说白了就是我们经常所提到的JS与OC的交互啦

一、JSBridge实现方案
1.Iframe（WebViewJavascriptBridge和Cordava都采用了Iframe这个方案）

核心思路：
UIWebView拦截Iframe的src，双方提前约定好协议，例如https://__jsbridge__就是一次调用的开始

实现：
1.JS暴露一个方法给Native，接受结果
function responseFromObjC(response) {
  if (!callback) {
    return;
  }
  callback(response);
}
2.Native实现UIWebView的代理
在如下代理方法拦截请求，识别到特定的URL，开始一次调用流程
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(YUWebViewNavigationType)navigationType {
  NSURL *url = request.URL;
  // 判断URL是否是JSBridge调用
  if ([url.host isEqualToString:@"__jsbridge__"]) {
    // 处理JS调用Native
    return NO;
  }
  return YES;
}

3.JS开启一个Iframe，加载一个特定的URL，开始一次调用
var iframe = document.createElement('iframe');
iframe.style.display = 'none'
iframe.src = 'https://_jsbridge__?action=' + action + '&data=' + data;
document.documentElement.appendChild(iframe);

4.Native方法执行完成后，调用JS方法responseFromObjC将结果回传给JS。
// 获取调用参数，demo的调用方式是：'https://__jsbridge__?action=action&data='
// 参数直接放在query里面的，更好的方案是js暴露一个方法给原生，原生调用方法获取数据
NSURLComponents *urlComponents = [NSURLComponents componentsWithURL:url resolvingAgainstBaseURL:YES];
NSArray *queryItems = urlComponents.queryItems;
NSMutableDictionary *params = [NSMutableDictionary dictionary];
for (NSURLQueryItem *queryItem in queryItems) {
    NSString *key = queryItem.name;
    NSString *value = queryItem.value;
    [params setObject:value forKey:key];
}
NSString *action = params[@"action"];
NSString *data = params[@"data"];

if ([action isEqualToString:@"alertMessage"]) {
    // 调用原生方法，获取数据
    // js暴露方法`responseFromObjC`给原生，原生通过该方法回调
    // 在实际项目中，为了实现实现js并发原生方法，最好带一个callBackID，来区分不同的调用
    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"responseFromObjC('%@')", data]];
} else {
    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"responseFromObjC('Unkown action'"]];
}

2.Ajax实现方案

核心思路：
JS使用XMLHttpRequest发起请求，在Native拦截达到调用的目的，通过自定义NSULRProtocol可以拦截到Ajax请求

实现：
1.新建类继承自NSURLProtocol，并注册。
[NSURLProtocol registerClass:[CRURLProtocol class]];

2.实现自定义NSURLProtocol，在startLoading方法拦截Ajax请求
- (void)startLoading {
    NSURL *url = [[self request] URL];
    // 拦截“http://__jsbridge__”请求
    if ([url.host isEqualToString:@"__jsbridge__"]) {
       // 处理JS调用Native
    }
}

3.JS发起Ajax请求，URL为提前约定的特殊值，例如：http://jsbridge。请求参数放在Request Body里。
// 调用原生
function callNative(action, data) {
        var xhr = new window.XMLHttpRequest(),
        url = 'http://__jsbridge__';
        xhr.open('POST', url, false);
        xhr.send(JSON.stringify({
                    action: action,
                    data: data
                    }));
        return xhr.responseText;
}

4.Naive拦截到请求，获取参数，执行Native方法，最后通过Ajax的Response把结果返回给JS。
...
// 2. 从HTTPBody中取出调用参数
NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:self.request.HTTPBody options:NSJSONReadingAllowFragments error:nil];
NSString *action = dic[@"action"];
NSString *data = dic[@"data"];
NSData *responseData;

// 3. 根据action转发到不同方法处理，param携带参数
if ([action isEqualToString:@"alertMessage"]) {
    responseData = [data dataUsingEncoding:NSUTF8StringEncoding];
} else {
    responseData = [@"Unknown action" dataUsingEncoding:NSUTF8StringEncoding];
}

// 4. 处理完成，将结果返回给js
[self sendResponseWithResponseCode:200 data:responseData mimeType:@"text/html"];
...

- (void)sendResponseWithResponseCode:(NSInteger)statusCode data:(NSData*)data mimeType:(NSString*)mimeType {
    NSHTTPURLResponse* response = [[NSHTTPURLResponse alloc] initWithURL:[[self request] URL] statusCode:statusCode HTTPVersion:@"HTTP/1.1" headerFields:@{@"Content-Type" : mimeType}];
    
    [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed];
    if (data != nil) {
        [[self client] URLProtocol:self didLoadData:data];
    }
    [[self client] URLProtocolDidFinishLoading:self];
}

3.JSCore方案

前两种方案虽然方法不一致，但思路都是类似的，由于JS不能直接调用Native方法，通过曲线救国的方式，找到一个载体来传递消息。
而这种方法就比较直接了，使用iOS7推出的黑科技JavaScriptCore，将Native方法直接暴露给JS，打通两端的数据通道。说到JavaScriptCore，不得不说的是JSPatch、ReactNative、Weex等都是利用JavaScriptCore来实现各种炫酷的功能。

核心思路：

实现：
1.
- (void)injectJSBridge {
    // 获取JSContext
    JSContext *context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    // 给JS注入方法callNative
    context[@"callNative"] = ^(JSValue *action, JSValue *data) {
        NSString *actionStr = [action toString];
        NSString *dataStr = [data toString];
        if ([actionStr isEqualToString:@"alertMessage"]) {
            return dataStr;
        } else {
            return @"Unkown action";
        }
    };
}

2.JS调用
callNative("alertMessage", "Hello world!")

二、性能对比
JSCore > Ajax > Iframe

三、WebViewJavaScriptBridge

WebViewJavaScriptBridge是用于WkWebView和UIWebView中JS和OC交互的。

基本原理：
1.把OC的方法注册到桥梁中，让JS去调用
2.把JS的方法注册到桥梁中，让OC去调用

使用步骤：
1.首先在项目中倒入WebViewJavaScriptBridge框架。（pod 'WebViewJavascriptBridge'）
2.导入头文件#import <WebViewJavascriptBridge.h>
3.建立WebViewJavaScriptBridge和WebView之间的关系（_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];）
4.在HTML文件中，复制粘贴以下两端JS函数
function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
        var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
        WVJBIframe.style.display = 'none'; // 不显示
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
        document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    
    // 这里主要是注册 OC 将要调用的 JS 方法。
    setupWebViewJavascriptBridge(function(bridge){
       
    });
5.往桥梁中注入OC方法
 [_jsBridge registerHandler:@"scanClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"dataFrom JS : %@",data[@"data"]);
        
        responseCallback(@"扫描结果 : www.baidu.com");
    }];
这段代码的意思：

scanClick 是 OC block 的一个别名。
block 本身，是 JS 通过某种方式调用到 scanClick 的时候，执行的代码块。
data ，由于 OC 这端由 JS 调用，所以 data 是 JS 端传递过来的数据。
responseCallback OC 端的 block 执行完毕之后，往 JS 端传递的数据。
6.往桥梁中注入JS函数（需要在第二段JS代码中，注入JS的函数）
// 这里主要是注册 OC 将要调用的 JS 方法。
    setupWebViewJavascriptBridge(function(bridge){
        // 声明 OC 需要调用的 JS 方法。
        bridge.registerHanlder('testJavaScriptFunction',function(data,responseCallback){
            // data 是 OC 传递过来的数据.
            // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
            alert("JS 被 OC 调用了.");
            responseCallback({data: "js 的数据",from : "JS"});
        })
    });

这段代码的意思：

testJavaScriptFunction 是注入到桥梁中 JS 函数的别名。以供 OC 端调用。
回调函数的 data。 既然 JS 函数由 OC 调用，所以 data 是 OC 端传递过来的数据。
responseCallback 。 JS 调用在被 OC 调用完毕之后，向 OC 端传递的数据。
说白了就是OC端注册OC方法然后调用JS函数，JS端注册JS函数然后调用OC方法

参考文章
聊聊iOS开发中的JSBridge

https://www.jianshu.com/p/d12ec047ce52
https://www.jianshu.com/p/d12ec047ce52