截止目前，iOS開發(fā)中經(jīng)常用到的js交互方式大概有三種，分別是JavaScriptCore，攔截協(xié)議，以及基于攔截協(xié)議的第三方開源項目（例如WebViewJavaScriptBridge）;這篇文章首先介紹比較高效，學習成本相對較低的JavaScriptCore方式。

• 基本概念

* JSContext：JSContext是代表JS的執(zhí)行環(huán)境，通過-evaluateScript:方法就可以執(zhí)行一JS代碼

* JSValue：JSValue封裝了JS與ObjC中的對應的類型，以及調(diào)用JS的API等

* JSExport：JSExport是一個協(xié)議，遵守此協(xié)議，就可以定義我們自己的協(xié)議，在協(xié)議中聲明的API都會在JS中暴露出來，才能調(diào)用

• 基本使用講解

我們通過舉個栗子??，來感受通過JavaScriptCore實現(xiàn)js和oc之間的交互。

首先，我們準備一段html代碼，當然要包含相應的js代碼（對js不熟悉的也沒關(guān)系，繼續(xù)往下看）：

<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的執(zhí)行環(huán)境，相當于oc和js之間的一個橋梁，可以用對象之間的映射關(guān)系來理解注入過程。

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //1.獲取JSContext
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //2.注入名為OCModel的模型，并和自身關(guān)聯(lián)
    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;
}

再者，要實現(xiàn)真正的交互，到這一步還是不夠的，最重要的一點是注入的模型還需要滿足相關(guān)協(xié)議；前面說過，這個協(xié)議也同時要遵守JSExport協(xié)議（ 只有遵守了JSExport協(xié)議，js代碼才能通過JSContext調(diào)用協(xié)議中的函數(shù) ），栗子中協(xié)議如下：

/**
 js和OC交互協(xié)議
 */
@protocol JavaScriptObjectiveCDelegate <JSExport>

//查看商品詳情
- (void)callGoodsDetail:(NSString *)goodsId;
//添加購物車
- (void)addShoppingCart:(NSString *)goodsId;
//查看賣家店鋪
- (void)callStore:(NSString *)storeId;

@end

最后，剩下的就是在注入模型中實現(xiàn)這個協(xié)議就行了。

• 進階用法

前面陳述的是，oc通過注入模型，將協(xié)議方法暴露給js，js則通過JSContext調(diào)用oc方法實現(xiàn)交互；既然JSContext是js和oc交互的橋梁，那也能通過JSContext實現(xiàn)相反的過程（oc調(diào)用js）；接著上面的例子，通過回調(diào)來體會oc調(diào)用js。

1，首先我們得修改一下上面的html代碼的javaScript部分：

......
<script>
    var callAddShoppingCart = function(goodsId) {
        OCModel.addShoppingCart(goodsId);
    }
    var funcCallback = function(){
        alert('success');
    }
</script>
......

2， 接下來就是用oc通過JSContext調(diào)用js，來實現(xiàn)回調(diào)了

#pragma mark - JavaScriptObjectiveCDelegate

- (void)addShoppingCart:(NSString *)goodsId
{
//添加完購物車，回調(diào)到html頁面
    JSValue *shareCallback = self.jsContext[@"funcCallback"];
    [shareCallback callWithArguments:nil];
}

• 最后，介紹幾個oc調(diào)用js的其他方式（通常用來執(zhí)行小段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"];

本文前人的基礎上按自己的理解補充總結(jié)，不足之處，歡迎留言指正！—