策略模式+proxy 模式 解耦 if

MartinYin
1,444 阅读3分钟

前言

大家在开发的时候应该经常遇到if else 判断吧? 很常见得判断。


if(x == 100) {
    console.log(100)
} else if (x == 200) {
    console.log(200)
}

过两天 领导过来跟你沟通了下新的需求，你发现需要改下if 判断,然后要加more and more得业务操作 

if(x == 1) {
   console.log(1)
} else if (x == 2) {
    console.log(2)
} else if(x == 3) {
    ...
    console.log(3)
    ...
    ...
    ...
    ...
    ...
    ...
    ...
    ...
}

有个问题 如果领导要各种骚操作，我们只能不停的满足他的骚操作添加更多的if 判断……

这会导致我们的if 函数过长，if 内得业务非常多的话, 时间一长，我保证你都不想看这个if 判断。

修改？你可以试试，不怕炸了你可以试试嘛……/斜眼笑

重构

函数抽离

有些同学可能认为，if 多就多吧，那就把if 判断里 做一次抽离。

const xTypeOne = () => {
    console.log(1)
}

const xTypeTwo = () => {
  console.log(2)
}

const xTypeThree = () => {
  console.log(3)
}

if(x == 1) {
   xTypeOne();
} else if (x == 2) {
   xTypeTwo()
} else if(x == 3) {
   xTypeThree()
}

不错不错，这样子，if 简洁很多，业务都在各自得函数中处理了。鼓掌。

策略模式解耦

咱们也可以配合上策略模式处理，策略模式其实比较简单，我们先了解下策略是啥意思。

策略 指计策；谋略。一般是指：

  1. 可以实现目标的方案集合；
  2. 根据形势发展而制定的行动方针和斗争方法；
  3. 有斗争艺术，能注意方式方法。

重点: 在于实现目标的方案集合

const xTypeOne = () => {
    console.log(1)
}

const xTypeTwo = () => {
  console.log(2)
}

const xTypeThree = () => {
    console.log(3)
}

// 把所有的方法都放到 xType 中。
const xType = {
    "1": xTypeOne,
    "2": xTypeTwo,
    "3":xTypeThree,
}

xType["1"]();  // 1
xType["2"]();  // 2
xType["2"]();  // 3

以后需要添加或者修改，只需要专注于 xType 这个对象就完事了。

思考下


if(x == 1) {
   xTypeOne();
} else if (x == 2) {
   xTypeTwo()
} else if(x == 3) {
   xTypeThree()
} else {

}

虽然我们用 策略模式实现了解耦，但是 最后一个else 我们该咋处理呢？用策略模式的话那套好像没办法去处理。

proxy 代理 + 策略模式

proxy 同学们就算没用过应该也了解过把？ 啥不会？没关系，看完这篇文章保你会用。

现代化JavaScript教程 Proxy 和 Reflect

proxy 定义：

一个 Proxy 对象包装另一个对象并拦截诸如读取/写入属性和其他操作，可以选择自行处理它们，或者透明地允许该对象处理它们。

const xTypeOne = () => {
    console.log(1)
}

const xTypeTwo = () => {
  console.log(2)
}

const xTypeThree = () => {
    console.log(3)
}

const notFind = () => {
    console.log("notFind")
}

let xType = {
    "1": xTypeOne,
    "2": xTypeTwo,
    "3":xTypeThree,
    "not": notFind,
}

let xTypeProxy = new Proxy(xType, {
    get(target, phrase) {
      if (phrase in target) {
        return target[phrase];
      } else {
        return target["not"];
      }
    }
});

xTypeProxy['1']()  // 1
xTypeProxy['2']()  // 2
xTypeProxy['3']()  // 3

xTypeProxy['4']()  // notFind

为什么要这么做？

为啥要写那么多代码去处理那么简单的功能？ 原本的小功能只需要几个if 就完事了。

你这又加入 策略模式又加proxy 是不是装逼？


原本的代码

if(x == 1) {
   console.log(1)
} else if (x == 2) {
    console.log(2)
} else if(x == 3) {
    ...
    console.log(3)
    ...
} else {
    
}

修改后 

const xTypeOne = () => {
    console.log(1)
}

const xTypeTwo = () => {
  console.log(2)
}

const xTypeThree = () => {
    console.log(3)
}

const notFind = () => {
    console.log("notFind")
}

let xType = {
    "1": xTypeOne,
    "2": xTypeTwo,
    "3":xTypeThree,
    "not": notFind,
}

let xTypeProxy = new Proxy(xType, {
    get(target, phrase) {
      if (phrase in target) {
        return target[phrase];
      } else {
        return target["not"];
      }
    }
});

xTypeProxy['1']()  // 1
xTypeProxy['2']()  // 2
xTypeProxy['3']()  // 3

xTypeProxy['4']()  // notFind

我见过一个php项目 4个支付宝插件(我也不知道为啥要4个插件)，2w行代码写在一个php文件中，到处都是ctrl + c ctrl + v得痕迹。当你要维护这个项目的时候你怎么处理？ 我是不敢修改这个项目的逻辑，只能按屎山得规则慢慢写下去。

如果当时写这个PHP项目得人，尽可能得把代码逻辑进行抽离，写的时候注意下复用，注意下后期需求拓展。那么后期自己维护，或别人接手维护，是否相对的轻松容易呢？

不好说……因为人是活得代码是死的。至少在写代码的时候不要坑了自己！最好将代码写得更简洁，更易维护！

avatar
文章
阅读
粉丝