码迷,mamicode.com
首页 > Web开发 > 详细

[JS Compose] 1. Refactor imperative code to a single composed expression using Box

时间:2016-12-12 07:41:41      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:ati   val   stand   div   example   pre   box   str   oat   

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

标签:ati   val   stand   div   example   pre   box   str   oat   

原文地址:http://www.cnblogs.com/Answer1215/p/6161182.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!