标签：status case title 模式 工厂 break outputInfo modal
// 根据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>
标签：status,case,title,模式,工厂,break,outputInfo,modal 来源： https://www.cnblogs.com/whlBooK/p/15630188.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。