来源:XcodeMen(王瑞华)

链接:http://t.cn/RVqQI5p

本文由我们团队的王瑞华童鞋撰写。


OS X Mavericks 和 iOS 7 引入了 JavaScriptCore 库,它把 WebKit 的 JavaScript 引擎用 Objective-C 封装,提供了简单,快速以及安全的方式接入世界上最流行的语言。在项目的实际开发中,由于需要与 H5 端有交互,所以采用了JavaScriptCore的交互方式,借此参与该项目的机会,对JavaScriptCore也有了一些简单的了解。

JSContext/JSValue

JSContext 是 JavaScript 的执行环境。所有 JavaScript 执行发生的背景,以及所有 JavaScript 值被绑在这一个上下文中。JSContext 类似于 UIWindow 的概念,所有的执行都在改环境中发生:

JSContext *context = [[JSContext alloc] init];

[context evaluateScript:@"var num = 5 + 5"];

[context evaluateScript:@"var names = ['Grace', 'Ada', 'Margaret']"];

[context evaluateScript:@"var triple = function(value) { return value * 3 }"];

JSValue *tripleNum = [context evaluateScript:@"triple(num)"];

NSLog(@"Tripled: %d", [tripleNum toInt32]);

// Tripled: 30

代码最后一行,每个 JSValue 起源于 JSContext 和 持有它的强引用。当一个 JSValue 实例方法创造一个新的 JSValue时,该新 JSValue 起源于同一个 JSContext。 JSValue 包装了每一个可能的 JavaScript 值:字符串和数字;数组、对象和方法;甚至错误和特殊的 JavaScript 值诸如 null 和 undefined。

OBJECTIVE-C TYPE JAVASCRIPT TYPE
nil undefined
NSNull null
NSString string
NSNumber number, boolean
NSDictionary Object object
NSArray Array object
NSDate Date object
NSBlock (1) Function object (1)
id (2) Wrapper object (2)
Class (3) Constructor object (3)

下标支持

作为下标传递的对象键将被转换为一个 JavaScript 值, 然后值转换为一个用作获取属性名称的字符串。

JSValue *names = context[@"names"];

JSValue *initialName = names[0];

NSLog(@"The first name: %@", [initialName toString]);

// The first name: Grace

该简易方法对应于以下两个方法:

- (JSValue *)objectForKeyedSubscript:(id)key;

- (JSValue *)objectAtIndexedSubscript:(NSUInteger)index;

调用方法

JSValue 包装了一个 JavaScript 函数,我们可以从 Objective-C 代码中使用 Foundation 类型作为参数来直接调用该函数。

JSValue *tripleFunction = context[@"triple"];

JSValue *result = [tripleFunction callWithArguments:@[@5] ];

NSLog(@"Five tripled: %d", [result toInt32]);

JavaScript 调用

上面说明的 OC 调用 JavaScript 的方法。那么接下来,说明 JavaScript 访问 OC 定义的对象和方法。我粗浅的认为就是在遵守该协议后,JavaScript 就可以调用 OC 实现的方法和属性等。

让 JSContext 访问我们的本地客户端代码的方式主要有两种:JSExport 协议和block。

JSExport 协议

JSExport 提供一个将 OC 中的类、实例方法和属性等导出为 JavaScript 函数的方法。

该协议只包含了一个方法:

JSExportAs(PropertyName, Selector)

即当导出到 JavaScript 时,重命名一个 selector。

这就需要熟悉它的做法,当带有一个或多个参数的 seletor 转变为 JavaScript 的属性名字时,在默认情况下一个属性名字将采用以下方式生成:

  • 所有的冒号将从 Selector 当中移除掉

  • 任何一个后边跟着冒号的小写字母开头的单词将被改换为大写。

在这种默认的转换方式下,一个 selector 如 doFoo:withBar: 将被导为doFooWithBar 。这种默认的改变有可能被 JSExportAs 宏 所改写,例如将 doFoo:withBar: 导出为 doFoo 。实际写法如下:

