用JS来理解设计模式——单例模式

发表于:2021-2-20 09:52

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:Callas    来源:掘金

分享:
  单例模式确保一个类只有一个实例,并提供一个全局访问点。
  单例模式应该算是一个设计模式中比较简单且好用的模式,大部分人或多或少都接触过这个模式。所以也不举什么例子了,先来问几个问题,如果都了解的话,也就不用往下看了。
  · 单例模式有什么用,什么时候用?
  · 单例模式怎么写?
  · 在JS里用单例模式时可能会出什么问题?
  单例模式有什么用,什么时候用?
  很简单,在上面的定义以及模式的名字就能看出来,这个模式的用处就是保证我们拿到的对象永远是同一个,不论是在代码的什么地方,也不论是在何时。
  举几个例子,比方说一个提示弹窗,一般来说这种提示弹窗通常不会同时展示多个出来,但假如短时间内多次调用生成提示弹窗的方法,则有可能会出现多个提示弹窗。但假若采用了单例模式来,我们拿到的永远是同一个提示弹窗,只会在同一个提示弹窗上进行修改,就不用担心多个弹窗出现的情况。
  再比方说,当我们创建的一个对象所花销的时间较长,且这个对象属于可复用的,又可能需要频繁使用时,就可以采用单例模式,比较常见的就是创建编辑器这类对象等等。
  书里有提到一个大家可能会有的问题,那就是写一个大家约定好的全局变量不也一样吗?因为这样也能够实现单例模式所需要的效果,无论是在何时何地拿到的都是同一个对象。确实这样子也是可以做到单例的效果,但是有几个问题。
  1.假如创建这个对象过程非常消耗资源,然后我们却一直没用使用到,那么不就是形成浪费了吗,即浪费了生成的时间,也浪费了其占据的内存空间。
  2.如何保证这个对象只会被实例化一次?生成这个对象的方法会不会暴露出来,使得其他开发人员选择在其他地方自己调用?
  这里也说到了一个很重要的点,就是构造这个对象的方法应当是“私有”的,不能够被直接调用,否则这个方法也没什么意义了。
  单例模式怎么写?
  首先需要和大家说明,我写这个代码是根据自己的理解来写的,写之前没参考别人的写法,所以可能会有一些问题,欢迎大家指出。
  let getTestInstance = (function () {
    let instance = null;
    class Test {
      constructor (name) {
        this.name = name || 'test'
      }
      changeName (name) {
        this.name = name;
      }
    }
    return function (...args) {
      if (!instance) instance = new Test(...args);
      return instance;
    }
  })();
  let a = getTestInstance();
  console.log(a.name); // test
  a.changeName('name change');
  console.log(a.name); // name change
  let b = getTestInstance();
  console.log(b.name); // name change
  b.changeName('name change2');
  console.log(b.name); // name change2
  console.log(a.name); // name change2
  console.log(a === b); // true
  这里的实现比较简单,主要是通过闭包,将我们的单例和构造函数“私有化”,无法直接访问,从而保证拿到的都是同一个对象,且只能通过getTestInstance方法来获取。这样我们就能确保一个类只有一个实例,且只能通过我提供的这个访问点来获取,这样就符合了单例模式的要求。
  单例模式确保一个类只有一个实例,并提供一个全局访问点。
  我们可以看到变量a与变量b其实指向的都是同一个实例,因此不论是a对实例的改变或是b,都会互相影响。
  这里的代码实现例子是一个简单的例子,不过还有一些特殊的情况需要考虑。
  在JS里用单例模式时可能会出什么问题?
  1.多线程问题
  2.异步生成实例问题
  多线程问题
  多线程问题指的是假若有几处代码同时调用了获取实例方法,且实例尚且未生成,那么可能出现这几处的实例不一致的情况。众所周知JS是一个单线程模型,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。
  不过现在有了webWorker,JS也拥有了多线程环境,那么我们就可以进行尝试在JS多线程中是否会存在单例模式的多线程问题。
  思路是:新建多个webworker,并且在webWorker中引入getTestInstance方法,然后将webWorker中的生成的实例返回给主流程,在主流程中进行对象比较。
  然而经过尝试发现,在webWorker中使用importScripts引入的js是互相独立的,这意味着生成的实例都是不一样的,那么引入js这条路子就断了。
  因此我就想办法将主流程中的getTestInstance方法传入到webWorker里面,其中我采用了两种方法,但都以失败告终。分别是:
  1.将getTestInstance方法用postMessage传入。
  2.由于webWorker中线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程拥有navigator对象和location对象。利用这个特点,我尝试将getTestInstance方法挂在location对象上。
  但两者的结果分别是:
  1.无法将方法传入到webWoker,这里应该是底层限制,无法解决。
  app.js:15 Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': function (...args) {
        if (!instance) instance = new Test(...args);
        return instance;
      } could not be cloned. 
  2.虽然webWorker确实拥有location对象,但它的location对象很特殊,是WorkerLocation,且不同Worker之间的WorkerLocation都是独立的。因此无法在location对象上获取到getTestInstance方法。
  因此可以片面的说在JS多线程中无法使用单例模式。
  异步生成实例问题
  这个问题主要是讨论如果生成实例的方法是一个异步的方法,那么在异步方法执行完成前,有别处代码调用了获取实例方法,那么是不是会产生多次调用或实例不一致的问题?
  因此实现上有所不同,但其实也很简单,就是返回的值变成Promise且多加几个状态控制而已,下面是实现代码,如有遗漏或错误,欢迎指出。
  let getTestInstance = (function () {
      let instance = null;
      let loading = false; // 判断是否正在生成中
      let loadingPrmoise = null; // 用于记录第一次生成的promise
      class Test {
        constructor (name) {
          this.name = name || 'test'
        }
        changeName (name) {
          this.name = name;
        }
      }
      return function (...args) {
        if (instance) return Promise.resolve(instance);
        if (loading) return loadingPrmoise;
        loading = true;
        // 一个2S的生成实例过程
        let promise = new Promise((resolve, reject) => {
          setTimeout(() => {
            instance = new Test(...args);
            loading = false;
            resolve(instance);
          }, 2000)
        });
        loadingPrmoise = promise;
        return promise;
      }
    })();
    let a,b;
    // 生成实例需要2S
    getTestInstance().then(res => {
      a = res;
    });
    // 1S秒再次获取实例
    setTimeout(() => {
      getTestInstance().then(res => {
        b = res;
        console.log(a === b) // true
        getTestInbstance().then(res => {
            console.log(a === res); // true
        })
      });
    }, 1000);

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号