工厂模式 

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

 

posted @ 2021-12-01 18:21  Webwhl  阅读(27)  评论(0)    收藏  举报