美团外卖前端容器化演进实践( 二 ) _美团

1.1 概念解释
在容器化框架设计过程中，我们引入了一些新的定义，比如在Android端引入了Block的概念，这里的Block是一个功能模块的简称。在提单页页面中，我们可以理解为一个Block对应一个功能条目。在IOS端有与之对应的概念Element（由于两者没有差异，下文陈述中用Block代指两者）。

文章插图

Block有两种类型：其一是普通的Block，其包含BlockView（视图层）和BlockViewModel（数据层）。BlockView（视图层）用来展示具体的视图以及内部的业务逻辑；BlockViewModel（数据层），用来数据解析。其二是LogicBlock，是没有视图的Block，单纯地用来做数据业务处理。
1.2 整体概述

文章插图

在容器化之前，我们的业务大多是模块化的结构，模块化宿主类是承载所有模块化的管理类，各个模块之间通过宿主类或者控制器进行数据交互。但在容器化改造中，我们将之前宿主类中管理的模块进行拆解，并重新定义了宿主类的职责。在容器化宿主类中，我们将不再持有各个功能模块的引用，而只要持有Root Block这一个实例，就可以完成对所有功能模块的管理。而Root Block Context则用来处理父Block与子Block之间的通信以及子Block之间的通信。
1.3 核心功能

文章插图

第一部分功能节点扩展及通信功能。主要是目前页面的集成和通信关系，其中Root Block是Block Tree的根节点，下面会挂载一些SubBlock子节点，Root Block会控制整体的数据流的分发以及整体样式；Root Block Context可以理解为上下文环境或通信的总线。每个模块都有自己的Context，来维护自己向外部提供数据以及业务逻辑的能力，这些子Context会统一注册到Root Context中进行管理维护。

文章插图

第二部分可配置化功能。在发起数据请求成功之后，客户端根据注册的Key以及接收到的数据，动态创建Block的容器化能力。遍历解析数据以及配置文件，先动态创建viewModel，将创建好的viewModel绑定到生成的Block模块上，动态添加到Root Block中。多业务方在完全不用相互感知的情况下，完成对新增模块的开发。

文章插图

第三部分数据分发。既将解析之后的数据，由Root Block节点进行数据分发到各个子Block，各子Block的BlockViewModel在更新数据之后并回传到Block中，Block用更新后的数据更新View的展示。其中，数据可以自动完成分发，也可以手动的接管数据流进行相应的处理。
2. Block注册问题
2.1 Android 注册的设计方案
Android 是在编译时期，通过APT（注解处理器）的方式，将在指定模块上的注解信息和Block类关联起来，生成Block类对应的工厂类，然后将这些工厂类存在全局的Map集合中，并在运行时进行初始化操作。
@DynamicBinder(nativeId = "block_key_d", viewModel = blockDViewModel.class, modelType = blockDInfo.class)NativeID是用来标识Block块的唯一Key，viewModel是用来绑定View视图的数据层，modelType对应着API的数据Model 。
2.2 iOS 注册的设计方案
iOS使用Kylin注册，Kylin是美团平台开发的基建库，利用Clang提供的section()函数，在编译时Kylin将{kylin_Key,kylin_Data}格式的数据写入到可执行文件的特定数据段中，运行期就可以通过读取指定的Key值获取相应的数据。使用这种方式，注册代码分散在每个组件内部。注册内容：组件native_id、Element名称、viewModel，其含义同上。

文章插图

注册宏：
#define PGA_ELEMENT_REGISTER(NATIVE_ID, PGA_ELEMENT, PGA_VIEW_MODEL)KLN_STRING_EXPORT("AppKey_"#NATIVE_ID"", "{ ""#PGA_VIEW_MODEL"" : ""#PGA_ELEMENT""}");3. API数据结构化
由于API下发数据的不规范性，需要将数据按照data_key这种数据模式的方式进行整理，然后在获取数据之后，按照规则进行数据解析并创建相应的功能Block 。
目前API数据返回的格式：
{ "data":{ "xxx_pay_by_friend": true, "xxx_by_friend_tip": "发给微信好友，让TA买单", "xxx_by_friend_bubble_desc": "找微信好友买单", "xxx_friend_order": false } "code":0, "msg":""}