js单例模式

时间:2022-05-23 石头山_S 人气:0

一. 认识单例模式

单例模式的意思是，保证一个类只有一个实例，并且有一个接口供全局访问。它的作用就是防止频繁创建实例，浪费不必要的内存空间和资源消耗，那它有什么实用场景呢，假如我们在页面中有一个点击跳出一个弹窗操作，弹窗应该是唯一的，无论点击多少次它都应该被构建一次，那么这个弹窗就适合用单例模式来创建。

二. 单例模式的分类

简单实现单例模式
透明实现单例模式
代理实现单例模式
js单例模式
惰性单例模式
通用惰性单例模式（主要用于 js）

注： 前三种单例模式为用类实现的思想，通过 new 的方式来创建实例，而 javascript 是没有类的，可以直接创建实例，因此并不适用，主要用于后边三种。

三. 具体实现和思想学习

1. 简单实现单例模式

        let Singleton = function ( name ) {
            this.name = name;
        }
        Singleton.instance = null;
        Singleton.prototype.getName  = function () {
            console.log( this.name )
        }
        Singleton.getInstance = function ( name ) {
            if( !this.instance ) {
                this.instance = new Singleton( name );
            }
            return this.instance;
        }
 
        let a = Singleton.getInstance('sk');
        let b = Singleton.getInstance('ss');
        console.log(a);
        console.log(a === b) // true

实现思想：将第一次创建的实例进行保存，之后再次创建前判断是否已经创建，如果之前创建过则返回已经保存的实例，否则创建一个实例，将实例创建和判断封装到了一个 getInstance 函数中，这种方式相对简单，但增加了类的“不透明性”，用一个函数来获取一个实例，而不是以往通过 new 来创建。

2. 透明单例模式

        let CreateDiv = function () {
            let instance ;
            let CreateDiv = function ( html ) {
                if( instance ) {
                    return instance;
                }
                this.html = html;
                this.init();
                return instance = this;
            }
            
            CreateDiv.prototype.init = function () {
                let element = document.createElement('div');
                element.innerHTML = this.html;
                document.body.appendChild(element);
            }
            return CreateDiv;
        }();
 
        let a = new CreateDiv('石头山');
        let b = new CreateDiv('哈哈');
        console.log(a === b); // true

实现思想：该方式与前一实现不同的在于用 new 来创建实例，运用了闭包来保存实例标识，从而达到只能创建唯一实例，但是如果有一天想创建多个 div 实例，该代码就不实用了，必须修改代码，因此扩展除了代理实现。

3. 代理实现单例模式

        let CreateDiv = function ( html ) {
            this.html = html;
            this.init();
        }
        CreateDiv.prototype.init = function () {
            let div = document.createElement('div');
            div.innerHTML = this.html;
            document.body.appendChild(div);
        }
 
        let ProxySingletonCreateDiv = function () {
            let instance ;
            return function ( html ) {
                if( !instance ) {
                    instance = new CreateDiv( html );
                }
                return instance;
            }
        }();
        let a = new ProxySingletonCreateDiv('sven1');      
        let b = new ProxySingletonCreateDiv('sven2');
        console.log(a === b); // true

实现思想：CreateDiv 为一个普通类，将创建和判断唯一实例封装在了代理函数中，增加了代码复用性，弥补了透明单例的不足，需要单例则直接 new ProxySingletonCreateDiv（），需要普通实例则直接 new CreateDiv（），但是该方式代码可读性差，也不采用。

4. js的单例模式

① 使用命名空间来创建：将所有变量和方法直接放在一个全局对象中

 let S = {
            name: '石头山',
            getName() {
                console.log(this.name);
            }
        }

② 使用闭包封装私有变量：将变量封装在闭包内部，只向全局暴露一个访问接口

            let name = "石头山";
            return {
                getName() {
                    return name;
                }
            }
        }

5. 通用惰性单例

        // 写一个通用的获取单例的函数 , fn 为执行单次的函数
        let getSingle = function ( fn ) {
            let result;
            return function () {
                return result || ( result = fn.apply(this, arguments))
            }
        }
        // 绑定事件
        let bindEvent = function () {
            document.getElementById('div').addEventListener('click',()=>{
                console.log('我出现了')
            });
        }();
        // 无论渲染多少次，事件只绑定一次
        let render = function () {
            console.log('开始渲染！');  
            getSingle(bindEvent)
        }
        render();
        render();
        render();

该方式是 js 中常用的单例实现方法，再页面重复渲染三次时，监听事件只绑定了一次，减少了开销。

惰性体现：惰性体现在实例实在需要时创建，并不会在页面加载好就创建。

实现思想：首先利用闭包和高阶函数封装了一个返回单一实例的函数，其参数就是一个只执行一次的函数，可以随时改变单例的作用，大大增加了代码的可复用性。

四. 总结

单例模式是一种简单但非常使用的开发模式，js 开发中，通用惰性单例实现方式最常用的一中方式，它将创建对象和管理单例的职责封装在两个不同的方法中，组合在一起就具有了单例模式的威力。

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!

加载全部内容