常见的JavaScript设计模式(一)


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

一、模块模式(Module Pattern)

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

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

二、单例模式(SingIeton Pattern)

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

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)

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

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)

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

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');
  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值