近期由于工作和個(gè)人的閑置沒(méi)有及時(shí)的更新博客，為此對(duì)各位同學(xué)表示抱歉篷就，那么廢話不多說(shuō)歉闰，今天我們就聊聊那些在iOS中JS與原生OC互相調(diào)用,那么廢話不多說(shuō),直接上代碼～
本文摘抄自：https://hjgitbook.gitbooks.io/ios/content/04-technical-research/04-javascriptcore-note.html
- JavaScriptCore初探
- JavaScriptCore介紹
- 使用Objective-C和JavaScript結(jié)合開(kāi)發(fā)的好處?
- Objective-C調(diào)用JavaScript
- JavaScript調(diào)用Objective-C
- JavaScript運(yùn)行異常處理
- JSExport協(xié)議介紹
- 內(nèi)存管理陷阱
- 在block內(nèi)捕獲JSContext
- JSManagedValue的使用
JavaScriptCore初探
- 注：JavaScriptCore API也可以用Swift來(lái)調(diào)用装悲，本文用Objective-C來(lái)介紹椅您。
- 在iOS7之前荞估，原生應(yīng)用和Web應(yīng)用之間很難通信咳促。如果你想在iOS設(shè)備上渲染HTML或者運(yùn)行JavaScript，你不得不使用UIWebView勘伺。iOS7引入了JavaScriptCore跪腹，功能更強(qiáng)大，使用更簡(jiǎn)單飞醉。
JavaScriptCore介紹
- JavaScriptCore是封裝了JavaScript和Objective-C橋接的Objective-C API冲茸，只要用很少的代碼，就可以做到JavaScript調(diào)用Objective-C缅帘，或者Objective-C調(diào)用JavaScript轴术。
- 在之前的iOS版本，你只能通過(guò)向UIWebView發(fā)送stringByEvaluatingJavaScriptFromString:消息來(lái)執(zhí)行一段JavaScript腳本钦无。并且如果想用JavaScript調(diào)用Objective-C逗栽，必須打開(kāi)一個(gè)自定義的URL（例如：foo://），然后在UIWebView的delegate方法
webView:shouldStartLoadWithRequest:navigationType中進(jìn)行處理失暂。 - 然而現(xiàn)在可以利用JavaScriptCore的先進(jìn)功能了彼宠，它可以：
- 運(yùn)行JavaScript腳本而不需要依賴UIWebView
- 使用現(xiàn)代Objective-C的語(yǔ)法（例如Blocks和下標(biāo)）
- 在Objective-C和JavaScript之間無(wú)縫的傳遞值或者對(duì)象
- 創(chuàng)建混合對(duì)象（原生對(duì)象可以將JavaScript值或函數(shù)作為一個(gè)屬性）
使用Objective-C和JavaScript結(jié)合開(kāi)發(fā)的好處?
- 快速的開(kāi)發(fā)和制作原型：
如果某塊區(qū)域的業(yè)務(wù)需求變化的非常頻繁鳄虱，那么可以用JavaScript來(lái)開(kāi)發(fā)和制作原型，這比Objective-C效率更高凭峡。
團(tuán)隊(duì)職責(zé)劃分：
這部分參考原文吧
Since JavaScript is much easier to learn and use than Objective-C (especially if you develop a nice JavaScript sandbox), it can be handy to have one team of developers responsible for the Objective-C “engine/framework”, and another team of developers write the JavaScript that uses the “engine/framework”. Even non-developers can write JavaScript, so it’s great if you want to get designers or other folks on the team involved in certain areas of the app. - JavaScript是解釋型語(yǔ)言：
JavaScript是解釋運(yùn)行的拙已，你可以實(shí)時(shí)的修改JavaScript代碼并立即看到結(jié)果。
邏輯寫一次摧冀，多平臺(tái)運(yùn)行：
可以把邏輯用JavaScript實(shí)現(xiàn)倍踪，iOS端和Android端都可以調(diào)用 - JavaScriptCore概述
- JSValue: 代表一個(gè)JavaScript實(shí)體，一個(gè)JSValue可以表示很多JavaScript原始類型例如boolean, integers, doubles索昂，甚至包括對(duì)象和函數(shù)建车。
- JSManagedValue: 本質(zhì)上是一個(gè)JSValue，但是可以處理內(nèi)存管理中的一些特殊情形椒惨，它能幫助引用技術(shù)和垃圾回收這兩種內(nèi)存管理機(jī)制之間進(jìn)行正確的轉(zhuǎn)換癞志。
- JSContext: 代表JavaScript的運(yùn)行環(huán)境，你需要用JSContext來(lái)執(zhí)行JavaScript代碼框产。所有的JSValue都是捆綁在一個(gè)JSContext上的。
- JSExport: 這是一個(gè)協(xié)議错洁，可以用這個(gè)協(xié)議來(lái)將原生對(duì)象導(dǎo)出給JavaScript秉宿，這樣原生對(duì)象的屬性或方法就成為了JavaScript的屬性或方法，非常神奇屯碴。
- JSVirtualMachine: 代表一個(gè)對(duì)象空間描睦，擁有自己的堆結(jié)構(gòu)和垃圾回收機(jī)制。大部分情況下不需要和它直接交互导而，除非要處理一些特殊的多線程或者內(nèi)存管理問(wèn)題忱叭。
JSContext / JSValue
JSVirtualMachine為JavaScript的運(yùn)行提供了底層資源，JSContext為JavaScript提供運(yùn)行環(huán)境今艺，通過(guò)
- (JSValue *)evaluateScript:(NSString *)script;
方法就可以執(zhí)行一段JavaScript腳本韵丑，并且如果其中有方法、變量等信息都會(huì)被存儲(chǔ)在其中以便在需要的時(shí)候使用虚缎。 而JSContext的創(chuàng)建都是基于JSVirtualMachine：
- (id)initWithVirtualMachine:(JSVirtualMachine *)virtualMachine;
如果是使用- (id)init;進(jìn)行初始化撵彻，那么在其內(nèi)部會(huì)自動(dòng)創(chuàng)建一個(gè)新的JSVirtualMachine對(duì)象然后調(diào)用前邊的初始化方法。
創(chuàng)建一個(gè) JSContext 后实牡，可以很容易地運(yùn)行 JavaScript 代碼來(lái)創(chuàng)建變量陌僵，做計(jì)算，甚至定義方法：
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)"];
任何出自 JSContext 的值都被可以被包裹在一個(gè) JSValue 對(duì)象中创坞，JSValue 包裝了每一個(gè)可能的 JavaScript 值：字符串和數(shù)字碗短；數(shù)組、對(duì)象和方法题涨；甚至錯(cuò)誤和特殊的 JavaScript 值諸如 null 和 undefined偎谁。
可以對(duì)JSValue調(diào)用toString总滩、toBool、toDouble搭盾、toArray等等方法把它轉(zhuǎn)換成合適的Objective-C值或?qū)ο蟆?Objective-C調(diào)用JavaScript
例如有一個(gè)"Hello.js"文件內(nèi)容如下：
function printHello() {
}
在Objective-C中調(diào)用printHello方法：
NSString *scriptPath = [[NSBundle mainBundle] pathForResource:@"hello" ofType:@"js"];
NSString *scriptString = [NSString stringWithContentsOfFile:scriptPath encoding:NSUTF8StringEncoding error:nil];
JSContext *context = [[JSContext alloc] init];
[context evaluateScript:scriptString];
JSValue *function = self.context[@"printHello"];
[function callWithArguments:@[]];
分析以上代碼：
首先初始化了一個(gè)JSContext咳秉，并執(zhí)行JavaScript腳本，此時(shí)printHello函數(shù)并沒(méi)有被調(diào)用鸯隅，只是被讀取到了這個(gè)context中澜建。
然后從context中取出對(duì)printHello函數(shù)的引用，并保存到一個(gè)JSValue中蝌以。
注意這里炕舵，從JSContext中取出一個(gè)JavaScript實(shí)體（值、函數(shù)跟畅、對(duì)象）咽筋，和將一個(gè)實(shí)體保存到JSContext中，語(yǔ)法均與NSDictionary的取值存值類似徊件，非常簡(jiǎn)單奸攻。
最后如果JSValue是一個(gè)JavaScript函數(shù)，可以用callWithArguments來(lái)調(diào)用虱痕，參數(shù)是一個(gè)數(shù)組睹耐，如果沒(méi)有參數(shù)則傳入空數(shù)組@[]。
JavaScript調(diào)用Objective-C
還是上面的例子部翘，將"hello.js"的內(nèi)容改為：
function printHello() {
print("Hello, World!");
}
這里的print函數(shù)用Objective-C代碼來(lái)實(shí)現(xiàn)
NSString *scriptPath = [[NSBundle mainBundle] pathForResource:@"hello" ofType:@"js"];
NSString *scriptString = [NSString stringWithContentsOfFile:scriptPath encoding:NSUTF8StringEncoding error:nil];
JSContext *context = [[JSContext alloc] init];
[context evaluateScript:scriptString];
self.context[@"print"] = ^(NSString *text) {
NSLog(@"%@", text");
};
JSValue *function = self.context[@"printHello"];
[function callWithArguments:@[]];
這里將一個(gè)Block以"print"為名傳遞給JavaScript上下文硝训，JavaScript中調(diào)用print函數(shù)就可以執(zhí)行這個(gè)Objective-C Block。
注意這里JavaScript中的字符串可以無(wú)縫的橋接為NSString新思，實(shí)參"Hello, World!"被傳遞給了NSString類型的text形參窖梁。
JavaScript運(yùn)行異常處理
當(dāng)JavaScript運(yùn)行時(shí)出現(xiàn)異常，會(huì)回調(diào)JSContext的exceptionHandler中設(shè)置的Block
context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
NSLog(@"JS Error: %@", exception);
};
[context evaluateScript:@"function multiply(value1, value2) { return value1 * value2 "];
// 此時(shí)會(huì)打印Log "JS Error: SyntaxError: Unexpected end of script"
JSExport協(xié)議介紹
- JSExport是一個(gè)協(xié)議夹囚，可以讓原生類的屬性或方法稱為JavaScript的屬性或方法纵刘。
看下面的例子：
@protocol ItemExport <JSExport>
@property (strong, nonatomic) NSString *name;
@property (strong, nonatomic) NSString *description;
@end
@interface Item : NSObject <ItemExport>
@property (strong, nonatomic) NSString *name;
@property (strong, nonatomic) NSString *description;
@end
注意Item類不去直接符合JSExport，而是符合一個(gè)自己的協(xié)議荸哟，這個(gè)協(xié)議去繼承JSExport協(xié)議彰导。
例如有如下JavaScript代碼
function Item(name, description) {
this.name = name;
this.description = description;
}
var items = [];
function addItem(item) {
items.push(item);
}
可以在Objective-C中把Item對(duì)象傳遞給addItem函數(shù)
Item *item = [[Item alloc] init];
item.name = @"itemName";
item.description = @"itemDescription";
JSValue *function = context[@"addItem"];
[function callWithArguments:@[item]];
或者把Item類導(dǎo)出到JavaScript環(huán)境，等待稍后使用
[self.context setObject:Item.self forKeyedSubscript:@"Item"];
內(nèi)存管理陷阱
- Objective-C的內(nèi)存管理機(jī)制是引用計(jì)數(shù)敲茄，JavaScript的內(nèi)存管理機(jī)制是垃圾回收位谋。在大部分情況下，JavaScriptCore能做到在這兩種內(nèi)存管理機(jī)制之間無(wú)縫無(wú)錯(cuò)轉(zhuǎn)換堰燎，但也有少數(shù)情況需要特別注意掏父。
在block內(nèi)捕獲JSContext
- Block會(huì)為默認(rèn)為所有被它捕獲的對(duì)象創(chuàng)建一個(gè)強(qiáng)引用。JSContext為它管理的所有JSValue也都擁有一個(gè)強(qiáng)引用秆剪。并且赊淑，JSValue會(huì)為它保存的值和它所在的Context都維持一個(gè)強(qiáng)引用爵政。這樣JSContext和JSValue看上去是循環(huán)引用的，然而并不會(huì)陶缺，垃圾回收機(jī)制會(huì)打破這個(gè)循環(huán)引用钾挟。
- 看下面的例子：
self.context[@"getVersion"] = ^{
NSString *versionString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];
versionString = [@"version " stringByAppendingString:versionString];
JSContext *context = [JSContext currentContext]; // 這里不要用self.context
JSValue *version = [JSValue valueWithObject:versionString inContext:context];
return version;
};
使用[JSContext currentContext]而不是self.context來(lái)在block中使用JSContext，來(lái)防止循環(huán)引用饱岸。
JSManagedValue的使用
- 當(dāng)把一個(gè)JavaScript值保存到一個(gè)本地實(shí)例變量上時(shí)掺出，需要尤其注意內(nèi)存管理陷阱。 用實(shí)例變量保存一個(gè)JSValue非常容易引起循環(huán)引用苫费。
- 看以下下例子汤锨，自定義一個(gè)UIAlertView，當(dāng)點(diǎn)擊按鈕時(shí)調(diào)用一個(gè)JavaScript函數(shù)：
#import <UIKit/UIKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface MyAlertView : UIAlertView
- (id)initWithTitle:(NSString *)title
message:(NSString *)message
success:(JSValue *)successHandler
failure:(JSValue *)failureHandler
context:(JSContext *)context;
@end
按照一般自定義AlertView的實(shí)現(xiàn)方法百框，MyAlertView需要持有successHandler闲礼，failureHandler這兩個(gè)JSValue對(duì)象向JavaScript環(huán)境注入一個(gè)function
self.context[@"presentNativeAlert"] = ^(NSString *title,
NSString *message,
JSValue *success,
JSValue *failure) {
JSContext *context = [JSContext currentContext];
MyAlertView *alertView = [[MyAlertView alloc] initWithTitle:title
message:message
success:success
failure:failure
context:context];
[alertView show];
};
- 因?yàn)镴avaScript環(huán)境中都是“強(qiáng)引用”（相對(duì)Objective-C的概念來(lái)說(shuō)）的，這時(shí)JSContext強(qiáng)引用了一個(gè)presentNativeAlert函數(shù)铐维，這個(gè)函數(shù)中又強(qiáng)引用了MyAlertView 等于說(shuō)JSContext強(qiáng)引用了MyAlertView柬泽，而MyAlertView為了持有兩個(gè)回調(diào)強(qiáng)引用了successHandler和failureHandler這兩個(gè)JSValue，這樣MyAlertView和JavaScript環(huán)境互相引用了嫁蛇。
- 所以蘋果提供了一個(gè)JSMagagedValue類來(lái)解決這個(gè)問(wèn)題聂抢。
- 看MyAlertView.m的正確實(shí)現(xiàn)：
#import "MyAlertView.h"
@interface XorkAlertView() <UIAlertViewDelegate>
@property (strong, nonatomic) JSContext *ctxt;
@property (strong, nonatomic) JSMagagedValue *successHandler;
@property (strong, nonatomic) JSMagagedValue *failureHandler;
@end
@implementation MyAlertView
- (id)initWithTitle:(NSString *)title
message:(NSString *)message
success:(JSValue *)successHandler
failure:(JSValue *)failureHandler
context:(JSContext *)context {
self = [super initWithTitle:title
message:message
delegate:self
cancelButtonTitle:@"No"
otherButtonTitles:@"Yes", nil];
if (self) {
_ctxt = context;
_successHandler = [JSManagedValue managedValueWithValue:successHandler];
// A JSManagedValue by itself is a weak reference. You convert it into a conditionally retained
// reference, by inserting it to the JSVirtualMachine using addManagedReference:withOwner:
[context.virtualMachine addManagedReference:_successHandler withOwner:self];
_failureHandler = [JSManagedValue managedValueWithValue:failureHandler];
[context.virtualMachine addManagedReference:_failureHandler withOwner:self];
}
return self;
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
if (buttonIndex == self.cancelButtonIndex) {
JSValue *function = [self.failureHandler value];
[function callWithArguments:@[]];
} else {
JSValue *function = [self.successHandler value];
[function callWithArguments:@[]];
}
[self.ctxt.virtualMachine removeManagedReference:_failureHandler withOwner:self];
[self.ctxt.virtualMachine removeManagedReference:_successHandler withOwner:self];
}
@end
- 分析上面例子，從外部傳入的JSValue對(duì)象在類內(nèi)部使用JSManagedValue來(lái)保存棠众。
- JSManagedValue本身是一個(gè)弱引用對(duì)象，需要調(diào)用JSVirtualMachine的addManagedReference:withOwner:把它添加到JSVirtualMachine對(duì)象中有决，確保使用過(guò)程中JSValue不會(huì)被釋放
- 當(dāng)用戶點(diǎn)擊AlertView上的按鈕時(shí)闸拿，根據(jù)用戶點(diǎn)擊哪一個(gè)按鈕，來(lái)執(zhí)行對(duì)應(yīng)的處理函數(shù)书幕，這時(shí)AlertView也隨即被銷毀新荤。 這時(shí)需要手動(dòng)調(diào)用removeManagedReference:withOwner:來(lái)移除JSManagedValue。
