知识点总结 设计模式

一、单例模式

　　概念：在说单例模式的概念之前先了解下浏览器的回流和重绘

　　　　浏览器渲染的流程：

　　　　　　1、浏览器把获取到的HTML代码解析成DOM树，HTML中的每一个元素都是DOM树的一个节点，根节点就是document对象。

　　　　　　2、当渲染树中的一部分因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。每个页面至少发生一次回流，也就是页面第一次加载的时候。在回流的时候，浏览器会使渲染树中收到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制收到影响的部分元素到屏幕中，这个过程就是重绘。

　　　　　　3、当渲染树中的一些元素需要一些更新属性的时候，而这些属性只会影响外观、风格，而不是影响布局的就称为重绘。　　

　　　　　　以上的概念中，说明回流必然会发生重绘，重绘不一定会引起回流。

　　　　　　简单来说，回流会导致页面的重排，这样会严重影响性能。

　　什么时候会发生回流：

　　　　①添加或删除可见DOM的时候

　　　　②元素的位置发生能改变

　　　　③元素尺寸改变

　　　　④内容改变

　　　　⑤页面第一次渲染的时候

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

　　

　　单例模式书写：

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

        var createDiv=(function () {
            var div;
            return function () { 
                //单例模式最重要的一步，如果没有这个对象就创建该对象
                if(!div){
                    div=document.createElement("div");
                }
                return div;
            }
        })();
        var div1=createDiv();
        var div2=createDiv();
        console.log(div1===div2)//true

　　

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

        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("成功")

 

 二、代理模式

　　概念：为其他对象提供一种代理以控制对这个对象的访问，简单来说，就是中介、经纪人模式。

　　经纪人案例：

　　　　需求：如果有人需要找宝宝拍电影，首先必须找到吉吉，经纪人可以先进行需求的判断再进行功能方法的调用。

        function Baobao(){
            this.doMovie=function(money){
                console.log("宝宝收到钱"+money+":安排档期拍电影")
            }
        }
        function Jiji(person){
            this.person=person
            //代理模式的逻辑判断交给代理来做
            this.talk=function(money){
                if(money>8000){
                    this.person.doMovie(money)
                }
            }
        }
        var proxys=new Jiji(new Baobao)
        proxys.talk(9000)

 

　　利用代理模式实现预加载：

        function CreateImg(){
            var img=document.createElement("img");
            img.src="loading.gif";
            document.body.appendChild(img);
            this.setSrc=function(url){
                img.src=url;
            }
        }
        function ProxyImg(){
            var target=new CreateImg();
            var img=new Image();
            img.onload=function(){
                target.setSrc(this.src)
            }
            this.setSrc=function(url){
                img.src=url;
            }
        }
        var img=new ProxyImg();
        img.setSrc("w1.jpg");

　　在图片的预加载中用到了代理模式，首先创建了一个ProxyImg方法，在这个方法中实例化了需要代理的这个对象CreateImg。通过new Image在浏览器中缓存图片，当这张图片加载完毕后对img标签重新赋值，如果没有加载成功，我们就显示loading这张照片。简单的说就是通过检测图片是否加载成功来做图片的替换，其中img.onload就相当于中介对象一样。

 

三、策略模式

　　概念：所有的解决方案我们都因该提前设定好，不在根据当下的情形做判断，将不同的问题及不同的解决方案对应起来。

　　作用：将问题和解决方案做了映射关系的处理，这样就不需要每次进行判断。

　　案例：

        var Obj={
            person:{
                "a":function(){
                    console.log("盲僧")
                },
                "b":function(){
                    console.log("亚索")
                },
                "c":function(){
                    console.log("提莫")
                }
            },
            create:function(type){
　　　　　　　　　 //通过type类型得到person对象，这样和switch一样，但是这样逻辑简化，代码效率提高了
                return new this.person[type]();
            }
        }
        Obj.create("a");