JS十大设计模式（1/2）

一、工厂模式

什么是工厂模式

工厂模式是由一个方法来决定到底要创建哪个类的实例，而这些实例经常都拥有相同的接口。这种模式主要用在所实例化的类型在编译期并不能确定， 而是在执行期决定的情况。

• 具体实现

 var UserFactory = function (role) {
  function Admin() {
    this.name = "管理员";
    this.viewPage = ["首页", "查询", "权限管理"];
  }
  function User() {
    this.name = "普通用户";
    this.viewPage = ["首页", "查询"];
  }
  switch (role) {
    case "admin":
      return new Admin();
      break;
    case "user":
      return new User();
      break;
    default:
      throw new Error("参数错误, 可选参数: admin、user");
  }
};
var admin = UserFactory("admin");
var user = UserFactory("user");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、构造器模式

什么是构造器模式 ?

在面向对象的编程语言中，构造器是一个类中用来初始化新对象的特殊方法。

并且可以接受参数用来设定实例对象的属性的方法

• 具体实现
  fun

ction Car(model, year, kilometre) {
  this.model = model;
  this.year = year;
  this.kilometre = kilometre;
  // this.info = new CarDetail(model)
  // 属性也可以通过 new 的方式产生
}
// 覆盖原型对象上的toString
Car.prototype.toString = function () {
  return this.model + " 已经完成 " + this.kilometre + " 公里";
};
// 使用:
var lixiang = new Car("理想汽车", 2021, 20000);
var nio = new Car("蔚来汽车", 2022, 5000);
console.log(lixiang.toString()); // 理想汽车已完成 20000 公里
console.log(nio.toString()); // 蔚来汽车已完成 5000 公里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、单例模式

什么是单例模式

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器中的 window 对象等。 在 JS 开发中，单例模式的用途同样非常广泛。试想一下，当我们单机登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么，这个登录浮窗就适合用单例模式来创建。

• 具体实现

function SetManager(name) {
  this.manager = name;
}

SetManager.prototype.getName = function () {
  console.log(this.manager);
};

var SingletonSetManager = (function () {
  var manager = null;

  return function (name) {
    if (!manager) {
      manager = new SetManager(name);
    }

    return manager;
  };
})();

SingletonSetManager("a").getName(); // a
SingletonSetManager("b").getName(); // a
SingletonSetManager("c").getName(); // a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

四、原型模式

什么是原型模式

用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象，在 JavaScript 中，实现原型模式是在 ECMAScript5 中，提出的 Object.create 方法，使用现有的对象来提供新创建的对象的proto。

核心思想：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。

• 具体实现

var prototype = {
  name: "Jack",
  getName: function () {
    return this.name;
  },
};
var obj = Object.create(prototype, {
  job: {
    value: "IT",
  },
});
console.log(obj.getName()); // Jack
console.log(obj.job); // IT
console.log(obj.__proto__ === prototype); //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14

五、发布订阅者模式（观察者模式）

什么是发布订阅者模式（观察者模式）

发布-订阅者模式，又叫观察者模式，它定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知 在 JS开发中，我们一般用事件模型来替代传统的发布-订阅者模式。

核心思想

取代对象之间硬编码的通知机制，一个对象不用再显式地调用另外一个对象的某个接口 在 JS 中通常使用注册回调函数的形式来订阅

• 具体实现

// 订阅
document.body.addEventListener(
  "click",
  function () {
    console.log("click1");
  },
  false
);

document.body.addEventListener(
  "click",
  function () {
    console.log("click2");
  },
  false
);

// 发布
document.body.click(); // click1  click2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19