js下的策略模式demo

记一次demo

定义策略map

const STRATEGY_TYPE = {
    STRATEGY_A: 1,
    STRATEGY_B: 2,
    STRATEGY_C: 3
}

策略类

const STRATEGY_A = function () {}
STRATEGY_A.prototype.xxxMethod = async function (params) {
	// 具体策略逻辑
    return data
}

const STRATEGY_B = function () {}
STRATEGY_B.prototype.xxxMethod = async function (params) {
	// 具体策略逻辑
    return data
}

const STRATEGY_C = function () {}
STRATEGY_C.prototype.xxxMethod = async function (params) {
	// 具体策略逻辑
    return data
}

上下文

上下文中包含一些属性，可以其中包括具体的策略对象，和一些参数

const XXXContext = function () {
    this.strategy = null
    this.requestData = null
}

XXXContext.prototype.setStrategy = function (strategy) {
    this.strategy = strategy
}

// 如果需要参数也可以传入
XXXContext.prototype.setRequestData = function (requestData) {
    this.requestData = requestData
}

XXXContext.prototype.doXXX = async function () {
    return await this.strategy.xxxMethod(this.requestData)
}

策略的使用

以第一种策略为例

const context = new XXXContext()
// 设置策略
context.setStrategy(new STRATEGY_A())
// 设置参数
context.setRequestData(xxxData)
// 执行策略
let res = await context.doXXX()
// 处理结果

记一次vue下的demo

<script>标签内定义策略相关

策略类

class XxxStrategy {
  // vm 表示当前组件, data表示其他参数
  constructor(vm, data) {
    this.vm = vm
    this.data = data
  }

  async execute() {
    throw new Error('未实现方法')
  }
}

策略实现

class AStrategy extends ColumnStrategy {
  async execute() {
    // 具体实现逻辑
  }
}

class BStrategy extends ColumnStrategy {
  // 如果有定制化参数
  constructor(vm, data, otherParam) {
      super(vm, data)
      this.otherParam = otherParam
  }
  async execute() {
    // 具体实现逻辑
  }
}

上下文

function xxxStrategyContext(type, vm, data, otherParam) {
  switch (type) {
    case A:
      return new ActionColumnStrategy(vm, data)
    case B:
      return new NormalColumnStrategy(vm, data, otherParam)
    default:
      throw new Error('参数错误')
  }
}

组件方法内

策略的使用

const strategy = xxxStrategyContext(this.columnType, this, data, ?otherParam)
strategy.execute()