简单工厂模式,又叫静态工厂方法,由一个工厂对象决定创建出哪一种产品类的实例,主要用来创建同一类对象
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()
弹窗工厂一
类似于寄生模式的实现
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
}
弹窗工厂二
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 = 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())