zoukankan      html  css  js  c++  java
  • [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
  • 相关阅读:
    正则表达式
    正则表达式-量词
    正则表达式-字符组
    6月学习总结
    利用Magick和gs实现pdf到jpg的转换
    NGS Antenna Calibrations
    VS2017运行旧版本下的C程序工程
    C#.NET SQLite自适应32位/64位系统
    RAID1环境下外挂第三块硬盘
    修复 Fontconfig Error
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6161182.html
Copyright © 2011-2022 走看看