javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js结构型设计模式

JavaScript 结构型设计模式使用场景分析

作者：艾光远

本文详解JS结构型设计模式,涵盖代理、适配器、装饰器、桥接、组合、外观、享元等,用于权限控制、缓存、接口适配、功能扩展、解耦实现、构建树形结构、简化复杂系统及优化内存使用,提升代码灵活性与性能,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

1. 代理模式

1.1. 使用场景

代理模式在不改变原始对象的前提下，通过代理对象控制对其访问，通常用于权限控制、延迟加载、远程调用等场景。在前端开发中，可以通过代理模式对网络请求、缓存机制等进行控制。

1.2. 代码实现

class ApiService {
  request() {
    console.log('Making API request...');
    return 'Response from API';
  }
}
class ApiServiceProxy {
  constructor() {
    this.apiservice = new ApiService();
    this.cache = null;
  }
  request() {
    if (!this.cache) {
      console.log('Fetching from API...');
      this.cache = this.apiservice.request();
    } else {
      console.log('Returning cached response...');
    }
    return this.cache;
  }
}
// 使用代理模式
const apiProxy = new ApiServiceProxy();
console.log(apiProxy.request()); // Fetching from API... Response from API
console.log(apiProxy.request()); // Returning cached response... Response from API

1.3. 详细注释

1.4. 实际应用

2. 适配器模式

2.1. 使用场景

适配器模式用于将不兼容的接口转换为兼容的接口，解决不同对象或模块之间的兼容性问题。在前端开发中，适配器模式可用于将第三方库的接口适配为项目内部通用的接口形式。

2.2. 代码实现

class OldApi {
  oldRequest() {
    return 'Old API response';
  }
}
class Adapter {
  constructor(oldApi) {
    this.oldApi = oldApi;
  }
  newRequest() {
    return this.oldApi.oldRequest();
  }
}
// 使用适配器模式
const oldApi = new OldApi();
const adapter = new Adapter(oldApi);
console.log(adapter.newRequest()); // Old API response

2.3. 详细注释

2.4. 实际应用

3. 装饰器模式

3.1. 使用场景

装饰器模式用于在不修改现有对象的情况下，动态地为其添加功能。在前端中，装饰器模式常用于为对象或函数动态添加功能，如事件处理、日志记录等。

3.2. 代码实现

class Coffee {
  cost() {
    return 5;
  }
}
class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  cost() {
    return this.coffee.cost() + 1;
  }
}
class SugarDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }
  cost() {
    return this.coffee.cost() + 0.5;
  }
}
// 使用装饰器模式
let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);
console.log(coffee.cost()); // 6.5

3.3. 详细注释

3.3. 实际应用

4. 桥接模式

4.1. 使用场景

桥接模式用于将抽象部分和实现部分分离，使它们可以独立变化。常用于当一个对象有多个维度的变化时，将这些变化解耦。在前端开发中，桥接模式用于将功能和 UI 的实现分离，使得它们可以独立演进。

4.2. 代码实现

class Shape {
  constructor(color) {
    this.color = color;
  }
  draw() {
    throw new Error('draw() must be implemented');
  }
}
class Circle extends Shape {
  draw() {
    console.log(`Drawing a ${this.color.getColor()} circle`);
  }
}
class Color {
  getColor() {
    throw new Error('getColor() must be implemented');
  }
}
class RedColor extends Color {
  getColor() {
    return 'red';
  }
}
class BlueColor extends Color {
  getColor() {
    return 'blue';
  }
}
// 使用桥接模式
const red = new RedColor();
const blue = new BlueColor();
const redCircle = new Circle(red);
redCircle.draw(); // Drawing a red circle
const blueCircle = new Circle(blue);
blueCircle.draw(); // Drawing a blue circle

4.3. 详细注释

4.4. 实际应用

5. 组合模式

5.1. 使用场景

组合模式用于将对象组合成树形结构，以表示“部分-整体”的层次结构。前端中，组合模式常用于构建层次结构的 UI 组件，如菜单、文件夹结构等。

5.2. 代码实现

class MenuItem {
  constructor(name) {
    this.name = name;
  }
  show() {
    console.log(this.name);
  }
}
class Menu {
  constructor(name) {
    this.name = name;
    this.items = [];
  }
  add(item) {
    this.items.push(item);
  }
  show() {
    console.log(this.name);
    this.items.forEach(item => item.show());
  }
}
// 使用组合模式
const fileMenu = new Menu('File');
fileMenu.add(new MenuItem('New'));
fileMenu.add(new MenuItem('Open'));
const editMenu = new Menu('Edit');
editMenu.add(new MenuItem('Undo'));
editMenu.add(new MenuItem('Redo'));
const mainMenu = new Menu('Main Menu');
mainMenu.add(fileMenu);
mainMenu.add(editMenu);
mainMenu.show();

5.3. 详细注释

5.4. 实际应用

6. 外观模式

6.1. 使用场景

外观模式提供了一个简化的接口来访问复杂的系统，隐藏内部实现细节，减少客户端的复杂性。在前端开发中，外观模式常用于为复杂的库或系统提供简化的 API。

6.2. 代码实现

class Subsystem1 {
  operation() {
    return 'Subsystem1 operation';
  }
}
class Subsystem2 {
  operation() {
    return 'Subsystem2 operation';
  }
}
class Facade {
  constructor() {
    this.subsystem1 = new Subsystem1();
    this.subsystem2 = new Subsystem2();
  }
  operation() {
    return `${this.subsystem1.operation()} + ${this.subsystem2.operation()}`;
  }
}
// 使用外观模式
const facade = new Facade();
console.log(facade.operation()); // Subsystem1 operation + Subsystem2 operation

6.3. 详细注释

6.4. 实际应用

7. 享元模式

7.1. 使用场景

享元模式通过共享相同的对象来减少内存消耗，适用于需要大量相似对象的场景。在前端开发中，享元模式用于优化性能，如缓存对象、共享数据等。

7.2. 代码实现

class Flyweight {
  constructor(sharedState) {
    this.sharedState = sharedState;
  }
  operation(uniqueState) {
    console.log(`Shared: ${this.sharedState}, Unique: ${uniqueState}`);
  }
}
class FlyweightFactory {
  constructor() {
    this.flyweights = {};
  }
  getFlyweight(sharedState) {
    if (!this.flyweights[sharedState]) {
      this.flyweights[sharedState] = new Flyweight(sharedState);
    }
    return this.flyweights[sharedState];
  }
}
// 使用享元模式
const factory = new FlyweightFactory();
const flyweight1 = factory.getFlyweight('Shared1');
flyweight1.operation('Unique1');
const flyweight2 = factory.getFlyweight('Shared1');
flyweight2.operation('Unique2');
console.log(flyweight1 === flyweight2); // true

7.3. 详细注释

7.4. 实际应用

享元模式常用于缓存机制、对象池、共享数据等需要大量相似对象的场景。

到此这篇关于JavaScript 结构型设计模式详解的文章就介绍到这了,更多相关js结构型设计模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文