JavaScriptBridge 0.3.1

JavaScriptBridge 0.3.1

×

测试已测试✓
Lang语言 Obj-CObjective C
许可证 MIT
发布上次发布2014年12月

由kishikawa katsumi维护。

JavaScriptBridge 0.3.1

Analytics

用 JavaScript 开发 iOS 应用！JavaScriptBridge 为使用 JavaScript 开发 iOS 应用提供了方法。JavaScriptBridge 将 Cocoa Touch 与 JavaScriptCore（JavaScriptCore.framework 自 iOS 7 开始引入）桥接。

您为您的应用获得了脚本语言的动态功能。

显然它还在开发中。如果您对这个项目感兴趣，欢迎您进行贡献！

使用方法

#import <JavaScriptBridge/JavaScriptBridge.h>
...

// Retrieve the prepared context
JSContext *context = [JSBScriptingSupport globalContext];

// Add framework support if needed.
// ('Foundation', 'UIKit', 'QuartzCore' enabled by default.)
[context addScriptingSupport:@"MapKit"];
[context addScriptingSupport:@"MessageUI"];

// Evaluate script
[context evaluateScript:
 @"var window = UIWindow.new();"
 @"window.frame = UIScreen.mainScreen().bounds;"
 @"window.backgroundColor = UIColor.whiteColor();"
 @"window.makeKeyAndVisible();"
];

  1. 从 JSBScriptingSupport 获取 JSContext 实例。该上下文包含了许多已被 JSExports 采用的系统类。

    JSContext *context = [JSBScriptingSupport globalContext];

  2. 如果需要，为每个框架添加 JSExports 采用的类。默认情况下，包含 Foundation，UIKit，QuartzCore 框架。

    [context addScriptingSupport:@"MapKit"];
[context addScriptingSupport:@"MessageUI"];

  3. 它已准备好使用，编写应用程序代码并在 JavaScript 中评估。

    [context evaluateScript:
@"var window = UIWindow.new();"
@"window.frame = UIScreen.mainScreen().bounds;"
@"window.backgroundColor = UIColor.whiteColor();"
@"window.makeKeyAndVisible();"
];

手动设置新的 JSContext 实例

  1. 使用 globalContext 创建新的 JSContext 实例。您可以分离 JavaScript 环境，使用多个上下文。

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

  2. 如果需要，为每个框架添加 JSExports 采用的类。《Foundation》，《UIKit》 和 QuartzCore 框架必须添加。

    [context addScriptingSupport:@"Foundation"];
[context addScriptingSupport:@"UIKit"];
[context addScriptingSupport:@"QuartzCore"];
[context addScriptingSupport:@"Accounts"];
[context addScriptingSupport:@"Social"];

语法/命名约定

类名

与 Objective-C 相同

变量声明

去掉 类型名称 而使用 var

UILabel *label;
var label;

属性

使用点语法

UISlider *slider = [[UISlider alloc] initWithFrame:frame];
slider.backgroundColor = [UIColor clearColor];
slider.minimumValue = 0.0;
slider.maximumValue = 100.0;
slider.continuous = YES;
slider.value = 50.0;
var slider = UISlider.alloc().initWithFrame(frame);
slider.backgroundColor = UIColor.clearColor();
slider.minimumValue = 0.0;
slider.maximumValue = 100.0;
slider.continuous = true;
slider.value = 50.0;

调用方法

使用点语法 删除所有冒号 任何紧跟着冒号的字母都会大写

UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
var window = UIWindow.alloc().initWithFrame(UIScreen.mainScreen().bounds);

结构（CGRect，NSRange 等）

使用散列

UIView *view = [UIView new];
view.frame = CGRectMake(20, 80, 280, 80);

CGFloat x = view.frame.origin.x;
CGFloat width = view.frame.size.width;
var view = UIView.new();
view.frame = {x: 20, y: 80, width: 280, height: 80};

var x = view.frame.x; // => 20
var width = view.frame.width; // => 280

示例

JavaScriptBridge 上的 hello world

这是最简单的方法。

