设计模式

设计模式

单例模式

• 保证一个类仅有一个实例，并提供一个访问它的全局访问点
• 实现：
  • 私有化构造函数
  • 静态化方法，返回实例
  • 私有化静态变量
  • 私有化静态方法
  • 静态方法中判断实例是否存在，存在则返回，不存在则创建
• 应用场景：
  • 弹框
  • 登录框
  • 购物车
  • 全局缓存
  • 全局唯一的数据源
• 优点：
  • 只有一个实例，减少内存开销
  • 避免对资源的多重占用
  • 设置全局访问点，严格控制访问
• 缺点：
  • 没有接口，不能继承，与单一职责原则冲突，一个类应该只关心内部逻辑，而不关心外面怎么样来实例化
  • 滥用单例将带来一些负面问题，如为了节省资源将数据库连接池对象设计为的单例类，可能会导致共享连接池对象的程序过多而出现连接池溢出

单例模式实现弹框 - TS 实现

<button id="btn">点击</button>

var Login = (function () {
  var div = null;
  return function () {
    if (!div) {
      div = document.createElement("div");
      div.innerHTML = `<div class="msk">
                    <button id="close">点击关闭</button>
                    <h2>标题</h2>
                    <p>内容</p>
                    </div>`;
      div.style.background = "#eee";
      div.style.width = "300px";
      document.body.appendChild(div);
    }
    return div;
  };
})();

document.getElementById("btn").onclick = function () {
  var login = Login();
  console.log(login);
  login.style.display = "block";
  close();
};
function close() {
  document.getElementById("close").onclick = function () {
    var login = Login();
    console.log(login);
    login.style.display = "none";
  };
}

发布订阅模式

• 定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知
• 实现：
  • 创建一个事件中心，用来存放事件和事件监听器
  • 订阅事件，将事件监听器添加到事件中心
  • 发布事件，触发事件中心中的事件监听器
• 应用场景：
  • 网页事件
  • 用户行为
  • 网页通知
  • 跨窗口通信
  • 异步编程
• 优点：
  • 支持简单的广播通信，自动通知所有已经订阅过的对象
  • 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用
• 缺点：
  • 创建订阅者需要消耗一定的时间和内存
  • 虽然可以弱化对象之间的联系，但是过度使用的话，会导致程序难以跟踪维护和理解

发布订阅模式实现 - TS 实现

class Observer {
  constructor() {
    this.message = {}; //实践中心 {type:[]}
  }
  $on(type, fn) {
    if (!this.message[type]) {
      this.message[type] = [];
    }
    this.message[type].push(fn);
  }
  $emit(type) {
    if (!this.message[type]) return;
    this.message[type].forEach((item) => {
      item();
    });
  }
  $off(type, fn) {
    if (!this.message[type]) return;
    if (!fn) {
      delete this.message[type];
      return;
    }
    this.message[type] = this.message[type].filter((item) => {
      return item !== fn;
    });
  }
}