端午节干什么，学几个设计模式，JavaScript设计模式-001

构造器模式

通过构造函数传入参数，创建对象，替代下面这种大量的重复写法

var person = {
  name:'xx',
  age:11
}

function Person(name, age, sth) {
  this.name = name
  this.age = age
  this.sth = sth
  this.doSth = function() {
    console.log(this.name+this.sth);
  }
}

let p1 = new Person('张三', 34, '学习刑法学')
p1.doSth()

缺点：构造器中的方法会创建多个

原型模式

函数的原型是唯一的，内存中只有一份，可以实现共用的目的，解决构造器模式的缺点。把共用的函数挂到原型上如下

function Person(name, age, sth) {
  this.name = name
  this.age = age
  this.sth = sth
}

Person.prototype.doSth = function() {
  console.log(this.name+this.sth);
}

let p1 = new Person('张三', 34, '学习刑法学')
p1.doSth()

在es6引入类机制之后，这种写法可以同时兼顾构造器模式和原型模式

class Person {
  constructor(name, age, sth) {
    this.name = name
    this.age = age
    this.sth = sth
  }

  doSth() {
    console.log(this.name + this.sth);
  }
}

let p1 = new Person('张三', 34, '学习刑法学')
p1.doSth()
console.log(p1);

doSth()方法被挂载在原型上。

工厂模式

由一个工厂对象决定创建某一种产品对象的实例，主要用来创建同一类对象。

function User(role, page) {
  this.role = role
  this.page = page
}

function UserFactory(role) {
  switch (role) {
    case 'supeAdmin':
      return new User('supeAdmin', ['home', 'editUser', 'editNews'])
    case 'admin':
      return new User('admin', ['home', 'editNews'])
    default:
      break;
  }
}

通过方法判断生成什么样的对象，解决了提前创建的内存开销问题

es6引入类之后的写法

class User {
  constructor(role, page) {
    this.role = role
    this.page = page
  }

  static UserFactory(role) {
    switch (role) {
      case 'supeAdmin':
        return new User('supeAdmin', ['home', 'editUser', 'editNews'])
      case 'admin':
        return new User('admin', ['home', 'editNews'])
      default:
        break;
    }
  }
}

let user = User.UserFactory('supeAdmin')
console.log(user);

缺点：不适合创建大量复杂的对象。

建造者模式

属于创建型模式的一种，可以用来创建复杂对象，将复杂对象的构建与表示分离。

class NavBar {
  init() {
    console.log('初始化导航栏');
  }

  getData() {
    console.log('导航栏获取数据');
  }

  render() {
    console.log('渲染导航栏');
  }
}

class List {
  init() {
    console.log('初始化列表');
  }

  getData() {
    console.log('列表获取数据');
  }

  render() {
    console.log('渲染列表');
  }
}

class Creator {
  startBuild(builder) {
    builder.init()
    builder.getData()
    builder.render()
  }
}

const op = new Creator()
op.startBuild(new NavBar())
op.startBuild(new List())

Creator类的startBuild()方法通过接收不同的实例，调用对应方法，这个方法处理具体的逻辑，把过程和表示分离，减少了方法之间的复杂程度。