@implementation JSBAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    JSContext *context = [JSBScriptingSupport globalContext];

    [context evaluateScript:
     @"var window = UIWindow.new();"
     @"window.frame = UIScreen.mainScreen().bounds;"
     @"window.backgroundColor = UIColor.whiteColor();"
     @""
     @"var navigationController = UINavigationController.new();"
     @"var viewController = UIViewController.new();"
     @"viewController.navigationItem.title = 'Make UI with JavaScript';"
     @""
     @"var view = UIView.new();"
     @"view.backgroundColor = UIColor.redColor();"
     @"view.frame = {x: 20, y: 80, width: 280, height: 80};"
     @""
     @"var label = UILabel.new();"
     @"label.backgroundColor = UIColor.blueColor();"
     @"label.textColor = UIColor.whiteColor();"
     @"label.text = 'Hello World.';"
     @"label.font = UIFont.boldSystemFontOfSize(24);"
     @"label.sizeToFit();"
     @""
     @"var frame = label.frame;"
     @"frame.x = 10;"
     @"frame.y = 10;"
     @"label.frame = frame;"
     @""
     @"view.addSubview(label);"
     @"viewController.view.addSubview(view);"
     @""
     @"navigationController.viewControllers = [viewController];"
     @""
     @"window.rootViewController = navigationController;"
     @"window.makeKeyAndVisible();"
     ];

    return YES;
}

@end

当然，脚本可以从外部文件加载。

@implementation JSBAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSBundle *mainBundle = [NSBundle mainBundle];
    NSString *path = [mainBundle pathForResource:@"main" ofType:@"js"];

    NSString *script = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    JSContext *context = [JSBScriptingSupport globalContext];
    [context evaluateScript:script];

    return YES;
}

@end

仅使用 JavaScript 编写应用程序

请查看UICatalog 示例。

增强功能

定义自定义类

您可以在JavaScript中定义自定义类。这需要与系统提供的框架交互。

JSB.defineClass(声明，实例成员，静态成员)函数在JavaScript中定义Objective-C类。将类声明字符串传递给第一个参数。

第二个参数是实例方法定义的哈希表。哈希对象包含函数对象，每个键都用作方法名称。

示例

var MainViewController = JSB.defineClass('MainViewController : UITableViewController', {
  // Instance Method Definitions
  viewDidLoad: function() {
    self.navigationItem.title = 'UICatalog';
  },
  viewWillAppear: function(animated) {
    self.tableView.reloadData();
  }
}, {
  // Class Method Definitions
  attemptRotationToDeviceOrientation: function() {
    ...
  }
});

示例

var MainViewController = JSB.defineClass('MainViewController : UITableViewController <UITableviewDataSource, UITableviewDelegate>', // Declaration
// Instance Method Definitions
{
  viewDidLoad: function() {
    self.navigationItem.title = 'UICatalog';
  },
  tableViewNumberOfRowsInSection: function(tableView, section) {
    return self.menuList.length;
  },
  tableViewCellForRowAtIndexPath: function(tableView, indexPath) {
    var cell = UITableViewCell.alloc().initWithStyleReuseIdentifier(3, 'Cell');
    cell.accessoryType = 1;
    cell.textLabel.text = self.menuList[indexPath.row]['title'];
    cell.detailTextLabel.text = self.menuList[indexPath.row]['explanation'];

    return cell;
  },
  tableViewDidSelectRowAtIndexPath: function(tableView, indexPath) {
    var targetViewController = self.menuList[indexPath.row]['viewController'];
    self.navigationController.pushViewControllerAnimated(targetViewController, true);
  }
},
{
// Class Method Definitions
  ...
});

模块

JavaScriptBridge提供了一个简单的模块系统require/exports函数，类似于Node.js。

JSB.require(name)函数启用外部模块，JSB.exports发布一个模块。

见示例。

var ButtonsViewController = JSB.require('buttonsViewController');
var ControlsViewController = JSB.require('controlsViewController');
var WebViewController = JSB.require('webViewController');
var MapViewController = JSB.require('mapViewController');

var MainViewController = JSB.defineClass('MainViewController : UITableViewController', {
  viewDidLoad: function() {
    self.navigationItem.title = 'UICatalog';
    ...

});

JSB.exports = MainViewController;

用于调试

JSB.log函数与NSLog相同。

JSB.log('view: %@', self.view);

要求

  • iOS 7或更高版本
  • JavaScriptCore.framework

安装

作者

kishikawa katsumi，[email protected]

许可

JavaScriptBridge可在MIT许可下使用。有关更多信息，请参阅LICENSE文件。

Bitdeli Badge