Swift和Javascript的神奇魔法

记录Swift和Javascript如何进行交互

前言

今天在网上看到了一篇介绍Swift和Javascript交互的文章，感觉作者写的很好，因此把作者文章中的主要知识点进行一个总结。

对于我个人而言，在项目中使用Javascript的原因有两个：

某些任务，很可能已经有现成的Javascript库存在了，使用起来比原生实现更简单
在架构上的考虑

可以再这里下载演示demo

demo中我们主要演示了3大块Swift和Javascript交互的神奇魔法：

在Swift中获取和使用Javascript的属性和函数，处理Javascript的异常，在Javascript中获取和使用Swift的属性和函数
使用Javascript第三方库Snowdown把Markdown文本转换成HTML文本
使用Javascript解析复杂的数据，然后用Swift展示

效果图：

Model,Initial OS,Latest OS,Image URL

iPhone (1st Generation),iPhone OS 1.0,iPhone OS 3.1.3,https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/IPhone_2G_PSD_Mock.png/81px-IPhone_2G_PSD_Mock.png

iPhone 3G,iPhone OS 2.0,iOS 4.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/IPhone_PSD_White_3G.png/81px-IPhone_PSD_White_3G.png

iPhone 3GS,iPhone OS 3.0,iOS 6.1.6,https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/IPhone_PSD_White_3G.png/81px-IPhone_PSD_White_3G.png

iPhone 4,iOS 4.0,iOS 7.1.2,https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/IPhone_4_Mock_No_Shadow_PSD.png/81px-IPhone_4_Mock_No_Shadow_PSD.png

iPhone 4S,iOS 5.0,iOS 9.3.5,https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/IPhone_4S_No_shadow.png/99px-IPhone_4S_No_shadow.png

iPhone 5,iOS 6.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/IPhone_5.png/99px-IPhone_5.png

iPhone 5C,iOS 7.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/IPhone_5C_%28blue%29.svg/88px-IPhone_5C_%28blue%29.svg.png

iPhone 5S,iOS 7.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/IPhone_5s.png/88px-IPhone_5s.png

iPhone 6,iOS 8.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/IPhone6_silver_frontface.png/100px-IPhone6_silver_frontface.png

iPhone 6 Plus,iOS 8.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/IPhone_6_Plus_Space_Gray.svg/120px-IPhone_6_Plus_Space_Gray.svg.png

iPhone 6S,iOS 9.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/IPhone_6S_Rose_Gold.png/105px-IPhone_6S_Rose_Gold.png

iPhone 6S Plus,iOS 9.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/IPhone_6S_Rose_Gold.png/125px-IPhone_6S_Rose_Gold.png

iPhone SE,iOS 9.3,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/IPhone_SE_%28rose_gold%29.png/95px-IPhone_SE_%28rose_gold%29.png

iPhone 7,iOS 10.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/IPhone_7_Jet_Black.svg/105px-IPhone_7_Jet_Black.svg.png

iPhone 7 Plus,iOS 10.0,iOS 10.2.1,https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/IPhone_7_Plus_Jet_Black.svg/125px-IPhone_7_Plus_Jet_Black.svg.png

把上边的数据解析后，展示为：

Swift，Javascript的基本交互

JavaScriptCore 中最主要的角色就是 JSContext 类。一个 JSContext 对象是位于 JavaScript 环境和本地 Javascript 脚本之间的桥梁。

因此需要初始化一个JSContext对象：

var jsContext: JSContext!

我不会像原文那样一步一步的演示功能，我只是记录下使用JSContext的核心思想和用法。

我们看看JSContext的初始化方法：

func initializeJS() {

        self.jsContext = JSContext()

        /// Catch exception

        self.jsContext.exceptionHandler = { context, exception in

            if let ex = exception {

                print("JS exception: " + ex.toString())

            }

        }

        let jsPath = Bundle.main.path(forResource: "jssource", ofType: "js")

        if let path = jsPath {

            do {

                let jsSourceContents = try String(contentsOfFile: path)

                jsContext.evaluateScript(jsSourceContents)

            } catch let ex {

                print(ex.localizedDescription)

            }

        }

        // Configurate log

        let consoleLogObject = unsafeBitCast(self.consoleLog, to: AnyObject.self)

        jsContext.setObject(consoleLogObject, forKeyedSubscript: "consoleLog" as (NSCopying & NSObjectProtocol))

        jsContext.evaluateScript("consoleLog")

    }

上边的代码中做了下边这几件事：

使用JSContext()初始化JSContext对象
JSContext中有一个属性exceptionHandler用来监听Javascript的错误。这个属性很有用，我们使用这个属性来发现Javascript的错误
JSContext的evaluateScript方法可以把数据调入到JavaScriptCore的运行时环境中。该方法需要传递的参数是Javascript代码。返回值为Javascript代码中的最后一个JSValue。
let consoleLogObject = unsafeBitCast(self.consoleLog, to: AnyObject.self) unsafeBitCast用作强制类型转换，使用的时候需要明确的知道要转换的类型
open func setObject(_ object: Any!, forKeyedSubscript key: (NSCopying & NSObjectProtocol)!) 通过这种方式为Javascript添加属性或者函数

那么，接下来，我们看一段Swift中获取Javascript属性的代码：

func helloWorld() {

        if let valiableHW = jsContext.objectForKeyedSubscript("helloWorld") {

            print(valiableHW.toString())

        }

    }

由上边的代码可以看出，通过函数open func objectForKeyedSubscript(_ key: Any!) -> JSValue!可以获取JSValue，然后使用toString()获取字符串。

