Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备

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

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

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

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

[cpp] view plaincopyprint?

  1. //发送一条消息给UI端并定义回调处理逻辑
  2. [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {
  3. if (error) { NSLog(@"Uh oh - I got an error: %@", error); }
  4. NSLog(@"objc got response! %@ %@", error, responseData);
  5. }];

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

[javascript] view plaincopyprint?

  1. //调用名为testObjcCallback的native端处理器，并传递参数，同时设置回调处理逻辑
  2. bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {
  3. <span style="white-space:pre">  </span>log(‘Got response from testObjcCallback‘, response)
  4. })

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

[plain] view plaincopyprint?

  1. WebViewJavascriptBridge.h
  2. WebViewJavascriptBridge.m
  3. 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)，相应的代码如下：

[javascript] view plaincopyprint?

  1. /*
  2. *创建一个iFrame，设置隐藏并加入到DOM中
  3. */
  4. function _createQueueReadyIframe(doc) {
  5. messagingIframe = doc.createElement(‘iframe‘)
  6. messagingIframe.style.display = ‘none‘
  7. doc.documentElement.appendChild(messagingIframe)
  8. }

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

[plain] view plaincopyprint?

  1. window.WebViewJavascriptBridge = {
  2. init: init,
  3. send: send,
  4. registerHandler: registerHandler,
  5. callHandler: callHandler,
  6. _fetchQueue: _fetchQueue,
  7. _handleMessageFromObjC: _handleMessageFromObjC
  8. }

方法的实现：

[javascript] view plaincopyprint?

  1. <span style="white-space:pre">  </span>/*
  2. *初始化方法，注入默认的消息处理器
  3. *默认的消息处理器用于在处理来自objc的消息时，如果该消息没有设置处理器，则采用默认处理器处理
  4. */
  5. function init(messageHandler) {
  6. if (WebViewJavascriptBridge._messageHandler) { throw new Error(‘WebViewJavascriptBridge.init called twice‘) }
  7. WebViewJavascriptBridge._messageHandler = messageHandler
  8. var receivedMessages = receiveMessageQueue
  9. receiveMessageQueue = null
  10. //如果接收队列有消息，则处理
  11. for (var i=0; i<receivedMessages.length; i++) {
  12. _dispatchMessageFromObjC(receivedMessages[i])
  13. }
  14. }
  15. <span style="white-space:pre">  </span>/*
  16. *发送消息并设置回调
  17. */
  18. function send(data, responseCallback) {
  19. _doSend({ data:data }, responseCallback)
  20. }
  21. /*
  22. *注册消息处理器
  23. */
  24. function registerHandler(handlerName, handler) {
  25. messageHandlers[handlerName] = handler
  26. }
  27. /*
  28. *调用处理器并设置回调
  29. */
  30. function callHandler(handlerName, data, responseCallback) {
  31. _doSend({ data:data, handlerName:handlerName }, responseCallback)
  32. }

涉及到的两个内部方法：

[javascript] view plaincopyprint?

  1. <span style="white-space:pre">  </span>/*
  2. *内部方法:消息的发送
  3. */
  4. function _doSend(message, responseCallback) {
  5. //如果定义了回调
  6. if (responseCallback) {
  7. //为回调对象产生唯一标识
  8. var callbackId = ‘js_cb_‘+(uniqueId++)
  9. //并存储到一个集合对象里
  10. responseCallbacks[callbackId] = responseCallback
  11. //新增一个key-value对- ‘callbackId‘:callbackId
  12. message[‘callbackId‘] = callbackId
  13. }
  14. sendMessageQueue.push(JSON.stringify(message))
  15. messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ‘://‘ + QUEUE_HAS_MESSAGE
  16. }
  17. <span style="white-space:pre">  </span>/*
  18. *内部方法:处理来自objc的消息
  19. */
  20. function _dispatchMessageFromObjC(messageJSON) {
  21. setTimeout(function _timeoutDispatchMessageFromObjC() {
  22. var message = JSON.parse(messageJSON)
  23. var messageHandler
  24. if (message.responseId) {
  25. //取出回调函数对象并执行
  26. var responseCallback = responseCallbacks[message.responseId]
  27. responseCallback(message.error, message.responseData)
  28. delete responseCallbacks[message.responseId]
  29. } else {
  30. var response
  31. if (message.callbackId) {
  32. var callbackResponseId = message.callbackId
  33. response = {
  34. respondWith: function(responseData) {
  35. _doSend({ responseId:callbackResponseId, responseData:responseData })
  36. },
  37. respondWithError: function(error) {
  38. _doSend({ responseId:callbackResponseId, error:error })
  39. }
  40. }
  41. }
  42. var handler = WebViewJavascriptBridge._messageHandler
  43. //如果消息中已包含消息处理器，则使用该处理器；否则使用默认处理器
  44. if (message.handlerName) {
  45. handler = messageHandlers[message.handlerName]
  46. }
  47. try {
  48. handler(message.data, response)
  49. } catch(exception) {
  50. console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception)
  51. }
  52. }
  53. })
  54. }

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

