截止目前移怯，iOS開發(fā)中經(jīng)常用到的js交互方式大概有三種硕勿，分別是JavaScriptCore替梨，攔截協(xié)議撬腾，以及基于攔截協(xié)議的第三方開源項目（例如WebViewJavaScriptBridge）;這篇文章首先介紹比較高效螟蝙，學(xué)習(xí)成本相對較低的JavaScriptCore方式。
- 基本概念
* JSContext：JSContext是代表JS的執(zhí)行環(huán)境民傻，通過-evaluateScript:方法就可以執(zhí)行一JS代碼
* JSValue：JSValue封裝了JS與ObjC中的對應(yīng)的類型胰默，以及調(diào)用JS的API等
* JSExport：JSExport是一個協(xié)議，遵守此協(xié)議漓踢，就可以定義我們自己的協(xié)議牵署，在協(xié)議中聲明的API都會在JS中暴露出來，才能調(diào)用
- 基本使用講解
我們通過舉個栗子??彭雾，來感受通過JavaScriptCore實現(xiàn)js和oc之間的交互碟刺。
首先，我們準(zhǔn)備一段html代碼薯酝，當(dāng)然要包含相應(yīng)的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)境，相當(dāng)于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);
};
//設(shè)置標(biāo)題
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
以上方式的使用小場景參考：
// 獲取當(dāng)前頁面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
// 獲取當(dāng)前頁面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
本文前人的基礎(chǔ)上按自己的理解補充總結(jié)，不足之處逸绎，歡迎留言指正惹恃！—
