javascript 设计模式之单体模式 面向对象学习基础

JavaScript 设计模式之单体模式

什么是单体模式?

单体模式,也叫单例模式,是一种面向对象设计模式,它保证一个类只能有一个实例,并提供一个访问它的全局访问点。

单体模式的优点

  1. 提供了对唯一实例的受控访问。
  2. 在一个应用程序中,这样的实例很少,因为这会节约系统资源。
  3. 可以用于全局变量,避免命名空间污染。
  4. 提供了对单例对象的集中化管理。

实现单体模式

在 JavaScript 中,单体模式有很多实现方式,下面是一种最常见的实现方式:

var Singleton = (function () {
    var instance;

    function SingletonConstructor() {
        // 单例对象的属性和方法
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = new SingletonConstructor();
            }
            return instance;
        }
    };
})();

在这个实现中,Singleton 是一个函数,它定义了一个包装器,并返回一个对象,这个对象有一个名为 getInstance 的方法。这个方法检查是否已经存在实例了,如果不存在,它就创建一个实例,并返回。

通过 new SingletonConstructor() 创建的实例为单体模式中的单例对象。通过 getInstance 方法访问单例对象。

这种实现方式使用了闭包来保持对 SingletonConstructor 的引用,从而避免了将其暴露在全局作用域。

示例说明

下面两个示例说明如何在 JavaScript 中使用单体模式。

示例一:全局配置对象

在一个 Web 应用程序中,可能需要一个全局的配置对象,用于保存各种配置信息。

var Config = (function () {
    var instance;
    var configData = {
        apiURL: "http://api.example.com",
        apiToken: "xxxxxxxx"
    };

    function ConfigConstructor() {
        // 给单例对象添加属性和方法
        this.getApiURL = function () {
            return configData.apiURL;
        };
        this.getApiToken = function () {
            return configData.apiToken;
        };
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = new ConfigConstructor();
            }
            return instance;
        }
    };
})();

console.log(Config.getInstance().getApiURL());

在这个示例中,单例对象 Config 保存了一个名为 configData 的配置对象。通过调用 Config.getInstance().getApiURL() 方法,可以获取配置对象中的 apiURL 属性的值。

示例二:模态框

在一个 Web 应用程序中,可能需要一个全局的模态框来展示各种弹窗。

var Modal = (function () {
    var instance;
    var modalContainer = document.createElement("div");
    modalContainer.className = "modal-container";

    function ModalConstructor() {
        // 给单例对象添加属性和方法
        this.show = function () {
            document.body.appendChild(modalContainer);
        };
        this.hide = function () {
            document.body.removeChild(modalContainer);
        };
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = new ModalConstructor();
            }
            return instance;
        }
    };
})();

// 显示模态框
Modal.getInstance().show();
// 隐藏模态框
Modal.getInstance().hide();

在这个示例中,单例对象 Modal 保存了一个名为 modalContainer 的模态框容器。通过调用 Modal.getInstance().show() 方法,可以显示模态框,在调用 Modal.getInstance().hide() 方法后,模态框会被隐藏。

结语

单体模式是一种非常实用的设计模式,在 JavaScript 的应用中也有很多的应用场景。使用单体模式可以保证对象的唯一性,并提供了对单例对象的集中化管理。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 设计模式之单体模式 面向对象学习基础 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)

    JavaScript中类的定义及其方式 什么是类 类是面向对象编程中的基本概念之一,它是一个抽象的概念,用来描述一个共性的概念或一些具有相同属性和方法的对象的集合。 在ES6之前,JavaScript中并没有类的概念,但是通过函数和构造函数的方式,可以模拟出类的定义和使用。 定义类的方式 1. 使用函数 通过创建一个函数,来模拟出一个类,然后可以使用new关…

    JavaScript 2023年5月27日
    00
  • JavaScript深拷贝与浅拷贝实现详解

    JavaScript深拷贝与浅拷贝实现详解 什么是拷贝? 在JavaScript中,我们经常需要将对象或者数组进行复制操作,这被称为拷贝。在拷贝过程中,我们需要注意两个概念:浅拷贝和深拷贝。 什么是浅拷贝? 浅拷贝仅仅是复制了对象或数组的引用,而并没有克隆对象或数组。也就是说,对于被拷贝的对象或数组,它们的属性仍然指向原对象或数组中的属性。浅拷贝通常使用的方…

    JavaScript 2023年6月10日
    00
  • 深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域

    深入理解JavaScript中的匿名函数((function() {})();)与变量的作用域攻略。在JavaScript中,函数是一等公民,具有与其他数据类型相同的地位。变量的作用域是JavaScript函数特有的概念。这个攻略将会详细解释匿名函数和JavaScript变量作用域的相关知识点。 匿名函数 概念 匿名函数是一种没有名称的函数。在JavaScr…

    JavaScript 2023年5月27日
    00
  • JSONP 的原理、理解 与 实例分析

    JSONP 的原理、理解 与 实例分析 JSONP 的基本原理 JSONP(JSON with Padding)是一种跨域数据访问技术,在 A 网站的页面中向 B 网站请求数据时,由于浏览器的同源策略限制,不允许直接访问不同域下的数据。但是,通过在 A 网站中添加一个 script 标签,请求 B 网站中的数据,并采用特定的回调函数对数据进行处理。B 网站返…

    JavaScript 2023年5月27日
    00
  • 深入剖析Java中的各种异常处理方式

    深入剖析Java中的各种异常处理方式 在Java中,异常处理是一项非常重要的任务。Java内置了许多不同的异常类型,以及许多不同的异常处理方式。在本文中,我们将深入剖析Java中的各种异常处理方式,向你展示如何优雅地处理程序可能出现的异常情况。 异常的产生原因 在Java中,异常是代码运行时可能遇到的问题或错误的一种表示。通常情况下,异常会导致程序终止或崩溃…

    JavaScript 2023年5月28日
    00
  • JavaScript使用HTML5的window.postMessage实现跨域通信例子

    下面是详细的攻略: 什么是跨域通信 跨域通信是指在不同的域名下的网页之间进行通信。由于浏览器的同源策略限制,不同的域名访问对方网站中的数据是受限的。JavaScript使用HTML5的window.postMessage方法实现跨域通信,是一种安全而可靠的通信方式。 使用window.postMessage方法实现跨域通信的步骤 实现跨域通信的步骤如下: 在…

    JavaScript 2023年6月11日
    00
  • javascript中Date format(js日期格式化)方法小结

    下面我将详细讲解“javascript中Date format(js日期格式化)方法小结”。 简介 Date对象是Javascript同日期相关的对象,它提供了很多方便易用的日期时间操作方法。其中format方法就是在Date对象中提供的一种日期格式化的方法。 语法 Date.format(formatStr) formatStr为日期格式化字符串。常用的格…

    JavaScript 2023年5月27日
    00
  • JavaScript数组reduce()方法

    我们来详细讲解一下JavaScript数组reduce()方法的完整攻略。 简介 reduce() 方法是JavaScript数组的一个非常强大的方法,它可以将一个数组中的所有元素依次执行一个回调函数,并将最终结果返回。在实际应用中,这个方法非常多样化,能够应用于各种情景。 基本语法 reduce() 方法的基本语法如下: array.reduce(func…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部