Weex 原生 Module 调用解读

@(编程笔记)[Weex]
先放结论

结论

总体分为两段：SDK初始化，和 WeexInstance 实例。

1. WeexSDK 初始化

在 WXJSCoreBridge 被初始化时，调用registerCallNativeModule方法，向jscontext注入callNativeModule全局block函数。

2. WeexInstance 实例

原生端 WXSDKInstance init 的时候，生成 instanceId，用 instanceId 去初始化 js 端[[WXSDKManager bridgeMgr] createInstance:self.instanceId template:mainBundleString options:dictionary data:_jsData];

JS 端 WeexInstance init 的时候注册requireModule(moduleName)，里面将weexInstance 的 id 传入。

当需要调用的时候通过TaskCenter解析成 (id, module, method, args, options) 形式的参数，发起原生调用，原生拿到id，获取 id 对应 vc 。自然也就能拿到 vc 的 navigationController，发起 push。

Navigator weexInstance 引出的问题

最近在开发时遇到 Navigator 的问题。

首先 Navigator 的 push 方法是这样的：

- (void)push:(NSDictionary *)param callback:(WXModuleCallback)callback
{
    id<WXNavigationProtocol> navigator = [self navigator];
    UIViewController *container = self.weexInstance.viewController;
    [navigator pushViewControllerWithParam:param completion:^(NSString *code, NSDictionary *responseData) {
        if (callback && code) {
            callback(code);
        }
    } withContainer:container];
}

具体说就是：

1. 获取注册的navigator
2. 获取当前调用这个方法的weex实例，也就是weexInstance作为vc标示
3. 用获取到的weexInstance作为基础，调用它的navigationController去 push

这样的好处自然是push流程的正确而安全。

毕竟若是没有调用vc的实例，那么我们往往只能拿取当前UIWindow顶端的visibleViewController

public extension UIWindow {

    /// Return the current visible view controller
    public var visibleViewController: UIViewController? {
        return UIWindow.getVisibleViewControllerFrom(self.rootViewController)
    }

    public static func getVisibleViewControllerFrom(_ vc: UIViewController?) -> UIViewController? {
        if let nc = vc as? UINavigationController {
            return UIWindow.getVisibleViewControllerFrom(nc.visibleViewController)
        } else if let tc = vc as? UITabBarController {
            return UIWindow.getVisibleViewControllerFrom(tc.selectedViewController)
        } else {
            if let pvc = vc?.presentedViewController {
                return UIWindow.getVisibleViewControllerFrom(pvc)
            } else {
                return vc
            }
        }
    }
}


let currentVC = UIApplication.shared.delegate?.window??.visibleViewController
currentVC?.navigationController?.popViewController(animated: true)

问题是 Navigator 这个模块的weexInstance是哪来的？

开始调试

为了搞清这个问题， 我把 Navigator 的 weexInstance 展开并打断点：

@synthesize weexInstance = _weexInstance;

- (void)setWeexInstance:(WXSDKInstance *)weexInstance {
    _weexInstance = weexInstance;
}

- (id)weexInstance {
    return _weexInstance;
}

然后，我使用如下脚本

<script>
console.log('Before require')
var navigator = weex.requireModule('navigator')
console.log('After require')
export default {
  created () {
    console.log('onCreated')
  },
  methods: {
    onClickBack (event) {
      navigator.pop()
    },
  }
}
</script>

经过测试，页面显示的时候这个var navigator 已经执行了，但是weexInstance并没有被设置，是点击的时候，点击响应onClickBack的pop函数才设置的weexInstance。

通过查看源码也发现，这个requireModule是建立了对模块的一个proxy或者是索引。在点击的时候这个var的pop被调用的时候weexInstance才被注入。
而中间这一part隐藏内容，就是原生接收到方法调用的时候注入weexInstance。

When

所以得出来：在onClick的navigator.pop()调用被传递到原生的时候，才拿到的weexInstance，而非 script 执行的时候。

WXModuleProtocol

事实上这个 weexInstance 是被声明在WXModuleProtocol的，不单单是Navigator，每一个Module都会有weexInstance这一个实例变量。

@protocol WXModuleProtocol <NSObject>
// 代码有删减
/**
 *  @abstract the instance bind to this module. It helps you to get many useful properties related to the instance.
 */
@property (nonatomic, weak) WXSDKInstance *weexInstance;

@end

WXJSCoreBridge - registerCallNativeModule:

经过一番调查，定位到了WXJSCoreBridge的- (void)registerCallNativeModule:(WXJSCallNativeModule)callNativeModuleBlock

