亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js設(shè)計模式:簡單工廠和單例

mochixuan / 1115人閱讀

摘要:寫在前面一些關(guān)于自己在代碼設(shè)計思維方面的學(xué)習(xí)記錄面向?qū)ο蟮囊恍├斫鈱嵗a就不上了就寫一些總結(jié)封裝提供屬性和方法的權(quán)限管理只對外暴露接口具體的功能在內(nèi)部實現(xiàn)繼承子類繼承父類的方法和屬性可以抽離公共代碼減少代碼冗余多態(tài)同一個接口在子類中的不同

寫在前面:
一些關(guān)于自己在代碼設(shè)計思維方面的學(xué)習(xí)記錄

面向?qū)ο蟮囊恍├斫?/b>

實例代碼就不上了, 就寫一些總結(jié)

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

ES6中類的設(shè)計分析

鍛煉自己的抽象設(shè)計能力, 通過UML類圖來展示類之間的關(guān)系

一般步驟

梳理各給類之間的關(guān)聯(lián)關(guān)系:

抽離父類, 抽象子類, 分析關(guān)聯(lián)類(相互引用的關(guān)系)

要理解以下幾點:
// 每個獨立的對象都可以抽象為一個類
// 每個類都 要干自己該干的事(方法), 都有自己的特性(屬性)
// 關(guān)聯(lián)類: 一個類 需要用到 另一個類中的東西; 或者說一個類 它可以作為另一個類的屬性來用

簡單工廠模式

我們不需要關(guān)心業(yè)務(wù)的具體實現(xiàn)過程, 最后只需要給你一個模型,你輸入?yún)?shù)就可以套用了;下面都是結(jié)合實例來展示我的理解

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

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

class FoodFactory {
    // ES6中靜態(tài)方法不會被實例調(diào)用,可以被類調(diào)用
    static create(name, type) {
        // 創(chuàng)建一種食品實例
        return new Food(name, type)
    }
}

// 工廠開始生產(chǎn)食品實例了
FoodFactory.create("核桃", "堅果").desc() // 我是核桃, 屬于堅果類型
FoodFactory.create("旺仔", "飲品").desc() // 我是旺仔, 屬于飲品類型
// 這樣我們就可以 生成出我們想要的食品, 只要你給我們 一個名稱和類型
單例模式

就是保證全局只有一個對象可以訪問; 像全局緩存、全局狀態(tài)管理時,都可以使用, 實現(xiàn)數(shù)據(jù)共享

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

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

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

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

// 給類掛載一個靜態(tài)方法, 只有一個
// 自執(zhí)行函數(shù): 只是為了將變量保存在 函數(shù)的作用域中, 避免污染而已
Singleton.singleInstance = (function () {
            // 通過閉包實現(xiàn): 類似通過一個全局變量來存儲這個實例
            let instance;  // 保存創(chuàng)建好的實例
            return function() {
                if (!instance) {
                    // 如果沒有創(chuàng)建, 就創(chuàng)建一個
                    instance = new Singleton()
                }
                return instance
            }
        })()
// 通過調(diào)用靜態(tài)方法來創(chuàng)建單實例
let single11 = Singleton.singleInstance()
let single22 = Singleton.singleInstance()
// 通過調(diào)用類 初始化的實例
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" // 初始狀態(tài)
    }

    // 顯示
    show() {
        if (this.state === "show") {
            console.log("登錄框已經(jīng)顯示");
            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
    }
})()

// 當(dāng)同時對一個實例進(jìn)行操作時:

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

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

// 單例模式 就是實例化出來的對象 都指向同一實例, 對同一實例進(jìn)行操作, 
// 實現(xiàn)了 數(shù)據(jù)共享

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/102571.html

相關(guān)文章

  • 設(shè)計模式工廠單例

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

    Nosee 評論0 收藏0
  • 細(xì)談JavaScript中的一些設(shè)計模式

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

    30e8336b8229 評論0 收藏0
  • 第5項:固定資源首選使用依賴注入

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

    KnewOne 評論0 收藏0
  • 設(shè)計模式之門面模式

    摘要:定義與類型定義又叫門面模式,提供了一個統(tǒng)一的接口,用來訪問子系統(tǒng)中的一群接口外觀模式定義了一個高層接口,讓子系統(tǒng)更容易使用類型結(jié)構(gòu)型類圖門面模式是對系統(tǒng)復(fù)雜的關(guān)系處理做了一個封裝,對外提供一個簡單的接口,成員介紹子系統(tǒng)被門面模式封裝的子系統(tǒng) 0x01.定義與類型 定義:又叫門面模式,提供了一個統(tǒng)一的接口,用來訪問子系統(tǒng)中的一群接口 外觀模式定義了一個高層接口,讓子系統(tǒng)更容易使用 類型...

    Chiclaim 評論0 收藏0
  • [譯]Javascript中的單例模式

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

    godlong_X 評論0 收藏0

發(fā)表評論

0條評論

mochixuan

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<