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

mochixuan 發布于2019-08-23 15:57 / 1068人閱讀

摘要：寫在前面一些關于自己在代碼設計思維方面的學習記錄面向對象的一些理解實例代碼就不上了就寫一些總結封裝提供屬性和方法的權限管理只對外暴露接口具體的功能在內部實現繼承子類繼承父類的方法和屬性可以抽離公共代碼減少代碼冗余多態同一個接口在子類中的不同

寫在前面:
一些關于自己在代碼設計思維方面的學習記錄

面向對象的一些理解

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

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

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()

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

GPU云服務器云服務器簡單工廠單例模式單例模式實現單例模式總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102571.html

設計模式之工廠和單例

摘要：工廠模式實例定義一個接口定義一個實現類定義一個實現類根據不同需求返回不同實現類的方法運行結果單利模式實例懶漢式餓漢式工廠模式實例 //定義一個接口：Vehicle interface Vehicle{ void work(); } //定義一個實現類：Car class Car implements Vehicle{ @Override public void wo...

Nosee 2019-08-16 10:36 評論0 收藏0
細談JavaScript中的一些設計模式

摘要：注意事項聲明函數時候處理業務邏輯區分和單例的區別，配合單例實現初始化構造函數大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設計模式] 常見設計模式一直對設計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設計模式，并總結了一下。設計模式簡介設計模式概念解讀設計模式的發展與在JavaScript中的應用 ...

30e8336b8229 2019-08-19 17:47 評論0 收藏0
第5項：固定資源首選使用依賴注入

摘要：滿足此要求的簡單模式是在創建新實例時將資源傳遞給構造函數。依賴注入同樣適用于構造函數靜態工廠第項和構建器第項。將資源工廠傳遞給構造函數就會變成一個有用的模式。這種做法稱為依賴注入，將極大地增強類的靈活性，可重用性和可測試性。 ??許多類依賴于一個或多個底層資源。例如，拼寫檢查器依賴于字典。常見的做法是將這些類實現為靜態實用程序類(第4項)： // Inappropriate use ...

KnewOne 2019-08-16 16:09 評論0 收藏0
設計模式之門面模式

摘要：定義與類型定義又叫門面模式，提供了一個統一的接口，用來訪問子系統中的一群接口外觀模式定義了一個高層接口，讓子系統更容易使用類型結構型類圖門面模式是對系統復雜的關系處理做了一個封裝，對外提供一個簡單的接口，成員介紹子系統被門面模式封裝的子系統 0x01.定義與類型定義：又叫門面模式，提供了一個統一的接口，用來訪問子系統中的一群接口外觀模式定義了一個高層接口，讓子系統更容易使用類型...

Chiclaim 2019-08-16 18:33 評論0 收藏0
[譯]Javascript中的單例模式

摘要：原文單例模式被熟知是因為它把一個類的實例化限制在只有一個對象。這在中也是可以實現的。單例和靜態對象都很有用，但是不能過度使用。實踐中，當我們在整個系統中只需要一個對象與其他對象通信的時候，單例模式是非常有用的。原文：The Single Pattern 單例模式被熟知是因為它把一個類的實例化限制在只有一個對象。傳統的實現方式是：創建一個類，這個類里面有一個方法在對象不存在的時候創造一...

godlong_X 2019-08-21 10:46 評論0 收藏0