设计模式--单例模式

最新推荐文章于 2024-08-22 09:12:59 发布

浪跡江湖

最新推荐文章于 2024-08-22 09:12:59 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/qq_16918865/article/details/104602876

版权

设计模式
一套多人知晓的、经过分类的、经过反复使用、代码设计经验的总结

设计模式经查（W3school）有23种：
单例模式，组合模式，观察者模式，工厂模式，构造器模式，模块化模式，暴露模块模式，中介者模式，原型模式，命令模式，外观模式，迭代器模式，惰性初始模式，Mixin模式，MVC模式，MVP模式，MVVM模式，代理模式，装饰模式，亨元(Flyweight)模式，，适配器模式，外观模式，建造者模式

单例模式
相同的构造函数,生成同一个实例化对象
不再生成多个不同的实例化对象,占用内存,消耗程序的执行效率

let p;
function FunA(){}
function fn() {
    if (!p){
        p = new FunA();
    }
    return p;
}
const p1 = fn();
const p2 = fn();
console.log(p1 === p2);  //true

也可以这样封装

const demo = (function(){
    let p;
    function FunA(){}
    return function fn(){
        if(!p){
            p = new FunA();
        }
        return p;
    }
})();
const p1 = demo();
const p2 = demo();
console.log(p1 === p2);  //true

小案例：

<body>
<h1>我是h1</h1>
<script>
    // 通过单例模式 实现给标签设定css样式  
    const Demo = ( function (){
        // 定义构造函数 , 构造函数与之前的构造函数是完全一致的
        // 唯一区别是 : 之前定义在constructor中的参数,现在定义在setCss方法上
        // 构造函数的调用,是在立即执行函数时就调用了
        // 此时无法输入对应的参数
        // 只能是在执行setCss方法,也就是设定css样式时,输入对应的参数
        class SetElement{
            constructor(){}
            setCss(ele,style){
                for(let key in style){
                    ele.style[i] = style[i];
                }
            }
        }
        // 单例模式的核心程序
        let res = null;
        return function(){
            if(res === null){
                res = new SetElement();
            }
            return res;
        }
    } )()
    // 通过 Utils 来 调用单例模式下的构造函数,生成统一的相同的实例化对象
    const o1 = new Demo();
    const o2 = new Demo();
    // 执行实例化对象中的方法时,输入对应的参数
    o1.setCss( document.querySelector('h1') , {background:'red',width:'200px'} );
    console.log(o1 === o2);  //true;
        </script>
</body>

总结
1,定义一个变量存储的是一个立即执行函数的执行结果
2,定义构造函数构造函数有属性有方法
参数不能定义在 constructor 中只能定义在方法中
输入参数,也是在调用方法时输入参数
3,单例模式的核心程序
建立一个变量,存储数据 — 定义在 return 之外
判断:
如果存储的是原始数据,那么就执行构造函数,生成实例化对象
不是原始数据,就不执行任何程序
返回值 : 返回的是定义的变量