js常用设计模式实现(一)单例模式

前言

什么是设计模式

设计模式是一种能够被反复使用,符合面向对象特性的代码设计经验的总结,合理的使用设计模式能够让你得代码更容易维护和可靠

设计模式的类型共分为创建型模式,结构型模式,行为型模式三种

创建型模式

创建型模式是对一个类的实例化过程进行了抽象,把对象的创建和对象的使用进行了分离,创建模式有

  • 单例模式

  • 抽象工厂模式

  • 建造者模式

  • 工厂模式

  • 原型模式

单例模式

单例模式的定义是保证一个类仅有一个实例,单例模式它必须自行创建这个实例,并提供一个访问他的全局的访问点

es5的实现

var only = function(data) {
    this.data = data;
    this.Instance = null;
}
only.go = function(data) {
    if(!this.Instance) {
        this.Instance = new only(data);
    }
    return this.Instance;
}
let obj1 = only.go('1')
let obj2 = only.go('2')
console.log(obj1 === obj2);
console.log(obj1);
console.log(obj2);

es6

class only {
    constructor(data) {
        if (only.prototype.Instance === undefined) {
            this.data = data;
            only.prototype.Instance = this;
        }
        return only.prototype.Instance;
    }
}

let ob1 = new only("a");
let ob2 = new only("b");
ob2.init = 'init';

console.log(ob1 === ob2);
console.log(ob1);
console.log(ob2);

上边的代码中,无论怎么new,其结果都是唯一的那个实例

单例模式的优缺点

单例模式,因为他的实例是唯一的,所以完全可以通过创建的时候,严格的去控制怎么去创建和访问或者说抛出错误,如果存在频繁的创建和销毁的操作的时候,单例模式事可以提高性能的

但是同样的,单纯的单例模式中是没有抽象操作的,所以说单例模式是一个不便于扩展的模式

单例模式的使用场景

举个例子比如说在项目中的某些时候,我们需要一个dom元素,但是这个元素并不存在,我们需要创建他,但是在创建完之后,如果我们再去点这个按钮的时候,如果他再一次的创建dom,显然是不合理的,dom会越来越多一直被创建,那么在这个时候,我们可以使用单例模式来实现我们想要的效果

例子实现

上边的改吧改吧

class only {
    constructor(data) {
        if (only.prototype.Instance === undefined) {
            var div = document.createElement('div');
            div.innerHTML = data;
            only.prototype.Instance = div;
        }
        return only.prototype.Instance;
    }
}

let ob1 = new only("a");
let ob2 = new only("b");
ob2.init = 'init';

console.log(ob1 === ob2);
console.log(ob1);
console.log(ob2);

如图

dom元素并不会被重复创建,可以在上边的例子中加一个状态,根据状态判断是否要显示,避免了资源的浪费