Weex从入门到超神（二）

前言

距离我写的上一篇文章 Weex从入门到超神（一） 已经过了挺久了（惭愧而不失礼貌的微笑），起初写那篇文章的初衷是因为项目中使用到了 Weex ,所以准备对 Weex 做一个心得式的笔记，后来无意间发现简书“霜神”已经对 Weex 写过几篇剖析比较深刻的文章，还有其他一些原因（懒），所以就没有继续写下去。
最近由于Facebook的 BSD license，React 被前端社区的同学们推到了风口浪尖，React&RN、Vue&Weex 又成为了大家码前码后讨论的话题。Apache 社区还因为 Facebook 的 BSD license，全面封杀使用了 BSD license 的开源项目，貌似一切都很精彩，迫于前端同(da)学(lao)的淫威还有社区的强烈谴责，上周 Facebook 终于认怂了，承诺这周将 React 以及 gayhub 上面的其他几个项目的开源协议从 BSD 改成 MIT，下图是我脑补的场景：

鉴于对于项目中使用 Weex 的一些经验和心得，还是希望写出来和大家一起分享。

应用层核心组件

Weex 运行时会先注入一段位于 pre-build 下的 native-bundle-main.js 代码。不过在注入这段代码之前会先注册一些默认的 Component、Module和Handler，这就是 Weex 与 Native 应用层交互最核心的部分，可以理解为“组件”。其中 Component 是为了映射 Html 的一些标签，Module 中是提供一些 Native 的一些方法供 Weex 调用，Handler 是一些协议的实现。

注册完 Weex 默认的“组件” 之后，注入刚才那段 JS，这个时候 Vue 的标签和动作才能被 Weex 所识别和转换。
为了便于下文的描述和理解，我把 Native 这边的 SDK 称作 Weex，前端的 Vue 和 Weex 库以及 Vue 编译后的 js 统称为 Vue

转载请注明出处：来自LeonLei的博客http://www.gaoshilei.com

1. 组件：Component

目前 Weex 一共提供了26种 Component，比较常见的有 div、image、scroller... ，有些跟 html 标签重名，有些是 Weex 自定义的。Weex 注册的 Component 有两种类型，一类是有{@"append":@"tree"}属性的标签，另一类是没有{@"append":@"tree"}属性的标签。要搞清楚这两类标签有什么不同，我们就要看一下 Component 的注册的源码实现。

    [WXComponentFactory registerComponent:name withClass:clazz withPros:properties];
    NSMutableDictionary *dict = [WXComponentFactory componentMethodMapsWithName:name];
    dict[@"type"] = name;
    if (properties) {
        NSMutableDictionary *props = [properties mutableCopy];
        if ([dict[@"methods"] count]) {
            [props addEntriesFromDictionary:dict];
        }
        [[WXSDKManager bridgeMgr] registerComponents:@[props]];
    } else {
        [[WXSDKManager bridgeMgr] registerComponents:@[dict]];
    }  

首先通过一个工厂类WXComponentFactory注册 Component，

这个工厂类（单例）中管理了所有的 Component ，注册的每一个 Component 都会用一个对应的 WXComponentConfig来保存标签name、对应的class和属性，最后由WXComponentFactory来统一管理这些WXComponentConfig

这一步同时注册了 Component 中的 methods，关于 method 也有两类，一类是包含wx_export_method_sync_前缀的同步方法，另一类是包含wx_export_method_前缀的异步方法（这两种方法有什么不同，后面会有介绍）。在WXComponentConfig的父类WXInvocationConfig储存了 Component 的方法map:

@property (nonatomic, strong) NSMutableDictionary *asyncMethods;
@property (nonatomic, strong) NSMutableDictionary *syncMethods;

然后再从WXComponentFactory拿到对应 Component 的方法列表字典，需要注意的是这里拿到的方法列表只是异步方法，得到的是这样的字典：

{
    methods =     (
        resetLoadmore
    );
    type = scroller;
} 

不过大部分 Component 并没有wx_export前缀的 method，所以很多这里拿到的方法都为空。
最后也是最关键的一步，要将 Component 注册到WXBridgeContext中。

    if (self.frameworkLoadFinished) {
        [self.jsBridge callJSMethod:method args:args];
    } else {
        [_methodQueue addObject:@{@"method":method, @"args":args}];
    }  

最后将 Component 注册到了JSContext中，

还记得文章开头介绍的native-bundle-main.js吗？这里的注册调用了js中的registerComponents方法，这个 Component 与 Vue 就联系起来了，在 Vue 就可以使用这个 Component。

