【设计模式】—单例模式

一、单例模式概念

1、在说单例模式的概念的时候我们先来讲下浏览器的回流和重绘

1、浏览器把获取到的HTML代码会解析成一个DOM树，HTML中的每一个元素都是DOM树的一个节点，根节点也就是我们长用的document对象 2、当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。每个页面都至少发生一次回流，也就是页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部分元素到屏幕中，这个过程就是重绘 3、当渲染树中的一些元素需要一些更新属性的时候，而这些属性只会影响外观、风格、而不影响布局的就成为重绘 从以上的概念中可以得知：回流必定发生重绘。但是重绘不一定引起回流 简单的说回流会导致页面的重排，这样会严重影响性能

2、什么时候会发生回流？
1、添加或者删除可见的DOM元素的时候

2、元素的位置发生改变 3、元素尺寸改变 4、内容改变 5、页面第一次渲染的时候

3、单例模式：保证系统中，使用该模式的类只有一个实例

二、单例模式书写

假设我们要创建一个DIV然后在插到页面当中去，如果第一次我们没有这个div的时候我们需要创建一个，但是如果我们已经创建了一次后，第二次在调用这个方法的时候我们还需要在次创建一个吗？

换一个思路来想我们平时用的alert()方法。当我们每次调用alert方法的时候难到系统对象会每次都创建出来一个div吗？刚才咱们也说过了，回流会严重的影响性能。那我们应该如何去做呢？

三、利用单例模式创建一个弹出框

var layer = (function(){
var div;
function createDiv(){
if(!div){
div = document.createElement("div");
document.body.appendChild(div);
}
}
return {
        alert:function(text){
            createDiv();
            div.innerText = text;
        }
    }
})()

layer.alert("成功");