首页 > 代码库 > [JS Compose] 1. Refactor imperative code to a single composed expression using Box
[JS Compose] 1. Refactor imperative code to a single composed expression using Box
After understanding how Box is, then we are going to see how to use Box to refacotr code, to un-nested expression.
For example, we have code:
const moneyToFloat = str => { const cost = str.replace(/\$/g, ‘‘); return parseFloat(cost);}const percentToFloat = str => { const cost = parseFloat(str.replace(/\$/g, ‘‘));return cost * 0.01;}const applyDiscount = (price, prec) => { const cost = moneyToFloat(price); const p = percentToFloat(prec); return cost - cost * p;}const result = applyDiscount(‘$5.00‘, ‘20%‘)console.log(result) // 4
So how it would be when we using Box version:
const moneyToFloat = str => { const cost = str.replace(/\$/g, ‘‘); return parseFloat(cost);}const moneyToFloat = str => Box(str) .map(s => s.replace(/\$/g, ‘‘)) .map(s => parseFloat(cost))
Well, nothing really impress here, we put ‘str‘ into Box, and using map to do all the logic.
const percentToFloat = str => { const cost = parseFloat(str.replace(/\$/g, ‘‘)); return cost * 0.01;}const percentToFloat = str => Box(str.replace(/\$/g, ‘‘)) .map(s => parseFloat(s)) .map(s => s * 0.01)
This part, notice we un-nest ‘parseFloat(str.replace(...))‘, make logic more readable by using map.
const applyDiscount = (price, prec) => { const cost = moneyToFloat(price); const p = percentToFloat(prec); return cost - cost * p;}const applyDiscount = (price, prec) => moneyToFloat(price) .fold(cost => percentToFloat(prec) .fold(p => cost - cost * p))
Notice here, because ‘moneyToFloat‘ return a Box, so we are able to chain map on that.
And ‘cost‘, we can use clouse to remember ‘cost‘, and chain ‘fold‘ on precentToFloat. The reason we use ‘fold‘ instead of ‘map‘, is ‘fold‘ we can get value out of Box.
const Box = x =>({ map: f => Box(f(x)), fold: f => f(x), toString: () => `Box(${x})`})const moneyToFloat = str => Box(str) .map(s => s.replace(/\$/g, ‘‘)) .map(s => parseFloat(cost));const percentToFloat = str => Box(str.replace(/\$/g, ‘‘)) .map(s => parseFloat(s)) .map(s => s * 0.01);const applyDiscount = (price, prec) => moneyToFloat(price) .fold(cost => percentToFloat(prec) .fold(p => cost - cost * p))const result = applyDiscount(‘$5.00‘, ‘20%‘)console.log(result) // 4
[JS Compose] 1. Refactor imperative code to a single composed expression using Box
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。