前端工程师总是会面临各种细节的处理很繁琐又很无奈,比如面对后端返回的各种奇怪数据:null, undefined, '', '1970-01-01', 0, false, true 等等各种不同的值,同时还会面临不同业务场景,不同页面下同一个null 不同的展示文案,以往都是直接 0 || '默认文案' 来处理。但是突然有一天产品经理说他想改其中20个页面的默认文案。前端工程师这个时候就会很发疯。笔者曾经也面临过这种情况,所以这里推荐一个可以统一修改,又比较灵活的npm包:dtext;
dtext
方便的给对象,字符串或者数字一个默认值
背景
在前端项目中经常会遇到一些默认值处理的情况, 本项目可以让你方便的统一设置规则来进行默认值的处理,即灵活又统一方便修改。
use
npm i dtext -S
const firstProxy2Default = new Proxy2Default('暂无'});
firstProxy2Default.proxyObj(undefined); //'暂无'
有时候你可能需要一些比较特殊的处理规则,比如你哪些特殊的值需要处理成为默认值通过includes,哪些特殊的值0, false不需要处理为默认值通过excludes
const firstProxy2Default = new Proxy2Default('暂无', { includes: ['0'], excludes: [0] });
firstProxy2Default.proxyObj({msg: '', id: 0, value: '0'}, {key: 'id'}); // 0
firstProxy2Default.proxyObj({msg: '', id: 0, value: '0'}, {key: 'msg'}); // '暂无'
firstProxy2Default.proxyObj({msg: '', id: 0, value: '0'}, {key: 'value'}); // '暂无'
Proxy2Default参数说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
第一个参数 | 第一个参数为字符串或者函数,如果是函数的返回值为默认值 | string|() => string | 无 |
options | 这里是一个可选对象 | object | 无 |
options的参数说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
includes | 里面的值会被替换为默认值 | string|number[] | 无 |
excludes | 这里的值不会被替换为默认值,常见0等你不想被替换为默认值的情况 | string|number[] | 无 |
proxyObj中参数说明
proxyObj(
obj: any,
options?: {
key?: string,
defaultText?: string|(() => string),
includes?: (string|number)[],
excludes?: (string|number)[],
}
)
proxyObj中的参数优先级高 会覆盖类中的参数!在某些特殊的页面 可能有着特殊的文案 你可以直接在proxyObj中制定不同的规则和默认文案