526互联

js设计模式之单例模式二

发布时间 2024-01-01 11:16:58作者: 光影少年
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<button id="login">登录</button>
<script>
    class Login {
        createLayout(){
            const oDiv=document.createElement('div');
            oDiv.innerHTML="我的登录框"
            document.body.appendChild(oDiv);
            oDiv.style.display='none';
            return oDiv;
        }
    }
    class Single{
        getSingle(fn){
            let result;
            return function(){
                return result|| (result=fn.apply(this,arguments));
            }
        }
    }
    const oBtn=document.getElementById('login');
    let single=new Single();
    let login=new Login()
    /**
     *
     * @type {function(): *}
     * 由于是闭包原因，我们是第一次生成result的引用，实现一个登录框
     * 第二次再次点击的时候，不会重新生成，而是直接引用
     */
    let createLayout=single.getSingle(login.createLayout);
    oBtn.onclick=function(){
        let layout=createLayout();
        layout.style.display='block';
    }
</script>
</body>
</html>