原生javascript单例模式的应用实例分析

yizhihongxing

原生JavaScript单例模式是设计模式中比较经典的一种,可以控制某个对象只创建一个实例,适用于需要全局访问某个对象且只需要一个实例的场景。下面就是一个原生JavaScript单例模式的应用实例分析,帮助你更好地理解该设计模式的应用。

什么是原生JavaScript单例模式

原生JavaScript单例模式指在JavaScript中用最简单、最基本的方法创建一个只有一个实例的对象。单例模式的思想是只需要一个实例,就可以完全实现某种功能。具体来说,单例模式有以下特点:

  1. 只允许创建一个对象实例;
  2. 通过一个全局访问点访问该实例。

单例模式的应用场景主要包括全局缓存、全局日志记录器、全局资源池等等。

实现原生JavaScript单例模式的两种方法

一个对象可以使用单例模式来实现,方法有两种:

方法一:使用闭包创建单例模式

使用闭包实现单例模式的基本思路是将生成实例的方法封装在一个闭包内部,然后返回这个生成实例的方法。这样,每次调用这个生成实例的方法时,都可以通过闭包保持上一次调用时的实例。

var Singleton = (function(){
  var instance;
  function Foo(){
    //私有变量和私有方法
    var name = 'zhangsan';
    function test(){
      console.log(name);
    }
    return {
      //公有变量和公有方法
      getName:function(){
        return name;
      },
      setName:function(value){
        name = value;
      },
      test:test
    }
  }
  return {
    //获取实例的方法
    getInstance:function(){
      if(!instance){
        instance = new Foo();
      }
      return instance;
    }
  }
})();

以上代码中使用闭包创建了一个名为Singleton的对象,在这个对象内部有一个名为instance的变量。getInstance方法用于获取这个实例,如果还没有创建过实例,就新创建一个,并返回,否则就直接返回已经创建过的实例。

调用方式:

var s1 = Singleton.getInstance();
    s1.setName('lisi');
var s2 = Singleton.getInstance(); 
console.log(s2.getName()); //输出lisi
console.log(s1 === s2); //true

方法二:使用代理模式创建单例模式

代理模式即让代理对象控制目标对象。在单例模式中,我们可以通过代理对象来实现单例模式,具体实现方法是:将生成实例的方法封装在一个代理对象的内部,在代理对象中判断是否已经创建过实例,如果已经创建了实例,则直接返回该实例;否则新创建一个实例并返回,同时保存该实例供下次调用。

var Singleton = {
  getInstance : function(){
    var instance = null;
    return function(){     
      if(!instance){
        instance = new Object(Object.prototype);
        instance.name = 'zhangsan';
        instance.test = function(){
          console.log(this.name);
        }
      }
      return instance; 
    }
  }()
};

以上代码中定义了一个名为Singleton的代理对象,在该代理对象内部用一个匿名函数定义了生成实例的方法,同样也是先检查实例是否已经创建,如果没有创建则去创建。

使用:

var s1 = Singleton.getInstance();
    s1.name = 'lisi';
var s2 = Singleton.getInstance();
console.log(s2.name); //输出lisi
console.log(s1 === s2); //true

为什么要使用原生JavaScript单例模式

使用原生JavaScript单例模式可以避免对象的重复创建,提高代码效率以及节省内存空间。在需要全局访问一个对象且需要保证不重复创建实例时,使用单例模式是最佳选择。

示例一:全局状态管理器

单例模式可以用来管理全局状态,反应在代码中就是,状态被绑定到了一个单例中,这个单例被广泛使用。

var StatusManager = (function() {
  var status;
  function getStatus() {
    return status;
  }
  function setStatus(value) {
    status = value;
  }
  return {
    getStatus: getStatus,
    setStatus: setStatus
  }
})();

在调用getStatus、setStatus函数的地方:

console.log(StatusManager.getStatus()); // undefined
var title = 'new title';
StatusManager.setStatus(title);
console.log(StatusManager.getStatus()); // 'new title'

示例二:全局配置管理器

单例模式也可以用在全局配置管理器中,尤其在Web应用开发中经常使用。

var ConfigManager = (function() {
  var config;
  function getConfig() {
    return config;
  }
  function setConfig(value) {
    config = value;
  }
  return {
    getConfig: getConfig,
    setConfig: setConfig
  }
})();

在调用getConfig、setConfig函数的地方:

console.log(ConfigManager.getConfig()); // undefined
var config = {
  url: 'http://localhost:1234/api',
  itemsPerPage: 20
};
ConfigManager.setConfig(config);
console.log(ConfigManager.getConfig()); // '{url: "http://localhost:1234/api", itemsPerPage: 20}'

以上这些示例可以更好地帮助我们理解原生JavaScript单例模式的应用,同时也说明了单例模式的实际应用场景。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生javascript单例模式的应用实例分析 - Python技术站

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

相关文章

  • javascript动画系列之模拟滚动条

    我来给你详细讲解 “javascript动画系列之模拟滚动条”的完整攻略。本篇攻略将分成以下几个部分介绍如何使用 JavaScript 实现一个模拟滚动条。 准备工作 在进行模拟滚动条的制作之前,我们需要有 HTML 和 CSS 的基础。这里不做过多的讲解,只讲有关滚动条部分的 HTML 和 CSS 代码。下面的代码片段是例子的 HTML 代码: <d…

    JavaScript 2023年6月10日
    00
  • checkbox勾选判断代码分析

    针对“checkbox勾选判断代码分析”,我会从以下几个方面进行详细讲解: checkbox的勾选状态判断 checkbox的点击事件绑定 checkbox状态改变时的处理逻辑 checkbox的勾选状态判断 在HTML中,可以通过以下代码创建一个checkbox: <input type="checkbox" id="m…

    JavaScript 2023年6月11日
    00
  • 全面了解JavaScript对象进阶

    全面了解JavaScript对象进阶 了解对象介绍 JavaScript 是通过对象来组织数据和功能的,可以认为在 JavaScript 中我们所有的一切都是对象,也就是说你定义的任何变量或函数都是对象。对象可以由两种方法创建:1. 直接量2. 构造函数 对象直接量 对象直接量是由若干名/值对组成的映射表,用大括号括起来。然后在每个名/值对之间用逗号分隔即可…

    JavaScript 2023年5月18日
    00
  • JS实现含有中文字符串的友好截取功能分析

    让我来详细讲解一下 “JS实现含有中文字符串的友好截取功能分析” 的完整攻略。 1. 背景 在前端开发中,经常需要对文本进行截取展示,但是如果直接使用JS自带的字符串截取方法,会出现截取中文时的问题。因为中文字符在计算机中占用两个字节,如果按照字节截取,就会出现乱码或者截取到半个中文的情况。因此,我们需要对字符串截取封装一个方法,可以实现友好的中英文截取,而…

    JavaScript 2023年5月19日
    00
  • javascript针对DOM的应用分析(四)

    Javascript针对DOM的应用分析(四) 在前三篇文章中,我们已经了解了什么是DOM,如何获取DOM元素,以及如何修改DOM属性和内容。在本文中,我们将深入探讨Javascript针对DOM的高级应用。 1. 动态操作CSS 我们可以通过Javascript来动态修改DOM元素的CSS属性。以下是一个简单的示例: let myDiv = documen…

    JavaScript 2023年6月10日
    00
  • js的对象与函数详解

    JS的对象与函数详解 本文将讲解JavaScript中的对象和函数。对象是一种数据类型,它们可以具有属性和方法。函数是一种可调用的对象,它通常用来实现可重复使用的代码块。 对象 JavaScript中的对象可以看作是键值对的集合,每个键都是字符串,每个值可以是任意类型的数据。对象可以通过对象字面量的方式创建,也可以通过构造函数实例化。以下是创建对象的两种方式…

    JavaScript 2023年5月27日
    00
  • JavaScript+CSS实现唯美蝴蝶动画

    下面我就来详细讲解一下“JavaScript+CSS实现唯美蝴蝶动画”的完整攻略。 1. 准备蝴蝶图片素材 第一步需要准备的就是蝴蝶图片素材。这里我们需要两张素材,一张是蝴蝶展翅的图片,另一张是蝴蝶合拢翅的图片。可以在网络上搜索或者自己拍摄。 2. HTML文件结构 创建一个 HTML 文件,并添加如下结构: <!DOCTYPE html> &l…

    JavaScript 2023年6月10日
    00
  • JS利用map整合双数组的小技巧分享

    JS利用map整合双数组的小技巧是指通过使用map函数,把两个数组逐个对应元素整合成一个新的数组。下面是具体的步骤及示例: 1. 首先明确双数组整合的要求 如果我们有两个数组: const arr1 = [1, 2, 3]; const arr2 = [‘a’, ‘b’, ‘c’]; 我们希望将这两个数组逐个对应元素整合成一个新的数组,即得到: const …

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