单例模式--《js设计模式和开发实践》-阿里云开发者社区

单例模式--《js设计模式和开发实践》

2022-12-06 42

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 单例模式--《js设计模式和开发实践》

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="loginBtn">登录</button>
<script>
// 1
----
//   var loginLayer=(function(){
//       var div=document.createElement("div");
//       div.innerHTML="我是登录浮窗";
//       div.style.display="none";
//       document.body.appendChild(div);
//       return div
//   })();
//    document.getElementById("loginBtn").onclick=function(){
//        loginLayer.style.display="block";
//    }
    //以上代码，在一开始就创建了登录浮窗，浪费了dom节点
//2
---
//    var createLoginlayer=function(){
//        var div=document.createElement("div");
//        div.innerHTML="我是登录浮窗";
//        div.style.display="none";
//        document.body.appendChild(div);
//        return div
//    }
//    document.getElementById("loginBtn").onclick=function(){
//        var loginLayer=createLoginlayer();
//        loginLayer.style.display="block";
//    }
// 3.
-----
//    虽然达到了惰性的目的，但是失去了单例的效果
//    var createLoginLayer=(function(){
//        var div;
//        return function(){
//            if(!div){
//                div=document.createElement("div");
//                div.innerHTML="我是登录浮窗";
//                div.style.disaplay="none";
//                document.body.appendChild(div);
//            }
//            return div
//        }
//    })();
//    document.getElementById("loginBtn").onclick=function(){
//        var loginLayer=createLoginLayer();
//        loginLayer.style.display="block";
//    }
//4.
----
//    但是以上代码是违反单一职责原则的；下次如果创建iframe，就需要再把代码写一遍;如下：
//    var createIframe=(function(){
//        var iframe;
//        return function(){
//            if(!iframe){
//                iframe=document.createElement("iframe");
//                iframe.style.display="none";
//                document.body.appendChild(iframe)
//            }
//        }
//        return iframe;
//    })
//    我们需要把不变的部分隔离开来；先不考虑创建div/iframe；用变量来标志是否创建过对象
//    var obj;
//    if(!obj){
//        obj=***;
//    }
// 我们把逻辑封装在getSingle函数中
-----------------------
    var getSingle=function(fn){
        var result;
        return function(){
            return result||(result=fn.apply(this,arguments))
        }
    }
    var createLoginLayer=function(){
        var div=document.createElement("div");
        div.innerHTML="我是登录浮窗";
        div.style.display="none";
        document.body.appendChild(div);
        return div
    }
    var createSingleLoginLayer=getSingle(createLoginLayer);
    document.getElementById("loginBtn").onclick=function(){
        var loginLayer=createLoginLayer();
        loginLayer.style.disaplay="block";
    }
// 下面再试一试创建唯一的iframe用于动态加载第三方页面
-------------------------------
    var createSingleIframe=getSingle(function(){
        var iframe=document.createElement("iframe");
        document.body.appendChild(iframe);
        return iframe;
    })
    document.getElementById("loginBtn").onclick=function(){
        var loginLayer=createSingleIframe();
        loginLayer.style.display="block";
        loginLayer.src="https://baidu.com"
    }
</script>
</body>
</html>

单例模式--《js设计模式和开发实践》

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

单例模式--《js设计模式和开发实践》

热门文章

最新文章

相关课程

相关电子书

相关实验场景