代码拉取完成,页面将自动刷新
@dream2023/data-mapping
通过抽离并融合 vue 2
中的表达式解析能力,以及自身的数据映射能力,形成了小巧而功能完善的表达式和对象解析引擎。
yarn add @dream2023/data-mapping # npm install -S @dream2023/data-mapping
import { compilerStr, dataMapping } from '@dream2023/data-mapping';
compilerStr('{{name}}', { name: 'jack' }); // "jack"
dataMapping(
{ username: '{{ info.name }}', address: '{{ address }}' },
{ info: { name: '夏洛克福尔摩斯' }, address: '伦敦贝克街221号' }
); // { username: '夏洛克福尔摩斯', address: '伦敦贝克街221号' }
compilerStr('{{name}}', { name: 'jack' }); // "jack"
compilerStr
接受两个参数,第一个参数为需要编译的字符串模板,第二个参数为数据对象,字符串模板会根据数据对象编译出相应的结果。
compilerStr('{{firstName}} -- {{lastName}}', {
firstName: 'jack',
lastName: 'li'
}); // "jack --- li"
它不仅可以作为单个变量的取值,还可以是多个变量组成的字符串。
compilerStr("{{ok ? 'YES' : 'NO'}}", { ok: true }); // "YES"
compilerStr("{{message.split('').reverse().join('')}}", {
message: 'are you ok?'
}); // "?ko uoy era"
不仅可以取值,内部还可以使用表达式。
compilerStr(
'My name is {{name}}. I live in {{address.area}}, {{address.city}}',
{
name: 'jack',
address: {
city: 'Shenzhen',
area: 'Nanshan'
}
}
);
@dream2023/data-mapping
不仅提供了对字符串的编译,还提供了对对象的编译。
dataMapping(
{ username: '{{name}}', password: '{{pwd}}' },
{ name: 'jack', pwd: 'helloworld' }
); // { username: 'jack', password: 'helloworld' }
当然,其也是支持深度嵌套,以及上述 compilerStr
所有特性。
// 支持函数
dataMapping(
{
country(data: any) {
return data.address.split('-')[0];
},
province(data: any) {
return data.address.split('-')[1];
}
},
{ address: 'china-guangzhou' }
); // { country: 'china', province: 'guangzhou' }
过滤器是对数据映射的一种增强,它的作用是对获取数据做一些处理,其用法同 vue2 中的过滤器:
{{ message | filterA | filterB }}
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();
如果你觉得默认的分隔符不符合你的习惯,可以更改分隔符,具体如下:
import {
compilerStr,
setDelimiters,
clearDelimiters
} from '@dream2023/data-mapping';
// 设置分隔符
setDelimiters(['${', '}']);
// 使用
compilerStr('My Name is ${name}', { name: 'Jack' });
// 当然,设置后也可以清除
clearDelimiters();
因为是全局设置,会影响上述 DEMO,所以这里就不做演示了。
我们首先看下面示例,我们需要将 longitude
和 latitude
从 loc
字段中抽离到上一层级,我们就需要下面这样写 👇:
dataMapping(
{
name: '{{name}}',
longitude: '{{loc.longitude}}',
latitude: '{{loc.latitude}}'
},
{
name: 'jack',
loc: { longitude: 118.366899, latitude: 40.90281 }
}
); // { name: 'jack', longitude: 118.366899, latitude: 40.90281 }
其实两个字段还好,如果属性非常多的时候就比较麻烦,此时我们可以通过 $
便捷的实现展开:
dataMapping(
{
name: '{{name}}',
$: '{{loc}}'
},
{
name: 'jack',
loc: { longitude: 118.366899, latitude: 40.90281 }
}
); // { name: 'jack', longitude: 118.366899, latitude: 40.90281 }
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型