hybrid is divided into 2 pieces of content, one of which is the bridge.
Analyze the currently popular WebViewJavascriptBridge today.
WebViewJavascriptBridge provides the uppermost register and call interfaces on both the native and js ends.
js provides methods to register js methods and call native methods.
native provides a method of registering native methods and calling js methods .
Both js and native save the method name (name) and The key value structure (main map) of the method body, the id (callbackid) of the callback method in the method body, and the key value structure (sub map) of the callback body (callbackbody).
When calling each other, call the method callback id (callbackid) and the callback body (Callbackbody) added to its own sub map, and then pass the method name (name), method parameters (params), method callback id (callbackid) after receiving the method name, find the specific method body (method) in the main map ), the method callback id (callbackid) is returned to the caller after the execution is completed. After the caller receives the method callback id (callbackid), it searches for the corresponding callback body (callbackbody) in the sub map to call, and the above completes a complete call callback process .
eg
js init:
js.register(name,method)
native init :
native.register(name,method)
====================== =============
js -> native:
js.call()
{
js.subMap.insert(callbackid,callbackbody)
js.frame.src({name,params,callbackid})
< /span>}
native.handle({name,params},callbackid)
{
responsedata = native.mainMap(name).do()
native.stringByEvaluatingJavaScriptFromString({callbackid,responsedata})
//Here is wonderful, define a customer callback at the bottom layer and throw it to the upper layer, let the upper layer decide the timing of execution, and In general callback usage, consumers are executed passively.
//eg
Low-level implementation
-(void)receiveJSCall(name,params,callbackid)
{
method body = main map (name); span>
CustomerCallBack customercallback = ^(id responserData){
native.stringByEv….FromString (callbackid,responserData)
} < /span>
methodbody(params,customercallback)
}
Upper implementation
…
< p style="margin-top:0px; margin-bottom:0px; line-height:normal; font-family:'PingFang SC'"> xx.register:name handle:^(id response,CustomCallBack cb)
{
responserData = do …
cg(responserData)
} p>
…
}
->js :
js.handle{{callbackid,responsedata }}
{
js.subMap(callbackid).do(responsedata)
}
====================================
native -> js :
native.call()
{
native.subMap.insert(callbackid,callbackbody)
native.stringByEvaluatingJavaScriptFromString({name,params},callbackid)
}
js.handle({name,params},callbackid)
{
responsedata = js.mainMap(name).do();
< span style="white-space:pre">js.call({callbackid,responsedata})
}
->native:
native.handle({callbackid,resp onsedata})
{
native.subMap(callbackid).do(responsedata)
}