Mars 解析：原理和架构设计

date: 2019-07-04 10:00:01

author: zhangwentao

本文基于 Mars 开源 0.2.x 版本。

Mars 是一个 Vue 驱动的，支持小程序和 H5 同构开发的多端开发框架，主要解决的问题是通过流行的现代化开发方案支持小程序和 H5 同构开发，提升开发效率。

在框架设计时我们分析了小程序现有的开发模式，与主流的前端开发框架 React/Vue 的开发模式对比之后，发现存在一些不足。考虑到学习成本、工程化、生态完善度和扩展能力、业务场景等原因，选择了基于 Vue 框架和技术栈，采用 Vue 单文件组件开发模式和模板语法来书写代码，通过统一的开发规范、多平台编译和运行时适配来实现一套代码在不同平台的同构开发和运行。

多端架构

要实现一套代码运行在不同的端，需要能在多端执行同一套逻辑层代码，视图层以及驱动视图层的接口和能力需要能对齐和抹平。除了核心的视图层驱动能力，多端的差异还主要包括端能力（API）的差异，内置组件的差异。

Mars 需要优先实现的目标是支持小程序端和 H5 端，由于小程序与 Vue 同样是 MVVM 的视图驱动模式，支持类似的视图层驱动能力（如 Filter 等），用 Vue 技术栈来支持同构开发具备了可行性。

整个系统主要包括以下几个部分：

1、开发模式（SFC 及编译）

2、视图层模板和驱动能力（视图模板、视图层能力适配）

3、运行时框架（App 框架、核心组件化能力、路由、Tabs、Page钩子等）

4、生命周期和函数钩子

5、内置组件和内置 API

用 Vue 驱动小程序

核心是视图层模板和能力，以及逻辑层的运行时特性及其驱动视图层的能力的适配。

在 web 上，Vue 通过 VNode 来抽象虚拟 DOM 及组件，通过 patch 方法来高效的更新 DOM 和实现组件化，视图需要用到的数据存在与 Vue 实例上（部分在 VNode 上）；在小程序里，需要通过小程序 Page/Component 实例驱动模板来控制视图，小程序也有自己的组件化机制，需要实现将小程序实例 与 Vue 实例绑定（部分特性也需要将小程序视图模板与 VNode 关联）来实现 Vue 驱动小程序。

在实例绑定基础上，来实现事件代理、数据同步和生命周期映射等。对于 Page 实例的绑定比较简单，可以作为根实例直接创建（如下图）；而对于组件实例则较为复杂（因为需要协调两套组件化系统，将会在后续文章中详细解析，敬请期待）。

H5 同构及多端适配

H5 同构主要是支持小程序同构的运行时框架、生命周期和函数钩子以及内置组件和内置 API。

对于多端不同逻辑的适配，有几种适配方案：

1、条件编译（已支持） 其中模板中的条件编译支持自动移除没用用到的组件的引用。

2、多端接口文件（计划中） 如 module.swan.js / module.h5.js、components.swan.vue / components.h5.vue

编译构建

Mars 框架对于多端的构建产物有所差异，但是主要的编译流程是类似的，由于考虑到编译到小程序多文件结构，不涉及打包等复杂构建功能，H5 的构建产物是标准的 Vue 项目，会经过 Vue-cli 打包构建，对于 Mars 框架也没有打包的需求，所以选用了轻量级的工具 gulp 来管理构建任务。

主要是以下几部分：

1、SFC 解析（vue-template-compiler）

2、template 编译（vue-template-compiler/vue-template-es2015-compiler）

3、script 编译（babel）

4、style 编译（postcss、less、sass、stylus）

另外还有几个独立的编译模块，包括：

1、资源文件的复制和编译；

2、多端运行时代码（@marsjs/core）的打包编译；

编译流程

附

Github: https://github.com/max-team/Mars
官网文档: https://max-team.github.io/Mars/