多If函数封装的策略

        在工作中我们经常遇到有多个if的判读函数,这是一件很正常的事情,如下:

let order = function (orderType, isPay, count) {
  if (orderType === 1) {
    // 充值 500
    if (isPay === true) {
      // 充值成功
      console.log('中奖100元')
    } else {
      if (count > 0) {
        console.log('抽到10元优惠卷')
      } else {
        console.log('请再接再励!')
      }
    }
  } else if (orderType === 2) {
    // 充值 200
    if (isPay === true) {
      // 充值成功
      console.log('中奖20元')
    } else {
      if (count > 0) {
        console.log('抽到10元优惠卷')
      } else {
        console.log('请再接再励!')
      }
    }
  } else if (orderType === 3) {
    // 不充钱
    if (count > 0) {
      console.log('抽到10元优惠卷')
    } else {
      console.log('请再接再励!')
    }
  }
}

                但是在很多的时候里面的if的判断会包含很多方法和数据的处理,使一个函数经常会达到200行以上,那么有没有优化的方法呢?我们今天来看一看。

一、定义的策略

        言简意赅的说就是将每一个情况都第一个个方法,在需要的时候传入参数判断即可。

const strategy = {
  order500: function (isPay, count) {
    if (isPay === true) {
      // 充值成功
      console.log('中奖100元')
    } else {
      this.orderNoraml(isPay, count)
    }
  },
  order200: function (isPay, count) {
    // 充值 200
    if (isPay === true) {
      // 充值成功
      console.log('中奖20元')
    } else {
      this.orderNoraml(isPay, count)
    }
  },
  orderNoraml: function (isPay, count) {
    // 不充钱
    if (count > 0) {
      console.log('抽到10元优惠卷')
    } else {
      console.log('请再接再励!')
    }
  },
}

        然后在使用的时候传入值进行函数判断,即可返回需要的参数。

function orderFunc(orderType, isPay, count) {
  let orderTypeObj = {
    1: 'order500',
    2: 'order200',
    3: 'orderNoraml'
  };
   return strategy[orderTypeObj[orderType]](isPay, count);
}

orderFunc(1, true, 0)
orderFunc(1, false, 100)
orderFunc(2, true, 0)

二、责任链模式

        它的定义就是在你目前能够处理的情况进行处理,如果处理不了那么就到下一个函数,一直到可以处理的为止。

//原则:只处理单一模式,处理不了之后往后传
function order500(orderType, isPay, count) {
  if (orderType === 1 && isPay === true) {
      // 充值成功
      console.log('中奖100元')
    } else {
      order200(orderType, isPay, count)
    }
}

function order200(orderType, isPay, count) {
 // 充值 200
 if (orderType === 2 && isPay === true) {
      // 充值成功
      console.log('中奖20元')
    } else {
      orderNoraml(orderType, isPay, count)
    }
}

function orderNoraml(orderType, isPay, count) {
  // 不充钱
  if (count > 0) {
      console.log('抽到10元优惠卷')
    } else {
      console.log('请再接再励!')
    }
}

        调用方法只需要执行一个函数就行了

order500(1, true, 100)
order500(1, true, 100)
order500(2, true, 0)

三、函数式模式

        其实我感觉应该使第二种方法的精简版,使每一个方法都继承他的下一个方法,然后让他们相互调用,形成一个循环。

        方法的定义主要体现到next下一个方法。

function order500(orderType, isPay, count) {
  if (orderType === 1 && isPay === true) {
      // 充值成功
      console.log('中奖100元')
    } else {
      return 'next'
    }
}

function order200(orderType, isPay, count) {
 // 充值 200
 if (orderType === 2 && isPay === true) {
      // 充值成功
      console.log('中奖20元')
    } else {
      return 'next'
    }
}

function orderNoraml(orderType, isPay, count) {
  // 不充钱
  if (count > 0) {
      console.log('抽到10元优惠卷')
    } else {
      console.log('请再接再励!')
    }
}

        定义一个class类用来继承

class chain {
  constructor(fn) {
    this.fn = fn
    this.next = null
  }

  // 设置下一链条
  setNext(nextChain) {
    this.next = nextChain
  }

  // Run 起来
  passRequest() {
    console.log("this===>>",this)
    let res = this.fn.apply(this,arguments)
    if(res === 'next') {
      return this.next && this.next.passRequest.apply(this.next,arguments)
    }
    return res
  }
}

然后实现它,并且相互调用。

let order500Chain = new chain(order500)
let order200Chain = new chain(order200)
let orderNoramlChain = new chain(orderNoraml)

order500Chain.setNext(order200Chain)
order200Chain.setNext(orderNoramlChain)

order500Chain.passRequest(1, false, 100)

        是不是这种方法也很巧妙呢,在我们工作学习的过程中大家也可以试试把他们做成一个函数式的形式,一起加油吧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

arguments_zd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值