[javascript] view plaincopyprint?

  1. <span style="white-space:pre">  </span>/*
  2. *获得队列，将队列中的每个元素用分隔符分隔之后连成一个字符串【native端调用】
  3. */
  4. function _fetchQueue() {
  5. var messageQueueString = sendMessageQueue.join(MESSAGE_SEPARATOR)
  6. sendMessageQueue = []
  7. return messageQueueString
  8. }
  9. <span style="white-space:pre">  </span>/*
  10. *处理来自ObjC的消息【native端调用】
  11. */
  12. function _handleMessageFromObjC(messageJSON) {
  13. //如果接收队列对象存在则入队该消息，否则直接处理
  14. if (receiveMessageQueue) {
  15. receiveMessageQueue.push(messageJSON)
  16. } else {
  17. _dispatchMessageFromObjC(messageJSON)
  18. }
  19. }

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

[javascript] view plaincopyprint?

  1. <span style="white-space:pre">  </span>var doc = document
  2. _createQueueReadyIframe(doc)
  3. //创建并实例化一个事件对象
  4. var readyEvent = doc.createEvent(‘Events‘)
  5. readyEvent.initEvent(‘WebViewJavascriptBridgeReady‘)
  6. readyEvent.bridge = WebViewJavascriptBridge
  7. //触发事件
  8. doc.dispatchEvent(readyEvent)

Native端实现

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

WebViewJavascriptBridge.h/.m

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

