null, undefined, '', '1970-01-01', 0, false, true 默认文案处理

291 阅读2分钟

前端工程师总是会面临各种细节的处理很繁琐又很无奈,比如面对后端返回的各种奇怪数据: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中制定不同的规则和默认文案