前言
在前端开发中,封装函数是一种关键的实践,它能帮助我们更有效地管理代码、提高代码复用性和可维护性。
一个转换单位的工具函数
function setUnit(value,unit){
switch(unit){
case '白':
return value / 100 + unit;
case '千':
return value /1000 + unit;
case '万':
return value / 10000 + unit;
}
}
console.log(setUnit(1000,'千'))
如果有很多自定义单位 比如 百万 千万 亿之类的一直在stwich显然不方便
第一版 优化设计数据结构
const UnitMap ={
'百': 100,
'千': 1000,
'万': 10000,
}
function setUnit(value,unit){
return value / UnitMap[unit] + unit
}
console.log(setUnit(1000,'千'))
第二版 可扩展性
但是新增单位还是需要自己维护
我们可以给需要给用函数的人自定义
function setUnit(value,unit,customUnit){
//如果是内置的单位里没有的,那新增,如果有了,那就修改
const finalUnit = {
...UnitMap,
...customUnit
}
//如果是其他换算 比如多少万元是多少元 明显可以扩展
//可以让custonUnit中的改成函数 让用户自己定义规则
const UnitFn = finalUnit[unit]
if(typeof UnitFn === 'function'){
return UnitFn(value)
}
return value / finalUnit[unit] + unit
}
第三版 记忆功能
如果每次调用函数 都需要转成千,那么就会多很多这种代码
console.log(setUnit(10000,'千'));
console.log(setUnit(20000,'千'));
console.log(setUnit(30000,'千'));
console.log(setUnit(40000,'千'));
console.log(setUnit(50000,'千'));
我们可以调用一次直接搞成默认 直到需要新的单位
let defaultUnit = '千'
function setUnit(value,unit,customUnit){
//如果是内置的单位里没有的,那新增,如果有了,那就修改
const finalUnitMap = {
...UnitMap,
...customUnit
}
const finalUnit = unit ? defaultUnit = unit : defaultUnit
//如果是其他换算 比如多少万元是多少元 明显可以扩展
//可以让custonUnit中的改成函数 让用户自己定义规则
const UnitFn = finalUnitMap[finalUnit]
if(typeof UnitFn === 'function'){
return UnitFn(value)
}
return value / finalUnitMap[finalUnit] + finalUnit
}
如果你想记忆一些自定义单位
const unitMap ={
'百': 100,
'千': 1000,
'万': 10000,
}
function addUnit(customUnit){
unitMap = {
...unitMap,
...customUnit
}
}
程序的健壮性
就是处理一些边界条件 这也是TS的作用
function setUnit(value,unit,customUnit){
value = Number(value)
//例如
if(isNaN(value)){
console.warn('第一个参数必须为数字或数字字符串')
}
//如果是内置的单位里没有的,那新增,如果有了,那就修改
const finalUnitMap = {
...unitMap,
...customUnit
}
const finalUnit = unit ? defaultUnit = unit : defaultUnit
//如果是其他换算 比如多少万元是多少元 明显可以扩展
//可以让custonUnit中的改成函数 让用户自己定义规则
const UnitFn = finalUnitMap[finalUnit]
if(typeof UnitFn === 'function'){
return UnitFn(value)
}
return value / finalUnitMap[finalUnit] + finalUnit
}
最后总结
代码可读性和可维护性
用更合理的数据结构和代码结构
可扩展性
内置最常用的操作,留出参数让使用时可传入自定义
健壮性
对于一些可能会引起边界情况做出处理,主要针对参数
最终代码
const unitMap ={
'百': 100,
'千': 1000,
'万': 10000,
}
let defaultUnit = '千'
function setUnit(value,unit,customUnit){
value = Number(value)
if(isNaN(value)){
console.warn('第一个参数必须为数字或数字字符串')
}
//如果是内置的单位里没有的,那新增,如果有了,那就修改
const finalUnitMap = {
...unitMap,
...customUnit
}
const finalUnit = unit ? defaultUnit = unit : defaultUnit
//如果是其他换算 比如多少万元是多少元 明显可以扩展
//可以让custonUnit中的改成函数 让用户自己定义规则
const UnitFn = finalUnitMap[finalUnit]
if(typeof UnitFn === 'function'){
return UnitFn(value)
}
return value / finalUnitMap[finalUnit] + finalUnit
}
//这样就就可以记忆一个自定义单位
function addUnit(customUnit){
unitMap = {
...unitMap,
...customUnit
}
}