面试高频手写题008-实现单例模式

一、什么是单例模式

定义：保证一个类仅有一个实例对象，并提供一个访问它的全局访问点。

单例模式是一种常用的模式，有些对象往往只需要一个，比如：线程池、全局缓存、浏览器中的 window 对象等。在 Javascript 开发中，单例模式的用途同样非常广泛，比如做登录弹框，它在当前页面是唯一的，无论单击多少次，都只会创建一次，这就非常适合用单例模式来创建。

二、JS手写实现单例模式

“代理版”单例模式：遵循单一原则，创建对象的类和保证单例的类分开定义

// “代理版”单例模式：遵循单一原则，创建对象的类和保证单例的类分开定义
var Singleton = function(name) {
  this.name = name;
}
Singleton.prototype.getName = function() {
  console.log(this.name);
}

var ProxySingleton = (function() {
  // 采用闭包
  var instance = null;

  return function(name) {
    // 惰性单例
    if (!instance) {
      instance = new Singleton(name);
    }

    return instance;
  }
})();

// 测试用例
var a = new ProxySingleton('JavaScript');
var b = new ProxySingleton('vue.js');

console.log(a === b); // true
a.getName() //JavaScript
b.getName() //JavaScript

三、单例模式使用场景举例

以网页登录弹窗、注册弹窗为例，封装单例模式实现通用性

// 封装单例模式
var getSingle = function (fn) {
    var result;

    return function () {
        return result || (result = fn.apply(this, arguments));
    }
}

// 登录
var loginMsgbox = function () {
    var dom = document.createElement('div');

    dom.innerHTML = '登录弹框';
    dom.style.display = 'none';
    document.body.appendChild(dom);

    return dom;
}
var createLoginMsgbox = getSingle(loginMsgbox);
document.getElementById('loginBtn').onclick = function () {
    var login = createLoginMsgbox();  // login单例，每次点击登录按钮，只会创建一次登录弹窗

    login.style.display = 'block';
}

// 注册
var registerMsgbox = function () {
    var dom = document.createElement('div');

    dom.innerHTML = '注册弹框';
    dom.style.display = 'none';
    document.body.appendChild(dom);

    return dom;
}
var createRegisterMsgbox = getSingle(registerMsgbox);
document.getElementById('registerBtn').onclick = function () {
    var register = createRegisterMsgbox();  // register单例，每次点击注册按钮，只会创建一次注册弹窗


    register.style.display = 'block';
}

四、参考链接

https://zhuanlan.zhihu.com/p/378249950

https://blog.csdn.net/qq_34574204/article/details/127772879