前端策略模式的应用场景

前端策略模式的应用场景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>策略模式</title>
  </head>
  <body>
    <script>
      /* 
        + 一个问题匹配多个解决方案,不一定要用到哪一个
        + 而且有问题随时还会继续增加多个方案
        + 例子：购物车结算
            => 满100 减10
            => 满200 减25
            => 打7折
            => 打8折

            1.把我们的多种方案,以闭包的形式保存起来
                + 按照传递进来的折扣和价格计算最终返回
            2.留下添加折扣和删除折扣的接口
             + 函数也是一个对象
             + 可以把函数名当作一个对象,向里面添加一些成员
         */

      const calcPrice = (function () {
        // 折扣对象
        const sale = {
          "100_10": function (price) {
            return (price -= 10);
          },
          "200_25": function (price) {
            return (price -= 25);
          },
          '70%': function (price) {
            return (price *= 0.7);
          },
        };

        function calcPrice(price, type) {

          //判断对象里面有没有这个折扣类型
          //如果有就执行,否则就提示没有这个折扣类型
          if (sale[type]) {
            return sale[type](price);
          } else {
            return "没有这个折扣";
          }
        };


        //把函数当一个对象,往里面添加成员
        calcPrice.add =function(type,fn){
            //判断这个折扣是否存在
            if(sale[type]){
                return '改折扣已经存在'
            }

            else { //将折扣添加到sale对象中
                sale[type] = fn;
                return '添加成功'

            }

            //被return 出去的函数才是calcPrice本体

        } 


         //删除一个折扣
         calcPrice.delete = function(type){
             delete sale[type]

         }
      
        return calcPrice

        
      })();


      const res = calcPrice.add('80%',function(price){
          return price *= 0.8
      })

      calcPrice.delete('100_10')

      const res2 =calcPrice(320,'100_10')
      console.dir(calcPrice);
     
    //   console.log(calcPrice(400,'80%'));

    //   console.log(res);
    //   console.dir(calcPrice);


      /* 
         const calcPrice =(function(){

            // 折扣对象
             const sale ={
                 '100_10':function(price){
                    return  price -= 10
                 },
                 '200_25': function(){
                    return  price -= 25

                 },
                 '70%':function(){
                    return  price *= 0.7

                 }

             }

             //被return 出去的函数才是calcPrice本体
             return function calcPrice(price,type){
                //  console.log(price,type);

                 //判断对象里面有没有这个折扣类型
                 //如果有就执行,否则就提示没有这个折扣类型
                 if(sale[type]){
                   return sale[type](price)
                 }
                 else {
                     return '没有这个折扣'
                 }


             }
         })()

      const res = calcPrice(100,'100_10'); */
      //   console.log(res);

      // 接受两个参数 价格和折扣种类
      // function calcPrice(price,type){
      //     if(type=="100_10"){
      //         price -= 10
      //     }

      //     else if(type=="200_25"){
      //         price -= 25

      //     }

      //     else if(type=="70%"){
      //         price *= 0.7

      //     }
      //     return price

      // }
    </script>
  </body>
</html>