截止目前，iOS开发中经常用到的js交互方式大概有三种，分别是JavaScriptCore，拦截协议，以及基于拦截协议的第三方开源项目（例如WebViewJavaScriptBridge）;这篇文章首先介绍比较高效，学习成本相对较低的JavaScriptCore方式。
- 基本概念
* JSContext：JSContext是代表JS的执行环境，通过-evaluateScript:方法就可以执行一JS代码
* JSValue：JSValue封装了JS与ObjC中的对应的类型，以及调用JS的API等
* JSExport：JSExport是一个协议，遵守此协议，就可以定义我们自己的协议，在协议中声明的API都会在JS中暴露出来，才能调用
- 基本使用讲解
我们通过举个栗子🌰，来感受通过JavaScriptCore实现js和oc之间的交互。
首先，我们准备一段html代码，当然要包含相应的js代码（对js不熟悉的也没关系，继续往下看）：
<div style=\"margin-top: 100px\">
<h1>Test how to use objective-c call js</h1>
<!--1.进入商品详情按钮-->
<input type=\"button\" value=\"商品详情\" onclick=\"OCModel.callGoodsDetail(param1)\">
<!--2.加入购物车按钮-->
<input type=\"button\" value=\"加入购物车\" onclick=\"callAddShoppingCart('C10640155508000B0601')\"></div><div>
<!--3.进入店铺主页按钮-->
<input type=\"button\" value=\"进入店铺主页 \" onclick=\"OCModel.callStore('S16092209')\">
<input type=\"button\" value=\"Call ObjC func with JSON and ObjC call js func to pass args.\" onclick=\"OCModel.jsCallObjcAndObjcCallJsWithDict({'name': 'testname', 'age': 10, 'height': 170})\"></div>
<div><span id=\"jsParamFuncSpan\" style=\"color: red; font-size: 50px;\"></span></div>
<script>
var callAddShoppingCart = function(goodsId) {
OCModel.addShoppingCart(goodsId);
}
</script>
这个html页面比较简单，只有几个按钮；
然后就是JSContext中注入模型，前面说过JSContext是js的执行环境，相当于oc和js之间的一个桥梁，可以用对象之间的映射关系来理解注入过程。
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//1.获取JSContext
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//2.注入名为OCModel的模型，并和自身关联
self.jsContext[@"OCModel"] = self;
//3.异常处理，一般加上比较好
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception){
//异常处理
context.exception = exception;
NSLog(@"%@",exception);
};
//设置标题
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.title = title == nil ? @"" : title;
}
再者，要实现真正的交互，到这一步还是不够的，最重要的一点是注入的模型还需要满足相关协议；前面说过，这个协议也同时要遵守JSExport协议（ 只有遵守了JSExport协议，js代码才能通过JSContext调用协议中的函数 ），栗子中协议如下：
/**
js和OC交互协议
*/
@protocol JavaScriptObjectiveCDelegate <JSExport>
//查看商品详情
- (void)callGoodsDetail:(NSString *)goodsId;
//添加购物车
- (void)addShoppingCart:(NSString *)goodsId;
//查看卖家店铺
- (void)callStore:(NSString *)storeId;
@end
最后，剩下的就是在注入模型中实现这个协议就行了。
- 进阶用法
前面陈述的是，oc通过注入模型，将协议方法暴露给js，js则通过JSContext调用oc方法实现交互；既然JSContext是js和oc交互的桥梁，那也能通过JSContext实现相反的过程（oc调用js）；接着上面的例子，通过回调来体会oc调用js。
1，首先我们得修改一下上面的html代码的javaScript部分：
......
<script>
var callAddShoppingCart = function(goodsId) {
OCModel.addShoppingCart(goodsId);
}
var funcCallback = function(){
alert('success');
}
</script>
......
2， 接下来就是用oc通过JSContext调用js，来实现回调了
#pragma mark - JavaScriptObjectiveCDelegate
- (void)addShoppingCart:(NSString *)goodsId
{
//添加完购物车，回调到html页面
JSValue *shareCallback = self.jsContext[@"funcCallback"];
[shareCallback callWithArguments:nil];
}
- 最后，介绍几个oc调用js的其他方式（通常用来执行小段js代码比较有用）:
// UIWebView的方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
// JavaScriptCore中JSContext的方法
- (JSValue *)evaluateScript:(NSString *)script;
- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL
以上方式的使用小场景参考：
// 获取当前页面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
// 获取当前页面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
本文前人的基础上按自己的理解补充总结，不足之处，欢迎留言指正！—
网友评论