weex-code-analysis

二、Weex SDK : JS Framework Bridge APIs

分别从FE工程师和NA工程师视角来看JS Framework Bridge APIs概貌。

零、JS Framework Bridge APIs概貌

一、从JS视角看Bridge (JavaScript语法)

从JS视角看到的Bridge都是纯正的JavaScript语法(全局函数)。

1.1、Called by native and supplied from JS Framework

1.2、Called from JavaScript and implemented with native code

// html5/runtime/bridge/TaskCenter.js

export function init () {
  TaskCenter.prototype.componentHandler = global.callNativeComponent;
  TaskCenter.prototype.moduleHandler = global.callNativeModule;
}

Example:

sendTasks('x', [
  {module: 'dom', method: 'addElement', args: ['_root', {ref: '1', type: 'container'}, -1]},
  {module: 'dom', method: 'addElement', args: ['1', {ref: '2', type: 'text', ...}, -1]},
  {module: 'dom', method: 'addElement', args: ['1', {ref: '3', type: 'image', ...}, -1]},
  ...
])
// html5/runtime/api/config.js

var config = {
  sendTasks: function sendTasks () {
    return (global.callNative).apply(void 0, args)
  }
};

Document.handler = config.sendTasks;

二、从OC视角看Bridge (ObjectiveC语法)

从OC视角看到的Bridge都是纯正的ObjectiveC语法(单例对象的实例方法)。

2.1、Called by native and supplied from JS Framework

WXBridgeContext

Example:

// WXBridgeContext.m
[self callJSMethod:@"createInstance" args:args];
[self callJSMethod:@"registerComponents" args:@[components]];
[self callJSMethod:@"registerModules" args:@[modules]];
[self callJSMethod:@"callJS" args:@[execIns, tasks]];

// WXJSCoreBridge.m
- (JSValue *)callJSMethod:(NSString *)method args:(NSArray *)args
{
    return [[_jsContext globalObject] invokeMethod:method withArguments:args];
}

2.2、Called from JavaScript and implemented with native code

WXBridgeContext

参考文档:weex/doc/specs/js-framework-apis.md