WebViewJavascriptBridge-优秀开源代码解读：JS与iOS Native Code互调

本篇为大家介绍一个优秀的开源小项目：WebViewJavascriptBridge。

它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调，支持消息发送、接收、消息处理器的注册与调用以及设置消息处理的回调。

就像项目的名称一样，它是连接UIWebView和Javascript的bridge。在加入这个项目之后，他们之间的交互处理方式变得很友好。

在native code中跟UIWebView中的js交互的时候，像下面这样：

而在UIWebView中的js跟native code交互的时候也变得很简洁，比如在调用处理器的时候，就可以定义回调处理逻辑：

一起来看看它的实现吧，它总共就包含了三个文件：

它们是以如下的模式进行交互的：



很明显：WebViewJavascriptBridge.js.txt主要用于衔接UIWebView中的web page，而WebViewJavascriptBridge.h/m则主要用于与ObjC的native code打交道。他们作为一个整体，其实起到了一个“桥梁”的作用，这三个文件封装了他们具体的交互处理方式，只开放出一些对外的涉及到业务处理的 API，因此你在需要UIWebView与Native code交互的时候，引入该库，则无需考虑太多的交互上的问题。整个的Bridge对你来说都是透明的，你感觉编程的时候，就像是web编程的前端和后端
一样清晰。

简单地罗列一下它可以实现哪些功能吧：

出于表达上的需要，对于UIWebView相关的我就称之为UI端，而objc那端的处理代码称之为Native端。

【1】UI端

(1) UI端在初始化时支持设置消息的默认处理器(这里的消息指的是从Native端接收到的消息)

(2) 从UI端向Native端发送消息，并支持对于Native端响应后的回调处理的定义

(3) UI端调用Native定义的处理器，并支持Native端响应后的回调处理定义

(4) UI端注册处理器(供Native端调用)，并支持给Native端响应处理逻辑的定义

【2】 Native端

(1) Native端在初始化时支持设置消息的默认处理器(这里的消息指的是从UI端发送过来的消息)

(2) 从Native端向UI端发送消息，并支持对于UI端响应后的回调处理逻辑的定义

(3) Native端调用UI端定义的处理器，并支持UI端给出响应后在Native端的回调处理逻辑的定义

(4) Native端注册处理器(供UI端调用)，并支持给UI端响应处理逻辑的定义

UI端以及Native端完全是对等的两端，实现也是对等的。一段是消息的发送端，另一段就是接收端。这里为引起混淆，需要解释一下我这里使用的“响应”、“回调”在这个上下文中的定义：

(1) 响应：接收端给予发送端的应答

(2) 回调：发送端收到接收端的应答之后在接收端调用的处理逻辑

下面来分析一下源码：

WebViewJavascriptBridge.js.txt：

主要完成了如下工作:

(1) 创建了一个用于发送消息的iFrame(通过创建一个隐藏的ifrmae，并设置它的URL 来发出一个请求，从而触发UIWebView的shouldStartLoadWithRequest回调协议)

(2) 创建了一个核心对象WebViewJavascriptBridge，并给它定义了几个方法，这些方法大部分是公开的API方法

(3) 创建了一个事件：WebViewJavascriptBridgeReady，并dispatch(触发)了它。

代码解读

UI端实现

对于(1)，相应的代码如下：

对于(2)中的WebViewJavascriptBridge，其对象拥有如下方法：

方法的实现：

涉及到的两个内部方法：

还有两个js方法是供native端直接调用的方法(它们本身也是为native端服务的)：

最后还有一段代码就是，定义一个事件并触发，同时设置设置上面定义的WebViewJavascriptBridge对象为事件的一个属性：

Native端实现

其实大致跟上面的类似，只是因为语法不同(所以我上面才说两端是对等的)：

WebViewJavascriptBridge.h/.m

它其实可以看作UIWebView的Controller，实现了UIWebViewDelegate协议：

方法的实现其实是跟前面类似的，这里我们只看一下UIWebView的一个协议方法

使用示例

UI端

Native端



附件：
/uploads/soft/131231/39322-131231094600F7.zip