model-adapter

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #go #rust #linux #nodejs #macos #java #windows #vue #pytorch #ios

(★ 22)

模型适配器

model-adapter 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# model-adapter

[![NPM version][npm-image]][npm-url] [![Build Status][ci-status-image]][ci-status-url] [![Coverage Status][coverage-status-image]][coverage-status-url] [![Known Vulnerabilities][vulnerabilities-status-image]][vulnerabilities-status-url] [![changelog][changelog-image]][changelog-url] [![license][license-image]][license-url]

[vulnerabilities-status-image]: https://snyk.io/test/npm/model-adapter/badge.svg
[vulnerabilities-status-url]: https://snyk.io/test/npm/model-adapter
[ci-status-image]: https://travis-ci.org/ufologist/model-adapter.svg?branch=master
[ci-status-url]: https://travis-ci.org/ufologist/model-adapter
[coverage-status-image]: https://coveralls.io/repos/github/ufologist/model-adapter/badge.svg?branch=master
[coverage-status-url]: https://coveralls.io/github/ufologist/model-adapter
[npm-image]: https://img.shields.io/npm/v/model-adapter.svg?style=flat-square
[npm-url]: https://npmjs.org/package/model-adapter
[license-image]: https://img.shields.io/github/license/ufologist/model-adapter.svg
[license-url]: https://github.com/ufologist/model-adapter/blob/master/LICENSE
[changelog-image]: https://img.shields.io/badge/CHANGE-LOG-blue.svg?style=flat-square
[changelog-url]: https://github.com/ufologist/model-adapter/blob/master/CHANGELOG.md

[![npm-image](https://nodei.co/npm/model-adapter.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.com/package/model-adapter)

模型适配器: 后端数据与前端数据的桥梁

专注于解决前端那些老生常谈的问题(没碰到过算你赢), 如果你遇到过以下场景, 请试用一下
- 嵌套数据: 哎呀\~报错了; 哦\~访问 xxx 为空了啊
- 空数据: 咦\~怎么没有头像; 哦\~需要一个默认头像啊
- 格式化数据: 诶\~要显示年月日; 但返回的数据是时间戳啊

## 初衷

在 `Vue` 或者其他视图层框架中, 如果直接使用如下插值表达式, 当嵌套对象(通常是后端返回的数据)中的某一层级为空时就会报错 `TypeError: Cannot read property 'xxx' of undefined`, **造成整个组件都无法渲染**.

```javascript
{{a.aa.aaa}}
```

为了解决这种问题, 让前端的视图层能够容错增强代码的健壮性, 我们可能要写出如糖葫芦一般的防御性代码, 例如这样 `{{a && a.aa && a.aa.aaa}}`, 要是再多嵌套几层, 简直不忍直视啊.

舒服一些的处理方式是通过 `object path get` 之类的库事先处理好数据, 形成前端的视图层模型, 尽量避免嵌套数据, 再到视图层中使用, 例如

```javascript
// 在视图中使用: {{aaa}}
var vm = {
    aaa: _.get('a.aa.aaa')
};
```

## 核心思路

建立一个新的模型, 通过设置**默认值来补齐**源数据(模型)上可能缺少的对象嵌套层次. 这样我们就能够以访问源数据一致的方式来访问新模型上的数据, 即可以理解为是对源数据的增强.

例如要访问源数据上的 `a.aa.aaa`, 如果源数据的 `a` 为 `null`, 那么我们直接访问肯定是会报错的.

因此我们可以准备一份默认数据, 来补齐源数据上可能缺失的数据.
* 当源数据上没有数据(`undefined` 或者 `null`)时, 模型返回默认数据上的数据
* 当源数据上有数据时, 模型返回源数据上的数据

```
新模型(target)                       源数据(source)          默认值(default)
{                                   {                       {
    a: {                        <─       a: null,       <─      a: {
        aa: {                                                       aa: {
            aaa: 'default-aaa'                                            aaa: 'default-aaa'
        }                                                           }
    },                                                          },
    b: 'source-b'               <─       b: 'source-b'          b: 'default-b',
    c: 'default-c'              <─                      <─      c: 'default-c'
}                                   }                       }
```

另外一种**映射**属性的实现思路可以参考[v0.0.1](https://github.com/ufologist/model-adapter/tree/v0.0.1)版本

--------

针对格式化数据的需求, 采取的思路为将属性改写为 `setter/getter`, 以输入和输出的概念来适配新模型上的属性
* `setter` 做为输入(input), 以源数据上的值为标准来接收数据
  * 例如源数据返回的字段值为时间戳, 那么我们设置属性值时, 始终设置为时间戳: `a.aa.aaa = 1566814067549`
* `getter` 做为输出(output), 将源数据做转换后返回我们需要的格式
  * 例如将时间戳格式化为日期字符串 `a.aa.aaa // 2019-08-26`

```javascript
// setter 时间戳
a.aa.aaa = 1566814067549 // 输入(input)
// getter 格式化
a.aa.aaa // 2019-08-26   // 输出(output)
```

保持输入和输出是有关联的因果关系
* `输入 -> 输出`: 因为有什么输入, 所以有什么输出, 类似函数式编程思维
* 输入是原始值, 由输入值推导出输出, 输入是对外的唯一接口

## 示例

### 嵌套数据/空数据: 用默认值来补齐(重点是补齐嵌套对象)