[cpp] view plaincopyprint?

  1. @interface WebViewJavascriptBridge : NSObject <UIWebViewDelegate>
  2. + (id)bridgeForWebView:(UIWebView*)webView handler:(WVJBHandler)handler;
  3. + (id)bridgeForWebView:(UIWebView*)webView webViewDelegate:(id <UIWebViewDelegate>)webViewDelegate handler:(WVJBHandler)handler;
  4. + (void)enableLogging;
  5. - (void)send:(id)message;
  6. - (void)send:(id)message responseCallback:(WVJBResponseCallback)responseCallback;
  7. - (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
  8. - (void)callHandler:(NSString*)handlerName;
  9. - (void)callHandler:(NSString*)handlerName data:(id)data;
  10. - (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;
  11. @end

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

shouldStartLoadWithRequest：

[cpp] view plaincopyprint?

  1. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  2. if (webView != _webView) { return YES; }
  3. NSURL *url = [request URL];
  4. if ([[url scheme] isEqualToString:CUSTOM_PROTOCOL_SCHEME]) {
  5. //队列中有数据
  6. if ([[url host] isEqualToString:QUEUE_HAS_MESSAGE]) {
  7. //刷出队列中数据
  8. [self _flushMessageQueue];
  9. } else {
  10. NSLog(@"WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@", CUSTOM_PROTOCOL_SCHEME, [url path]);
  11. }
  12. return NO;
  13. } else if (self.webViewDelegate) {
  14. return [self.webViewDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
  15. } else {
  16. return YES;
  17. }
  18. }

使用示例

UI端

[javascript] view plaincopyprint?

  1. <span style="white-space:pre">  </span>//给WebViewJavascriptBridgeReady事件注册一个Listener
  2. document.addEventListener(‘WebViewJavascriptBridgeReady‘, onBridgeReady, false)
  3. <span style="white-space:pre">  </span>//事件的响应处理
  4. function onBridgeReady(event) {
  5. var bridge = event.bridge
  6. var uniqueId = 1
  7. <span style="white-space:pre">  </span>//日志记录
  8. function log(message, data) {
  9. var log = document.getElementById(‘log‘)
  10. var el = document.createElement(‘div‘)
  11. el.className = ‘logLine‘
  12. el.innerHTML = uniqueId++ + ‘. ‘ + message + (data ? ‘: ‘ + JSON.stringify(data) : ‘‘)
  13. if (log.children.length) { log.insertBefore(el, log.children[0]) }
  14. else { log.appendChild(el) }
  15. }
  16. <span style="white-space:pre">  </span>//初始化操作，并定义默认的消息处理逻辑
  17. bridge.init(function(message) {
  18. log(‘JS got a message‘, message)
  19. })
  20. <span style="white-space:pre">  </span>//注册一个名为testJavascriptHandler的处理器，并定义用于响应的处理逻辑
  21. bridge.registerHandler(‘testJavascriptHandler‘, function(data, response) {
  22. log(‘JS handler testJavascriptHandler was called‘, data)
  23. response.respondWith({ ‘Javascript Says‘:‘Right back atcha!‘ })
  24. })
  25. <span style="white-space:pre">  </span>//创建一个发送消息给native端的按钮
  26. var button = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))
  27. button.innerHTML = ‘Send message to ObjC‘
  28. button.ontouchstart = function(e) {
  29. e.preventDefault()
  30. <span style="white-space:pre">      </span>//发送消息
  31. bridge.send(‘Hello from JS button‘)
  32. }
  33. document.body.appendChild(document.createElement(‘br‘))
  34. <span style="white-space:pre">  </span>//创建一个用于调用native端处理器的按钮
  35. var callbackButton = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))
  36. callbackButton.innerHTML = ‘Fire testObjcCallback‘
  37. callbackButton.ontouchstart = function(e) {
  38. e.preventDefault()
  39. log("Calling handler testObjcCallback")
  40. //调用名为testObjcCallback的native端处理器，并传递参数，同时设置回调处理逻辑
  41. bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {
  42. log(‘Got response from testObjcCallback‘, response)
  43. })
  44. }
  45. }

Native端

[cpp] view plaincopyprint?

  1. //实例化一个webview并加入到window中去
  2. UIWebView* webView = [[UIWebView alloc] initWithFrame:self.window.bounds];
  3. [self.window addSubview:webView];
  4. //启用日志记录
  5. [WebViewJavascriptBridge enableLogging];
  6. //实例化WebViewJavascriptBridge并定义native端的默认消息处理器
  7. _bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponse *response) {
  8. NSLog(@"ObjC received message from JS: %@", data);
  9. UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"ObjC got message from Javascript:" message:data delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
  10. [alert show];
  11. }];
  12. //注册一个供UI端调用的名为testObjcCallback的处理器，并定义用于响应的处理逻辑
  13. [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponse *response) {
  14. NSLog(@"testObjcCallback called: %@", data);
  15. [response respondWith:@"Response from testObjcCallback"];
  16. }];
  17. //发送一条消息给UI端并定义回调处理逻辑
  18. [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id error, id responseData) {
  19. if (error) { NSLog(@"Uh oh - I got an error: %@", error); }
  20. NSLog(@"objc got response! %@ %@", error, responseData);
  21. }];
  22. //调用一个在UI端定义的名为testJavascriptHandler的处理器，没有定义回调
  23. [_bridge callHandler:@"testJavascriptHandler" data:[NSDictionary dictionaryWithObject:@"before ready" forKey:@"foo"]];
  24. [self renderButtons:webView];
  25. [self loadExamplePage:webView];
  26. //单纯发送一条消息给UI端
  27. [_bridge send:@"A string sent from ObjC after Webview has loaded."];

项目运行截图：

时间： 2024-10-10 10:01:37

Hybrid----优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案-备的相关文章

优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案

简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送.接收.消息处理器的注册与调用以及设置消息处理的回调. 就像项目的名称一样,它是连接UIWebView和Javascript的bridge.在加入这个项目之后,他们之间的交互处理方式变得很友好. 在native code中跟UIWebView中的js交互的时候,像下面这样: [cpp] view

WebViewJavascriptBridge JS与iOS Native Code互调方法

