// 根据blibli小野森森copy
<!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>Document</title>
</head>
<body>
<div class="btn">
<button data-status="S">点击成功 </button>
<button data-status="W">点击告警</button>
<button data-status="E">点击失败 </button>
</div>
<p id="text"><span class="sp"></span></p>
<script>
/**
* 工厂模式
* 公共方法，属性，工具
**/
const ModalTypes = {
"Success": "S",
"Warning": "W",
"Error": "E"
}
class MyModal {
constructor(status) {
this.status = status;
}
get className() {
let classStr = 'modal';
switch(this.status){
case 'S':
classStr += ' success';
break;
case 'W':
classStr += ' warning';
break;
case 'E':
classStr += ' error';
break;
default:
break;
}
console.log('classStr', classStr)
return classStr;
}
static checkStatusIsExist(types,status) {
for (let k in types) {
if(types[k] == status) {
return true
}
}
return false
}
static outputInfo(info) {
console.log(info)
}
}
class SucessModal extends MyModal {
constructor(title) {
super('S')
this.title = '成功'+ title;
}
goHome(url) {
window.location.href = url;
}
}
class WarningModal extends MyModal {
constructor(title) {
super('W')
this.title = '告警'+title;
}
outputInfo(info) {
MyModal.outputInfo('告警:'+ info)
}
}
class ErrorModal extends MyModal {
constructor(title) {
super('E')
this.title = '失败'+title;
}
outputInfo(err) {
MyModal.outputInfo('失败:'+ err)
}
}
class ModalFactory {
constructor(dom) {
this.dom = dom;
}
create(title, state) {
const dom = this.dom;
let modal = null;
const statusIsExist = MyModal.checkStatusIsExist(ModalTypes, state);
if(!statusIsExist) {
throw new Error('No state');
}
switch(state) {
case 'S':
console.log(title, state)
modal = new SucessModal(title);
break;
case 'W':
modal = new WarningModal(title);
break;
case 'E':
modal = new ErrorModal(title);
break;
default:
break;
}
// console.log(dom.getElementsByClassName('sp')[0], modal.title)
dom.getElementsByClassName('sp')[0].innerText = modal.title;
dom.className = modal.className;
return {
outputInfo: modal.outputInfo,
goHome: modal.goHome
}
}
}
var txtDom = document.getElementById("text")
var modalFactory = new ModalFactory(txtDom)
;(() => {
let oBtnGroup = document.getElementsByClassName("btn")[0]
const init = () => {
bindEvent()
}
function bindEvent() {
oBtnGroup.addEventListener("click",handBtnClick, false);
}
function handBtnClick(e) {
const tag = e.target;
const tagName = tag.tagName.toLowerCase();
if(tagName == 'button') {
const status = tag.dataset.status;
// modalFactory.create('test',status)
// modalFactory.create('test',13)
let modal = modalFactory.create('test',status)
switch(status) {
case "W":
modal.outputInfo('这是一个告警');
break;
case "E":
modal.outputInfo('这是一个错误');
break;
case "S":
modal.goHome("http://www.baidu.com");
break;
default:
break;
}
}
}
init()
})()
</script>
</body>
</html>