JsMapper - JavaScript 绘图助手
该组件通过可再用地图帮助将对象转换成相机. 其中一个主要用途是: 将 JSON API 响应转换为适当形式.
用法示例:
import JsMapper, { JsMap } from '@cmath10/js-mapper'
const mapper = new JsMapper()
.set('StudioPayload', new JsMap()
.route('name', '_name')
)
.set('FilmPayload', new JsMap()
.route('id', '_id')
.route('name', '_name')
)
.set('FilmCollectionPayload', new JsMap()
.route('studio', '_studio')
.filter('studio', 'StudioPayload')
.route('films', '_films')
.filter('films', '[FilmPayload]')
)
const collection = mapper.map('FilmCollectionPayload', {
_studio: { _name: 'Lucasfilm Ltd. LLC' },
_films: [{
_id: 1,
_name: 'Star Wars. Episode IV: A New Hope',
}, {
_id: 6,
_name: 'Star Wars. Episode III. Revenge of the Sith',
}],
})
结果是
{
"studio": { "name": "Lucasfilm Ltd. LLC" },
"films": [{
"id": 1,
"name": "Star Wars. Episode IV: A New Hope"
}, {
"id": 6,
"name": "Star Wars. Episode III. Revenge of the Sith"
}]
}
安装
yarn add @cmath10/js-mapper
或者说
npm i @cmath10/js-mapper
API 密码
JsMapper - 绘制对象的帮助类 :
import JsMapper from '@cmath10/js-mapper'
方法:
map(typeOrMap, source, destination = undefined)——将源对象映射到目的地对象,如果是目的地 未指定对象,它将被创建;您也可以提供映射实例,而不是使用映射类型 未经登记;set(type, map)按类型名称设置地图实例(如果类型名称尚未注册,则添加);get(type, clone = true)—— 按类型名称返回映射实例, 如果是旗帜clone设置将返回地图副本;unset(type)从映射器实例中按类型名称删除地图;
重要说明: 您可以以 map 方法,只需为单个对象注册地图
例如名称 MapTypeName 并使用如下方法: mapper.map('[MapTypeName]', %array of objects%)
JsMap - 地图类, 累积绘图信息 :
import { JsMap } from '@cmath10/js-mapper'
destination(destination)——定点工厂,默认工厂为() => ({})· ;route(destinationMember, sourceMember, fallback = undefined)- 按源成员设置路径提取器 成员可能是一条很深的路path.to.source.property;如果路径无法到达,并定义了后退, 后退将用作提取值;forMember(destinationMember, extractor)- 为目的地成员设置自定义提取器;filter(destinationMember, filter)- 为价值处理设置自定义过滤器;inject(destinationMember, injector)为目的地成员设置自定义注射器;exclude(destinationMember)- 从地图中删除目的地成员;clone()- 制作地图;
提取器
提取器用于从源取出值。 可用的提取器 :
import {
JsMapCallbackExtractor,
JsMapExtractor,
JsMapPathExtractor,
} from '@cmath10/js-mapper'
JsMap 外延显示器
JsMapExtractor 是基本的提取器类。 提取无,只是丢出一个错误( 如抽象类, 无
(执行)。 所有其他提取器应扩展这一类,并执行其 extract 方法.
JsMapPath 外部显示器
按属性路径提取源值 。 如果路径不合法, 则丢出一个错误, 且返回未定义 。 用于 默认.
JsMapCall Back 调用器
通过调用函数提取值, 如 (source: unknown) => unknown数字 :
const mapper = new JsMapper()
.set('Demo', new JsMap()
.forMember('text', new JsMapCallbackExtractor(source => source._text))
)
mapper.map('Demo', { _text: 'text' }) // { text: 'text' }
苏打:
const map = new JsMap()
.forMember('text', source => source._text)
过滤器
过滤器在注入目的地之前用于处理值. 可用的过滤器 :
import {
JsMapCallbackFilter,
JsMapFilter,
JsMapFilterChain,
JsMapMappingFilter,
} from '@cmath10/js-mapper'
JsMapFilter 地图
JsMapFilter 是基本的过滤类,默认使用,实际上只是返回源值. JsMapper
正在注入每个实例 JsMapFilter 因此,可以创建复杂过滤器
以嵌入式绘图处理链。 所有其他过滤器应扩展此类 .
JsMapCallBackFilter 页面存档备份,存于互联网
这是一个简单的过滤器正在使用调用函数来处理值:
const mapper = new JsMapper()
.set('Demo', new JsMap()
.route('text', 'text')
.filter('text', new JsMapCallbackFilter(value => {
if (typeof value === 'string') {
return value.toUpperCase()
}
throw new Error()
}))
)
mapper.map('Demo', { text: 'text' }) // { text: 'TEXT' }
回调函数被推定为 (value: unknown) => unknown。糖类:
const map = new JsMap()
.route('text', 'text')
.filter('text', value => {
if (typeof value === 'string') {
return value.toUpperCase()
}
throw new Error()
})
地图绘制 过滤器
此过滤器正在使用映射类型将映射应用到一个值( 已取消的映射机会) :
const mapper = new JsMapper()
.set('FilmPayload', new JsMap()
.route('id', '_id')
.route('name', '_name')
)
.set('Demo', new JsMap()
.route('film', '_film')
.filter('film', new JsMapMappingFilter('FilmPayload'))
)
mapper.map('Demo', { _film: {
_id: 1,
_name: 'Star Wars. Episode IV: A New Hope',
} }) // { film: { id: 1, name: 'Star Wars. Episode IV: A New Hope' } }
苏打:
const map = new JsMap()
.route('film', '_film')
.filter('film', 'FilmPayload')
JsMapFilter 钱
这种过滤器为创建过滤管道提供了机会:
const mapper = new JsMapper()
.set('FilmPayload', new JsMap()
.route('id', '_id')
.route('name', '_name')
.filter('name', new JsMapFilterChain([
new JsMapCallbackFilter(value => value.toUpperCase()),
new JsMapCallbackFilter(value => '<<' + value + '>>'),
]))
)
.set('Demo', new JsMap()
.route('film', '_film')
.filter('film', new JsMapFilterChain([
new JsMapMappingFilter('FilmPayload'),
new JsMapCallbackFilter(value => value.name)
]))
)
mapper.map('Demo', { _film: {
_id: 1,
_name: 'Star Wars. Episode IV: A New Hope',
} }) // { film: '<<STAR WARS. EPISODE IV: A NEW HOPE>>' }
苏打:
const mapper = new JsMapper()
.set('FilmPayload', new JsMap()
.route('id', '_id')
.route('name', '_name')
.filter('name', [
value => value.toUpperCase(),
value => '<<' + value + '>>',
])
)
.set('Demo', new JsMap()
.route('film', '_film')
.filter('film', ['FilmPayload', film => film.name])
)
喷出器
注射器用于向目的地物体注入已加工值。 可用注射器 :
import {
JsMapInjector,
} from '@cmath10/js-mapper'
JsMapInjector 是默认使用的基本注射器类。 它使用目的地成员名作为属性密钥.
如果属性为函数, 它将被用作设置器( 即以新目标调用 ) this 作为参数).
所有其他注射者应延长这一类.
比较示例 :
const mapper = new JsMapper()
.set('DatePayload', new JsMap()
.destination(() => new Date())
.route('setHours', 'hours')
)
mapper.map({ hours: 0 }).getHours() // 0
mapper.map({ hours: 1 }).getHours() // 1
自定义注射器示例 :
const mapper = new JsMapper()
.set('DatePayload', new JsMap()
.destination(() => new Date())
.route('hours', 'hours')
.inject('hours', new class extends JsMapInjector {
inject(destination, path, value): void {
destination.setHours(value)
}
})
)
mapper.map({ hours: 0 }).getHours() // 0
mapper.map({ hours: 1 }).getHours() // 1