zoukankan      html  css  js  c++  java
  • 知识点总结 设计模式

    一、单例模式

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

        浏览器渲染的流程:

          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");

        

        

  • 相关阅读:
    LeetCode题解之Flipping an Image
    LeetCode 之Find Minimum in Rotated Sorted Array
    LeetCode题解Transpose Matrix
    LeetCode 题解之Minimum Index Sum of Two Lists
    LeetCode题解之Intersection of Two Linked Lists
    LeetCode 题解之Add Two Numbers II
    LeetCode题解之Add two numbers
    href="#"与href="javascript:void(0)"的区别
    有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除
    ie7下属性书写不规范造成的easyui 弹窗布局紊乱
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11607064.html
Copyright © 2011-2022 走看看