工厂模式
- 三个按钮控制一个header框,成功,警告,错误,分别对应三个颜色
- 创建了一个Base类,里面存放着Success,Warning,Error三个类的公共方法和属性
- Factrory类,根据不同的status创建不同的对象,
- 然后想要扩展的东西就是再各自的类里面进行扩展,
- 再Base类,还可以扩展一些校验的方法,比如说 static validStatus()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工厂模式</title>
<style>
.content {
position: fixed;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid red;
}
.title {
border: 1px solid blue
}
.success {
background-color: green;
}
.warning {
background-color: orange;
}
.error {
background-color: red;
}
</style>
</head>
<body>
<div>
<div class="content">
<header class="title">header</header>
<div>
body
</div>
</div>
<div id="btn-group">
<button data-status="success">success</button>
<button data-status="warning">waring</button>
<button data-status="error">error</button>
</div>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>
main.js
import { Factory } from './factory.js'
const domEle = document.getElementsByClassName('title')[0]
const btnGroup = document.getElementById('btn-group')
const factory = new Factory(domEle)
const init = () => {
btnGroup.addEventListener('click', handleClick)
}
const handleClick = (e) => {
const status = e.target.dataset.status
// 通过工厂对象 根据不同的状态创建不同的对象
const obj = factory.create(status, '通用header')
// 通过对象的形式改变状态
obj.changeStatus()
}
init()
factory.js
import { STATUS } from './type.js'
// Suceess,Warning,Error的基类,存放这个共同的方法
class Base {
constructor(dom, status) {
this.dom = dom
this.status = status
}
get className() {
let name = 'title'
switch (this.status) {
case STATUS.SUCCESS:
name += ' success'
break
case STATUS.WARNING:
name += ' warning'
break
case STATUS.ERROR:
name += ' error'
break
default:
break
}
return name
}
changeStatus() {
this.dom.className = this.className
}
static validStatus(status) {
for (let key in STATUS) {
if (STATUS[key] === status) {
return
}
}
throw new Error('不存在' + status + '状态')
}
}
class Success extends Base {
constructor(dom, status, title) {
super(dom, status)
this.title = '成功header' + title
}
changeStatus() {
super.changeStatus()
this.dom.innerText = this.title
setTimeout(() => this.goHome(), 3000)
}
goHome() {
window.location.href = 'https://www.baidu.com'
}
}
class Warning extends Base {
constructor(dom, status, title) {
super(dom, status)
this.title = '警告header' + title
}
changeStatus() {
super.changeStatus()
this.dom.innerText = this.title
this.showWaring()
}
showWaring() {
console.log('warning info is here ...');
}
}
class Error extends Base {
constructor(dom, status, title) {
super(dom, status)
this.title = '错误header' + title
}
changeStatus() {
super.changeStatus()
this.dom.innerText = this.title
}
showError() {
console.log('error info is here ...');
}
}
class Factory {
constructor(dom) {
this.dom = dom
}
// 根据不同的status创建不同的对象,这个也是工厂类最最注意的作用,根据一些条件创建不同的对象,然后返回
create(status, title) {
// 校验状态
Base.validStatus(status)
switch (status) {
case STATUS.SUCCESS:
return new Success(this.dom, status, title)
case STATUS.WARNING:
return new Warning(this.dom, status, title)
case STATUS.ERROR:
return new Error(this.dom, status, title)
default:
break
}
}
}
export { Factory }
type.js
const STATUS = {
SUCCESS: 'success',
WARNING: 'warning',
ERROR: 'error'
}
export { STATUS }
