JavaScript设计模式之构造器模式与工厂模式

[yayxs]

构造器模式

首先我们来聊一聊第一个设计模式，那就是构造器模式 可能看文章的小伙伴对这个名字有点陌生，让我们把时光拉到小学的时候，或者中学，此时你是班级里的班长，老师班主任的二把手，接着让你出一版班级里的花名册。这时候就是你大展身手的时候了。

• 学生一 班花 王二花
• 学生二 班草 李二蛋
• 等等……

那你说好办

const wangerhua = {}

wangerhua.name = 'weh'
wangerhua.age = 16
wangerhua.sex = '女'

const lierdan = {}

lierdan.name = 'led'
lierdan.age = 15
lierdan.sex = '男'

为了在你的女神三菜 面前耍一手，你熬夜写了班级全部的40 多人，眼看花名册即将完事，你满怀期待的发给你的女神，打算先让她看看……，但是呢，作为旁观者的我们呢，发现是有点问题的，这样熬夜效率不高，虽然也能造出一个花名册，但是此举并不会得到女神的芳心。改进下吧

function Student() {
  this.name = 'wangerhua'
  this.age = '16'
  this.sex = '女'
}
// 然后通过`new` 关键词 活生生的`new` 出 一个王二花

但是现在是写死的肯定不行，把三菜 放在何处对吧，那好办

// 然后通过`new` 关键词 活生生的`new` 出 一个王二花

function Student(name, age, sex) {
  this.name = name
  this.age = age
  this.sex = sex
}

const 王二花 = new Student('', '', '')
const 李二蛋 = new Student('', '', '')

或者我们使用最舒服的方式es6 的class 方式

class Student {
  constructor(name, age, sex) {
    this.name = name
    this.age = age
    this.sex = sex
  }
}

工厂模式

其核心目的是为了实现无脑的传参。将创建对象的过程单独封装.较快的生成几类对象

function Persion(name, age, profession, work) {
  this.name = name
  this.age = age
  this.profession = profession
  this.work = work
}

• 第一个简单的工厂

function Factory(name, age, profession) {
  let work // 是干什么的
  switch (profession) {
    case 'coder':
      work = ['摸鱼']
      break
    case 'coder':
      work = ['摸鱼']
      break
    case 'Fisherman':
      work = ['捕鱼']
    default:
      break
  }
  return new Persion(name, age, profession, work)
}

• 第二个工厂

  我们设想一个场景，我记得笔者在高二 年级的时候是文理分科的，我想大多在文章的你是理科生，好的那我们就来看一下这个工厂

  // name 你的名字
  // choose 你的选择
  function factory(name, choose) {
    let stu = []
    if (type === '理科生') {
      stu = ['敲代码', '摸鱼']
    } else {
      stu = ['琴棋', '书画']
    }
    return new Student(name, stu)
  }
  
  const yayxs = factory('洋小洋同学', '理科生')

代码总结

/**
 * 构造器模式
 * 使用js的构造函数
 * 录入用户信息
 */
function User(username, age) {
  this.username = username
  this.age = age
}

const user = new User('user', 12)

/**
 * 工厂模式
 * 把创建对象的过程单独的封装
 */

function User(name, age, type, loveArray) {
  this.name = name
  this.age = age
  this.type = type
  this.loveArray = loveArray
}

function GongChang(name, age, type) {
  let loveArray
  switch (type) {
    case 'student':
      loveArray = ['yuwen', 'shuxue']

      break

    default:
      break
  }

  return new User(name, age, type, loveArray)
}