IOS 中的JS

 文章摘自: http://www.cocoachina.com/ios/20150127/11037.html 

JSContext/JSValue

JSContext 即JavaScript代码的运行环境。一个Context就是一个JavaScript代码执行的环境,也叫作用域。当在浏览器中运行 JavaScript代码时,JSContext就相当于一个窗口,能轻松执行创建变量、运算乃至定义函数等的JavaScript

//Objective-C

JSContext *context = [[JSContext alloc] init];

[context evaluateScript:@"var num = 8 + 5"];

[context evaluateScript:@"var names = [‘Grace‘, ‘Ada‘, ‘Margaret‘]"];

[context evaluateScript:@"var triple = function(value) { return value * 3 }"];

JSValue *tripleNum = [context evaluateScript:@"triple(num)"];

NSLog(@"Tripled: %d", [tripleNum toInt32]);

 

//Swift

let context = JSContext()

context.evaluateScript("var num = 5 + 5")

context.evaluateScript("var names = [‘Grace‘, ‘Ada‘, ‘Margaret‘]")

context.evaluateScript("var triple = function(value) { return value * 3 }")

let tripleNum: JSValue = context.evaluateScript("triple(num)")

println("Tripled: \(tripleNum.toInt32())")

正如代码最后一行所示,JSContext里不同的值均封装在JSValue对象中,包括字符串、数值、数组、函数等,甚至还有Error以及null和undefined。

下面是这几种类型关系:

下标值(Subscripting Values)

通过在JSContext和JSValue实例中使用下标符号可以轻松获取上下文环境中已存在的值。其中,JSContext放入对象和数组的只能是字符串下标,而JSValue则可以是字符串或整数下标。

JSValue *names = context[@"names"];

JSValue *initialName = names[0];

NSLog(@"The first name: %@", [initialName toString]);

//Swift

let names = context.objectForKeyedSubscript("names")

let initialName = names.objectAtIndexedSubscript(0)

println("The first name: \(initialName.toString())")

目前,Swift的方法仅能实现objectAtKeyedSubscript()和objectAtIndexedSubscript()等下标。

函数调用(Calling Functions)

//Objective-C

JSValue *tripleFunction = context[@"triple"];

JSValue *result = [tripleFunction callWithArguments:@[@5] ];

NSLog(@"Five tripled: %d", [result toInt32]);

//Swift

let tripleFunction = context.objectForKeyedSubscript("triple")

let result = tripleFunction.callWithArguments([5])

println("Five tripled: \(result.toInt32())")

异常处理(Exception Handling)

JSContext还有一个独门绝技,就是通过设定上下文环境中exceptionHandler的属性,可以检查和记录语法、类型以及出现的运行时错 误。exceptionHandler是一个回调处理程序,主要接收JSContext的reference,进行异常情况处理。

//Objective-C

context.exceptionHandler = ^(JSContext *context, JSValue *exception) {

   NSLog(@"JS Error: %@", exception);

};

[context evaluateScript:@"function multiply(value1, value2) { return value1 * value2 "];

// JS Error: SyntaxError: Unexpected end of script

//Swift

context.exceptionHandler = { context, exception in

    println("JS Error: \(exception)")

}

context.evaluateScript("function multiply(value1, value2) { return value1 * value2 ")

// JS Error: SyntaxError: Unexpected end of script

JavaScript函数调用

了 解了从JavaScript环境中获取不同值以及调用函数的方法,那么反过来,如何在JavaScript环境中获取Objective-C或者 Swift定义的自定义对象和方法呢?要从JSContext中获取本地客户端代码,主要有两种途径,分别为Blocks和JSExport协议。

Blocks (块)

在JSContext中,如果Objective-C代码块赋值为一个标识 符,JavaScriptCore就会自动将其封装在JavaScript函数中,因而在JavaScript上使用Foundation和Cocoa类 就更方便些——这再次验证了JavaScriptCore强大的衔接作用。现在CFStringTransform也能在JavaScript上使用了, 如下所示:

//Objective-C

context[@"simplifyString"] = ^(NSString *input) {

   NSMutableString *mutableString = [input mutableCopy];

   CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformToLatin, NO);

   CFStringTransform((__bridge CFMutableStringRef)mutableString, NULL, kCFStringTransformStripCombiningMarks, NO);

   return mutableString;

};

NSLog(@"%@", [context evaluateScript:@"simplifyString(‘?????!‘)"]);

//Swift

let simplifyString: @objc_block String -> String = { input in

    var mutableString = NSMutableString(string: input) as CFMutableStringRef

    CFStringTransform(mutableString, nil, kCFStringTransformToLatin, Boolean(0))

    CFStringTransform(mutableString, nil, kCFStringTransformStripCombiningMarks, Boolean(0))

    return mutableString

}

context.setObject(unsafeBitCast(simplifyString, AnyObject.self), forKeyedSubscript: "simplifyString")

