前端佬们，装起来！给设计模式【祛魅】

已经有一段时间懵的状态，也确实不知道写啥~现在满屏的都是LLM（大语言模型）的新闻，让前端佬（我）瑟瑟发抖。

以后拼啥呢？

拼能装！

论人类装X，AGI来也得服！

今天就跟前端佬们装一波，搞一搞设计模式。

1. 工厂模式

论起工厂模式，其实各位前端佬真的完全可以BS。看下面示例

js 复制代码

function 摸鱼(){
   switch(type){
      case 1 :
        return new 看掘金();
        break;
      case 2 :
         return new 打游戏();
        break;
      case 3 :
         return new 听音乐();
        break;
      case 4 :
         return new 扒新闻();
        break;
      case 5 :
         return new 蹲坑();
        break;
       default:
         reutrn new 干瞪眼();
   }
}

上面函数就是用工厂模式。但如果要是下面这么写，又不算是工厂模式了。

js 复制代码

function 摸鱼(type){
   switch(type){
      case 1 :
        看掘金();
        break;
      case 2 :
         打游戏();
        break;
      case 3 :
         听音乐();
        break;
      case 4 :
        扒新闻();
        break;
      case 5 :
         蹲坑();
        break;
       default:
         干瞪眼();
   }
}

其实工厂模式是那些静态类型语言，创建对象时，不需要那么频繁的写new xxx，而且也能够将一些同业务的类封装一起，达到在使用时对创建一个对象的依赖，遵循依赖倒置原则。

咋样。够装了吧~

2. 单例模式

单例其实最简单。中间思想就是，不管你怎么调用，只会创建一个，有且只有一个。上代码：

js 复制代码

window["摸鱼"] = {
    看掘金:function(){
        console.log('涨知识')
    }
}

JavaScrip实现单例就是这么骚气。做的高级点，现在可以做一些属性保护，只能通过方法来改变他。

js 复制代码

// 深度代理增强版 --- 注：AI编写
const createDeepProxy = (obj, check) => {
  return new Proxy(obj, {
    set(target, prop, value) {
      if (typeof value === 'object' && value !== null) {
        value = createDeepProxy(value, check)
      }
      return check(target, prop, value)
    },
    get(target, prop) {
      const value = Reflect.get(target, prop)
      if (typeof value === 'object' && value !== null) {
        return createDeepProxy(value, check)
      }
      return value
    }
  })
}

3. 策略模式

这种模式，在JavaScrip写法中可谓是遍地开花。举列如下：

js 复制代码

const  摸鱼 = {
    看掘金:function(){
        console.log('涨知识')
    },
    蹲坑:function(){
        console.log('脚麻')
    },
    打游戏:function(){
        console.log('手酸')
    }
}

策略模式的官方定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。说实话，完全看不懂。我理解的策略模式，就是能把一些毫不关联的业务都能集合在一起，方便集合管理和调用。这里见仁见智了~

4. 装饰者模式

一提起这个模式，我就有点忍不住想笑。先来例子：

js 复制代码

function 屎山代码(){
// 里面一万行代码
}
屎山代码() // =>完成了【摸鱼】功能

假设上面的屎山代码函数，主要实现了一个摸鱼功能。后面来了一个要求，需要让这个函数再实现【干人】功能。面对这种情况，咱肯定不能改代码啊！一定得往里面再加代码。

js 复制代码

function _new屎山代码(){
    屎山代码()
    干人()
}
_new屎山代码() // =>完成了【摸鱼】【干人】功能

完美，这就是传说中装饰者模式。

WOW~已经写了好多了。有机会再侃侃其它的。上面只是举例了几个设计模式侃侃，没有那么重视形式，但自认为精髓都在。

欢迎各位大佬讨论~

也欢迎各位大佬不吝指教~~我一定改~~