不可不知的JavaScript、 ES6、TypeScript 设计模式之单例模式

什么是单例

单例模式是非常常用的一种设计模式,虽然你可能都不知道你在使用,单例模式中 对象类需要保证只有一个实例存在。单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,以确保了一个类只有一个实例对象。

举个例子,就像每个人都只能有一个身份证,你没有身份证可以办理一个,但如果有了再想办理多一个身份证,那么对不起,不可能,这种情况就叫单例。

实现单例模式的方式有很多,比如使用对象字面量的方式是最常用的创建方式:

但这种方式并不能够被实例化,仅能使用一次。并且所有的属性和方法都暴漏在外面,很容易造成命名空间的污染,所以说并不那么的优雅。

那么我们开始对上面的代码进行一次优化,让它只暴漏我们想暴漏的方法和属性。

我们在上面的函数中创建了私有方法和变量,只暴漏了我们希望暴漏的变量和方法,是不是优雅了很多,但是让我们再回顾一下单例模式的概念和实现方式:

单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,以确保了一个类只有一个实例对象。

显然上面的代码还不满足单例模式的条件不是吗?还记得身份证的例子吗?我们再回顾一遍。

下面的代码也是这样的逻辑

因为我们只实例化了一次所以当你改变参数的时候因为没有被实例化所以输出的结果还是第一次实例化的时候的结果。这就是单例模式了。

有了ES6以后我们的代码就可以写的更加的优雅

首先我们创建了一个类,初始化的时候标记改类是否初始化过,然后使用static创建了一个静态类,也就是说只能被类直接调用,实例化以后就不可以在调用getInstance方法。

然后你看到了 结果和上面的一样都只会打印出第一次被实例化的参数。

vue3.0马上就要来了,虽然他还可以使用es6来进行开发,但源码却是使用TypeScript进行编写的,可见大神们是多么的喜欢TypeScript,所以如果不下手可就晚了,那么我们看下用TypeScript来实现单例模式如何编写,和es6有多大的区别。

与JavaScript相比Typescript 的语法更加的严谨,更便于学习和理解。

在上的代码中我们同样创建了一个类,在进行变量声明的是,TypeScript声明了私有静态变量同时限制了他的类型。其他写法与es6相差不大。