JS交互之JavaScriptCore（转述整理）

2017-06-12 本文已影响0人默芥子

截止目前，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"];

本文前人的基础上按自己的理解补充总结，不足之处，欢迎留言指正！—

JS交互之JavaScriptCore（转述整理）

猜你喜欢

热点阅读