@protocol MyClassJavaScriptMethods

JSExportAs(doFoo,

- (void)doFoo:(id)foo withBar:(id)bar

);

@end

请注意 JSExport 宏只可能适用于带有一个或更多的参数的selector。

Blocks

当一个 Objective-C block 被赋给 JSContext 里的一个标识符,JavaScriptCore 会自动的把 block 封装在 JavaScript 函数里。如下:

JSContext *context = [[JSContext alloc] init];

context[@"simplifyString"] = ^(NSString *input) {

NSMutableString *mutableString = [input mutableCopy];

CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformToLatin, NO);

return mutableString;

};

NSLog(@"%@", [context evaluateScript:@"simplifyString('什么!')"]);

// shén me!

JSManagedValue 与内存管理

由于 block 可以保有变量引用,而且 JSContext 也强引用它所有的变量,为了避免强引用循环需要特别小心。OC 采用的是引用计数机制,而 JavaScript采用的垃圾回收机制。基于此项机制,便出现了 JSManagedValue ,它的主要用途是存储一个 JSValue,这样可以避免一个保留环的产生。

JavaScript 与 OC 交互的实际实例

在开发项目中,我们采用了 JavaScript 的方式完成了与 Native 的交互,使得比单纯的运用 UIWebview 的 stringByEvaluatingJavaScriptFromString: 更加高效。

如上所述,让 JSContext 访问我们的本地客户端代码的方式主要有两种:JSExport 协议和block。在我们项目中主要采用了 JSExport 的方式去实现。

1. JDRWebViewJSExportProtocol 和 JDRWebViewBaseHandler

我们的 JDRWebViewBaseHandler 类实现了 JDRWebViewJSExportProtocol 协议,该协议规定了那些方法或者属性可在 JavaScript 中使用。

@protocol JDRWebViewJSExportProtocol

JSExportAs

(closeForJS /**H5调用的 Webview 关闭方法的别名**/,

@optional

- (void)close:(id)JSON callback:(JSValue*) callback

);

JSExportAs

(goBackForJS /**H5调用的 Webview 关闭方法的别名**/,

@optional

- (void)goBack:(id)JSON callback:(JSValue*) callback

);

@end

@interface JDRWebViewBaseHandler : NSObject

@property (nonatomic , weak) JDRWebViewController *webViewController;

-(instancetype)initWithWebViewController:(JDRWebViewController *) webViewController NS_DESIGNATED_INITIALIZER;

@end

@implementation JDRWebViewBaseHandler

-(instancetype)initWithWebViewController:(JDRWebViewController *) webViewController{

if (self = [super init]) {

_webViewController = webViewController;

}

return self;

}

-(void)goBack:(id)JSON callback:(JSValue *)callback {

WEAK_SELF(weakSelf);

dispatch_async(dispatch_get_main_queue(), ^{

STRONG_SELF(strongSelf, weakSelf);

//判断 backPressCallBack 是否已经设置 ,如果已经设置监听方法 , 则执行 监听回退的 JS 方法

if ([strongSelf.webViewController.webView canGoBack]) {

[(UIWebView*)strongSelf.webViewController.webView stopLoading];

[(UIWebView*)strongSelf.webViewController.webView goBack];

}else {

[strongSelf close:nil callback:nil];

}

});

}

-(void)close:(id)JSON callback:(JSValue *)callback {

//目前关闭 WebView 方法不关注 callback 参数

WEAK_SELF(weakSelf);

dispatch_async(dispatch_get_main_queue(), ^{

STRONG_SELF(strongSelf, weakSelf);

if ([strongSelf.webViewController.navigationController             popViewControllerAnimated:YES] == nil) {

[strongSelf.webViewController                             dismissViewControllerAnimated:YES completion:nil];

}

});

}

@end

2. JSContext 配置

然后,我们可以用我们已经创建的 JDRWebViewBaseHandler 类,我们需要将其导出到 JavaScript 环境中。

