九、js闭包实现单例模式、es6单例模式（2021/4/25）

51 阅读 0 评论 34 点赞

我是靠谱客的博主善良枕头，最近开发中收集的这篇文章主要介绍九、js闭包实现单例模式、es6单例模式（2021/4/25），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

#单例模式的理解

定义:

1.只有一个实例
2.可以全局的访问
主要解决:一个全局使用的类频繁的创建和销毁
何时使用:当你想控制实例的数目节省系统化资源的时候
如何实现:判断系统是否已经有这个单例如果有则返回没有则创建
单例模式优点:内存中只要一个实例·减少了内存的开销·尤其是频繁的创建和销毁实例(比如说是首页页面的缓存)
使用场景:
1.全局的缓存
2.弹窗

#es5 实现单例模式

第一种情况：加载完成的时候，已经创建好这个弹窗了，一开始是隐藏的状态
缺点：资源的浪费

<script>
var loginLayer = (function(){
//变量声明的时候就把弹窗加载进页面了
var div
= document.createElement('div');
div.innerHTML = '我是登录的弹窗';
div.style.display = 'none';
document.body.appendChild(div)
return div
})()
document.getElementById('button').onclick = function(){
loginLayer.style.display = 'block';
}
</script>

第二种情况：点击的时候创建
缺点：每一次点击都产生一个新的弹窗，频繁地创建


var createLoginLayer = function(){
var div
= document.createElement('div');
div.innerHTML = '我是登录的弹窗';
div.style.display = 'none';
document.body.appendChild(div)
return div
}
document.getElementById('button').onclick = function(){
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
}
</script>

第三种情况：单例模式（判断这个系统是否有弹窗，有就返回，没有就创建）
要有一个标记在内存中 => 不能被销毁的标记：闭包

<script>
var createLoginLayer = (function(){
var div
return function(){
if(!div){
div
= document.createElement('div');
div.innerHTML = '我是登录的弹窗';
div.style.display = 'none';
document.body.appendChild(div)
}
return div
}
})()
document.getElementById('button').onclick = function(){
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
}
</script>

单一模式优化

<body>
<button id="loginBtn">登录</button>
<script>
// 单例模式
var createLogin = function(a,b,c){
console.log(a,b,c);
var div = document.createElement('div');
div.innerHTML = '我是登录的弹窗';
div.style.display = 'none';
document.body.appendChild(div)
return div
}
var getSingle = function(fn){
var result; //闭包保存单一变量
return function(){
return result || (result = fn.apply(this,arguments)) //如果有result就使用上次的内容，如果没有则执行有参数返回的回调函数
}
}
var create = getSingle(createLogin)
document.getElementById('loginBtn').onclick = function (){
var loginLay = create(1,2,3);
loginLay.style.display = 'block';
}
</script>
</body>

es6单例模式

不需要用到闭包

引子：

es5 构造函数的写法

function Person(name,sex){
this.name = name;
this.sex = sex;
}
Person.prototype.say = function(){
console.log('学前端');
}
let person1 = new Person('星空','男');
console.log(person1.name);
person1.say();

es6 的实现 (es5的语法糖)

class Person{
constructor(name,sex){
this.name = name;
this.sex = sex;
}
say(){
console.log('学前端');
}
}
// 在这里会发现 方法虽然定义在里面，实则是定义在原型上的
let person1 = new Person('星空','男');
console.log(person1.name);
console.log(Person.prototype.say === person1.say) //true

静态方法 static

class Foo{
static classMethod(){
return 'hello'
}
}
let foo = new Foo();
console.log(Foo.classMethod())
// console.log(foo.classMethod()) //static方法不允许实例调用

借助static 实现单例模式：

class LyEdu{
constructor(name,creator,products){
this.name = name;
this.creator = creator;
this.products = products;
}
static getInstance(name,creator,products){
if(!this.instance){
this.instance = new LyEdu(name,creator,products); // 给LyEdu添加一个单一的属性instance
}
return this.instance;
}
}
let lyCom = LyEdu.getInstance('零元教育','裴老师',['js','css','html']);
let lyCom2 = LyEdu.getInstance('零元教育2','裴老师2',['js2','css','html']);
console.log(lyCom === lyCom2)
// true 只能创建第一个生效