单例形式之es3与es6双版本(设想形式)

定义

保证一个类唯一以一个实例,仅能被实例化/建立一次,并供应全局的访问点。

单例形式是一种主要的设想形式,有些对象我们只需要建立一个,比方浏览器的window对象,模态对话框。完成这类设想形式实在很简单,最主要的是在建立实例的时刻,用一个标记变量推断实例是不是已建立。

一般青年写法

function Singleton(name){
    this.name = name;
    this.instance = null;
}
Singleton.prototype.getName = function(){
    console.log('name: ' + this.name);
    return this.name;
}
Singleton.getInstance = function(name){
    if(!this.instance){
        this.instance = new Singleton(name);
    }
    return this.instance;
}
var a = Singleton.getInstance('a');
var b = Singleton.getInstance('b');
alert(a === b);

点评:
该写法不透明,运用者必需晓得用Singleton.getInstance猎取单例,而非经由过程越发通用的要领new xxx体式格局。

老司机写法

var CreateDiv = function(html){
    this.html = html;
    this.init();
}
CreateDiv.prototype.init = function(){
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
}
var SingletonDiv = (function(){
    var instance;
    return function(html){
        if(!instance){
            instance = new CreateDiv(html);
        }
        return instance;
    }
})()
var a = SingletonDiv('yyh');
var b = SingletonDiv('yyh1');

点评:
运用代办类+一般的类,使得职责清楚。一般类担任完成基本功能,代办类治理单例。CreateDiv能够直接临盆一个实例,而加上代办,能够完成单例。有木有一种模块拼集的快感,这就完成了低耦合。

华美丽的ES6

在ES6中,能够运用static要领替代闭包存储单例。

静态要领的单例形式

class Singleton {
    constructor(name) {
        this.name = name;
    }
    static getInstance(name) {
        if(!Singleton.instance) {
            Singleton.instance = new Singleton(name)
        }
        return Singleton.instance;
    }
    getName() {
        return this.name;
    }
}
const singletonA = Singleton.getInstance('yyh1');
const singletonB = Singleton.getInstance('yyh2');
console.log(singletonA === singletonB);
console.log(singletonA.getName() === singletonB.getName());

点评:ES6的静态要领,和闭包一样能在削减全局变量污染的同时,使标记变量越发久长的保留在内存中不被接纳。

老司机的新技能(越发通用的完成体式格局)

// 担任建立DIV的基本功能
class CreateDiv {
    constructor(html) {
        this.html = html;
        this.init();
    }
    init() {
        const div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
}
// 担任治理单例
class ProxysingletonCreateDiv {
    constructor(htmlStr) {
        return ProxysingletonCreateDiv.getInstance(htmlStr);
    }
    static getInstance(name) {
        if(!ProxysingletonCreateDiv.instance) {
            ProxysingletonCreateDiv.instance = new CreateDiv(name)
        }
        return ProxysingletonCreateDiv.instance;
    }
}
const singletonC = new ProxysingletonCreateDiv('yyh1');
const singletonD = new ProxysingletonCreateDiv('yyh2');
console.log(singletonC === singletonD);
singletonC.init();
singletonD.init();
    原文作者:yyh1945
    原文地址: https://segmentfault.com/a/1190000014136311
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