单例模式

最新推荐文章于 2024-08-22 09:12:59 发布

你若盛开风景自来

最新推荐文章于 2024-08-22 09:12:59 发布

阅读量104

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/li1484155613/article/details/102770863

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

单例模式:通过使用一个实例解决内存占用问题
例1

<script>
        var zhansgsan=(function(){
            var zhangsan=function(msg){
                this.menling=msg
            }
            var men
            var info={
                //单例模式的核心
                sendMessage:function(message){
                    if(!men){
                        men=new zhangsan(message)
                    }
                    return men
                }
            }
            return info
        })()
        var lisi={
            callZhangsan(msg){
                var _zhangsan=zhangsan.sendMessage(msg)
                alert(_zhangsan.menling)
                _zhangsan=null
            }
        }
        lisi.callZhangsan("叮咚")
 
    </script>

例2 弹窗
html部分

<body>
  <button id="open">打开</button>
  <button id="delete">关闭</button>  
</body>

css部分

<style>
        .show{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .hide{
            display: none;
        }
    </style>

javascript部分

<script>
        var Model=function(id,html){
            this.id=id
            this.html=html
            this.open=false
        }
        Model.prototype.create=function(){
            if(!this.open){
                var model=document.createElement("div")
                model.innerHTML=this.html
                model.id=this.id
                document.body.appendChild(model)
                this.open=true
                model.classList.add("show")
            }
        }
        Model.prototype.delete=function(){
            if(this.open){
                var model=document.getElementById(this.id)
                document.body.removeChild(model)
                model.classList.add("hide")
                this.open=false
            }
        }

        //单例模式
        var createIntance=(function(){
            var instance;
            return function(){
                return instance||(instance=new Model('model','我是一个弹窗'))
            }
        })()
        var operate={
            setModel:null,
            open:function(){
                this.setModel=createIntance()
                this.setModel.create()
            },
            delete:function(){
                this.setModel?this.setModel.delete():""
            }
        }
        document.getElementById("open").onclick=function(){
            operate.open()
        }
        document.getElementById("delete").onclick=function(){
            operate.delete()
        }
    </script>