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

原生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日

相关文章

  • 使用JS和canvas实现gif动图的停止和播放代码

    下面是使用JS和canvas实现gif动图的停止和播放的完整攻略: 1. 了解Canvas画布和Image对象 Canvas是HTML5新增的标签,允许通过JS脚本来实现动态绘制图像。而Image对象则是JS中常见的图像对象,可以用于显示一张图片。 2. 载入GIF动图并绘制到Canvas画布上 使用Image对象来载入本地存储路径下的GIF动图文件,并将其…

    JavaScript 2023年6月10日
    00
  • JS中强制类型转换的实现

    JS中强制类型转换的实现是通过一组内置函数来完成的,这些函数会将一个数据类型转换为另一种数据类型。通常情况下,JS会自动进行隐式类型转换,但是有些情况下我们需要手动进行强制类型转换。 强制类型转换的相关函数如下: parseInt():将字符串转换为整数。 parseFloat():将字符串转换为浮点数。 String():将其他类型的值转换为字符串。 Bo…

    JavaScript 2023年5月28日
    00
  • JavaScript如何生成二维数组

    生成二维数组的过程,实际上就是创建一个包含其他数组的数组。这个过程也可以称之为多维数组的创建。在 JavaScript 中,可以通过以下几种方法来生成二维数组: 方法一:使用双重循环创建二维数组 let rows = 5; let cols = 4; let arr = new Array(rows); for (let i = 0; i < rows…

    JavaScript 2023年5月28日
    00
  • 现代 javscript 编程 资料第6/6页

    现代JavaScript编程资料第6/6页攻略 1. 简要介绍 “现代JavaScript编程”是一份由作者推荐的学习JavaScript编程的资料,第6/6页是其中的最后一部分,主要涉及一些高级的JavaScript编程概念和技术。 2. 常见问题汇总 作者在第6/6页中总结了一些常见的问题,并提供了解决方案,其中一些重要的问题包括: 如何处理异步编程问题…

    JavaScript 2023年5月27日
    00
  • JS中with的替代方法与String中的正则方法详解

    JS中with的替代方法 在JavaScript中,with语句被认为是一种具有争议和不良实践的代码。因此,建议避免使用with语句,而是使用以下两种替代方法: 1. 将对象赋值给变量 将需要在代码块中多次使用的对象赋值给变量,然后通过变量来访问它的属性和方法。 例如: const person = { name: ‘小明’, age: 20, job: ‘…

    JavaScript 2023年6月10日
    00
  • 深入理解 JavaScript 中的 JSON

    请稍等。以下是“深入理解 JavaScript 中的 JSON”的完整攻略: 什么是 JSON ? JSON 的全称是“JavaScript Object Notation”,是一种通用的数据交换格式,基于 JavaScript 的对象字面量语法,用来表示简单的数据结构,如在前端与服务端之间的数据传输。JSON 是轻量级的、易于阅读和编写的,并且容易解析和生…

    JavaScript 2023年5月27日
    00
  • JavaScript数据存储 Cookie篇

    下面是JavaScript数据存储之Cookie篇的完整攻略。 什么是Cookie Cookie 是一种在客户端存储数据的机制,通过浏览器将数据存储在用户的计算机上。Cookie 通常由 Web 服务器生成,以便服务器可以记住用户的状态,从而改善用户对网站的体验。 Cookie 的属性 Cookie 有以下几个属性: 名称:Cookie 的名称。 值:Coo…

    JavaScript 2023年6月11日
    00
  • 九种js弹出对话框的方法总结

    那么首先对于这个主题,我们需要先明确一下一些基本的概念。 什么是对话框 对话框是一种常用的网页中弹出提示信息的方式,类似于当前操作系统的模态对话框。它可以包含文本、按钮、表单等,显示给用户进行操作。 常见的对话框种类 在JS中,常见的对话框包括alert、confirm、prompt、layer、sweetAlert2、artDialog、mbox、weui…

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