println(context.evaluateScript("simplifyString(‘?????!‘)"))

// annyeonghasaeyo!

需要注意的是,Swift的speedbump只适用于Objective-C block,对Swift闭包无用。要在一个JSContext里使用闭包,有两个步骤:一是用@objc_block来声明,二是将Swift的 knuckle-whitening unsafeBitCast()函数转换为 AnyObject。

内存管理(Memory Management)

代码块可以捕获变量引用,而JSContext 所有变量的强引用都保留在JSContext中,所以要注意避免循环强引用问题。另外,也不要在代码块中捕获JSContext或任何JSValues, 建议使用[JSContext currentContext]来获取当前的Context对象,根据具体需求将值当做参数传入block中。

JSExport协议

借助JSExport协议也可以在JavaScript上使用自定义对象。在JSExport协议中声明的实例方法、类方法,不论属性,都能自动与JavaScrip交互。文章稍后将介绍具体的实践过程。

JavaScriptCore实践

我们可以通过一些例子更好地了解上述技巧的使用方法。先定义一 个遵循JSExport子协议PersonJSExport的Person model,再用JavaScript在JSON中创建和填入实例。有整个JVM,还要NSJSONSerialization干什么?

PersonJSExports和Person

Person类执行的 PersonJSExports协议具体规定了可用的JavaScript属性。,在创建时,类方法必不可少,因为JavaScriptCore并不适用 于初始化转换,我们不能像对待原生的JavaScript类型那样使用var person = new Person()。

//Objective-C

// in Person.h -----------------

@class Person;

@protocol PersonJSExports     @property (nonatomic, copy) NSString *firstName;

    @property (nonatomic, copy) NSString *lastName;

    @property NSInteger ageToday;

    - (NSString *)getFullName;

    // create and return a new Person instance with `firstName` and `lastName`

    + (instancetype)createWithFirstName:(NSString *)firstName lastName:(NSString *)lastName;

@end

@interface Person : NSObject     @property (nonatomic, copy) NSString *firstName;

    @property (nonatomic, copy) NSString *lastName;

    @property NSInteger ageToday;

@end

// in Person.m -----------------

@implementation Person

- (NSString *)getFullName {

    return [NSString stringWithFormat:@"%@ %@", self.firstName, self.lastName];

}

+ (instancetype) createWithFirstName:(NSString *)firstName lastName:(NSString *)lastName {

    Person *person = [[Person alloc] init];

    person.firstName = firstName;

    person.lastName = lastName;

    return person;

}

@end

//Swift

// Custom protocol must be declared with `@objc`

@objc protocol PersonJSExports : JSExport {

    var firstName: String { get set }

    var lastName: String { get set }

    var birthYear: NSNumber? { get set }

    func getFullName() -> String

    /// create and return a new Person instance with `firstName` and `lastName`

    class func createWithFirstName(firstName: String, lastName: String) -> Person

}

// Custom class must inherit from `NSObject`

@objc class Person : NSObject, PersonJSExports {

    // properties must be declared as `dynamic`

    dynamic var firstName: String

    dynamic var lastName: String

    dynamic var birthYear: NSNumber?

    init(firstName: String, lastName: String) {

        self.firstName = firstName

        self.lastName = lastName

    }

    class func createWithFirstName(firstName: String, lastName: String) -> Person {

        return Person(firstName: firstName, lastName: lastName)

    }

    func getFullName() -> String {

        return "\(firstName) \(lastName)"

    }

}

配置JSContext

创建Person类之后,需要先将其导出到JavaScript环境中去,同时还需导入Mustache JS库,以便对Person对象应用模板。

//Objective-C

// export Person class

context[@"Person"] = [Person class];

// load Mustache.js

NSString *mustacheJSString = [NSString stringWithContentsOfFile:... encoding:NSUTF8StringEncoding error:nil];

[context evaluateScript:mustacheJSString];

//Swift

// export Person class

context.setObject(Person.self, forKeyedSubscript: "Person")

// load Mustache.js

if let mustacheJSString = String(contentsOfFile:..., encoding:NSUTF8StringEncoding, error:nil) {

    context.evaluateScript(mustacheJSString)

}

JavaScript数据&处理

以下简单列出一个JSON范例,以及用JSON来创建新Person实例。

注 意:JavaScriptCore实现了Objective-C/Swift的方法名和JavaScript代码交互。因为JavaScript没有命名 好的参数,任何额外的参数名称都采取驼峰命名法(Camel-Case),并附加到函数名称上。在此示例中,Objective-C的方法 createWithFirstName:lastName:在JavaScript中则变成了 createWithFirstNameLastName()。

//JSON

[

    "first""Grace",     "last""Hopper",   "year": 1906 },

    "first""Ada",       "last""Lovelace""year": 1815 },

    "first""Margaret",  "last""Hamilton""year": 1936 }

]

//JavaScript

