代碼下載地址
JavaScriptCore介紹
JavaScriptCore框架其實只是基于webkit中以C/C++實現(xiàn)的JavaScriptCore的一個包裝瘤旨，該框架讓Objective-C和JavaScript代碼直接的交互變得更加的簡單方便洪灯，主要由下面幾個類組成啄巧。
1.JSContext
JS執(zhí)行的環(huán)境整以，同時也通過JSVirtualMachine管理著所有對象的生命周期缕陕，每個JSValue都和JSContext相關(guān)聯(lián)并且強引用context本鸣。可以通過[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]來從webview上獲取相應(yīng)的JSContext壮莹。
2.JSValue
JS對象在JSVirtualMachine中的一個強引用翅帜，其實就是Hybird對象。我們對JS的操作都是通過它命满。并且每個JSValue都是強引用一個context涝滴。同時，OC和JS對象之間的轉(zhuǎn)換也是通過它。
3.JSManagedValue
JS和OC對象的內(nèi)存管理輔助對象歼疮。由于JS內(nèi)存管理是垃圾回收杂抽，并且JS中的對象都是強引用，而OC是引用計數(shù)韩脏。如果雙方相互引用缩麸，勢必會造成循環(huán)引用，而導(dǎo)致內(nèi)存泄露赡矢。我們可以用JSManagedValue保存JSValue來避免杭朱。
4.JSVirtualMachine
JS運行的虛擬機，有獨立的堆空間和垃圾回收機制吹散。
5.JSExport
一個協(xié)議弧械，如果JS對象想直接調(diào)用OC對象里面的方法和屬性，那么這個OC對象只要實現(xiàn)這個JSExport協(xié)議就可以了送浊。
OC調(diào)用JS
1.加載JS代碼
- (JSValue *)evaluateScript:(NSString *)script;
2.調(diào)用JS方法
JSValue *callBack = self.context[@"callback"];
[callBack callWithArguments:@[@"大家好梦谜！"]];
JS調(diào)用OC
1.通過block實現(xiàn)丘跌，然后在JS中直接調(diào)用方法即可袭景。需要注意的是在Block內(nèi)都不要直接使用其外部定義的JSContext對象或者JSValue，應(yīng)該將其當做參數(shù)傳入到Block中闭树，或者通過JSContext的類方法+ (JSContext *)currentContext;來獲得耸棒。否則會造成循環(huán)引用使得內(nèi)存無法被正確釋放。
self.context[@"showMessage"] = ^(NSString *message){
UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
[alertCtr addAction:cancel];
//注意：方法是在子線程中執(zhí)行的报辱，需要跟新UI的話与殃，需要切入主線程。
dispatch_async(dispatch_get_main_queue(), ^{
[weakSealf presentViewController:alertCtr animated:YES completion:nil];
});
};
2.通過JSExport來實現(xiàn)碍现，JS需要通過OC中注入的對象來調(diào)用對應(yīng)的方法幅疼，方法需要在協(xié)議中申明，并且在注入的對象中實現(xiàn)昼接。
- 申明協(xié)議及協(xié)議方法
@protocol JSIneract <JSExport>
- (void)showMessage:(NSString *)message;
@end
- 準備需注入的OC對象爽篷，遵守協(xié)議，并實現(xiàn)協(xié)議方法
- (void)showMessage:(NSString *)message
{
NSLog(@"current:%@",[NSThread currentThread]);// 子線程
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"JS 調(diào)用了 OC" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleCancel handler:nil];
[alert addAction:cancel];
[self presentViewController:alert animated:YES completion:nil];
});
}
- 在webView加載完成的代理方法- (void)webViewDidFinishLoad:(UIWebView *)webView中注入實現(xiàn)協(xié)議的OC對象
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//從webview上獲取相應(yīng)的JSContext慢睡。
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//注入JS需要的“OC”對象
self.context[@"OC"] = self;
}
實例演示逐工，效果如下
1.編寫一段如下的代碼到html文件中，在從把文件加載到webView上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
function callback(something){
var target = document.getElementById('result');
target.innerHTML = something;
}
</script>
<br/>
<br/>
<div>
<input type="button" value="用block實現(xiàn)JS調(diào)用一個參數(shù)或無參數(shù)OC方法" onclick="showMessage('我調(diào)用了showMessage方法')">
</div>
<div>
<input type="button" value="用block實現(xiàn)JS調(diào)用多參數(shù)的OC方法" onclick="showMessageWithTitleAndMessage('這是我傳的標題哦漂辐！','我調(diào)用了showTitleAndMessage方法')">
</div>
<div>
<input type="button" value="用block實現(xiàn)JS調(diào)用OC方法并回調(diào)" onclick="doSomethingThenCallBack()">
</div>
<br/>
<br/>
<div>
<input type="button" value="用代理實現(xiàn)JS調(diào)用一個參數(shù)或無參數(shù)OC方法" onclick="OC.showMessage('are you Objective-C?')">
</div>
<div>
<input type="button" value="用代理實現(xiàn)JS調(diào)用多參數(shù)的OC方法" onclick="OC.showMessageWithTitleAndMessage('hellow','world')">
</div>
<div>
<input type="button" value="用代理實現(xiàn)JS調(diào)用OC方法并回調(diào)" onclick="OC.doSomethingThenCallBack()">
</div>
<br/>
<br/>
<div>
<h4>回調(diào)結(jié)果:</h4>
<span id="result"></span>
</div>
</body>
</html>
說明：上面代碼申明了一個callback的JS方法供OC調(diào)用泪喊，將參數(shù)展示在一個span標簽當中。之后聲明了六個button來調(diào)用不同的iOS的方法髓涯，第一個是一個參數(shù)或無參數(shù)的方法showMessage ,第二個是多參數(shù)的方法showMessageWithTitleAndMessage 袒啼。
之所以要區(qū)分單個參數(shù)和多參數(shù)的情況，是因為當多個參數(shù)時，如iOS端的方法聲明是- (void)showMessageWithTitle:(NSString *)title andMessage:(NSString *)message; 在JS調(diào)用時應(yīng)該將方法名連起來蚓再，調(diào)整大小寫灶泵，showMessageWithTitleAndMessage(title, message) 。這六個按鈕的點擊方法前三個是直接調(diào)用对途，后三個是通過一個名為OC的對象來調(diào)用赦邻，這個對象需要在iOS中注入。
2.實現(xiàn)OC加載JS代碼和OC調(diào)用JS方法這兩個方法
- (void)loadJSCode:(UIButton *)sender
{
[self.context evaluateScript:@"alert('你好实檀！');"];
}
- (void)jsFunction:(UIButton *)sender
{
JSValue *callBack = self.context[@"callback"];
[callBack callWithArguments:@[@"大家好惶洲！"]];
}
3.通過block實現(xiàn)JS調(diào)用OC的這幾個方法
__weak typeof(self) weakSealf = self;
self.context[@"showMessage"] = ^(NSString *message){
UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
[alertCtr addAction:cancel];
//注意：方法是在子線程中執(zhí)行的，需要跟新UI的話膳犹，需要切入主線程恬吕。
dispatch_async(dispatch_get_main_queue(), ^{
[weakSealf presentViewController:alertCtr animated:YES completion:nil];
});
};
self.context[@"showMessageWithTitleAndMessage"] = ^(NSString *title, NSString *message){
UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:title message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
[alertCtr addAction:cancel];
dispatch_async(dispatch_get_main_queue(), ^{
[weakSealf presentViewController:alertCtr animated:YES completion:nil];
});
};
self.context[@"doSomethingThenCallBack"] = ^{
UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"提示" message:nil preferredStyle:UIAlertControllerStyleAlert];
[alertCtr addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.placeholder = @"請輸入傳入的數(shù)據(jù)!";
[textField addTarget:weakSealf action:@selector(textFieldChange:) forControlEvents:UIControlEventEditingChanged];
}];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
[alertCtr addAction:cancel];
UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
UITextField *textField = [alertCtr.textFields firstObject];
JSValue *callback = weakSealf.context[@"callback"];
[callback callWithArguments:@[textField.text]];
}];
[alertCtr addAction:ok];
ok.enabled = NO;
dispatch_async(dispatch_get_main_queue(), ^{
[weakSealf presentViewController:alertCtr animated:YES completion:nil];
});
};
4.通過通過JSExport來實現(xiàn)JS調(diào)用OC的這幾個方法，方法同上面所說的须床，在這里就不贅述了铐料。
