在前端快速發展的今天，JavaScript 在移動端的應用也越來越廣泛，作為 iOS 開發者來說，與 JavaScript 進行互動也是不大不小的一個方面，尤其是一些 web 內嵌頁，UIWebView 和 WKWebView 對 JavaScript 語言來說就像一個黑盒，出現問題使用 Objective-C 和 Swift 很難進行除錯。
我最近就遇到一個這方面的問題，在各種瀏覽器和 Android 上都沒問題，偏偏在 UIWebView 裡面有一個 Vue 的元件資料繫結異常，和前端同事搞了一上午，排查過程就不多說了，處理結果就是換了一種 Vue 資料繫結的寫法，這個 Bug 的形成原因和最終解決方案對我而言簡直就像玄學了，所以本文也不是要討論這個，當然有瞭解的朋友希望可以留言給我講解一下。
這個 Bug 是這樣的，一個頂部 Tabs，比如說 5 個，預設開啟第一個頁面，點選 Tabs 狀態重新整理實現切換。
第一個頁面有一個 Vue 元件，稱為 title，正確的值是 138XXX，初始頁面正常，切換頁面後第 2 -5 的 title 顯示的全部是 138XXX+正確的值。
然後切換回 1 也就是初始頁面，顯示的值成了 138XXX138XXX。
最終解決的辦法是將
<label>{{title}}<label>改為<label v-model = title><label>，嗯，程式碼不一定對，大概是這麼個意思。查了一下區別就是單向繫結和雙向繫結，但是
title這個值沒有被修改過。
在排查過程中，前端同事不能通過 Chrome 之類的工具除錯，我這邊也不能隨心所欲的拿到 JavaScript 的方法和變數幫他除錯，所以只能猜測原因一點一點改內嵌頁的程式碼，非常麻煩。所以我整理了一下 JavaScriptCore 使用方法，水了這篇文章。
經 @lsvih 同學指點，safari > develop > xxx iPhone > inspect 可以很方便的除錯 WebView，粗略看了一下，基本和 Chrome 差不多，對前端開發者非常友好，是我孤陋寡聞了，在此感謝！
當然，作為一個有追求的 iOSer，學習和 JavaScript 互動自然不會單單是為了成為前端控制檯，所以下面的內容還是有些用處的。
本文涉及講解的地方不多，註釋挺詳細的，直接上程式碼，適合作為手冊使用。
屬性的互動
// 建立 js 執行環境
let context = JSContext()!
// 捕獲執行異常
context.exceptionHandler = { (js, exception) in
print(exception!.toObject())
}
// 執行 js 程式碼
let value = context.evaluateScript("2 + 3")!
print(value.toObject()) // 5
// 定義 js 變數
context.evaluateScript("var array = [1, 2 ,3]")
// 獲取 js 變數
let array = context.objectForKeyedSubscript("array")!
print(array) // 1,2,3
// 判斷 jsvalue 型別
if array.isArray {
print("array 是陣列") // array 是陣列
}
else if array.isObject {
print("array 是物件")
}
else if array.isString {
print("array 是字串")
}
else if array.isUndefined {
print("array 未定義")
}
// 獲取變數屬性
let arrayLenght = array.objectForKeyedSubscript("length")!
print(arrayLenght.toInt32()) // 3
let arrayLenght2 = array.forProperty("length")
print(arrayLenght.toInt32()) // 3
// 獲取 js 陣列中的元素
// js 陣列存取越界時會自動擴容陣列長度，不會崩潰，但同時獲取的元素有可能是 undefined 或者是 null
print(array.atIndex(1)) // 2
print(array.objectAtIndexedSubscript(2)) // 3
print(array.objectAtIndexedSubscript(3)) // undefined
// 向 js 陣列插入元素
array.setObject("this", atIndexedSubscript: 4) // 1,2,3,,this
array.setValue("js", at: 6) // 1,2,3,,this,,js
array.setObject("is", atIndexedSubscript: 5) // 1,2,3,,this,is,js
// jsvalue 轉陣列
var arr = array.toArray()!
arr[3] = "swift"
// swift 陣列轉 jsvalue
let jsArr = JSValue(object: arr, in: context)!
// swift 陣列傳入 js
context.setObject(jsArr, forKeyedSubscript: "arr" as (NSCopying & NSObjectProtocol)!)
let element = context.evaluateScript("arr[2]")!
print(element) // 3
複製程式碼方法呼叫和傳參
// 建立 js 執行環境
let context = JSContext()!
/************************* swift 呼叫 js 方法 *****************************/
// 定義 js run 方法
let jsRunCode = """
var run = function (animal) {
var str = animal + '正在跑'
console.log(str)
return str
}
"""
// 在執行環境中插入 js 方法
context.evaluateScript(jsRunCode)
// 獲取 run 方法
let runFunc = context.objectForKeyedSubscript("run")!
// swift 中執行 run 方法
let result1 = runFunc.call(withArguments: ["豬"])!
print(result1) //豬正在跑
// js中執行 run 方法
let result2 = context.evaluateScript("run('牛')")!
print(result2) //牛正在跑
/************************* js 呼叫 swift block *****************************/
// 閉包建立 js 物件
let person = {(name: String, age: Int) -> JSValue in
let obj = JSValue(newObjectIn: context)!
obj.setObject(name, forKeyedSubscript: "name" as NSCopying & NSObjectProtocol)
obj.setValue(age, forProperty: "age")
return obj
}
// 寫入 js 物件
context.setObject(person("max", 18), forKeyedSubscript: "person" as NSCopying & NSObjectProtocol)
// 驗證寫入成功
let blockCode = """
var growUp = function(person) {
person.age += 1
return person
}
var type = typeof person
var result = growUp(person)
"""
context.evaluateScript(blockCode)
let type = context.evaluateScript("type")!
let result = context.evaluateScript("result")!
print(type) // object
print("name = \(result.objectForKeyedSubscript("name")) and age = \(result.forProperty("age"))" ) // name = Optional(max) and age = Optional(19)
/************************* js 呼叫 swift 方法 *****************************/
// 定義 swift 要響應的方法
func swiftResponser(animal: String) -> String {
return animal + "正在飛"
}
// 定義要執行的 js 方法，及被調起的 swift 方法
let jsFlyCode = """
function fly(animal){
return swiftResponser(animal)
}
"""
context.evaluateScript(jsFlyCode)
// 向 js 傳入 swift 方法
let block: @convention(block) (JSValue) -> String = { animal in
return swiftResponser(animal: animal.toString()!)
}
let funcName = "swiftResponser" as (NSCopying & NSObjectProtocol)!
context.setObject(unsafeBitCast(block, to: AnyObject.self), forKeyedSubscript: funcName)
// 在 js 中執行 swift 方法
let result3 = context.evaluateScript("fly('鳥')")!
print(result3) //鳥正在飛
複製程式碼類的互動
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 建立 js 執行環境
let context = JSContext()!
let language = Language(name: "Swift", age: 4)
context.setObject(language, forKeyedSubscript: "language" as NSCopying & NSObjectProtocol);
context.evaluateScript("language.name = 'JavaScript'")
context.evaluateScript("language.age = 25")
context.evaluateScript("language.descriptions()") // // name = JavaScript and age = 25
print(language.name)
print(language.age)
}
}
// 實現 JSExport 協議，務必用 @objc 修飾
// 協議中的屬性和方法才具有和 js 互動的能力
@objc protocol JSLanguageModelProtocol: JSExport {
var name: String { get set }
var age: Int { get set }
func descriptions()
}
// 宣告需要和 js 互動的類
// 必須繼承自 NSObject
class Language: NSObject, JSLanguageModelProtocol {
var name: String
var age: Int
init(name: String, age: Int){
self.name = name
self.age = age
}
func descriptions() {
print("name = \(self.name) and age = \(self.age)")
}
}
複製程式碼