单例模式浅解

• 什么是单例模式呢？

• 我们都知道，构造函数可以创造一个对象

• 我们 new 很多次构造函数就能得到很多的对象

• 单例模式： 就是使用构造函数实例化的时候，不管实例化多少回，都是同一个对象

  • 也就是一个构造函数一生只能 new 出一个对象

• 也就是说，当我们使用构造函数，每一次 new 出来的对象 属性/功能/方法 完全一样 的时候，我们把他设计成单例模式

其主要核心:只能创建一个对象,并向外提供全局访问

在JavaScript中也有不被常人所知晓的单例

例:var a也满足创建一个对象,提供全局访问

var a={
}

讲起全局访问

var a 这种全局变量很容易引起命名空间污染,特别是在做大项目中,会导致变量之间的相互覆盖

避免命名环境污染有常见的两种方法

一:空间命名法

二:闭包(可以彻底解决该问题)

没有使用单例模式在body内添加div元素,函数调用多次便会出现多个div

        利用普通函数创建div盒子
        获取元素时使用querySelector,后续插入多个div子只会获取一个
        由此可以发现,多次调用boxs时,会创建多个div
        
        function boxs(){
            var div=document.createElement("div");
            div.style.width=100+"px";
            div.style.height=100+"px";
            div.style.backgroundColor="red";
            div.style.marginTop=10+"px";
            document.body.appendChild(div);

        }
        boxs();
        boxs();
        boxs();
        

 

单例模式又分为惰性单例和非惰性单例

惰性单例:调用时才会创建对象(因为创建对象和管理单例在一个函数内)

        使用惰性单例模式在body内添加div元素,函数调用多次也只会出现一个div

       // 利用惰性单例模式创建div(登录表单)
        // 惰性单例模式：在需要时才会创建，
        // 因为创建对象和管理单例存放在一个函数在所导致惰性单例
        // 当我们需要创建唯一的对象时，只能copy，
        var boxs=(function(){
            //创建一个空变量
            var div;
             // 没有内容则return 一个函数
            //  使用闭包思想
            return function(){
            // 判断该变量有无内容
            if(!div){
                div=document.createElement("div");
               div.style.width=100+"px";
               div.style.height=100+"px";
               div.style.backgroundColor="red";
               div.style.marginTop=10+"px";
               document.body.appendChild(div);
            }
        }
    })();
        // 单例模式下无论还函数被调用多少次,都只会触发一次,常用于弹出登录框和购物车
        // 单例模式的核心是确保只有一个实例,提供全局访问
        // 全局访问意味着全局变量,容易造成命名空间污染
        boxs();
        boxs();
        boxs();

非惰性单例模式:浏览器打开便创建对象(将单例管理提出即可)

 

// 我们把管理单例提取出来,
   
    var danl=function(fn){
        // 用来保存div
        var red;
        return function(){
            // (red=fn.apply(this,arguments)) 该代码没有实质性作业，用于传递但该参数不固定
            return red || (red=fn.apply(this,arguments))
        }
        
    }


    var divs=function(){
        div=document.createElement("div");
        div.style.width=100+"px";
        div.style.height=100+"px";
        div.style.backgroundColor="red";
        div.style.marginTop=10+"px";
        document.body.appendChild(div);
        return div;
    }
   
    var divss=danl(divs)
    divss();