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