js設計模式:簡單工廠和單例

寫在前面:
一些關於本身在代碼設計思惟方面的學習記錄

面向對象的一些理解

實例代碼就不上了, 就寫一些總結

封裝: 提供屬性和方法的權限管理, 只對外暴露接口, 具體的功能在內部實現
繼承: 子類繼承父類的方法和屬性, 能夠抽離公共代碼,減小代碼冗餘
多態: 同一個接口在子類中的不一樣的實現, 能夠對父類中方法進行擴展

ES6中類的設計分析

鍛鍊本身的抽象設計能力, 經過UML類圖來展現類之間的關係

• 通常步驟

  梳理各給類之間的關聯關係:

  抽離父類, 抽象子類, 分析關聯類(相互引用的關係)

  要理解如下幾點:
  // 每一個獨立的對象均可以抽象爲一個類
  // 每一個類都 要幹本身該乾的事(方法), 都有本身的特性(屬性)
  // 關聯類: 一個類 須要用到 另外一個類中的東西; 或者說一個類 它能夠做爲另外一個類的屬性來用

簡單工廠模式

咱們不須要關心業務的具體實現過程, 最後只須要給你一個模型,你輸入參數就能夠套用了;下面都是結合實例來展現個人理解

// 舉個栗子
// 食品實例生成的詳細過程
class Food {
    constructor(name, type) {
        this.name = name // 食品
        this.type = type // 食品類型
    }

    desc() {
        console.log(`我是${this.name},屬於${this.type}類型`);
    }
    
}

class FoodFactory {
    // ES6中靜態方法不會被實例調用,能夠被類調用
    static create(name, type) {
        // 建立一種食品實例
        return new Food(name, type)
    }
}

// 工廠開始生產食品實例了
FoodFactory.create('核桃', '堅果').desc() // 我是核桃, 屬於堅果類型
FoodFactory.create('旺仔', '飲品').desc() // 我是旺仔, 屬於飲品類型
// 這樣咱們就能夠 生成出咱們想要的食品, 只要你給咱們 一個名稱和類型

單例模式

就是保證全局只有一個對象能夠訪問; 像全局緩存、全局狀態管理時,均可以使用, 實現數據共享

咱們要確保一個類 只能初始化 一個實例, 有就直接返回, 沒有就初始化

如購物車, 登陸框只有一個, jQuery的 $, vuex的store都是單例模式的思想

class Singleton {
    // js模擬
    constructor() {}

    login() {
        console.log('login...');
    }
}

// 給類掛載一個靜態方法, 只有一個
// 自執行函數: 只是爲了將變量保存在 函數的做用域中, 避免污染而已
Singleton.singleInstance = (function () {
            // 經過閉包實現: 相似經過一個全局變量來存儲這個實例
            let instance;  // 保存建立好的實例
            return function() {
                if (!instance) {
                    // 若是沒有建立, 就建立一個
                    instance = new Singleton()
                }
                return instance
            }
        })()
// 經過調用靜態方法來建立單實例
let single11 = Singleton.singleInstance()
let single22 = Singleton.singleInstance()
// 經過調用類 初始化的實例
let single3333 = new Singleton()
single11.login();
single22.login();
console.log(single11 === single22);  // ture
console.log(single11 === single3333); // false

demo演示, 頁面登陸框

class LoginForm {

    constructor() {
        this.state = 'hide' // 初始狀態
    }

    // 顯示
    show() {
        if (this.state === 'show') {
            console.log('登陸框已經顯示');
            return ;
        }
        this.state = 'show';
        console.log('登陸框顯示了, 請輸入');
    }
    // 隱藏
    hide() {
        if (this.state === 'hide') {
            console.log('登陸框已隱藏');
            return ;
        }
        this.state = 'hide';
        console.log('登陸框隱藏');
    }
}

// 添加單例方法
// 經過這個方法, 我初始化出來的 都是指向同一個實例對象
LoginForm.initSingle = (function () {
    let instance; // 存儲實例對象
    return function () {
        if (!instance) {
            instance = new LoginForm()
        }
        return instance
    }
})()

// 當同時對一個實例進行操做時:

// 頁面1的登錄操做
let login1 = LoginForm.initSingle()
login1.show()

// 頁面2的登錄操做
let login2 = LoginForm.initSingle()
login2.show() // 登錄框已經顯示, 頁面2也是對同一實例進行訪問,就會彈出錯誤
login2.hide()

// 單例模式 就是實例化出來的對象 都指向同一實例, 對同一實例進行操做, 
// 實現了 數據共享