var loadPeopleFromJSON = function(jsonString) {

    var data = JSON.parse(jsonString);

    var people = [];

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

        var person = Person.createWithFirstNameLastName(data[i].first, data[i].last);

        person.birthYear = data[i].year;

        people.push(person);

    }

    return people;

}

现在你只需加载JSON数据,并在JSContext中调用,将其解析到Person对象数组中,再用Mustache模板渲染即可:

//Objective-C

// get JSON string

NSString *peopleJSON = [NSString stringWithContentsOfFile:... encoding:NSUTF8StringEncoding error:nil];

// get load function

JSValue *load = context[@"loadPeopleFromJSON"];

// call with JSON and convert to an NSArray

JSValue *loadResult = [load callWithArguments:@[peopleJSON]];

NSArray *people = [loadResult toArray];

// get rendering function and create template

JSValue *mustacheRender = context[@"Mustache"][@"render"];

NSString *template = @"{{getFullName}}, born {{birthYear}}";

// loop through people and render Person object as string

for (Person *person in people) {

   NSLog(@"%@", [mustacheRender callWithArguments:@[template, person]]);

}

// Output:

// Grace Hopper, born 1906

// Ada Lovelace, born 1815

//Swift

// get JSON string

if let peopleJSON = NSString(contentsOfFile:..., encoding: NSUTF8StringEncoding, error: nil) {

    // get load function

    let load = context.objectForKeyedSubscript("loadPeopleFromJSON")

    // call with JSON and convert to an array of `Person`

    if let people = load.callWithArguments([peopleJSON]).toArray() as? [Person] {

        // get rendering function and create template

        let mustacheRender = context.objectForKeyedSubscript("Mustache").objectForKeyedSubscript("render")

        let template = "{{getFullName}}, born {{birthYear}}"

        // loop through people and render Person object as string

        for person in people {

            println(mustacheRender.callWithArguments([template, person]))

        }

    }

}

// Output:

// Grace Hopper, born 1906

// Ada Lovelace, born 1815

// Margaret Hamilton, born 1936

时间: 2024-10-09 03:10:13

IOS 中的JS的相关文章

【iOS】网页中调用JS与JS注入

很多应用为了节约成本,做出同时在Android与iOS上都能使用的界面,这时就要使用WebView来做.Android和IOS上都有WebView,做起来很省事.当然这时就要考虑如何在Android或iOS中实现与网页的交互.对iOS而言,包括如何在网页中调用OC,以及如何在OC中对网页进行操作. 先将网页弄到iOS项目中: 网页内容如下, 仅供测试: <html> <head> <meta xmlns="http://www.w3.org/1999/xhtml&q

ios开发--网页中调用JS与JS注入

先将网页弄到iOS项目中: 网页内容如下, 仅供测试: [html] view plain copy <html> <head> <meta xmlns="http://www.w3.org/1999/xhtml" http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>这是一个示例html文件</title

iOS中UIWebView执行JS代码(UIWebView)

iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被人卡出来. 如网页中的这个导航 通常我们不需要WebView中的 导航栏,也不需要里面的返回上一级的交互.. 对WebView常用的另外一种功能就是对某个点击添加对用function实现JS调用OC的交互功能. 下面一一介绍: 1. UIWebView 调用JS代码 OC调用JS通常是,在webVi

在webView 中使用JS 调用 Android / IOS的函数 Function

最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true); myWebView

iOS中UIWebView使用JS交互

iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html <!doctype html> <html> <head> </head> <body> <div> <img src="test.png"/> </div> </body> <

转载:ios中objective-c与js的交互

原始出处:http://mkhgg.blog.51cto.com/1741572/752962 iOS中js与objective-c的交互 因为在iOS中没有WebKit.Framework这个库的,所以也就没有 windowScriptObject对象方法了.要是有这个的方法的话 就方便多了,(ps:MacOS中有貌似) 现在我们利用其他方法去达到js与objective-c的交互效果. 首先是objective-c调用js中的代码,可以用uiwebview中的一个方法 stringByEva

iOS中UIWebView使用JS交互 - 机智的新手

iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html <!doctype html> <html> <head> </head> <body> <div> <img src="test.png"/> </div> </body> <

UIWebView中的JS和OC的互调

html的代码如下: <html> <head>     <meta xmlns="http://www.w3.org/1999/xhtml" http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>这是一个示例html文件</title>     <script Type='text/j

iOS 中的 HotFix 方案总结详解

相信HotFix大家应该都很熟悉了,今天主要对于最近调研的一些方案做一些总结.iOS中的HotFix方案大致可以分为四种: WaxPatch(Alibaba) Dynamic Framework(Apple) React Native(Facebook) JSPatch(Tencent) WaxPatch WaxPatch是一个通过Lua语言编写的iOS框架,不仅允许用户使用 Lua 调用 iOS SDK和应用程序内部的 API, 而且使用了 OC runtime 特性调用替换应用程序内部由 O