1、单例模式

为什么要使用单例模式？

在某些情况下，在处理多个模块的数据时，他们没有什么联系，但是我们想要用一个公共的部分来进行储存状态或者数据。

为了保证这些模块之间能够稳定统一，那就要求这个公共部分是唯一的，各个模块之间所获取的数据与状态才能够保持一致

这时候我们使用到了单例模式，顾名思义，就是单个实例。

单例模式的特点

单例模式一般用在es6类中

单例在全局的每个位置都可以调用到

单例自始至终都是初始创建的实例，无法被修改、覆盖

ts单例模式设计

export default class Modle extends EventTarget{ //单例继承事件对象类，具备抛发事件功能private static _instance?:Modle; //声明私有静态属性，存储单例private _num!:number; //设置状态存储变量，这个私有变量无法直接获取与设置constructor(){super();}static get getInstance() { //通过get方法来获取这个单例，如果没有创建实例对象，有则直接返回这个实例对象if (!Modle._instance) Modle._instance=new Modle();return Modle._instance;}public set num (value:number) { //set方法拦截处理状态this._num=value;this.dispatchE(value);}private dispatchE(value:number) { //通过事件抛发将状态改变通知所有注册这个单例change事件的对象let evt:fsEvent=new Event("change");evt.num=value;Modle.getInstance.dispatchEvent(evt);}public get num () { //get方法返回状态信息return this._num;}
}

在全局模块中使用该单例

import Modle from "./js/instance/Modle.js";Modle.getInstance.num=12；

需要注意的是类中的_instance是私有属性但是他只有在ts文件直接使用Modle._instance() 会进行报错，但是在js引入时会正常访问该属性，所以在使用js文件时要格外注意

Es6单例模式设计

与ts相比js在设计时主要在于需要添加属性保护使js的单例不能被修改

export default class Modle{static _instance;constructor () {}static getInstance() {if (!Modle._instance) Modle._instance=new Modle();return Modle._instance;}
}

这种方法虽然通过getInstance获取到的是同一个实例，但是_instance被暴露在外，这种方式不安全

所以要考虑别的方法将_instance保护起来

方法1 freez 冻结

在创建单例后，通过freez冻结整个类，这样类的属性无法更改从而起到了保护的作用

export default class Modle{constructor () {};static getInstance() {if (!Modle._instance) {Modle._instance=new Modle();Object.freeze(Modle); //创建单例后立即冻结整个类}return Modle._instance;}
}Modle.getInstance();//立即执行一次实现冻结，防止外部修改

冻结以后我们可以往使用和更改单例的方法属性，但无法直接替换整个单例对象

import Modle from './js/Modle.js';
Modle.getInstance().data=30;
console.log(Modle.getInstance().data);

方法2 defineProperty设置属性

export default class Modle{constructor () {};static getInstance() {if (!Modle._instance) {Object.defineProperty(Modle,"_instance",{value:new Modle()});}return Modle._instance;}
}Modle.getInstance();

这个与冻结的原理相似，设置属性不可枚举、不可修改、不可删除

方法3 get方法设置只读

export default class Modle{constructor () {};static get instance() { //只设置get方法instance属性为只读属性，他用于外部调用时返回指定值，他返回的是单例if (!Modle._instance) {Object.defineProperty(Modle,"_instance",{ //_instance为单例value:new Modle()});}return Modle._instance;}
}Modle.instance;

总结：

方法1 保护了getInstance方法、_instance实例，保证单例，但是这个类却不能再增、删、改其中的属性

方法2 保护了_instance实例，该类也可以进行其他属性的更改，但是却没有保护getInstance方法,如果修改了这个获取方法，会导致单例无法通过方法获取

方法3 结合了1、2的优点，通过get限制获取方法为只读，不能修改，在内部通过defineProperty来设置单例为不可枚举、不可删除、不可修改属性，这样在不影响类其他属性的情况下，实现了单例。

单例模式在JavaScript与TypeScript中的几种设计方式相关推荐

JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...
java用户输入解析_Java中的3种输入方式实现解析
Java中的3种输入方式实现解析发布于 2020-8-8| 复制链接摘记: 这篇文章主要介绍了Java中的3种输入方式实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学 ...
link linux 跨设备,Linux中的两种link方式
Linux系统中包括两种链接方式:硬链接(hard link)和符号链接(symbolic link),其中符合链接就是所谓的软链接(soft link),那么两者之间到底有什么区别呢? inode ...
python请输入_python中的三种输入方式
python中的三种输入方式 python2.X python2.x中以下三个函数都支持: raw_input() input() sys.stdin.readline() raw_input( )将 ...
@AspectJ中的几种通知方式详解
本文来详细说下@AspectJ中的几种通知方式文章目录概述通知方式说明一个例子本文小结概述当Spring 2.0发布以后,Spring AOP增加了新的使用方式,Spring AOP集成 ...
java一行输入多个数据类型_Java中的3种输入方式实现解析
这篇文章主要介绍了Java中的3种输入方式实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.从键盘读取char类型数据 char ch = ...
IPC机制（三）---＞Android中的几种IPC方式
目录 1.每日一句 2. 作者简介 3. Android中的几种IPC方式 3.1 使用Bundle 3.2 使用文件共享 3.3 使用Messenger 3.4 使用AIDL 3.4.1 服务端 ...
PHP中的6种加密方式
PHP中的6种加密方式 1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str -- 原始字符串. raw ...
Map集合中的两种取出方式keySet和entrySet
/*map集合中的两种取出方式:1.Set<k> keySet:将map集合中所有的键存入到Set集合,因为Set具备迭代器.所有可用迭代方式取出所有的键,再根据get方法,获取每一个键对 ...

单例模式在JavaScript与TypeScript中的几种设计方式