js设计模式之单例模式二

2024-01-01 11:33:57
<!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>

文章来源:https://blog.csdn.net/qq_25416827/article/details/135323251
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。