常见的JavaScript设计模式（一）

常见的JavaScript设计模式

[一、模块模式(Module Pattern)](#一、模块模式(Module Pattern))
[二、单例模式（SingIeton Pattern）](#二、单例模式（SingIeton Pattern）)
[三、工厂模式（Factory Pattern）](#三、工厂模式（Factory Pattern）)
[四、观察者模式（Observer Pattern）](#四、观察者模式（Observer Pattern）)

常见的JavaScript设计模式包括模块模式、 在这里插入代码片 单例模式、工厂模式、观察者模式、策略模式、装饰者模式等。每种设计模式都有其特定的和应用场景和解决方案，可以根据具体的需求选择合适的设计模式来提高代码的质量和可维护性。

一、模块模式(Module Pattern)

用于将代码封装为具有特定功能的独立模块。

javascript 复制代码

const myModule=(function () {
  let privateVarible="This is private";
  function privateMethod() {
    console.log(privateVarible);
  }
  return {
    publicMethod(){
      privateMethod();
    },
  };
})();

二、单例模式（SingIeton Pattern）

确保一个类只有一个实例，并提供全局访问点来访问该实例。

javascript 复制代码

const singleton = (function () {
  let instance;
  function creatInstance() {
    return {
      name: 'Singleton Instance',
    };
  }
  return {
    getInstance() {
      if (!instance) {
        instance = creatInstance();
      }
      return instance;
    },
  };
})();

const instance1 = singleton.getInstance();
const instance2 = singleton.getInstance();
console.log(instance1 === instance2);

三、工厂模式（Factory Pattern）

提供了一种封装对象创建过程的方式，使得客户端代码与具体对象的创建逻辑解耦。

javascript 复制代码

function createUser(name,role) {
  return {
    name,
    role,
    sayHello(){
      console.log(`name is ${this.name} and I am a ${this.role}`);
    }
  }
}

const admain = createUser("Alice","admain");
admain.sayHello();

四、观察者模式（Observer Pattern）

观察者模式是一种对象间的对多的依赖关系，当一个对象的状态发生变化时，它的所有依赖对象都会收到通知并自动更新。

javascript 复制代码

function Subject() {
  this.observers = [];
}
Subject.prototype = {
  // 订阅
  subscribe(observer) {
    this.observers.push(observer);
  },
  // 取消订阅
  unsubscribe(observer) {
    this.observers = this.observers.filter((obs) => objs !== observer);
  },
  // 通知
  notify(data) {
    this.observers.forEach((observer) => observer.update(data));
  },
};
// 观察者
function Observer(name) {
  this.name = name;
}
Observer.prototype.update = function (data) {
  console.log(`${this.name} received data: ${data}`);
};

const subject = new Subject();
const observer1 = new Observer('observer1');
const observer2 = new Observer('observer2');
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('New data availabel');