// 根据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>