设计模式——单例模式（单例模式介绍实战案例及vuex的简单分析）

69 阅读 0 评论 46 点赞

我是靠谱客的博主从容往事，最近开发中收集的这篇文章主要介绍设计模式——单例模式（单例模式介绍实战案例及vuex的简单分析），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

有一个实例化的过程（只有一次），产生实例化对象 new提供返回实例对象的方法。

每次实例化都会产生一个新的对象这肯定不是单例模式

class SingleCase{
log(){
console.log('我是一个单例对象')
}
}
const singl1 = new SingleCase()
const singl2 = new SingleCase()
console.log(singl1==singl2) // false

让我们改造下上面的代码

class SingleCase{
log(){
console.log('我是一个单例对象')
}
static getInstance(){
if(!SingleCase.instance){
SingleCase.instance = new SingleCase
}
return SingleCase.instance
}
}
const singl1 = SingleCase.getInstance()
const singl2 = SingleCase.getInstance()
console.log(singl1==singl2) // true

通过闭包+构造方式单例写法

function SingleCaseBase() {
}
SingleCaseBase.prototype.log = function () {
console.log('我是一个单例对象')
}
SingleCase= (function() {
let instance = null
return function () {
if (!instance) {
instance = new SingleCaseBase()
}
return instance
}
})()
const singl1 = SingleCase()
const singl2 = SingleCase()
console.log(singl1==singl2) // true

单例模式如何使用呢

实现一个简单的状态管理机

class SingleState {
// 状态存储机制
data={}
// 获取对象
get(key){
return this.data[key]||''
}
// 存储对象
set(key,value){
return
this.data[key]=value
}
// 外部调用此函数实例化
static getInstance() {
if (!SingleState.instance) {
SingleState.instance = new SingleState
}
return SingleState.instance
}
}
const state_1 = SingleState.getInstance()
state_1.set('hi','hello') // 设置 key = hi value = hello
const state_2 = SingleState.getInstance()
console.log(state_2.get('hi')) // hello

Vuex使用的就是单例模式，使用过程中通过 Vue.use(Vuex) 安装了Vuex插件,而Vuex 插件是一个对象，它在内部实现了一个 install 方法，这个方法会在插件安装时被调用，从而把 Store 注入到Vue实例里去。也就是说每 install 一次，都会尝试给 Vue 实例注入一个 Store。

对localStorage进行封装

原理与上面的代码大致相同。当然下面的封装相对简单，可以封装为微信小程序的Storage 存的是什么类型那么取出来还是什么类型，后续的系列文章策略模式会对此重新进行封装。

class Storage {
// 获取方法
get(key){
return localStorage.getItem(key)
}
// 存储方法
set(key,value){
return
localStorage.setItem(key,value)
}
// 外部调用此函数实例化
static getInstance() {
if (!Storage.instance) {
Storage.instance = new Storage
}
return Storage.instance
}
}
const state_1 = Storage.getInstance()
state_1.set('hi','hello')

实现全局弹框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#modal {
height: 200px;
width: 200px;
line-height: 200px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<button id="open">打开</button>
<button id="close">关闭</button>
</body>
<script>
class ModelBase {
// 初始化方法
constructor() {
this.target = document.createElement('div')
this.target.innerHTML = '我是一个全局唯一的Modal'
this.target.id = 'modal'
this.target.style.display = 'none'
document.body.appendChild(this.target)
}
initElement() {
}
// 开启
open() {
this.target.style.display = 'block'
}
// 关闭
close() {
this.target.style.display = 'none'
}
}
// 通过闭包封装，这里只是想告诉大家可以这样使用
Model = (function () {
let instance = null
return function () {
if (!instance) {
instance = new ModelBase()
}
return instance
}
})()
// 打开按钮
document.querySelector('#open').addEventListener('click', function () {
const model = new Model()
model.open()
console.log('open')
})
// 关闭按钮
document.querySelector('#close').addEventListener('click', function () {
const model = new Model()
model.close()
console.log('close')
})
</script>
</html>