JS每日-练--单例模式

bin_123ge

于 2023-05-12 17:54:25 发布

阅读量143

点赞数

文章标签：单例模式开发语言 javascript vue.js

本文链接：https://blog.csdn.net/bin_123ge/article/details/130647168

版权

文章介绍了单例模式的概念，解释了为何在开发中需要使用单例，提供了JavaScript实现单例模式的代码示例，包括函数表达式和类的语法糖形式，并展示了在Vue框架中如何应用单例模式。同时，指出了单例模式可能存在的问题，如扩展性不佳、不支持有参数的构造函数以及对OOP特性支持不足。

摘要由CSDN通过智能技术生成

JS每日一练–设计模式–手写单例模式

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是单例模式？

单例模式是应用最广的设计模式之一，也是程序员最熟悉的一个设计模式，使用单例模式的类必须保证只能有创建一个对象。

二、为什么要使用单例？

在开发过程中，很多时候一个类我们希望它只创建一个对象，比如：线程池、缓存、网络请求等。当这类对象有多个实例时，程序就可能会出现异常，比如：程序出现异常行为、得到的结果不一致等。

这时候就应该使用单例模式。

三、代码实现

/**
 * @author bing ge
 * @param {*} name 
 * @rclarification  这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。 这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建
 */
function singleton(name) {
    this.name = name
    this.instance = null
}

singleton.prototype.getName = function (){
    console.log(this.name);
}

singleton.getinstance = function(rst) {
    if(!this.instance) {
        this.instance = new singleton(rst) // 假如为null 创建一个构造函数 此时instance标记不为空 ，不用进行第二次标记
    }
    return this.instance
}

let a = singleton.getinstance("a")
let b = singleton.getinstance("b")
console.log(a);
a.getName()  // a
b.getName() // a
console.log(a == b);//true

也可以用class语法糖来写

class danlis{
    constructor(name)  {
        this.name = name 
        this.instance = null
    }

    getName(){
        console.log(this.name);
    }
}

danlis.getinstance = function(rst){
    if(!this.instance) {
        this.instance = new danlis(rst)
    }
    return this.instance
}

let c = danlis.getinstance('c')

let d = danlis.getinstance('d')

c.getName()  //c
d.getName()  // d
console.log(c === d);//true

四、在vue中的简单应用

// 单例模式类
class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
  
  sayHello() {
    console.log('Hello, I am a singleton instance.');
  }
}

// 在Vue中使用单例模式
export default {
  created() {
    // 获取单例对象
    const instance = new Singleton();
    
    // 调用单例对象的方法
    instance.sayHello();
  }
}

在这个示例中，我们将单例模式实现为一个类Singleton。在Singleton类中，我们使用了一个静态变量instance来保存单例对象。在类的构造函数中，我们检查instance是否已经存在，如果不存在则创建一个新的单例对象并将其赋值给instance变量，最后返回instance变量。这样，无论我们在代码中创建多少个Singleton对象，都只会得到同一个实例。

在Vue组件中，我们可以通过创建Singleton类的实例来获取单例对象，并在需要的时候调用其方法。在这个示例中，我们在组件的created钩子中创建了一个Singleton实例，并调用了sayHello方法。由于Singleton类的特性，我们可以保证在整个应用中只有一个Singleton实例存在。