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元素並不會被重複建立，能夠在上邊的例子中加一個狀態，根據狀態判斷是否要顯示，避免了資源的浪費