【JS】高级单例模式 惰性思想

241 阅读3分钟

单例模式

var obj1 ={
    name:"Lily",
    age:18
}

var obj2 ={
    name:"LiHua",
    age:24
}

类似于上述这样的,把对象的属性写在一起,用大括号括起来,就是普通的单例模式

高级单例模式

let myFunctions = (function(){
    let name = "Lily",
        age = 18;
    function fn1(){};
    function fn2(){};
    
    return {
        fn1:fn1,
        fn2:fn2
    }
})();

自执行函数执行,返回了一个对象,是引用数据类型,被外界的myFunctions接收,所以自执行函数执行时形成的私有作用域不被销毁,里面的变量都被保存了下来。

用一个变量myFunctions接收这个对象,如果想调用myFunctions里面的方法,直接成员访问即可。

比如想要调用myFunctions里面的fn1方法:

myFunctions.fn1();  这样即可调用fn1方法

同样的,在自己写的代码中,有哪些想要被外界调用的,也可以通过 return 返回,给到 myFunctions 这个对象里面,供外界调用

高级单例模式的作用:

可以让自己代码不受外界代码的干扰,尤其是多个人一起做同一个项目的时候,防止自己的代码被污染,也防止自己的代码覆盖其他人的代码。

而且如果其他人想要使用你写的方法,也可以调用,直接像上述那样成员访问即可。

惰性思想

案例说明

提出需求:手写获取元素的CSS的方法:

1、getComputedStyle(ele,null)[attr]

2、ele.currentStyle[attr] 兼容ie6--ie8

提示:通过in这个方法可以判断某个对象是否包含某个属性

语法:[属性] in 对象

如果返回值是 true ,说明这个对象包含这个属性,如果是false,说明无

function getCss(ele,attr){
    if("getComputedStyle" in window){
        return  getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    } 
  
}

var box = document.getElementById("box");
var res = getCss(box,"width");
console.log(res);

分析: 上述方法可以实现对应的功能,但是性能不太好,每次执行这个方法时,都需要做一次判断,才能获取属性,可以采用惰性思想,优化这个方法

惰性思想优化

function getCss(ele,attr){
    if("getComputedStyle" in window){
       getCss = function(ele,attr){
          return  window.getComputedStyle(ele)[attr];
       };  
    }else{
       getCss = function(ele,attr){
          return ele.currentStyle[attr];
       }; 
    } 
    return getCss(ele,attr);
}

var box = document.getElementById("box");
getCss(box,"width");
getCss(box,"height");
getCss(box,"margin");
...

改善以后达到的效果:这样只需要判断一次浏览器的版本,之后再次调用则无需再次判断浏览器的版本,直接调用相应方法了,可以节约性能,这就是惰性思想。

惰性思想: 执行过一遍的东西,如果第二遍执行还是一样的效果,则我们就不想让其重复执行第二遍了

利用闭包的思想,做完判断以后直接重构函数,getCss是全局变量,将重构的函数给了这个变量,而且最后返回的时候直接执行了,后面再次调用的时候就不需要再次判断了 直接执行那个重构以后的方法了。

这样一来,第一次执行getCss的时候,重构了函数,该函数是在这个私有作用域里面创建的,被全局变量getCss接收了,所以第一次执行这个方法的时候,作用域不销毁。

简单来讲,本例中,经过判断以后,重构了一下函数,把重构以后的函数在返回时执行,将执行完的返回结果返回,这样一来,就算是第一次执行也可以得到想要的结果,并且重构了以后,再次执行时不需要再做判断了。

如有错误,欢迎指正,共同进步~