(四)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.contentdocument.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.contentdocument.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.contentdocument.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()

弹窗工厂一

类似于寄生模式的实现

function createPop(type, msg) {const o = new Object()o.content = msgo.show = function () {}if (type === 'alert') {}if (type === 'confirm') {}if (type === 'promt') {}return o
}

弹窗工厂二

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

书本工厂

function createBook(name, time, type) {const o = new Object()o.name = nameo.time = timeo.type = typeo.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())