- (void)registerCallNativeModule:(WXJSCallNativeModule)callNativeModuleBlock
{
    _jsContext[@"callNativeModule"] = ^JSValue *(JSValue *instanceId, JSValue *moduleName, JSValue *methodName, JSValue *args, JSValue *options) {
        NSString *instanceIdString = [instanceId toString];
        NSString *moduleNameString = [moduleName toString];
        NSString *methodNameString = [methodName toString];
        NSArray *argsArray = [args toArray];
        NSDictionary *optionsDic = [options toDictionary];
        
        WXLogDebug(@"callNativeModule...%@,%@,%@,%@", instanceIdString, moduleNameString, methodNameString, argsArray);
        
        NSInvocation *invocation = callNativeModuleBlock(instanceIdString, moduleNameString, methodNameString, argsArray, optionsDic);
        JSValue *returnValue = [JSValue wx_valueWithReturnValueFromInvocation:invocation inContext:[JSContext currentContext]];
        [WXTracingManager startTracingWithInstanceId:instanceIdString ref:nil className:nil name:moduleNameString phase:WXTracingInstant functionName:methodNameString options:nil];
        return returnValue;
    };
}

- (void)registerCallNativeModule:(WXJSCallNativeModule)callNativeModuleBlock 在SDK初始化的时候被调用，向 jsContext 注册了callNativeModule

其中NSString *instanceIdString = [instanceId toString]; 把instanceId获取到并传递给 Module，同样的方法拿到 moduleName 和 methodName，而这个 instanceId 就是调用 Navigator 这个 module 的 weexInstance 的 id。

方法调用则是通过NSInvocation。

JSFramework

原生这边已经基本搞定，那么接下来就是看 JSFramework 这边的逻辑。

TaskCenter.js

export class TaskCenter {
  callModule (module, method, args, options) {
    return this.moduleHandler(this.instanceId, module, method, args, options)
  }
}

export function init () {
  const proto = TaskCenter.prototype
  proto.moduleHandler = global.callNativeModule ||
    ((id, module, method, args) =>
      fallback(id, [{ module, method, args }]))
}

注入callNativeModule 到 TaskCenter.prototype，然后再把 callModule 指向它

WeexInstance.js

function setId (weex, id) {
  Object.defineProperty(weex, '[[CurrentInstanceId]]', { value: id })
}

function getId (weex) {
  return weex['[[CurrentInstanceId]]']
}

function moduleGetter (id, module, method) {
  const taskCenter = getTaskCenter(id)
  if (!taskCenter || typeof taskCenter.send !== 'function') {
    console.error(`[JS Framework] Failed to find taskCenter (${id}).`)
    return null
  }
  return (...args) => taskCenter.send('module', { module, method }, args)
}

function moduleSetter (id, module, method, fn) {
  const taskCenter = getTaskCenter(id)
  if (!taskCenter || typeof taskCenter.send !== 'function') {
    console.error(`[JS Framework] Failed to find taskCenter (${id}).`)
    return null
  }
  if (typeof fn !== 'function') {
    console.error(`[JS Framework] ${module}.${method} must be assigned as a function.`)
    return null
  }
  return fn => taskCenter.send('module', { module, method }, [fn])
}

在文件内注册 moduleSetter 和 moduleGetter，

export default class WeexInstance {
  constructor (id, config) {
    setId(this, String(id))
    this.config = config || {}
    this.document = new Document(id, this.config.bundleUrl)
    this.requireModule = this.requireModule.bind(this)
    this.isRegisteredModule = isRegisteredModule
    this.isRegisteredComponent = isRegisteredComponent
  }
  
  requireModule (moduleName) {
    const id = getId(this)
    if (!(id && this.document && this.document.taskCenter)) {
      console.error(`[JS Framework] Failed to requireModule("${moduleName}"), `
        + `instance (${id}) doesn't exist anymore.`)
      return
    }

    // warn for unknown module
    if (!isRegisteredModule(moduleName)) {
      console.warn(`[JS Framework] using unregistered weex module "${moduleName}"`)
      return
    }

    // create new module proxy
    const proxyName = `${moduleName}#${id}`
    if (!moduleProxies[proxyName]) {
      // create registered module apis
      const moduleDefine = getModuleDescription(moduleName)
      const moduleApis = {}
      for (const methodName in moduleDefine) {
        Object.defineProperty(moduleApis, methodName, {
          enumerable: true,
          configurable: true,
          get: () => moduleGetter(id, moduleName, methodName),
          set: fn => moduleSetter(id, moduleName, methodName, fn)
        })
      }

      moduleProxies[proxyName] = moduleApis
    }

    return moduleProxies[proxyName]
  }
}

获取当前实例的id，传入方法调用。