js设计模式之单例模式

一. 认识单例模式

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

二. 单例模式的分类

  •  简单实现单例模式
  • 透明实现单例模式
  • 代理实现单例模式
  • 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 开发中,通用惰性单例实现方式最常用的一中方式,它将创建对象和管理单例的职责封装在两个不同的方法中,组合在一起就具有了单例模式的威力。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>