并且从上面的这段代码可以看出来，Component 的注册操作是在 JSFramework 加载完成才会进行，如果native-bundle-main.js没有加载完成，所有的 Component 的方法注册操作都会被加到队列中等待。其中的第二个参数args就是上面我们拿到的字典。不过有属性的 和没属性的有点区别，有属性的会将属性添加到之前拿到的字典中作为args再去注册。
要搞清楚这个属性干嘛的，我们先看一下WXComponentManager中的相关源码：

- (void)_recursivelyAddComponent:(NSDictionary *)componentData toSupercomponent:(WXComponent *)supercomponent atIndex:(NSInteger)index appendingInTree:(BOOL)appendingInTree {
        ...    
    BOOL appendTree = !appendingInTree && [component.attributes[@"append"] isEqualToString:@"tree"];
    // if ancestor is appending tree, child should not be laid out again even it is appending tree.
    for(NSDictionary *subcomponentData in subcomponentsData){
        [self _recursivelyAddComponent:subcomponentData toSupercomponent:component atIndex:-1 appendingInTree:appendTree || appendingInTree];
    }
    if (appendTree) {
        // If appending tree，force layout in case of too much tasks piling up in syncQueue
        [self _layoutAndSyncUI];
    }
}

这个方法是 Vue 页面渲染时所调用的方法，这个方法会递归添加 Component，同时会向视图中添加与 Component 相对应的 UIView。从代码的后半部分可以看到，如果当前 Component 有{@"append":@"tree"}属性并且它的父 Component 没有这个属性将会强制对页面进行重新布局。可以看到这样做是为了防止UI绘制任务太多堆积在一起影响同步队列任务的执行。

搞清楚了 Component 的注册机制，下面重点扒一下 Component 的运行原理：Vue 标签是如何加载以及渲染到视图上的。
从刚才的注册过程中发现，最后一步是通过_jsBridge调用callJSMethod这个方法来注册的，而且从WXBridgeContext中可以看到，这个_jsBridge就是WXJSCoreBridge的实例。WXJSCoreBridge可以认为是 Weex 与 Vue 进行通信的最底层的部分。在调用callJSMethod方法之前，_jsBridge向 JavaScriptCore 中注册了很多全局 function，具体请看精简后的源码：

    [_jsBridge registerCallNative:^NSInteger(NSString *instance, NSArray *tasks, NSString *callback) {  
        ...    
     }];
    [_jsBridge registerCallAddElement:^NSInteger(NSString *instanceId, NSString *parentRef, NSDictionary *elementData, NSInteger index) {
        ...
    }];
    
    [_jsBridge registerCallCreateBody:^NSInteger(NSString *instanceId, NSDictionary *bodyData) {
        ...
    }];
    
    [_jsBridge registerCallRemoveElement:^NSInteger(NSString *instanceId, NSString *ref) {
        ...
    }];
    
    [_jsBridge registerCallMoveElement:^NSInteger(NSString *instanceId,NSString *ref,NSString *parentRef,NSInteger index) {
        ...
    }];
    
    [_jsBridge registerCallUpdateAttrs:^NSInteger(NSString *instanceId,NSString *ref,NSDictionary *attrsData) {
        ...
    }];
    
    [_jsBridge registerCallUpdateStyle:^NSInteger(NSString *instanceId,NSString *ref,NSDictionary *stylesData) {
        ...
    }];
    
    [_jsBridge registerCallAddEvent:^NSInteger(NSString *instanceId,NSString *ref,NSString *event) {
        ...
    }];
    
    [_jsBridge registerCallRemoveEvent:^NSInteger(NSString *instanceId,NSString *ref,NSString *event) {
        ...
    }];
    
    [_jsBridge registerCallCreateFinish:^NSInteger(NSString *instanceId) {
        ...
    }];
    
    [_jsBridge registerCallNativeModule:^NSInvocation*(NSString *instanceId, NSString *moduleName, NSString *methodName, NSArray *arguments, NSDictionary *options) {
        ...
    }];
    
    [_jsBridge registerCallNativeComponent:^void(NSString *instanceId, NSString *componentRef, NSString *methodName, NSArray *args, NSDictionary *options) {
        ...
    }];

从这些方法名看，大多数都是一些与 Dom 更新相关的方法，我们在WXJSCoreBridge中更细致的看一下是怎么实现的：

