iOS开发-javaScript交互

423 查看

前言

当前混合开发模式迎来了前所未有的发展,跨平台开发、热更新等优点决定了这种模式的重要地位。虽然前端界面在交互、动效等多方面距离原生应用还有差距,但毫无疑问混合开发只会被越来越多的公司接受。在iOS中,混合开发模式被分为两个时代,分别是iOS7之前的坑爹时代与之后的黄金时代,其分割代表为JavaScriptCore框架

坑爹时代

作为完美避开iOS7之前版本的幸运儿,我只能从某位前辈的口中得知那悲惨的岁月。作为那个年代唯一能与前端界面交互的手段就是UIWebView,先不说它自身的内存泄露缺陷,下面是一段前辈写过的代码:

在那个年代,前辈的小伙伴们把前端事件的触发条件设置为链接跳转,然后通过链接中的关键字符来判断处理操作。为此,需要定义好些个数据集合来存储这些关键字符的处理操作。如果遇到应用和前端交换交互数据的时候,那一长串的参数字符全部拼接在请求地址里,想想也是醉了。另外的交互方法就是通过stringByEvaluatingJavaScriptFromString方法来执行js代码。

JavaScriptCore

JavaScriptCore是一套用来对JS代码进行解析和提供执行环境的开源框架,极大的简化了我们的交互过程。下面从项目和JS代码相互调用的两个不同操作介绍其中相对应的方法

项目调用JS代码

  • JSContext
    一个JSContext对象是JavaScript运行的全局环境对象,它提供了代码运行和注册方法接口的服务。下面的代码就创建了一个JSContext对象,并且定义了一部分的JS代码加入到执行环境中

    此外,在JS代码执行过程中,可能会出现语法错误等多种错误,通过下面的代码可以对这些错误进行处理
  • JSValue
    JSValue是所有JSContext操作后返回的值,包装了几乎所有的数据类型,包括错误和IMP指针等。在JSValue类结构中存在多个toXXXX命名的方法转换成iOS数据类型以及call方法来调用方法。下面的代码从JSContext环境中获取已存在的部分变量,并且执行创建一个存储person信息的字典

通过上面的例子,我们可以看到,只要了解到JS代码中我们需要调用的方法信息,通过JSContext + JSValue的方式我们就能轻松的在项目中调用前端界面的方法,而不再需要拼接长串参数字符通过链接地址传递给前端界面

JS调用项目代码

JavaScript访问我们代码中的对象以及方法有两种方式:BlocksJSExport

  • Blocks
    自定义的block代码可以通过JSContext转换成JS代码中的函数指针调用,这里存在一个坑就是Swift中的闭包无法完成这样的类型转换,因此这种方式的操作流程在Swift中是这样的:Closure -> block -> function pointer。在闭包转成block的这一过程中,需要使用一个重要的关键符@convention
    JS代码中的函数指针调用,这里存在一个坑就是Swift中的闭包无法完成这样的类型转换,因此这种方式的操作流程在Swift中是这样的:Closure -> block -> function pointer。在闭包转成block的这一过程中,需要使用一个重要的关键符@convention
    ߘ有差距,但毫无疑问混合开发只会被越来越多的公司接受。在iOS中,混合开发模式被分为两个时代,分别是iOS7之前的坑爹时代与之后的黄金时代,其分割代表为JavaScriptCore框架

    坑爹时代

    作为完美避开iOS7之前版本的幸运儿,我只能从某位前辈的口中得知那悲惨的岁月。作为那个年代唯一能与前端界面交互的手段就是UIWebView,先不说它自身的内存泄露缺陷,下面是一段前辈写过的代码:

    在那个年代,前辈的小伙伴们把前端事件的触发条件设置为链接跳转,然后通过链接中的关键字符来判断处理操作。为此,需要定义好些个数据集合来存储这些关键字符的处理操作。如果遇到应用和前端交换交互数据的时候,那一长串的参数字符全部拼接在请求地址里,想想也是醉了。另外的交互方法就是通过stringByEvaluatingJavaScriptFromString方法来执行js代码。

    JavaScriptCore

    JavaScriptCore是一套用来对JS代码进行解析和提供执行环境的开源框架,极大的简化了我们的交互过程。下面从项目和JS代码相互调用的两个不同操作介绍其中相对应的方法

    项目调用JS代码

    • JSContext
      一个JSContext对象是JavaScript运行的全局环境对象,它提供了代码运行和注册方法接口的服务。下面的代码就创建了一个JSContext对象,并且定义了一部分的JS代码加入到执行环境中

      此外,在JS代码执行过程中,可能会出现语法错误等多种错误,通过下面的代码可以对这些错误进行处理
    • JSValue
      JSValue是所有JSContext操作后返回的值,包装了几乎所有的数据类型,包括错误和IMP指针等。在JSValue类结构中存在多个toXXXX命名的方法转换成iOS数据类型以及call方法来调用方法。下面的代码从JSContext环境中获取已存在的部分变量,并且执行创建一个存储person信息的字典

    通过上面的例子,我们可以看到,只要了解到JS代码中我们需要调用的方法信息,通过JSContext + JSValue的方式我们就能轻松的在项目中调用前端界面的方法,而不再需要拼接长串参数字符通过链接地址传递给前端界面