介绍下JS设计模式以及每一种模式内容举例并给出使用时的JS代码 举例完后对例子进行解释说明

JS设计模式是在JavaScript编程中经常使用的一些套路，可以用来解决特定的问题。常见的JS设计模式有单例模式、工厂模式、观察者模式、代理模式、适配器模式等等。

1. 单例模式

单例模式是一种只允许创建一个实例的设计模式，通常用来管理全局状态或资源。比如说，我们可以使用单例模式来创建一个只允许播放一个音频的音乐播放器。

const musicPlayer = (() => {
  let instance;

  const play = (song) => {
    console.log(`Playing ${song}`);
  };

  const init = () => {
    return {
      play,
    };
  };

  return {
    getInstance() {
      if (!instance) {
        instance = init();
      }
      return instance;
    },
  };
})();

const player1 = musicPlayer.getInstance();
const player2 = musicPlayer.getInstance();

console.log(player1 === player2); // true
player1.play('Shape of You'); // Playing Shape of You
player2.play('Despacito'); // Playing Despacito

在上面的例子中，我们使用了闭包来创建一个能够确保只有一个实例的musicPlayer对象，同时我们返回了一个对象，对象中包含了play方法，用来播放音乐。

2. 工厂模式

工厂模式是一种通过工厂方法来创建对象的设计模式，通常用来解决创建多个相似对象的问题。比如说，我们可以使用工厂模式来创建多个形状的图形对象。

class Shape {
  draw() {
    console.log('Drawing a generic shape');
  }
}

class Square extends Shape {
  draw() {
    console.log('Drawing a square');
  }
}

class Circle extends Shape {
  draw() {
    console.log('Drawing a circle');
  }
}

class ShapeFactory {
  createShape(type) {
    switch(type) {
      case 'square':
        return new Square();
      case 'circle':
        return new Circle();
      default:
        return new Shape();
    }
  }
}

const factory = new ShapeFactory();
const square = factory.createShape('square');
const circle = factory.createShape('circle');
const generic = factory.createShape('generic');

square.draw(); // Drawing a square
circle.draw(); // Drawing a circle
generic.draw(); // Drawing a generic shape

在上面的例子中，我们使用了类来定义了三种不同的形状，然后我们使用一个工厂类ShapeFactory来创建这些形状的对象。在ShapeFactory类中，我们使用了switch语句来判断要创建的对象类型，并返回相应的对象。

3. 观察者模式

观察者模式是一种对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。比如说，我们可以使用观察者模式来实现一个简单的事件监听器。

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, listener) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(listener);
  }

  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((listener) => {
        listener.apply(null, args);
      });
    }
  }
}

const emitter = new EventEmitter();
emitter.on('click', () => console.log('Clicked!'));
emitter.on('hover', (x, y) => console.log(`Hovered at (${x}, ${y})`));
emitter.emit('click'); // Clicked!
emitter.emit('hover', 10, 20); // Hovered at (10, 20)

在上面的例子中，我们使用了一个EventEmitter类来实现了一个简单的事件监听器。我们可以通过调用on方法来添加事件监听器，然后通过调用emit方法来触发事件，并传入事件参数。

4. 代理模式

代理模式是一种为其他对象提供一种代理以控制对这个对象的访问的设计模式。比如说，我们可以使用代理模式来实现一个图片懒加载功能。

class Image {
  constructor(url) {
    this.url = url;
  }

  display() {
    console.log(`Displaying image from ${this.url}`);
  }
}

class ImageProxy {
  constructor(url) {
    this.url = url;
  }

  display() {
    if (!this.image) {
      this.image = new Image(this.url);
    }
    this.image.display();
  }
}

const image1 = new ImageProxy('https://picsum.photos/id/237/200/300');
const image2 = new ImageProxy('https://picsum.photos/id/238/200/300');
image1.display(); // Displaying image from https://picsum.photos/id/237/200/300
image2.display(); // Displaying image from https://picsum.photos/id/238/200/300

在上面的例子中，我们使用了一个ImageProxy类来代理Image类，当第一次调用display方法时，ImageProxy类会创建一个Image对象，然后调用其display方法来显示图片。当我们再次调用display方法时，Image对象已经被创建，因此直接调用其display方法就可以了。

5. 适配器模式

适配器模式是一种将一个类的接口转换成客户希望的另外一个接口的设计模式。比如说，我们可以使用适配器模式来实现一个将英寸单位转换成厘米单位的功能。

class InchConverter {
  convertInchToCm(inch) {
    return inch * 2.54;
  }
}

class CmConverter {
  convertCmToInch(cm) {
    return cm / 2.54;
  }
}

class InchToCmAdapter {
  constructor(inchConverter) {
    this.inchConverter = inchConverter;
  }

  convert(inch) {
    return this.inchConverter.convertInchToCm(inch);
  }
}

const inchConverter = new InchConverter();
const inchToCmAdapter = new InchToCmAdapter(inchConverter);
console.log(inchToCmAdapter.convert(10)); // 25.4

在上面的例子中，我们使用了三个类：InchConverter、CmConverter和InchToCmAdapter。其中，InchConverter和CmConverter分别用于转换英寸和厘米单位；InchToCmAdapter用于将InchConverter类的接口转换成客户希望的接口。我们通过创建一个InchConverter对象来创建一个InchToCmAdapter对象，并通过调用其convert方法来将英寸单位转换成厘米单位。