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
  • 相关阅读:
    2020牛客暑期多校训练营(第三场)
    2020牛客暑期多校训练营(第二场)
    C# 获取枚举类型中所有描述信息 Xinner
    XPath Xinner
    02kubeadm安装
    thinkphp6:访问redis6(thinkphp 6.0.9/php 8.0.14)
    npm8.3.0 安装@vue/cli 4.5.15
    linux(ubuntu 21.10): php8.0.14:安装phpredis以访问redis(phpredis5.3.5)
    linux(ubuntu21.10):apt方式安装redis6.0.15
    阿里云何万青:南坡VS北坡,阿里云高性能计算行业实践
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6161182.html
Copyright © 2011-2022 走看看