单例模式及应用

定义

单例模式是一种常见的软件设计模式，其定义是单例对象的类只能允许一个实例存在。

何时使用

当你想控制实例的数目，节省系统资源的时候。

如何实现

判断系统是否已经有这个单例，如果有则返回，没有则创建。

优点

内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例 （比如，首页页面的缓存）

使用场景

1.全局缓存 2.弹窗

ES5实现单例模式

• 需求 实现一个登录的弹窗

  1. 加载完成的时候 已经创建好 这个弹窗了 一开始是隐藏的状态 弹窗出现

• 缺点

  • 资源的浪费
  2. 点击的时候创建
  3. 单例模式
  • 判断系统是否已经有这个单例 如果有则返回 没有则创建
  • 有一个标记 在内存中 做一个标记

简单实现

<button id="button">登录</button>
<script>
    var createLoginLayer = (function(){
        var div
        // 如果说 这个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>

无论点击多少次，只会有一个div出现

ES6 实现单例模式

静态方法 static

class Foo {
    static classMethod() {
        return 'hello'
    }
}
let foo = new Foo()
console.log(Foo.classMethod()) // hello
console.log(foo.classMethod()) // Uncaught TypeError: foo.classMethod is not a function

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)
        }
        return this.instance
    }
}

let lyCom = LyEdu.getInstance('零元教育','裴老师',['js的高级','es6','vue以及源码的课程'])
let lyComCom = LyEdu.getInstance('零元教育','裴老师111',['js的高级','es6','vue以及源码的课程'])
console.log(lyCom === lyComCom) // true