除了获取属性外，下边的代码演示了如何使用Javascript中的函数：

 func jsDemo1() {

        let firstName = "zhang"

        let lastName = "san"

        if let funcFullName = jsContext.objectForKeyedSubscript("getFullName") {

            if let fullName = funcFullName.call(withArguments: [firstName, lastName]) {

                print(fullName)

            }

        }

    }

通过函数open func objectForKeyedSubscript(_ key: Any!) -> JSValue!可以获取JSValue,然后调用call函数，并传递参数过去就实现了这个功能。

我们在看看js代码中是如何使用Swift属性和函数的：

function generateLuckyNumbers() {

    consoleLog("打印东东啊");

    var luckyNumbers = [];

    while (luckyNumbers.length != 6) {

        var randomNumber = Math.floor((Math.random() * 50) + 1);

        if (!luckyNumbers.includes(randomNumber)) {

            luckyNumbers.push(randomNumber);

        }

    }

    handleLuckyNumbers(luckyNumbers);

}

上边代码中的handleLuckyNumbers函数就是Swift中的函数，大家可以去demo中查看。

Markdown文本转换成HTML文本

这个文本转换最核心的内容就是解析Markdown的语法，然后输出HTML文本，如果我们自己手写转换代码，那就太麻烦了。Javascript已经有一个很强大的第三方库Snowdown。

在JSContext的初始化方法中添加下边的代码：

// Fetch and evaluate the Snowdown script.

let snowdownScript = try String(contentsOf: URL(string: "https://cdn.rawgit.com/showdownjs/showdown/1.6.3/dist/showdown.min.js")!)

self.jsContext.evaluateScript(snowdownScript)

上边的代码中把转换脚本调入Javascript运行时，然后我们再通过下边的代码调用Javascript的代码：

func convertMarkdownToHTML() {

        if let funcConvertMarkdownToHTML = jsContext.objectForKeyedSubscript("convertMarkdownToHTML") {

            funcConvertMarkdownToHTML.call(withArguments: [self.tvEditor.text])

        }

    }

Javascript的代码如下：

function convertMarkdownToHTML(source) {

    var converter = new showdown.Converter();

    var htmlResult = converter.makeHtml(source);

    consoleLog(htmlResult);

}

核心思想就是接受Javascript转换后的结果。

自定义类和JavaScript

前面，我们学习了如何暴露 Swift 程序代码给 JS，但 JavaScriptCore 的功能并不仅限于此。它还提供一种暴露自定义类的机制，并直接在 JS 中使用这些类的属性和函式。这就是 JSExport，它是一个协议，通过它你能够以更强大的方式来沟通 Swift 和 JS。

我们看看自定义类的代码：

import UIKit

import JavaScriptCore

@objc protocol DeviceInfoJSExport: JSExport {

    var model: String! { get set}

    var initialOS: String! { get set}

    var latestOS: String! { get set}

    var imageURL: String! { get set}

    static func initializeDevice(withModel: String) -> DeviceInfo

}

class DeviceInfo: NSObject, DeviceInfoJSExport {

    var model: String!

    var initialOS: String!

    var latestOS: String!

    var imageURL: String!

    init(withModel model: String) {

        super.init()

        self.model = model

    }

    class func initializeDevice(withModel: String) -> DeviceInfo {

        return DeviceInfo(withModel: withModel)

    }

    func concatOS() -> String {

        if let initial = initialOS {

            if let latest = latestOS {

                return initial + "-" + latest

            }

        }

        return ""

    }

}

如果我们实现了JSExport协议，那么 JavaScript 运行时就能捕获该协议中的内容。对于这种设计，可以让我们很灵活的使用它的功能。

再看看Javascript中关于这一段的核心代码：

function parseiPhoneList(originalData) {

    var results = Papa.parse(originalData, { header: true });

    if (results.data) {

        var deviceData = [];

        for (var i=0; i < results.data.length; i++) {

            var model = results.data[i]["Model"];

            var deviceInfo = DeviceInfo.initializeDeviceWithModel(model);

            deviceInfo.initialOS = results.data[i]["Initial OS"];

            deviceInfo.latestOS = results.data[i]["Latest OS"];

            deviceInfo.imageURL = results.data[i]["Image URL"];

            deviceData.push(deviceInfo);

        }

        return deviceData;

    }

    return null;

}

上边的代码，调用了第三方解析库的函数，把数据解析出来后，生成deviceInfo数组，然后我们在Swift中就获取到了解析好的数据：

func parseDeviceData() {

        if let path = Bundle.main.path(forResource: "iPhone_List", ofType: "csv") {

            do {

                let contents = try String(contentsOfFile: path)

                if let functionParseiPhoneList = self.jsContext.objectForKeyedSubscript("parseiPhoneList") {

                    if let parsedDeviceData = functionParseiPhoneList.call(withArguments: [contents]).toArray() as? [DeviceInfo] {

                        self.deviceInfo = parsedDeviceData

                        self.tblDeviceList.reloadData()

                    }

                }

            }

            catch {

                print(error.localizedDescription)

            }

        }

    }

实现这些功能的基础就是Javascript的函数有返回值。

总结

在ios7之前我们只能通过UIWebview才能调用Javascript代码，现在，我们通过JavascriptCore可以自由使用Javascript。但在使用的时候要特别注意内存管理问题，大概需要注意一下两点：

不要在block里面直接使用context，或者使用外部的JSValue对象。
对象不要用属性直接保存JSValue对象，因为这样太容易循环引用了。

可以使用JSManagedValue去解决这个问题。

参考链接

JavaScriptCore官方文档

Using JavaScript in Swift Projects: Building a Markdown to HTML Editor

如何在Swift项目中使用 Javascript编写一个将Markdown转为HTML的编辑器

JavaScriptCore 使用