WebViewJavaScriptBridge源码解析（一）

WebViewJavaScriptBridge

js调用native的原理

1. js中通过bridge.handler{name,data,func()}传入Native中对应的注册名，需要传给Native的数据，和供Native返回数据时候调用的函数指针。
2. 然后把<name,data,callbackID>包装起来放到js的messages数组中。
3. 然后通过改变iframe的src属性，发起一个类似网络请求的东西，然后在native的webview的代理方法中进行拦截。
4. 拦截后通过执行js的方法_fetchQueue()获取之前messages这个数组。
5. 声明responseCallback(data)回调，这个回调会把<data,callbackId>包装起来，通过原生调用Js方法把它发给Js。
6. 通过遍历messages,获得其中的message，然后取出message中的name(操作名)，然后通过操作名取出messageHandlers中对应的handler
7. 执行handler(message["data"],responseCallback)

第七步的handler是怎么来的呢，我们在js调用oc方法的时候会在native中调用如下方法，这个方法最终会在把handler以键值对的方式放到messageHandlers中。

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        responseCallback(@"Response from testObjcCallback");
    }];

然后执行handler，js发过来的数据就可以让我们在native使用。方法中的block就会被执行，然后调用responseCallback()，我们之前注册的responseCallback(id data)就会被执行，然后responseCallback()中带的data就会发送到js的方法中。在js的方法中会执行responseCallback()方法，然后文章开头那个func()就会被调用，得到native返回的数据。

总结

说白了就是js传数据和函数指针(类比block)到native，native获取数据，并执行这个函数指针，就能在接收到数据后，再把一些数据传给js。

js和native分别维护着自己的很多消息数组，回调数组，操作数组…很多。

native通过执行js代码来获取消息数组里面这些数据和指针，获取后把数据中的操作名称拿出来看自己的这边维护的操作数组里面有没有注册这个操作，有就执行操作(handler)。

至于回调，那就是纯正的一个native操作(handler)中执行作为它参数带过来的一个带参数的block，这个block通过native调用js代码，来把数据传到js。

更简洁的版本
js那边有个数组里面放要执行的方法名字，回调函数等等的，oc获取这个数组，按照里面的名字，执行对应的方法，和js的回调函数。

方法调用图