# 数据控制层基类Pilot

类 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(),
};
```

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

给实际 Vue 实例增加了

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