JavaScript - 设计模式

二月 29, 2020 5406

摘录JavaScript常用设计模式，其实这些平时有意无意都在使用，借着面试机会整理一下。

行为类

发布-订阅模式 Publish-Subscribe


创建类

构造器模式 Constructor

类似于面向对象中的构造器，由于ES5中没有很好的对象概念，现以函数的形式模拟，本质一样。

// ES5

function Student(name, gender) {
  this.name = name;
  this.gender = gender
  this.print = function () {
    console.log('姓名:' + this.name + '性别:' + this.gender);
  }
}

var zhaoo = new Student('小兆', 'male');
var pp = new Student('小欣', 'female');

zhaoo.print();
pp.print();
// ES6

class Student {
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }

  print = () => {
    console.log(`姓名:${this.name}性别:${this.gender}`);
  }
}

const zhaoo = new Student('小兆', 'male');
const pp = new Student('小欣', 'female');

zhaoo.print();
pp.print();

原型模式 Prototype

之前对象中，每创建一个实例，内部都会实例化一份print函数，造成资源浪费。现使用prototype构造对象原型，相当于对print函数的一个引用，进行了优化。

// ES5

function Student(name, gender) {
  this.name = name;
  this.gender = gender
}

Student.prototype.print = function () {
  console.log('姓名:' + this.name + '性别:' + this.gender);
}

var zhaoo = new Student('小兆', 'male');
var pp = new Student('小欣', 'female');

zhaoo.print();
pp.print();

建造者模式 Builder

在对象外封装一层构建器，作为基层控制者，使用set、get等方法创建获取内部变量。在对象内部可以方便对成员变量进行操纵、校验等操作，更加灵活、规范。

// ES5

var failCount = 0;

function Student() {}

function StudentBuilder() {
  this.student = new Student();

  StudentBuilder.prototype.setName = function (name) {
    this.student.name = name;
  }

  StudentBuilder.prototype.setScore = function (score) {
    if (typeof score !== Number)
      throw ('score 输入类型错误');
    this.student.score = score;
  }

  StudentBuilder.prototype.build = function () {
    if (this.student.score < 60)
      failCount++;
    return this.student;
  }
}

var builder = new StudentBuilder();
builder.setName('小兆');
builder.setScore(90);
var zhaoo = builder.build();

var builder = new StudentBuilder();
builder.setName('小欣');
builder.setScore(59);
var pp = builder.build();

console.log('挂科人数:' + failCount);
// ES6

let failCount = 0;

class Student {}

class StudentBuilder {
  constructor() {
    this.student = new Student();
  }

  setName(name) {
    this.student.name = name;
  }

  setScore(score) {
    if (typeof score !== Number)
      throw ('score 输入类型错误');
    this.student.score = score;
  }

  build() {
    if (this.student.score < 60)
      failCount++;
    return this.student;
  }
}

const builder = new StudentBuilder();
builder.setName('小兆');
builder.setScore(90);
const zhaoo = builder.build();

const builder = new StudentBuilder();
builder.setName('小欣');
builder.setScore(59);
const pp = builder.build();

console.log('挂科人数:' + failCount);

工厂模式 Factory

包装并返回对象。

// ES5

function Student(name, subjects) {
  this.name = name;
  this.subjects = subjects;
}

function factory(name, type) {
  switch (type) {
    case '软件工程':
      return new Student(name, ['数据结构', '设计模式', '算法设计']);
      break;
    case '城乡规划':
      return new Student(name, ['城市道路与交通规划', '村镇规划设计', '城市建设史与规划史']);
      break;
    default:
      throw '没这个专业，别瞎填';
  }
}

var zhaoo = factory('小兆', '软件工程');
var pp = factory('小欣', '城乡规划');
// ES6

class Student {
  constructor(name, subjects) {
    this.name = name;
    this.subjects = subjects;
  }
}

const factory = (name, type) => {
  switch (type) {
    case '软件工程':
      return new Student(name, ['数据结构', '设计模式', '算法设计']);
      break;
    case '城乡规划':
      return new Student(name, ['城市道路与交通规划', '村镇规划设计', '城市建设史与规划史']);
      break;
    default:
      throw '没这个专业，别瞎填';
  }
}

const zhaoo = factory('小兆', '软件工程');
const pp = factory('小欣', '城乡规划');

抽象工程模式 AbstractFactory

工厂外再包一层工厂，用于上产工厂。

function Student() {
  this.intro = '我是个学生';
}

function Teacher() {
  this.intro = '我是个老师';
}

function StudentFactory() {
  return new Student();
}

function TeacherFactory() {
  return new Teacher();
}

function Producer(factory) {
  switch (factory) {
    case 'student':
      return StudentFactory;
      break;
    case 'teacher':
      return TeacherFactory;
      break;
    default:
      throw '没这个工厂';
      break;
  }
}

var sFactory = Producer('student');
var zhaoo = factory('小兆');
var tFactory = Producer('teacher');
var pp = factory('小潘');

单例模式 Singleton

避免重复创建，实例化对象前先判断是已实例化。

// ES5

function Singleton() {
  if (Singleton.instance)
    return Singleton.instance;
  else {
    this.countdown = 60;
    Singleton.instance = this;
  }
}

var s1 = new Singleton();
var s2 = new new Singleton();
// ES6

class Singleton {
  constructor () {
    if (Singleton.instance)
      return Singleton.instance;
    else {
      this.countdown = 60;
      Singleton.instance = this;
    }
  }
}

const s1 = new Singleton();
const s2 = new new Singleton();

未完待续……

查看评论