# 数据控制层基类 Pilot.js

- [数据控制层基类 Pilot.js](#数据控制层基类-pilotjs)
  - [功能说明](#功能说明)
  - [引用方法](#引用方法)
  - [主要方法](#主要方法)
  - [创建页面合并对象](#创建页面合并对象)
    - [主要工作：生成合并对象](#主要工作生成合并对象)
    - [实际合并](#实际合并)
    - [页面能力扩展：跨页面通讯](#页面能力扩展跨页面通讯)
    - [页面能扩展：跨端通讯](#页面能扩展跨端通讯)
  - [转换静态图片引用](#转换静态图片引用)

## 功能说明

Pilot 是数据控制层的基类
- 将 Vue 对象的数据绑定、方法绑定、生命周期等功能拆分出来，进行独立申明（拆分后界面层管显示，数据控制层管数据流转） 
- 增加跨页通讯、键名转换等相关的能力
- 每个数据控制器都需要继承此类
- 子类实例化后，再将申明的内容合并回去

## 引用方法

```js
import {
    Pilot
} from '@components/bases/Pilot';
```

## 主要方法

```js
/**
 * 创建页面选项
 * @param {Object} [dataAdd] - 需要添加到 vue data 中的额外数据
 * @returns {Object} 页面选项对象
 */
createOptions(dataAdd = {}) {}

/**
 * 转换静态图片引用
 * @static
 * @param {Object} assets - 静态图片对象
 * @returns {Object} 转换后的静态图片对象
 */
static transAssets(assets = {}) {}
```

## 创建页面合并对象

`createOptions` 是类 Pilot 的核心方法，此方法将独立申明的信息合并回原 Vue 对象

### 主要工作：生成合并对象

* 扫描当前类，以 \$ 开头的属性或方法，去掉 \$ 符后，直接作为 Vue 的属性或方法准备合并
* 扫描当前类，非以 \$ 开头的方法，作为 Vue 对象申明中 methods 的子级方法准备合并
* 生成合并对象，用以进行合并

```js
// 数据控制器中，用 $ 开头的视为 Vue 属性或方法
export class PIndex extends Pilot {
    $data() {
        return {
            a: 1,
        };
    }
    $computed = {
        a2() {},
    };
    $mounted() {}
}

// 合并后的实际效果
const Component = Vue.extend({
    data() {
        return {
            a: 1,
        };
    },
    computed: {
        a2() {},
    },
    mounted() {},
});
```

```js
// 数据控制器中，非 $ 开头的，转到 methods 中
export class PIndex extends Pilot {
    onOpenSelector() {}
}

// 合并后的实际效果
const Component = Vue.extend({
    methods: {
        onOpenSelector() {},
    },
});
```

注意：不能在数据控制器中定义 $name、$components、$methods 这三项，因为实际合并时会覆盖

### 实际合并

数据控制层和界面层实际的合并，其实是写在界面层上  
由界面层实例化数据控制层，并使用其基类的 createOptions 方法生成选项，再合并进原 Vue 对象

```js
// 引入界面层对应数据控制器
import {
    PPageName
} from '@pilots/pilotGroup/PPageName';

export default {
    name: 'PageName',
    components: {},
    // 示例化数据控制器，由实例生成 Vue 选项，再展开合并到界面 Vue 对象上
    ...new PPageName().createOptions(),
};
```

### 页面能力扩展：跨页面通讯

Taro 的跨页面通讯能力，仅小程序可用，非小城不能跨页通讯非常不方便  
因此，使用 createOptions 创建合并对象时，给页面的 Vue 实例，增加了跨页面通讯的方法，兼容所有平台

**跨页发送：$poster**

此方法挂载到 vue 实例的 this 上

```js
this.$poster(direction, action, data);
```

| 参数名    | 类型   | 必填 | 描述                                                     |
| --------- | ------ | ---- | -------------------------------------------------------- |
| direction | String | 是   | 发送去向，有两个值，下一页'nextPage'、上一页'prevPage'） |
| action    | String | 是   | 动作名称                                                 |
| data      | any    | 否   | 携带数据                                                 |

例如：

```js
export class PList extends Pilot {
    onSaveSetting() {
        // 设置保存后，通知上页
        this.$poster('prevPage', 'settingChanged');
    }
}
```

**跨页接收：$onMessage**

此方法的用法，类似生命周期的钩子

```js
$onMessage(action, data) {}
```

例如：

```js
export class PIndex extends Pilot {

    $onMessage(action, data) {
        // 接收消息，设置已变更
        if (action === 'settingChanged') {
            // do something
        }
    }
}
```

### 页面能扩展：跨端通讯

当我们进混合 APP 开发时，我们需要与 java 层进行通讯，使用 createOptions 创建合并对象时，增加了跨通讯的能力

（更多跨端通讯明细待续）

## 转换静态图片引用

在目前项目体系设计下，由于不同项目（公众号、小程序、混合app）图片加载机制的不同，设置了一个统一的图片地址转换入口
* 移动端的图片不能使用背景，只能使用 image 图片元素
* 图片地址需经过静态方法 transAssets 转换而来
* createOptions 的参数 dataAdd 中，如果包含 assets 属性，会自动调用 transAssets 全部转换

例如：

```HTML
<template>
    <image :src="assets.homeNav1" mode="aspectFit" />
</template>
```

```js
export default {
    name: 'index',
    ...new PIndex().createOptions({
        // 首页菜单图片，会全部经过 transAssets 进行路径转换，转换为图片实际发布的地址
        assets: {
            homeNav1: 'assets/img/home-nav-01.png',
            homeNav2: 'assets/img/home-nav-02.png',
            homeNav3: 'assets/img/home-nav-03.png',
        },
    }),
};
```