JavaScript进阶:单例模式

作者: 听书先生 | 来源:发表于2022-01-24 17:38 被阅读0次
1、前言

单例模式又称单体模式,只允许实例化一次的对象类,有时可以使用一个对象来规划一个命名空间。

命名空间:即namespace,在定义变量或者方法时,为了避免不同的开发者重复定义,一般需要使用命名空间进行约束每个人定义的变量,如jQuery的animate方法,调用时:jQuery.animate()

单例模式除了定义命名空间外,还可以通过单例模式来管理代码块的各个模块,如:百度的添加设置元素类会放入到dom模块,阻止事件冒泡会放在event模块中去。

2、简单创建一个单例模式

开始创建一个自己的Configure代码库

// 创建自己的Configure代码库
let  Configure = {
    Utils: {
        util_method1: function() {
            console.log('util_method1')
        },
        util_method2: function() {
            console.log('util_method2')
        },
    },
    Interface: {
        interface_method1: function() {
            console.log('interface_method1')
        },
        interface_method2: function() {
            console.log('interface_method2')
        }
    },
    Style: {
        style_method1: function() {
            console.log('style_method1')
        },
        style_method2: function() {
            console.log('style_method2')
        },
    }
}

// 调用Configure库中的Utils模块下的util_method1方法 
Configure.Utils.util_method1();  // util_method1
3、静态变量使用单例模式

静态变量的特性:只能访问不能修改,并且无创建后即能使用的特点。
解决方法:将变量定义在函数内部,但是不提供赋值变量的方法,只提供取值的方法,为了让外部能够进行访问,创建的函数先执行一次,这样我们创建的对象内部保存静态变量通过取值器访问,最后将这个对象作为一个单例放在全局空间作为静态变量提供出去。

const _static = (function(){
    // 私有变量
    let setting = {
        MAX_NUM: 100,
        MIN_NUM: 1,
        COUNT: 30
    }
    return {
        // 返回值
        get: function(name) {
            return setting[name] ? setting[name] : null;
        }
    }
})();

const _data = _static.get('COUNT');

console.log(_data);  // 30
3、惰性单例

有的情况下需要单例对象延迟创建,因此,也存在一种延迟创建的惰性模式。

// 惰性单例
const LazySingle = (function(){
    // 单例实例引用
    let _instance = null;
    // 单例
    function Single() {
        return {
            // 私有方法和属性
            method1: function() {},
            _attrData: 'test-01'
        }
    }
    return function() {
        if(!_instance){
            _instance = Single()
        }
        return _instance;
    }
})()

console.log(LazySingle()._attrData);  //  test-01

相关文章

  • Node.js与单例模式

    1、前端的JavaScript单例模式 单例模式是非常常用的设计模式,前端的JavaScript中单例模式代码可能...

  • JavaScript进阶:单例模式

    1、前言 单例模式又称单体模式,只允许实例化一次的对象类,有时可以使用一个对象来规划一个命名空间。 命名空间:即n...

  • 前端开发工程师必备系列-几个简单的JS单例模式

    前端开发工程师必备系列-几个简单的JS单例模式 JavaScript单例模式 1. 单例模式 单例模式(Singl...

  • 单例模式

    一、实现单例模式 或者 二、透明的单例模式 三、用代理实现单例模式 四、JavaScript中的单例模式 在Jav...

  • JavaScript设计模式二(单例模式)

    JavaScript设计模式二(单例模式) 这边文章主要是JavaScript中的单例模式定义: 保证一个类仅有一...

  • JavaScript 设计模式(上)——基础知识

    系列链接 JavaScript 设计模式(上)——基础知识 JavaScript 设计模式(中)——1.单例模式 ...

  • Javascript基础进阶(九)单例模式

    单例模式 单例模式? 大白话理解: 把描述同一事物(同一个对象)的属性和方法放在一个内存空间下,起到了分组的作用,...

  • JavaScript单例模式

    前言 单例模式的定义:保证一个类仅仅有一个实例,并提供一个访问他的全局访问点。意义:有的时候,一些对象我们仅仅需要...

  • JavaScript 单例模式

    定义 确保一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式使用的场景 比如线程池、全局缓存等。我们所熟...

  • JavaScript 单例模式

    在很多情况下,我们需要全局使用某一个实例,这个时候我们可以使用单例模式来解决这个问题!话不多说,直接上代码!老规矩...

网友评论

    本文标题:JavaScript进阶:单例模式

    本文链接:https://www.haomeiwen.com/subject/oubbhrtx.html