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 代码。不过在注入这段代码之前会先注册一些默认的 ComponentModuleHandler这就是 Weex 与 Native 应用层交互最核心的部分,可以理解为“组件”。其中 Component 是为了映射 Html 的一些标签,Module 中是提供一些 Native 的一些方法供 Weex 调用,Handler 是一些协议的实现。

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

1. 组件:Component

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

1
2
3
4
5
6
7
8
9
10
11
12
[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:

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

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

1
2
3
4
5
6
{
methods = (
resetLoadmore
);
type = scroller;
}

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

1
2
3
4
5
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中的相关源码:

1
2
3
4
5
6
7
8
9
10
11
12
- (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是懒加载的,所以这些操作只会执行一次,具体请看精简后的源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
  [_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中更细致的看一下是怎么实现的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (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,他们的初始化方法都是

1
2
3
4
5
6
-(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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
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 中的方法会在这个回调中被唤起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[_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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
...

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 提供的宏可以将方法暴露出来:

1
2
#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 的宏,展开其实是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#define WX_EXPORT_METHOD_INTERNAL(method, token) \
+ (NSString *)WX_CONCAT_WRAPPER(token, __LINE__) { \
return NSStringFromSelector(method); \
}
```
这里会自动将方法名和当前的行数拼成一个新的方法名,这样做的好处是可以保证方法的唯一性,例如 `WXDomModule` 中的 `createBody:` 方法利用宏暴露出来,最终展开形式是这样的

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

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

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

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

3. 组件:Handlers

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

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

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

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

直接拿出即可。

0%