2 单例模式的实际案例 和 demo

一.单例模式的实际案例

<div></div>
<p></p>

<script>
    // 单例模式的实际案例
    // 通过构造函数,给标签设定样式

    // 简单的构造函数
    class SetStyle{
        constructor(ele,type){
            this.ele = ele;
            this.type = type;
        }
        // 调用方法,通过循环遍历参数2,将实参中的属性和属性值,都设定给参数1的标签对象
        setCss(){
            for(let key in this.type){
                // 给css添加样式   对象.属性 = 属性值;
                this.ele.style[key] = this.type[key];
            }
        }
    }

    // 获取标签对象
    const oDiv = document.querySelector('div');
    const oP = document.querySelector('p');

    // 创建构造函数,参数1是标签对象,参数2是css样式的属性和属性值
    
    const divStyle = new SetStyle( oDiv , {width:'100px',height:'200px',background:'red'} );
    divStyle.setCss();


    const pStyle = new SetStyle( oP , {width:'200px',height:'100px',background:'blue'} )
    pStyle.setCss();


    // 简单的通过构造函数的方式,使用面向对象的编程思想,完成对标签的样式的设定
    // 此时我们创建了两个实例化话对象
    // divStyle     pStyle 
    // 此时是两个独立的实例化对象
    // 会占用两个内存空间,会影响占用内存,造成执行效率变低

    console.log(divStyle === pStyle);   // false

    // 单例模式
    // 所谓的单例模式,就是一个单独的相同的实例化对象
    // 也就是,同一个构造函数生成的所有的实例化对象,都指向同一个内存地址
    // 都使用同一个内存地址,存储数据数值和方法
    // 不会每执行一次,就生成一个新的实例化对象,占用多余的内存空间


</script>

二.demo

<div></div>
<p></p>
<span></span>
<script>
    // 将上个demo中,构造函数,使用单例模式来执行

    const utils = (function () {
        // 定义一个构造函数
        class SetStyle {
            // 不在 构造器中 定义对象的属性和属性值 
            // constructor(ele, type) {
            //     this.ele = ele;
            //     this.type = type;
            // }

            // 将参数直接定义赋值在方法中
            // 定义对象是没有属性和数据的,只有调用方法时,才输入数据
            // 不是定义在对象中的属性和属性值,而是调用方法时输入的数据
            // 此时,不需要this了
            setCss(ele , type) {
                for (let key in type) {
                    ele.style[key] = type[key];
                }
            }
        }
        // 定义变量
        let obj = null;
        // 定义判断,写在函数中,这个函数作为返回值
        return function () {
            if (obj === null) {
                obj = new SetStyle();
            }
            return obj;
        }

    })();

    // 获取标签对象
    const oDiv = document.querySelector('div');
    const oP = document.querySelector('p');
    const oSpan = document.querySelector('span');

    *************法1***********
    // 使用构造函数,生成实例化对象
    // 此时生成的构造函数,没有属性,没有属性值,只有方法
    // 这三个对象,实际上指向的都是同一个构造函数,生成的 实例化对象的 存储空间
    // 都是同一个空间地址,因为return 出来的都是相同的 obj

    const divStyle = utils();
    const pStyle = utils();
    const spanStyle = utils();

    console.log(divStyle , pStyle , spanStyle);

    // 任意的两个,存储的内存地址,都是相同的,指向的都是同一个对象
    console.log(divStyle ===  pStyle);      //  true
    console.log(pStyle === spanStyle);      //  true
    console.log(divStyle === spanStyle);    //  true


    // 设定样式是,在调用方法时,输入不同的参数数据,也就是实参
    divStyle.setCss( oDiv , {width:'100px',height:'200px',background:'red'} );
    pStyle.setCss( oP , {width:'200px',height:'100px',background:'blue'} );
    spanStyle.setCss( oSpan , {width:'100px',height:'100px',background:'pink',display:'block'} );


    *************法2*************
    // 实际上也可以就生成一个实例化对象
    // 通过定义不同的参数,实现不同的代码效果
    const eleStyle = utils();

    // 实际上也可以使用一个实例化对象,调用方法,输入不同的数据

    eleStyle.setCss( oP , {width:'200px',height:'100px',background:'blue'} );
    eleStyle.setCss( oSpan , {width:'100px',height:'100px',background:'pink',display:'block'} );
    eleStyle.setCss( oDiv , {width:'100px',height:'200px',background:'red'} );


    
    总结:
        核心思想:
            同一个构造函数,生成的实例化对象,是同一个实例化对象
            不会重复生成新的实例化对象
            防止占用过多的内存空间,造成执行效率变低 

        核心原理:
            定义一个变量,存储构造函数生成的实例化对象
            如果 变量 中存储的是原始数值
                证明没有通过构造函数,生成过实例化对象
                可以 第一次执行 构造函数 生成实例化对象
            如果 变量 中存储的不是原始数值
                不再调用 构造函数 生成新的实例化对象
                直接返回变量,也就是返回实例化对象的地址

        实际操作:
            定义一个立即执行函数
                定义 构造函数
                        构造函数,不定义属性和属性值
                        在调用方法时,输入参数数值
                定义 变量 赋值原始数值

                立即执行函数,返回值 是另一个函数
                    另一个函数
                        判断: 如果 变量是原始数值 
                                调用 构造函数,生成实例化对象,赋值给变量存储
                                
                                如果 变量不是原始数值
                                什么操作都不执行,直接返回 变量

        执行结果:
            不是直接使用 构造函数生成实例化对象
            而是通过 定义的 函数来执行生成 实例化对象
            生成的所有内容,存储的都是相同的实例化对象的内存地址
            通过调用 方法, 输入不同的数据参数 实现不同的代码效果

        核心内容:
            闭包 --- 为了防止全局变量污染
            构造函数 --- 面向对象的编程方式
            构造函数的方法 --- 输入不同参数,实现不同的代码效果
            判断 --- 为了防止重复生成冗余的实例化对象

    
</script>