weex JS 与 Native 交互

JS 和 Native 的沟通主要通过两个关键方法进行:

callNative 是一个由native代码实现的函数, 它被JS代码调用并向native发送指令,例如 rendering, networking, authorizing和其他客户端侧的 toast 等API.
callJS 是一个由JS实现的函数, 它用于Native向JS发送指令. 目前这些指令由用户交互和Native的回调函数组成.

native -> JS

除了注册事件，其他在底层都是调用 callJS 方法，在SDK在这两个方法上面封装一层：
fireEvent 和 callback。

例如：

method:callJS, args:(
    3,
        (
                {
            args =             (
                1,
                "ok titleXXX"
            );
            method = callback;
            module = jsBridge;
        }
    )
)

js 在 vue-framework 中有一个 jsHandlers 对象，定义了 fireEvent和callback。

1.fireEvent

native 主动发起的事件，例如 click，viewappear,viewdisappear等等。

2.callback

native 给 js 的回调

JS -> native

调用 global.callNative。客户端接收后根据参数，生成对应的 NSInvocation,调用。
如果调用方法 argument有 callback参数，则将这个 argument 生成一个 block,等到 native callback 时，就调用这个 block。

argument = [^void(NSString *result, BOOL keepAlive) {
                [[WXSDKManager bridgeMgr] callBack:instanceId funcId:(NSString *)obj params:result keepAlive:keepAlive];
            }

再上一层的话由 task-center.js 负责。

1.send

js 主动发起调用 native 事件，定义在 task-center.js 中。

  send (type, options, args) {
    const { action, component, ref, module, method } = options

    args = args.map(arg => this.normalize(arg))

    switch (type) {
      case 'dom':
        return this[action](this.instanceId, args)
      case 'component':
        return this.componentHandler(this.instanceId, ref, method, args, { component })
      default:
        return this.moduleHandler(this.instanceId, module, method, args, {})
    }
  }

2.callback

js 给 native 的回调。

调用流程

在Weex中，目前最新版本中事件总共分为4种类型，通用事件，Appear 事件，Disappear 事件，Page 事件。
Weex 是用 js 来开发的，所以 native 主动发起的事件都是没有回调的。只是通知 js 一些native 触发事件而已。

native->js

native 发起 fireEvent，调用 callJS 方法，将method name 和参数打包成 json 传递给 js。

js 用 receiveTasks接收后分发给 framework 的receiveTasks。receiveTasks再调用到 fireEvent，根据 instanceID 找到对应的 instance，调用 instance.document 的 fireEvent。

调用顺序：
callJS-> receiveTasks -> fireEvent -> instance.document.fireEvent -> if(domChanges){updateElement} -> element.fireEvent

js->native

普通事件都是调用 callNative，还有另外三个方法：AddElement、callNativeComponent，callNativeModule

这三个方法因为 native 注册了，所以可以直接调用。如果没有注册，也会转到调用 callNative。

AddElement
callNativeComponent：XElement 方法的调用
callNativeModule：主要是 module 的调用。

js 主动调用 native 都是调用 taskCenter 的 send 方法。taskCenter 是在 Document 初始化时，绑定到 Document 对象上的。

component 的更新，会调用 Element 对应的方法。例如：setAttr、setStyle 等。会根据 Element 绑定的 docId 找到 Document，调用 Document 的 taskCenter。

Element 的 docId 是在将 Element 添加到 Document 时绑定的。

调用顺序：
taskCenter.send->sendTasks->taskCenter.callbackManager.add(v)->global.callNative(...args)

native callback(also callJS)->receiveTasks->callback->taskCenter.callback(callbackId)-> taskCenter.callbackManager.consume->js callback 函数。

附global 中方法：

    callAddElement: function()

    callJS: function()

    callNative: function()

    callNativeComponent: function()

    callNativeModule: function()

    clearIntervalWeex: function()

    clearTimeoutWeex: function()
    createInstance: function()
    destroyInstance: function()
    getRoot: function()
    nativeLog: function()
    receiveTasks: function()

    refreshInstance: function()

    registerComponents: function()

    registerMethods: function()

    registerModules: function()

    registerService: function()

    setIntervalWeex: function()

    setTimeout: function()

    setTimeoutWeex: function()
    unregisterService: function()

weex JS 与 Native 交互