- (void)registerCallAddElement:(WXJSCallAddElement)callAddElement
{
    id callAddElementBlock = ^(JSValue *instanceId, JSValue *ref, JSValue *element, JSValue *index, JSValue *ifCallback) {
        
        NSString *instanceIdString = [instanceId toString];
        NSDictionary *componentData = [element toDictionary];
        NSString *parentRef = [ref toString];
        NSInteger insertIndex = [[index toNumber] integerValue];
        [WXTracingManager startTracingWithInstanceId:instanceIdString ref:componentData[@"ref"] className:nil name:WXTJSCall phase:WXTracingBegin functionName:@"addElement" options:nil];
         WXLogDebug(@"callAddElement...%@, %@, %@, %ld", instanceIdString, parentRef, componentData, (long)insertIndex);
        
        return [JSValue valueWithInt32:(int32_t)callAddElement(instanceIdString, parentRef, componentData, insertIndex) inContext:[JSContext currentContext]];
    };

    _jsContext[@"callAddElement"] = callAddElementBlock;
}

这是一个更新 Dom 添加 UIView 的方法，这里需要把 Native 的方法暴露给 JS 调用。但是有一个问题：

OC 的方法参数格式和 JS 的不一样，不能直接提供给 JS 调用。

所以这里用了两个 Block 嵌套的方式，在 JS 中调用方法时会先 invoke 里层的 callAddElementBlock，这层 Block 将 JS 传进来的参数转换成 OC 的参数格式，再执行 callAddElement 并返回一个 JSValue 给 JS，callAddElement Block中是在WXComponentManager中完成的关于 Component 的一些操作，这在上面介绍 Component 包含 tree属性问题时已经介绍过了。
至此，简单来说就是：Weex 的页面渲染是通过先向 JSCore 注入方法，Vue 加载完成就可以调用这些方法并传入相应的参数完成 Component 的渲染和视图的更新。
要注意，每一个 WXSDKInstance 对应一个 Vue 页面，Vue 加载之前就会创建对应的 WXSDKInstance，所有的 Component 都继承自WXComponent，他们的初始化方法都是

-(instancetype)initWithRef:(NSString *)ref
                      type:(NSString *)type
                    styles:(NSDictionary *)styles
                attributes:(NSDictionary *)attributes
                    events:(NSArray *)events
              weexInstance:(WXSDKInstance *)weexInstance  

这个方法会在 JS 调用callCreateBody时被 invoke。

2. 组件：Module

Module 注册流程和 Component 基本一致，首先通过WXModuleFactory注册 Module

- (NSString *)_registerModule:(NSString *)name withClass:(Class)clazz
{
    WXAssert(name && clazz, @"Fail to register the module, please check if the parameters are correct ！");
    
    [_moduleLock lock];
    //allow to register module with the same name;
    WXModuleConfig *config = [[WXModuleConfig alloc] init];
    config.name = name;
    config.clazz = NSStringFromClass(clazz);
    [config registerMethods];
    [_moduleMap setValue:config forKey:name];
    [_moduleLock unlock];
    
    return name;
}

注册 Moudle 的registerMethods方法与注册 Component 是一样的，都是将方法注册到WXInvocationConfig中，wx_export_method_sync_前缀的同步方法注册到 syncMethods 中，wx_export_method_前缀的异步方法注册到 asyncMethods 中。再将 Moudle 的同步和异步方法取出来调用registerComponents注入到JSContext中

{
    dom =     (
        addEventListener,
        removeAllEventListeners,
        addEvent,
        removeElement,
        getComponentRect,
        updateFinish,
        scrollToElement,
        addRule,
        updateAttrs,
        addElement,
        createFinish,
        createBody,
        updateStyle,
        removeEvent,
        refreshFinish,
        moveElement
    );
}

这是WXDomModule中所有的方法，Moudle 中的方法注册比 Component 更有意义，因为 Moudle 中基本上都是暴露给 Vue 调用的 Native 方法。
接下来我们来看一下 Moudle 的方法如何被调用以及 syncMethods 和 asyncMethods 有什么不同。
在前面的jsBridge懒加载中，有一个注册方法是跟 Moudle 中方法有关的，Moudle 中的方法会在这个注册方法的回调中被 invoke，换言之，Vue 调用 Moudle 中的方法会在这个回调中被唤起

    [_jsBridge registerCallNativeModule:^NSInvocation*(NSString *instanceId, NSString *moduleName, NSString *methodName, NSArray *arguments, NSDictionary *options) {
        
        WXSDKInstance *instance = [WXSDKManager instanceForID:instanceId];
        
        if (!instance) {
            WXLogInfo(@"instance not found for callNativeModule:%@.%@, maybe already destroyed", moduleName, methodName);
            return nil;
        }
        
        WXModuleMethod *method = [[WXModuleMethod alloc] initWithModuleName:moduleName methodName:methodName arguments:arguments instance:instance];
        if(![moduleName isEqualToString:@"dom"] && instance.needPrerender){
            [WXPrerenderManager storePrerenderModuleTasks:method forUrl:instance.scriptURL.absoluteString];
            return nil;
        }
        return [method invoke];
    }];

