多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)

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

猜你喜欢

转载自blog.csdn.net/qq_43185384/article/details/129126031