• 设计模式---001单例模式(转载自我的老师)


    001、单例模式概念

    复制代码
    在说单例模式的概念的时候我们先来讲下浏览器的回流和重绘
        
         1、浏览器把获取到的HTML代码会解析成一个DOM树,HTML中的每一个元素都是DOM树的一个节点,根节点也就是我们长用的document对象
    
         2、当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候,这时候就会发生回流。每个页面都至少发生一次回流,也就是页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的元素部分失效,并重新绘制这个部分的渲染树,完成回流以后,浏览器会重新绘制受到影响的部分元素到屏幕中,这个过程就是重绘
    
         3、当渲染树中的一些元素需要一些更新属性的时候,而这些属性只会影响外观、风格、而不影响布局的就成为重绘
    
         从以上的概念中可以得知:回流必定发生重绘。但是重绘不一定引起回流
         
    
         简单的说回流会导致页面的重排,这样会严重影响性能
    
    
    什么时候会发生回流?
         1、添加或者删除可见的DOM元素的时候
    
         2、元素的位置发生改变
    
         3、元素尺寸改变
    
         4、内容改变
    
         5、页面第一次渲染的时候
    
    
    单例模式:保证系统中,使用该模式的类只有一个实例
    复制代码

     002、传统写法

    复制代码
    假设我们要创建一个DIV然后在插到页面当中去,如果第一次我们没有这个div的时候我们需要创建一个,但是如果我们已经创建了一次后,第二次在调用这个方法的时候我们还需要在次创建一个吗?
    
    换一个思路来想我们平时用的alert()方法。当我们每次调用alert方法的时候难到系统对象会每次都创建出来一个div吗?刚才咱们也说过了,回流会严重的影响性能。那我们应该如何去做呢?
    
    传统写法:
    从上面这个栗子中我们可以看出 我们每次调用这个方法都会创建一个div,而创建每次创建出来这个DIV都不是同一个DIV。说白一点,createDiv就相当于一个班级,每次创建一个div的时候 就意味着从这个班级出来的人都是不同的。这样的做法太浪费性能。如果当我们第一次创建出来一个div的时候,下次我们做一个判断,如果有这个div了那么我们就直接用这个div。没有的话我们在去创建一个。这样我们是不是就可以大大提高性能了?
    方法二:

      方法三:

      

     
    复制代码
  • 相关阅读:
    JavaScript算法系列之-----------------斐波那契数列(JS实现)
    js中Math.max()求取数组中最大值
    JavsScript中比较大小总结---基于sort()方法
    前端技能大挑战-3(修改this指向)
    前端技能大挑战-2(数组去重)
    前端技能大挑战-1(驼峰命名)
    JavaScript算法系列之-----------------链表反转(JS实现)
    JavaScript算法系列之-----------------字符串排列(JS实现)
    JavaScript算法系列之-----------------替换空格(JS实现)
    JavaScript算法系列之-----------------二维数组中的查找(JS实现)
  • 原文地址:https://www.cnblogs.com/mp-0518/p/11440548.html
Copyright © 2020-2023  润新知