(四)js前端开发中设计模式之简单工厂模式

简单工厂模式,又叫静态工厂方法，由一个工厂对象决定创建出哪一种产品类的实例，主要用来创建同一类对象

js 复制代码

let LoginAlert = function (msg) {
  this.content = msg
}
LoginAlert.prototype = {
  show() {
    const div = document.createElement('div')
    div.style.cssText = `min-width: 100px; height: 50px; 
    background-color: red;
    color: white;
    text-align:center;
    line-height: 50px;
    margin-bottom: 10px;
    `
    div.innerHTML = this.content
    document.documentElement.appendChild(div)
    setTimeout(() => {
      div.remove()
    }, 5000)
  }
}

let userNameAlert = new LoginAlert('用户名不能为空')
userNameAlert.show()

let passwordAlert = new LoginAlert('密码不能为空')
passwordAlert.show()

let LoginConfirm = function (msg) {
  this.content = msg
}

LoginConfirm.prototype = {
  show() {
    const div = document.createElement('div')
    div.id = 'login-confirm'
    div.style.cssText = `min-width: 100px; height: 50px; 
    background-color: red;
    color: white;
    text-align:center;
    line-height: 50px;
    margin-bottom: 10px;
    `
    div.innerHTML = this.content
    document.documentElement.appendChild(div)
    this.createRegBtn()
    // setTimeout(() => {
    //   div.remove()
    // }, 3000)
  },
  createRegBtn() {
    const btn = document.createElement('button')
    btn.innerHTML = '注册'
    const parent = document.getElementById('login-confirm')
    parent.appendChild(btn)
  }
}

const loginFailConfirm = new LoginConfirm('登录失败')
loginFailConfirm.show()

let LoginPromt = function (msg) {
  this.content = msg
}

LoginPromt.prototype = {
  show() {
    const div = document.createElement('div')
    div.id = 'login-promt'
    div.style.cssText = `min-width: 100px; height: 50px; 
    background-color: red;
    color: white;
    text-align:center;
    line-height: 50px;
    margin-bottom: 10px;
    `
    div.innerHTML = this.content
    document.documentElement.appendChild(div)
    this.createRegBtn()
    // setTimeout(() => {
    //   div.remove()
    // }, 3000)}
  },
  createRegBtn() {
    const btn = document.createElement('button')
    btn.innerHTML = '确认'
    const btn1 = document.createElement('button')
    btn1.innerHTML = '取消'
    const parent = document.getElementById('login-promt')
    parent.appendChild(btn)
    parent.appendChild(btn1)
  }
}

const loginPromt = new LoginPromt('登录成功')
loginPromt.show()

弹窗工厂一

类似于寄生模式的实现

js 复制代码

function createPop(type, msg) {
  const o = new Object()
  o.content = msg
  o.show = function () {}

  if (type === 'alert') {
  }
  if (type === 'confirm') {
  }
  if (type === 'promt') {
  }

  return o
}

弹窗工厂二

js 复制代码

const PopFactory = function (name) {
  switch (name) {
    case 'alert':
      return new LoginAlert('用户名不能为空')
    case 'confirm':
      return new LoginConfirm('登录失败')
    case 'promt':
      return new LoginPromt('登录成功')
  }
}

书本工厂

js 复制代码

function createBook(name, time, type) {
  const o = new Object()
  o.name = name
  o.time = time
  o.type = type
  o.getName = function () {
    return this.name
  }
  return o
}

const book1 = createBook('js book', 20, 'js')
console.log(book1.getName())
const book2 = createBook('css book', 10, 'css')
console.log(book2.getName())