self.JSHandler = [[JDRWebViewBaseHandler alloc] initWithWebViewController:self];

// 以 JSExport 协议关联 native 的方法 *platform* 是暂时定义的关键字

self.context[@"platform"] = self.JSHandler;

3.在 H5 页面中书写 JavaScript 函数调用 OC

close: function() {

platform.coselForJS();

}

结语

通常对于 JavaScript 与 OC 的交互,会采用 JavaScriptCore 包装一层协议方法,原始一点的方法则是通过截取 UIWebView 的协议实现。随着 iOS 8 之后 WKWebview的出现,又出现了一个新的方式,而对于 WKWebView 来说是不支持直接与 JavaScriptCore 交互的。通常采取 WKUserContentController 采用它的协议方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

如果使用 WKWebview 的话,对于 H5 中的 JavaScript 写法又需要改动为 window.webkit.messageHandlers..postMessage()。WKWebView 对于JavaScript 的调用只提供了一种方法:

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler

目前项目中考虑到 应用 WKWebview 与 UIWebview + JavaScriptCore 调用方式的差异,暂时放弃了对于 WKWebview的支持。

参考

    1. JavaScriptCore

      http://nshipster.cn/javascriptcore/

浅谈 JavaScriptCore的更多相关文章

  1. 浅谈 iOS 与 H5 的交互- JavaScriptCore 框架

    前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...

  2. 浅谈Hybrid技术的设计与实现第三弹——落地篇

    前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...

  3. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  4. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  5. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  6. 浅谈 LayoutInflater

    浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...

  7. 浅谈Java的throw与throws

    转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常 以前虽然知道一 ...

  8. 浅谈SQL注入风险 - 一个Login拿下Server

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  9. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

随机推荐

  1. Hashing图像检索源码及数据库总结

    下面的这份哈希算法小结来源于本周的周报,原本并没有打算要贴出来的,不过,考虑到这些资源属于关注利用哈希算法进行大规模图像搜索的各位看官应该很有用,所以好东西本小子就不私藏了.本资源汇总最主要的收录原则 ...

  2. OpenCV教程(42) xml/yaml文件的读写

    参考资料: http://docs.opencv.org/modules/core/doc/xml_yaml_persistence.html #include "opencv2/openc ...

  3. mini-parser

    https://leetcode.com/problems/mini-parser/ /** * // This is the interface that allows for creating n ...

  4. 第一章 Java常用的并发类

    注:本系列博客主要参考于<分布式Java应用:基础与实践>,林昊 著 1.常用的并发集合类 ConcurrentHashMap:线程安全的HashMap的实现 CopyOnWriteArr ...

  5. [leetcode]Sum Root to Leaf Numbers @ Python

    原题地址:http://oj.leetcode.com/problems/sum-root-to-leaf-numbers/ 题意: Given a binary tree containing di ...

  6. WebViewClient 简介 API 案例

    代码位置:https://github.com/baiqiantao/WebViewTest.git 设计思想理解 在WebView的设计中,不是什么事都要WebView类干的,有相当多的杂事是分给其 ...

  7. Decorator Wrapper 装饰模式 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. 【华为OJ平台练习题】求最大公共子串的个数和元素

    1.原题是求出最大公共子串的个数就可以 原理:利用二维矩阵排列的方式.将俩字符串进行比較 #include <iostream> #include <vector> using ...

  9. C++初始化列表和大括号中构造的差别

    C++的对象构造函数有两种初始化的方法: 1.初始化列表 2.大括号中面赋值 这两种推荐使用另外一种.原因在于使用初始化列表仅仅须要进行一次初始化.而使用大括号内赋值的话首先须要调用默认构造函数初始化 ...

  10. 手机WiFi万能钥匙查看破解的password和手机查询命令收集

    手机须要网络利用WiFi万能钥匙破解了WIFI的password.手机就能够上网了,但假设想在电脑上使用手机破解的Wifi热点上网就须要password,此时须要知道手机破解的password,WiF ...