首页 > 其他分享 >前端设计模式——单例模式

前端设计模式——单例模式

时间:2023-03-07 11:23:37浏览次数:33  
标签:Singleton const 对象 前端 instance 实例 单例 设计模式

单例模式是一种设计模式,它可以确保某个类只有一个实例,并提供一个全局的访问点来访问该实例,我们可以使用单例模式来管理全局状态和共享资源。

在JavaScript中,单例模式可以通过多种方式实现,以下是一些常见的实现方式:

1. 对象字面量

使用对象字面量可以轻松地创建单例对象,例如:

const singleton = {
  property1: "value1",
  property2: "value2",
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  },
};

 

上述代码中,使用了一个对象字面量来创建单例对象,该对象包含了一些属性和方法。由于JavaScript中对象字面量本身就是单例的,因此不需要额外的代码来保证单例。

2. 构造函数

在JavaScript中,每个构造函数都可以用于创建单例对象,例如:

function Singleton() {
  // 判断是否存在实例
  if (typeof Singleton.instance === "object") {
    return Singleton.instance;
  }

  // 初始化单例对象
  this.property1 = "value1";
  this.property2 = "value2";
  Singleton.instance = this;
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 输出 true

 

 

上述代码中,使用了一个构造函数来创建单例对象。在构造函数中,首先判断是否存在单例实例,如果存在则直接返回该实例,否则创建单例对象并将其保存在 `Singleton.instance` 属性中。由于JavaScript中每个构造函数本身就是一个单例,因此不需要额外的代码来保证单例。

3. 模块模式

使用模块模式可以创建一个只有单个实例的对象,例如:

const Singleton = (function () {
  let instance;

  function init() {
    // 创建单例对象
    const object = new Object("I am the instance");
    return object;
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = init();
      }
      return instance;
    },
  };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出 true

 

上述代码中,使用了一个立即执行函数来创建单例对象。在该函数中,定义了一个私有变量 `instance` 用于存储单例实例,而 `init` 函数则是用于创建单例实例的方法。最后,返回一个对象,该对象包含一个 `getInstance` 方法,该方法用于获取单例实例。

通过上述方式实现的单例模式,可以确保在程序运行期间,某个类只有一个实例,并且该实例可以在任何地方访问。

标签:Singleton,const,对象,前端,instance,实例,单例,设计模式
From: https://www.cnblogs.com/ronaldo9ph/p/17187407.html

相关文章

  • crypto.js 前端加解密
    crypto-js是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有:MD5、SHA-1、SHA-256、AES、RSA、Rabb......
  • 单例模式应用于login-加装饰器
     importrandomdefsingleton(class_):instances={}defget_instance(*args,**kwargs):ifclass_notininstances:instances[cl......
  • java23种设计模式学习
    1、策略模式理解:就是通过传不同的参数,调用不同的对象代码实操publicinterfaceIStrategy{voidoperate();}publicclassBackDoorimplementsIStrategy{......
  • Book-深入设计模式-访问者模式
    Book-深入设计模式-访问者模式https://refactoringguru.cn/design-patterns/visitor访问者模式亦称:Visitor访问者模式是一种行为设计模式,它能将算法与其所作用的对象......
  • Book-深入设计模式-策略模式
    Book-深入设计模式-策略模式https://refactoringguru.cn/design-patterns/strategy策略模式亦称:Strategy策略模式是一种行为设计模式,它能让你定义一系列算法,并将每......
  • nginx部署前端项目-location root与 alias区别
    1、locationroot:/path/uri(把匹配的路径追加到配置的路径:/demoProject追加到/usr/local/nginx/front/apps/demo)/demoProject{root/usr/local/nginx......
  • Book-深入设计模式-中介者模式
    Book-深入设计模式-中介者模式https://refactoringguru.cn/design-patterns/mediator中介者模式亦称:调解人、控制器、Intermediary、Controller、Mediator中介者模式......
  • 【django-vue】登录注册模态框分析 登录注册前端页面 腾讯短信功能二次封装 短信验证
    目录昨日回顾csrf跨站请求伪造接口幂等性异常捕获今日内容1登录注册模态框分析Login.vueHeader.vue2登录注册前端页面复制2.0Header.vue2.1Login.vue2.2Register.vue3......
  • ruoyi前端后端启动
    一、准备环境阶段:前端需要:vue等,maven、git、redis、mysql、二、文件下载阶段:1.在ruoyi官网下载ruoyi-vue前后端分离文件:|www.ruoyi.vip2.在IDEA中的:getfromversionco......
  • Book-深入设计模式-代理模式
    Book-深入设计模式-代理模式https://refactoringguru.cn/design-patterns/proxy代理模式亦称:Proxy代理模式是一种结构型设计模式,让你能够提供对象的替代品或其占位符......