本篇为大家介绍一个优秀的国人开发开源小项目:WebViewJavascriptBridge. 下载WebViewJavascriptBridge地址 它优雅地实现了在使用UIWebView时JS与ios 的Objective-C nativecode之间的互调,支持消息发送.接收.消息处理器的注册与调用以及设置消息处理的回调. 就像项目的名称一样,它是连接UIWebView和Javascript的bridge.在加入这个项目之后,他们之间的交互处理方式变得很友好. 在native code中跟U

Android开源代码解读のOnScrollListener实现ListView滚屏时不加载数据

使用ListView过程中,如果滚动加载数据的操作比较费时,很容易在滚屏时出现屏幕卡住的现象,一个解决的办法就是不要在滚动时加载数据,而是等到滚动停止后再进行数据的加载.这同样要实现OnScrollListener接口,关于该接口的简要描述见上一篇文章,这里直接进行代码的分析: package hust.iprai.asce1885; import android.app.ListActivity; import android.content.Context; import android.o

Android开源代码解读-基于SackOfViewAdapter类实现类似状态通知栏的布局

一般来说,ListView的列表项都会采用相同的布局,只是填充的内容不同而已,这种情况下,Android提供了convertView帮我们缓存列表项,达到循环利用的目的,开发者也会使用ViewHolder模式来对ListView进行优化.但有的情况下,ListView的列表项布局是不尽相同的,甚至差别很大,这时就不能简单的使用同一个布局资源文件来表示不同类型的列表项了,而是必须区别对待.典型的情况如Android状态通知栏,如下图所示. 360安全卫士.唱吧,闪推这三款应用在状态通知栏的布局差别

ios 开源代码

1.开源代码 http://www.oschina.net/iOS/codingList/365/ios-button http://www.devdiv.com/iOS_iPhone-iOS6%E6%96%B0%E7%89%B9%E5%BE%81%EF%BC%9A%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99%E5%92%8C%E7%A4%BA%E4%BE%8B%E6%B1%87%E6%80%BB-thread-127965-1-1.html http://code4

最大开源代码sourceforge 简介 及视音频方面常用的开源代码

所有的音视频凯源代码在这里:http://sourceforge.net/directory/audio-video/os:windows/,你可以下载分析,视频不懂请发邮件给我,帮你分析. 0.视频项目 0.1  VLC media player VLC 多媒体播放器(最初为VideoLAN Client,是VideoLAN计划的开放源代码多媒体播放器.)支援众多音讯与视讯解码器及档案格式,并支援DVD影音光碟,VCD影音光碟及各类串流协定.它也能作为单播 或 多播的串流服务器在IPv4 或I

github优秀开源项目大全-iOS

github优秀开源项目大全-iOS APR 25TH, 2014 前言 本文旨在搜集github上优秀的开源项目 本文搜集的项目都是用于iOS开发 本文会持续更新… 完整客户端 ioctocat github的iOS客户端,目前开源代码是V1版本,V2版本在appstore上可以下载 ChatSecure-iOS 使用XMPP协议的IM开源软件,很强大,在appstore上可以下载 SegmentFault SegmentFault的官方iOS客户端 OSChina-iOS 开源中国社区osc

开源代码网站（转）

http://search.csdn.net/CSDN搜索,CSDN还是有非常多的编程资源的,用它的搜索能搜出不少东西.代码类别也比较全面. http://snippets.org/简单实用的代码收集网站,强力推荐.比如你要找个DES加密,要找个数据压缩,找个INI文件操作的C代码等,均能手到擒来. http://www.codase.com/index.html它是一个代码搜索引擎,特别是搜索c/c++的开源代码,可以通过函数名.类名等搜索,很酷噢 http://sourceforge.net

android开源代码演示项目CodeBox

CodeBox是一个搜集优秀android开源代码并提供演示的安卓客户端,其演示功能是将开源项目作为插件加载到客户端中.插件的实现得益于 dynamic-load-apk-Apk动态加载框架https://github.com/singwhatiwanna/dynamic-load-apk . 目前已经完成的插件非常少,还需要大量的编译插件的工作. 希望能有更多的朋友参与进来.项目地址: https://github.com/jianghejie/CodeBox 如果你对该项目感兴趣,可以加入到