@dream2023/data-mapping

!npm version
!npm bundle size
!npm downloads
!NPM

介绍

@dream2023/data-mapping 通过抽离并融合 vue 2 中的表达式解析能力，以及自身的数据映射能力，形成了小巧而功能完善的表达式和对象解析引擎。

特点

- 体积小：源码 3Kb + 依赖 4Kb = 7Kb；
- 能力强：支持深度对象、自定义分隔符、自定义过滤器等；
- 稳定性高：测试覆盖率 100%。

快速上手

``bash
yarn add @dream2023/data-mapping # npm install -S @dream2023/data-mapping
`

`js
import { compilerStr, dataMapping } from '@dream2023/data-mapping';

compilerStr('{{name}}', { name: 'jack' }); // "jack"

dataMapping({
schema: { username: '{{ info.name }}', address: '{{ address }}' },
data: { info: { name: '夏洛克福尔摩斯' }, address: '伦敦贝克街221号' }
}); // { username: '夏洛克福尔摩斯', address: '伦敦贝克街221号' }
`

功能详解

$3

`js
compilerStr('{{name}}', { name: 'jack' }); // "jack"
`

compilerStr 接受两个参数，第一个参数为需要编译的字符串模板，第二个参数为数据对象，字符串模板会根据数据对象编译出相应的结果。

`js
compilerStr('{{firstName}} -- {{lastName}}', {
firstName: 'jack',
lastName: 'li'
}); // "jack --- li"
`

它不仅可以作为单个变量的取值，还可以是多个变量组成的字符串。

$3

`js
compilerStr("{{ok ? 'YES' : 'NO'}}", { ok: true }); // "YES"

compilerStr("{{message.split('').reverse().join('')}}", {
message: 'are you ok?'
}); // "?ko uoy era"
`

不仅可以取值，内部还可以使用表达式。

$3

`js
compilerStr(
'My name is {{name}}. I live in {{address.area}}, {{address.city}}',
{
name: 'jack',
address: {
city: 'Shenzhen',
area: 'Nanshan'
}
}
);
`

$3

@dream2023/data-mapping 不仅提供了对字符串的编译，还提供了对对象的编译。

`js
dataMapping({
schema: { username: '{{name}}', password: '{{pwd}}' },
data: { name: 'jack', pwd: 'helloworld' }
}); // { username: 'jack', password: 'helloworld' }
`

当然，其也是支持深度嵌套，以及上述 compilerStr 所有特性。

`js
// 支持函数
dataMapping({
schema: {
country(data: any) {
return data.address.split('-')[0];
},
province(data: any) {
return data.address.split('-')[1];
}
},
data: { address: 'china-guangzhou' }
}); // { country: 'china', province: 'guangzhou' }
`

$3

过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，其用法同 vue2 中的过滤器：

`
{{ message | filterA | filterB }}
`

#### 自定义过滤器

`js
import { setFilter, setFilters, clearFilters } from '@dream2023/data-mapping';

// 实现一个函数
const capitalize = (value) => {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
};

// 设置单个过滤器
setFilter('capitalize', capitalize);

// 设置多个过滤器
setFilters({ capitalize });

// 使用
compilerStr('{{ message | capitalize }}', { message: 'hello' }); // Hello

// 如果不想用过滤器，也可以清除
clearFilters();
`

$3

如果你觉得默认的分隔符不符合你的习惯，可以更改分隔符，具体如下：

`js
import {
compilerStr,
setDelimiters,
clearDelimiters
} from '@dream2023/data-mapping';

// 设置分隔符
setDelimiters(['${', '}']);

// 使用
compilerStr('My Name is ${name}', { name: 'Jack' });

// 当然，设置后也可以清除
clearDelimiters();
`

因为是全局设置，会影响上述 DEMO，所以这里就不做演示了。

$3

我们首先看下面示例，我们需要将 longitude 和 latitude 从 loc 字段中抽离到上一层级，我们就需要下面这样写 👇：

`js
dataMapping({
schema: {
name: '{{name}}',
longitude: '{{loc.longitude}}',
latitude: '{{loc.latitude}}'
},
data: {
name: 'jack',
loc: { longitude: 118.366899, latitude: 40.90281 }
}
}); // { name: 'jack', longitude: 118.366899, latitude: 40.90281 }
`

其实两个字段还好，如果属性非常多的时候就比较麻烦，此时我们可以通过 $ 便捷的实现展开：

`js
dataMapping({
schema: {
name: '{{name}}',
$: '{{loc}}'
},
data: {
name: 'jack',
loc: { longitude: 118.366899, latitude: 40.90281 }
}
}); // { name: 'jack', longitude: 118.366899, latitude: 40.90281 }
``

相关链接

- vue filters