在WXModuleMethod中可以看到-(NSInvocation *)invoke这个方法，Moudle 中的方法将会通过这个方法被 invoke

        ...
    
    Class moduleClass =  [WXModuleFactory classWithModuleName:_moduleName];
    if (!moduleClass) {
        NSString *errorMessage = [NSString stringWithFormat:@"Module：%@ doesn't exist, maybe it has not been registered", _moduleName];
        WX_MONITOR_FAIL(WXMTJSBridge, WX_ERR_INVOKE_NATIVE, errorMessage);
        return nil;
    }
    
    id<WXModuleProtocol> moduleInstance = [self.instance moduleForClass:moduleClass];
    WXAssert(moduleInstance, @"No instance found for module name:%@, class:%@", _moduleName, moduleClass);
    BOOL isSync = NO;
    SEL selector = [WXModuleFactory selectorWithModuleName:self.moduleName methodName:self.methodName isSync:&isSync];
   
    if (![moduleInstance respondsToSelector:selector]) {
        // if not implement the selector, then dispatch default module method
        if ([self.methodName isEqualToString:@"addEventListener"]) {
            [self.instance _addModuleEventObserversWithModuleMethod:self];
        } else if ([self.methodName isEqualToString:@"removeAllEventListeners"]) {
            [self.instance _removeModuleEventObserverWithModuleMethod:self];
        } else {
            NSString *errorMessage = [NSString stringWithFormat:@"method：%@ for module:%@ doesn't exist, maybe it has not been registered", self.methodName, _moduleName];
            WX_MONITOR_FAIL(WXMTJSBridge, WX_ERR_INVOKE_NATIVE, errorMessage);
        }
        return nil;
    }
    
    [self commitModuleInvoke];
    NSInvocation *invocation = [self invocationWithTarget:moduleInstance selector:selector];
    
    if (isSync) {
        [invocation invoke];
        return invocation;
    } else {
        [self _dispatchInvocation:invocation moduleInstance:moduleInstance];
        return nil;
    }

先通过 WXModuleFactory 拿到对应的方法 Selector，然后再拿到这个方法对应的 NSInvocation ，最后 invoke 这个 NSInvocation。对于 syncMethods 和 asyncMethods 有两种 invoke 方式。如果是 syncMethod 会直接 invoke ，如果是 asyncMethod，会将它派发到某个指定的线程中进行 invoke，这样做的好处是不会阻塞当前线程。到这里 Moudle 的大概的运行原理都清楚了，不过还有一个问题，Moudle 的方法是怎么暴露给 Vue 的呢？
在 Moudle 中我们通过 Weex 提供的宏可以将方法暴露出来：

#define WX_EXPORT_METHOD(method) WX_EXPORT_METHOD_INTERNAL(method,wx_export_method_)
#define WX_EXPORT_METHOD_SYNC(method) WX_EXPORT_METHOD_INTERNAL(method,wx_export_method_sync_)

分别提供了 syncMethod 和 asyncMethod 的宏，展开其实是这样的

#define WX_EXPORT_METHOD_INTERNAL(method, token) \
+ (NSString *)WX_CONCAT_WRAPPER(token, __LINE__) { \
    return NSStringFromSelector(method); \
}

这里会自动将方法名和当前的行数拼成一个新的方法名，这样做的好处是可以保证方法的唯一性，例如 WXDomModule 中的 createBody: 方法利用宏暴露出来，最终展开形式是这样的

+ (NSString *)wx_export_method_40 { \
    return NSStringFromSelector(createBody:); \
}

在WXInvocationConfig中调用- (void)registerMethods注册方法的时候，首先拿到当前 class 中所有的类方法（宏包装成的方法，并不是实际要注册的方法），然后通过判断有无wx_export_method_sync_前缀和wx_export_method_前缀来判断是否为暴露的方法，然后再调用该类方法，获得最终的实例方法字符串

method = ((NSString* (*)(id, SEL))[currentClass methodForSelector:selector])(currentClass, selector);

拿到需要注册的实例方法字符串，再将方法字符串注册到WXInvocationConfig的对应方法 map 中。

3. 组件：Handlers

Handlers 的注册和使用非常简单，直接将对应的 class 注册到 WXHandlerFactory map中

[[WXHandlerFactory sharedInstance].handlers setObject:handler forKey:NSStringFromProtocol(protocol)];

需要使用的时候也非常简单粗暴，通过WXHandlerFactory的方法和相应的 protocol

+ (id)handlerForProtocol:(Protocol *)
{
    id handler = [[WXHandlerFactory sharedInstance].handlers objectForKey:NSStringFromProtocol(protocol)];
    return handler;
}

直接拿出即可。