Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备
本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge。
它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送、接收、消息处理器的注册与调用以及设置消息处理的回调。
就像项目的名称一样,它是连接UIWebView和Javascript的bridge。在加入这个项目之后,他们之间的交互处理方式变得很友好。
在native code中跟UIWebView中的js交互的时候,像下面这样:
- //发送一条消息给UI端并定义回调处理逻辑
- [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {
- if (error) { NSLog(@"Uh oh - I got an error: %@", error); }
- NSLog(@"objc got response! %@ %@", error, responseData);
- }];
而在UIWebView中的js跟native code交互的时候也变得很简洁,比如在调用处理器的时候,就可以定义回调处理逻辑:
- //调用名为testObjcCallback的native端处理器,并传递参数,同时设置回调处理逻辑
- bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
- <span style="white-space:pre"> </span>log('Got response from testObjcCallback', response)
- })
一起来看看它的实现吧,它总共就包含了三个文件:
- WebViewJavascriptBridge.h
- WebViewJavascriptBridge.m
- WebViewJavascriptBridge.js.txt
它们是以如下的模式进行交互的:
很明显: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),相应的代码如下:
- /*
- *创建一个iFrame,设置隐藏并加入到DOM中
- */
- function _createQueueReadyIframe(doc) {
- messagingIframe = doc.createElement('iframe')
- messagingIframe.style.display = 'none'
- doc.documentElement.appendChild(messagingIframe)
- }
对于(2)中的WebViewJavascriptBridge,其对象拥有如下方法:
- window.WebViewJavascriptBridge = {
- init: init,
- send: send,
- registerHandler: registerHandler,
- callHandler: callHandler,
- _fetchQueue: _fetchQueue,
- _handleMessageFromObjC: _handleMessageFromObjC
- }
方法的实现:
- <span style="white-space:pre"> </span>/*
- *初始化方法,注入默认的消息处理器
- *默认的消息处理器用于在处理来自objc的消息时,如果该消息没有设置处理器,则采用默认处理器处理
- */
- function init(messageHandler) {
- if (WebViewJavascriptBridge._messageHandler) { throw new Error('WebViewJavascriptBridge.init called twice') }
- WebViewJavascriptBridge._messageHandler = messageHandler
- var receivedMessages = receiveMessageQueue
- receiveMessageQueue = null
- //如果接收队列有消息,则处理
- for (var i=0; i<receivedMessages.length; i++) {
- _dispatchMessageFromObjC(receivedMessages[i])
- }
- }
- <span style="white-space:pre"> </span>/*
- *发送消息并设置回调
- */
- function send(data, responseCallback) {
- _doSend({ data:data }, responseCallback)
- }
- /*
- *注册消息处理器
- */
- function registerHandler(handlerName, handler) {
- messageHandlers[handlerName] = handler
- }
- /*
- *调用处理器并设置回调
- */
- function callHandler(handlerName, data, responseCallback) {
- _doSend({ data:data, handlerName:handlerName }, responseCallback)
- }
涉及到的两个内部方法:
- <span style="white-space:pre"> </span>/*
- *内部方法:消息的发送
- */
- function _doSend(message, responseCallback) {
- //如果定义了回调
- if (responseCallback) {
- //为回调对象产生唯一标识
- var callbackId = 'js_cb_'+(uniqueId++)
- //并存储到一个集合对象里
- responseCallbacks[callbackId] = responseCallback
- //新增一个key-value对- 'callbackId':callbackId
- message['callbackId'] = callbackId
- }
- sendMessageQueue.push(JSON.stringify(message))
- messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE
- }
- <span style="white-space:pre"> </span>/*
- *内部方法:处理来自objc的消息
- */
- function _dispatchMessageFromObjC(messageJSON) {
- setTimeout(function _timeoutDispatchMessageFromObjC() {
- var message = JSON.parse(messageJSON)
- var messageHandler
- if (message.responseId) {
- //取出回调函数对象并执行
- var responseCallback = responseCallbacks[message.responseId]
- responseCallback(message.error, message.responseData)
- delete responseCallbacks[message.responseId]
- } else {
- var response
- if (message.callbackId) {
- var callbackResponseId = message.callbackId
- response = {
- respondWith: function(responseData) {
- _doSend({ responseId:callbackResponseId, responseData:responseData })
- },
- respondWithError: function(error) {
- _doSend({ responseId:callbackResponseId, error:error })
- }
- }
- }
- var handler = WebViewJavascriptBridge._messageHandler
- //如果消息中已包含消息处理器,则使用该处理器;否则使用默认处理器
- if (message.handlerName) {
- handler = messageHandlers[message.handlerName]
- }
- try {
- handler(message.data, response)
- } catch(exception) {
- console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception)
- }
- }
- })
- }
还有两个js方法是供native端直接调用的方法(它们本身也是为native端服务的):
- <span style="white-space:pre"> </span>/*
- *获得队列,将队列中的每个元素用分隔符分隔之后连成一个字符串【native端调用】
- */
- function _fetchQueue() {
- var messageQueueString = sendMessageQueue.join(MESSAGE_SEPARATOR)
- sendMessageQueue = []
- return messageQueueString
- }
- <span style="white-space:pre"> </span>/*
- *处理来自ObjC的消息【native端调用】
- */
- function _handleMessageFromObjC(messageJSON) {
- //如果接收队列对象存在则入队该消息,否则直接处理
- if (receiveMessageQueue) {
- receiveMessageQueue.push(messageJSON)
- } else {
- _dispatchMessageFromObjC(messageJSON)
- }
- }
最后还有一段代码就是,定义一个事件并触发,同时设置设置上面定义的WebViewJavascriptBridge对象为事件的一个属性:
- <span style="white-space:pre"> </span>var doc = document
- _createQueueReadyIframe(doc)
- //创建并实例化一个事件对象
- var readyEvent = doc.createEvent('Events')
- readyEvent.initEvent('WebViewJavascriptBridgeReady')
- readyEvent.bridge = WebViewJavascriptBridge
- //触发事件
- doc.dispatchEvent(readyEvent)
Native端实现
其实大致跟上面的类似,只是因为语法不同(所以我上面才说两端是对等的):
WebViewJavascriptBridge.h/.m
它其实可以看作UIWebView的Controller,实现了UIWebViewDelegate协议:
- @interface WebViewJavascriptBridge : NSObject <UIWebViewDelegate>
- + (id)bridgeForWebView:(UIWebView*)webView handler:(WVJBHandler)handler;
- + (id)bridgeForWebView:(UIWebView*)webView webViewDelegate:(id <UIWebViewDelegate>)webViewDelegate handler:(WVJBHandler)handler;
- + (void)enableLogging;
- - (void)send:(id)message;
- - (void)send:(id)message responseCallback:(WVJBResponseCallback)responseCallback;
- - (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
- - (void)callHandler:(NSString*)handlerName;
- - (void)callHandler:(NSString*)handlerName data:(id)data;
- - (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
- @end
方法的实现其实是跟前面类似的,这里我们只看一下UIWebView的一个协议方法
shouldStartLoadWithRequest:
- - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
- if (webView != _webView) { return YES; }
- NSURL *url = [request URL];
- if ([[url scheme] isEqualToString:CUSTOM_PROTOCOL_SCHEME]) {
- //队列中有数据
- if ([[url host] isEqualToString:QUEUE_HAS_MESSAGE]) {
- //刷出队列中数据
- [self _flushMessageQueue];
- } else {
- NSLog(@"WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@", CUSTOM_PROTOCOL_SCHEME, [url path]);
- }
- return NO;
- } else if (self.webViewDelegate) {
- return [self.webViewDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
- } else {
- return YES;
- }
- }
使用示例
UI端
- <span style="white-space:pre"> </span>//给WebViewJavascriptBridgeReady事件注册一个Listener
- document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false)
- <span style="white-space:pre"> </span>//事件的响应处理
- function onBridgeReady(event) {
- var bridge = event.bridge
- var uniqueId = 1
- <span style="white-space:pre"> </span>//日志记录
- function log(message, data) {
- var log = document.getElementById('log')
- var el = document.createElement('div')
- el.className = 'logLine'
- el.innerHTML = uniqueId++ + '. ' + message + (data ? ': ' + JSON.stringify(data) : '')
- if (log.children.length) { log.insertBefore(el, log.children[0]) }
- else { log.appendChild(el) }
- }
- <span style="white-space:pre"> </span>//初始化操作,并定义默认的消息处理逻辑
- bridge.init(function(message) {
- log('JS got a message', message)
- })
- <span style="white-space:pre"> </span>//注册一个名为testJavascriptHandler的处理器,并定义用于响应的处理逻辑
- bridge.registerHandler('testJavascriptHandler', function(data, response) {
- log('JS handler testJavascriptHandler was called', data)
- response.respondWith({ 'Javascript Says':'Right back atcha!' })
- })
- <span style="white-space:pre"> </span>//创建一个发送消息给native端的按钮
- var button = document.getElementById('buttons').appendChild(document.createElement('button'))
- button.innerHTML = 'Send message to ObjC'
- button.ontouchstart = function(e) {
- e.preventDefault()
- <span style="white-space:pre"> </span>//发送消息
- bridge.send('Hello from JS button')
- }
- document.body.appendChild(document.createElement('br'))
- <span style="white-space:pre"> </span>//创建一个用于调用native端处理器的按钮
- var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
- callbackButton.innerHTML = 'Fire testObjcCallback'
- callbackButton.ontouchstart = function(e) {
- e.preventDefault()
- log("Calling handler testObjcCallback")
- //调用名为testObjcCallback的native端处理器,并传递参数,同时设置回调处理逻辑
- bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
- log('Got response from testObjcCallback', response)
- })
- }
- }
Native端
- //实例化一个webview并加入到window中去
- UIWebView* webView = [[UIWebView alloc] initWithFrame:self.window.bounds];
- [self.window addSubview:webView];
- //启用日志记录
- [WebViewJavascriptBridge enableLogging];
- //实例化WebViewJavascriptBridge并定义native端的默认消息处理器
- _bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponse *response) {
- NSLog(@"ObjC received message from JS: %@", data);
- UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"ObjC got message from Javascript:" message:data delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
- [alert show];
- }];
- //注册一个供UI端调用的名为testObjcCallback的处理器,并定义用于响应的处理逻辑
- [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponse *response) {
- NSLog(@"testObjcCallback called: %@", data);
- [response respondWith:@"Response from testObjcCallback"];
- }];
- //发送一条消息给UI端并定义回调处理逻辑
- [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {
- if (error) { NSLog(@"Uh oh - I got an error: %@", error); }
- NSLog(@"objc got response! %@ %@", error, responseData);
- }];
- //调用一个在UI端定义的名为testJavascriptHandler的处理器,没有定义回调
- [_bridge callHandler:@"testJavascriptHandler" data:[NSDictionary dictionaryWithObject:@"before ready" forKey:@"foo"]];
- [self renderButtons:webView];
- [self loadExamplePage:webView];
- //单纯发送一条消息给UI端
- [_bridge send:@"A string sent from ObjC after Webview has loaded."];
项目运行截图:
Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备的更多相关文章
- 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案
简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发 ...
- Android开源代码解读のOnScrollListener实现ListView滚屏时不加载数据
使用ListView过程中,如果滚动加载数据的操作比较费时,很容易在滚屏时出现屏幕卡住的现象,一个解决的办法就是不要在滚动时加载数据,而是等到滚动停止后再进行数据的加载.这同样要实现OnScrollL ...
- Android开源代码解读-基于SackOfViewAdapter类实现类似状态通知栏的布局
一般来说,ListView的列表项都会采用相同的布局,只是填充的内容不同而已,这种情况下,Android提供了convertView帮我们缓存列表项,达到循环利用的目的,开发者也会使用ViewHold ...
- ios 开源代码
.开源代码 http://www.oschina.net/iOS/codingList/365/ios-button http://www.devdiv.com/iOS_iPhone-iOS6%E6% ...
- 有哪些值得一读的优秀开源 JS 代码
有哪些值得一读的优秀开源 JS 代码 采纳 首先,没有“必须”读的源代码(我发现我特喜欢说首先……),因为读源代码不是做功课,只有用到或是非常好奇才会去读,当成“日常”去做是没有意义的. 当然有些人会 ...
- flv.js怎么用?全面解读flv.js代码
flv.js项目的代码有一定规模,如果要研究的话,我建议从demux入手,理解了demux就掌握了媒体数据处理的关键步骤,前面的媒体数据下载和后面的媒体数据播放就变得容易理解了. 先普及点背景知识,为 ...
- 腾讯开源的 Paxos库 PhxPaxos 代码解读---Accept阶段(一)
腾讯开源的 Paxos库 PhxPaxos 代码解读---Accept阶段(一) 在看Accept阶段代码之前, 我们再回想一下 Basic Paxos算法; 1. Basic Paxos 算法是为 ...
- Golang优秀开源项目汇总, 10大流行Go语言开源项目, golang 开源项目全集(golang/go/wiki/Projects), GitHub上优秀的Go开源项目
Golang优秀开源项目汇总(持续更新...)我把这个汇总放在github上了, 后面更新也会在github上更新. https://github.com/hackstoic/golang-open- ...
- 最大开源代码sourceforge 简介 及视音频方面常用的开源代码
所有的音视频凯源代码在这里:http://sourceforge.net/directory/audio-video/os:windows/,你可以下载分析,视频不懂请发邮件给我,帮你分析. 0.视频 ...
随机推荐
- ajax同步刷新
\js\ajax.js //图片形式状态切换 function toggle(url,action,obj,str,id){//状态转换/obj-当前对象/str-传入类型字符串/id-传入ID $. ...
- javascript中错误使用var造成undefined
在javascript中依据变量作用的范围不同分为局部变量和全局变量,直接定义的变量是全局变量,全局变量能够被全部的脚本訪问:在函数中定义的变量是局部变量,局部变量仅仅在函数内有效. 假设全局变量和局 ...
- [转] openjdk和jdk的区别与联系
使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的openjdk,那么到底什么是openjdk,它与sun jdk有什么关系和区别呢? 历史上的 ...
- .net(全局文件,错误页,静态页,IIS配置及防黑)
添加全局应用程序类. <%@ Application Language="C#" %> <script runat="server"> ...
- UWP app HelloWorld 的创建
步骤 1:在 Visual Studio 中创建新项目 启动 Visual Studio 2015 RC.将出现 Visual Studio 2015 RC 起始页. (从现在开始,我们将 Visua ...
- 【开源java游戏框架libgdx专题】-14-系统控件-Skin类
Skin类主要用于存储用户界面的资源,该资源主要用于窗口部件.这些资源也包括纹理图片.位图画笔.颜色等内容.方便创建游戏组件,同时使用Skin也可以批量的粗略处理一些窗口部件. test.json { ...
- Oracle增加自增长列
-- 移除索引drop index TB_1;drop index TB_2 ;alter table TB drop constraint PK_TB; --允许列为空 alter table TB ...
- android launcher3 home页简易分析
最近在修改一个问题:就是修改home页下,用户手动拖出来的APP图片下面的字体显示不全,思路比较明确,需要尽量加大整个APP控件的高度,或者缩小图片和文字之间的间隔. 跟代码发现APP整个控件的lay ...
- Swift - 07 - 布尔类型
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- 4.HTTP入门
什么是http协议查看http协议的工具http协议内容Http请求请求行http协议版本请求资源请求方式GET方式提交POST方式提交请求头3.3 实体内容3.4 HttpServletReques ...