前言

在前端开发中，封装函数是一种关键的实践，它能帮助我们更有效地管理代码、提高代码复用性和可维护性。

一个转换单位的工具函数

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}}