JavaScript篇：设计模式：前端工程师的武功秘籍

未分类 3天前程序员胖胖胖虎阿

8 0 0

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

作为前端开发的老兵，我常常把设计模式比作武侠小说中的武功秘籍——它们不是银弹，但掌握后能让你的代码如行云流水，应对各种复杂场景游刃有余。今天，我就来和大家聊聊这些让代码更优雅的"武功心法"。

设计模式概览

设计模式大致可分为三大类：

创建型模式 ：解决对象创建的问题
结构型模式 ：处理对象组合
行为型模式 ：管理对象间的交互

下面我就挑几个在前端开发中最常用的模式，用通俗易懂的方式为大家讲解。

一、创建型模式

1. 单例模式（Singleton）

场景：全局唯一对象，比如全局状态管理、登录框等

```javascript
class AuthManager {
  constructor() {
    if (!AuthManager.instance) {
      this.user = null;
      AuthManager.instance = this;
    }
    return AuthManager.instance;
  }

  login(user) {
    this.user = user;
    console.log(`${user} 登录成功`);
  }
}

const auth1 = new AuthManager();
const auth2 = new AuthManager();

auth1.login('我'); // "我 登录成功"
console.log(auth1 === auth2); // true
```

2. 工厂模式（Factory）

场景：根据不同条件创建不同对象

```javascript
class UserFactory {
  static createUser(type) {
    switch(type) {
      case 'admin':
        return new Admin();
      case 'member':
        return new Member();
      default:
        throw new Error('未知用户类型');
    }
  }
}

class Admin {
  constructor() {
    this.role = '管理员';
  }
}

const me = UserFactory.createUser('admin');
console.log(me.role); // "管理员"
```

二、结构型模式

3. 装饰器模式（Decorator）

场景：动态扩展对象功能

```javascript
function withLogger(fn) {
  return function(...args) {
    console.log(`调用函数 ${fn.name}，参数:`, args);
    const result = fn.apply(this, args);
    console.log(`函数 ${fn.name} 返回值:`, result);
    return result;
  };
}

function sayHello(name) {
  return `Hello, ${name}!`;
}

const loggedSayHello = withLogger(sayHello);
loggedSayHello('我');

// 输出：
// 调用函数 sayHello，参数: ["我"]
// 函数 sayHello 返回值: "Hello, 我!"
```

4. 适配器模式（Adapter）

场景：接口转换，让不兼容的接口能够一起工作

```javascript
// 旧版API
class OldAPI {
  request() {
    return { data: { user: '我', age: 25 } };
  }
}

// 新版需要的格式
class NewAPIAdapter {
  constructor(oldAPI) {
    this.oldAPI = oldAPI;
  }

  fetch() {
    const oldData = this.oldAPI.request();
    return {
      name: oldData.data.user,
      age: oldData.data.age
    };
  }
}

const adapter = new NewAPIAdapter(new OldAPI());
console.log(adapter.fetch()); // {name: "我", age: 25}
```

三、行为型模式

5. 观察者模式（Observer）

场景：事件处理、状态变更通知

```javascript
class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log(`收到通知: ${data}`);
  }
}

const subject = new Subject();
const observer = new Observer();

subject.subscribe(observer);
subject.notify('我更新了状态'); // "收到通知: 我更新了状态"
```

6. 策略模式（Strategy）

场景：根据不同策略执行不同算法

```javascript
const strategies = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b
};

class Calculator {
  constructor(strategy) {
    this.strategy = strategy;
  }

  execute(a, b) {
    return this.strategy(a, b);
  }
}

const calc = new Calculator(strategies.add);
console.log(calc.execute(5, 3)); // 8

calc.strategy = strategies.multiply;
console.log(calc.execute(5, 3)); // 15
```

四、前端特别有用的模式

7. 模块模式（Module）

场景：封装私有变量和方法

```javascript
const myModule = (() => {
  let privateVar = '我是私有变量';

  function privateMethod() {
    console.log(privateVar);
  }

  return {
    publicMethod() {
      privateMethod();
    },
    setData(data) {
      privateVar = data;
    }
  };
})();

myModule.publicMethod(); // "我是私有变量"
myModule.setData('我修改了数据');
myModule.publicMethod(); // "我修改了数据"
```

8. 代理模式（Proxy）

场景：控制对象访问，如图片懒加载

```javascript
class ImageProxy {
  constructor(targetImage) {
    this.targetImage = targetImage;
    this.placeholder = 'loading.gif';
  }

  display() {
    const img = new Image();
    img.src = this.placeholder;
    document.body.appendChild(img);

    // 延迟加载真实图片
    setTimeout(() => {
      img.src = this.targetImage;
      console.log('图片加载完成');
    }, 1000);
  }
}

const proxy = new ImageProxy('my-photo.jpg');
proxy.display();
```

设计模式在前端框架中的应用

现代前端框架中随处可见设计模式的身影：

React中的高阶组件 ：装饰器模式
Vue的mixins ：策略模式
Redux ：观察者模式 + 单例模式
React Context ：提供者模式

如何选择合适的设计模式

在我的开发经验中，选择设计模式要考虑以下几点：

问题复杂度 ：简单问题不需要复杂模式
可维护性 ：模式应该让代码更清晰，而不是更复杂
团队熟悉度 ：选择团队熟悉的模式
性能影响 ：某些模式可能带来额外开销

记住： 不要为了用模式而用模式 。模式是工具，不是目标。

常见误区

过度设计 ：在简单场景使用复杂模式
```
```javascript
```
// 过度使用工厂模式
function createGreeting(type) {
switch(type) {
case 'hello':
return name => Hello, ${name};
case 'hi':
return name => Hi, ${name};
default:
return name => ${name};
}
}
// 其实直接写函数更简单
```
模式混用导致混乱 ：
```
```javascript
```
// 同时使用观察者和发布订阅模式解决同一个问题
// 选择一种就够了
```
忽略JavaScript特性 ：
```
```javascript
```
// 在JS中强行实现经典面向对象模式
// 有时候闭包等JS特性就能简单解决问题
```