Слияние кода завершено, страница обновится автоматически
Введение
@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' }
Компиляция объектов также поддерживает глубокое вложение и все особенности, доступные для строк шаблона.
// Поддержка функций
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.
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();
Поскольку это глобальная настройка, она повлияет на приведённый выше пример, поэтому здесь она не демонстрируется.
Сначала рассмотрим следующий пример: нам нужно извлечь поля 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 }
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )